Oct 22

Introducing PrimeUI

We are excited to announce a new spin-off project project called PrimeUI from PrimeFaces Team. PrimeUI is a set of javascript widgets to create rich UIs easily. So basically we’re decoupling the homegrown widgets in PrimeFaces from JSF and creating a pure javascript library to make our widgets available to any framework like php, asp, wicket, gwt, asp.net, jax-rs and more. These widgets are implemented with plain jQuery, designed to work with JSON for data progressing and use client side progressive enhancement to render UIs. PrimeUI would be using jQuery UI WidgetFactory APIs to provide the widgets as jQuery Plugins. Code will be open source with Apache License same as PrimeFaces.

Here is a sample inputtextarea widget, to see the PrimeFaces component version see here.

Default
<textarea id="basic" rows="5" cols="30"></textarea>

AutoResize
<textarea id="resize" rows="5" cols="30"></textarea>

Maxlength with Remaining Chars
<textarea id="counter" rows="5" cols="30"></textarea>
<span id="display"></span>

AutoComplete
<textarea id="ac" rows="5" cols="30"></textarea>
       <script type="text/javascript">
            $(function() {
                $('#basic').inputtextarea();

                $('#resize').inputtextarea({autoResize:true});

                $('#counter').inputtextarea({counter:'display', counterTemplate:'{0} characters remaining.', maxlength:10});

                $('#ac').inputtextarea(
                    {
                        autoComplete:true
                        ,scrollHeight:150
                        ,completeSource:function(request, response) {
                            $.ajax({
                                type: "GET",
                                url: '../autocomplete',
                                data: {query: request.query},
                                dataType: "json",
                                context: this,
                                success: function(data) {
                                    response.call(this, data);
                                }
                            });
                        }
                    });
            });
        </script>

completeSource is a function that expects json response(data) with an array of label-value options so server side can be any technology like JAX-RS or php.

And here is an example with TabView and the PrimeFaces version;

        <div id="default">
            <ul>
                <li><a href="#tab1">Tab 1</a></li>
                <li><a href="#tab2">Tab 2</a></li>
                <li><a href="#tab3">Tab 3</a></li>
            </ul>
            <div>
                <div id="tab1">
                    Content 1
                </div>
                <div id="tab2">
                    Content 2
                </div>
                <div id="tab3">
                    Content 3
                </div>
            </div>
        </div>
$('#default').tabview({orientation: 'left'});

Roadmap
We plan to make an initial release with at least 5 widgets by the end of november, overall planned widgets for PrimeUI are;

- InputText
- InputTextarea
- SelectOneMenu
- RadioButton
- Checkbox
- CheckboxMenu
- Rating
- Spinner
- AutoComplete
- TabView
- AccordionPanel
- DataTable
- DataList
- DataGrid
- Paginator
- Tree
- TreeTable
- MindMap
- Button
- ToggleButtons
- Menu
- Menubar
- TieredMenu
- ContextMenu
- SlideMenu
- Breadcrumb
- Growl
- Fieldset
- Panel
- Toolbar
- Dialog
- OverlayPanel
- ProgressBar
- Inplace
- Tooltip
- Carousel
- TagCloud
- PickList
- OrderList
- …more

So we plan to provide a PrimeUI widget for all the homegrown widgets we have in PrimeFaces and make them available for any technology.

Teaser Video

Keep an eye on this blog for more exciting news from the PrimeFaces Team. While you are reading this, we are also working on PrimeFaces 3.5, 3.4.2 and Mobile 1.0.

Posted in PrimeFaces | 18 Comments
Oct 18

Native jQuery with PrimeFaces Sample

PrimeFaces hides the complexity of client side technologies like javascript, jquery, css and html so most of the time you don’t need to worry about these and focus on business logic. However with some knowledge, there will be no limit in what we can on client side.

Here is a real story, a PrimeFaces PRO user asked as to come up with an example integration of tree and datatable with drag drop. Idea is that, tree displays available column properties and dragdrop of these on column headers adds a new column on the fly with that property. First we tried p:draggable and p:droppable and realized a couple of limitations, until they are tweaked and improved in PrimeFaces 4.0, we have decided to go one level down and used native jquery draggable-droppable and integrate it with PrimeFaces Tree, DataTable, Dynamic Columns and RemoteCommand.

Here is a live example from labs, just drag a tree node and drop it on available locations in column headers to get a new column. For sure it could be done easily in JSF way with drag drop components but the point is you are not limited to PrimeFaces if there is a feature you need and that’s not available in the library. This case is one of them.

Posted in JSF | 3 Comments
Oct 04

PrimeFaces at Paris JUG

Between 9th and 13th of October, PrimeFaces Show will be in Paris. PrimeFaces Frontman Çağatay Çivici will do two talks on 9th of October at an event organized by Paris JUG. First talk is about “What’s new in JSF 2.2″ and second talk is about overview of a “certain JSF Component Suite”. As we’ve announced before there will also be a 3 day public PrimeFaces training between 10-12 as well.

Thanks to Java Champion and Rockstar Antonio Goncalves, our service partner Ippon Technologies and anyone involved for inviting us and making this happen.

Update – Here are the photos from the event;


Posted in JSF | Comments Off
Oct 02

Move to GitHub?

We have been getting requests from the community to move to GitHub and would like to do a poll to get your valuable feedback. We are currently interested in this to make it easier to receive patches from the community and increase the involvement of users in development.

If you’d like to vote, please login with your forum account and add your vote.

Posted in JSF | 13 Comments
Oct 02

PrimeFaces Team is Hiring

Prime Teknoloji, sponsor of PrimeFaces is making further investments in the project and we are now hiring for new members all around the world. Remote working is possible if you are not in Ankara/Turkey so there is no location constraint.

We are looking for the following;

  • At least 1 year experience in PrimeFaces
  • Custom JSF Component Development experience
  • Good JavaScript, jQuery and CSS knowledge

This is a great chance to join the PrimeFaces Team and support PrimeFaces PRO and community users, develop new features and become a part of PrimeFaces.

Please see the Prime Teknoloji Jobs page and send your resume along with the code problem.

Posted in JSF | 2 Comments
Sep 25

PrimeFaces 3.4.1 Released

PrimeFaces 3.4.1 is now available. This version is for maintenance only over 3.4 release with 15 defect fixes, see full changelog is available here.

Download

Binaries, Sources and Api-Vdl docs are available at downloads page.

Documentation

As this is a maintenance release, User’s Guide of 3.4 is 100% up to date.

Hope you enjoy these improvements, we are now back to PrimeFaces 3.5 and Mobile 1.0 development.

Posted in JSF | 4 Comments
Sep 13

Horizontal Tree

PrimeFaces lets you display trees horizontally without flipping your monitor 90 degrees. Upon request of a PrimeFaces PRO user, we have added horizontal orientation to the tree. Although html box model doesn’t let you to come up with something linear like this easily and it has been a great challenge for us, we are happy with the end result;

Horizontal Tree supports many features available in Vertical mode such as;

  • Pure Client side
  • Dynamic with Ajax
  • Single, Multiple and Checkbox Selection
  • Events like expand, collapse, select and unselect
  • Icons
  • ContextMenu
  • Themes

Horizontal Tree will be available in PrimeFaces 3.5, for now check out Labs Showcase for the early access demos.

Note: IE7 is not supported at the moment for horizontal display. We have added workarounds for IE 8-9 to make this work. Other browsers like FF, Chrome, Safari work fine as usual.

Posted in Uncategorized | 8 Comments