Nov 15

Prime-UI Rises

PrimeUI is a spin-off project from the PrimeFaces project and features pure Javascript Components designed for progressive enhancement, Rest and Json.

Version 0.1 is the first release consisting of 6 widgets;

  • Accordion
  • Inputtext
  • Inputtextarea
  • Spinner
  • Rating
  • TabView

PrimeUI uses jQuery UI Widget Factory so can be used with any web framework, although some widgets like accordion, tabview overlaps with existing jQuery UI widgets, PrimeUI provides additional functionality that are not available in default jQuery UI widgets like orientations for TabView and multiple selection for Accordion.

Demo

PrimeUI project site, documentation and online demo is combined at one application and available at;

http://www.primefaces.org/prime-ui

Download

Prime-UI can be downloaded as a bundle that contains sources, minified-combined css and javascript files.

Source

Source is licensed under Apache and available at PrimeFaces Repo.

Roadmap

Now the initial release is out, we aim to make bi-weekly releases with new widgets in each version. Future widgets are various types of menus, growl, lightbox, datatable, more form components, tree, treeTable and many more.

Idea of PrimeUI is to contribute back to jQuery ecosystem, in PrimeFaces although we have many homegrown javascript widgets used by components, we also use 3rd party widgets as well, so with PrimeUI we aim not to compete with other javascript libraries but complement them by providing a new set of compatible widgets.

Our main focus is still PrimeFaces as it is the Flagship.

Posted in PrimeUI | 14 Comments
Nov 13

PrimeFaces 3.4.2 Released

PrimeFaces 3.4 is back with a new maintenance release while 3.5 and Mobile 1.0 along with PrimeUI are under heavy development. 3.4.2 is a maintenance release featuring over 30 improvements.

  • Defect Fixes
  • Accessibility Improvements
  • XSS Fixes
  • Update to jQuery 1.8.2
  • Performance Improvements

Full changelog is available for detailed list of enhancements.

See downloads page to get the new release.

Posted in JSF | 8 Comments
Nov 01

PrimeFaces Goes Bidirectional

One of the highlights of PrimeFaces 3.5 is the RTL support. Initially commonly used components tabview, accordion, datatable, tree, menus and more would be RTL aware. In future versions RTL support would be improved with each iteration just like accessibility.

To configure PrimeFaces to use RTL, one way is setting the context param that also accepts EL expressions.

<context-param>
    <param-name>primefaces.DIR</param-name>
    <param-value>RTL</param-value>
</context-param>

That’s it, if you have a regular tabview like;

<p:tabView>
   //tabs
</p:tabView>

RTL mode renders like;

Posted in JSF | 7 Comments
Oct 31

Announcement: Liferay Technology Partnership

PrimeTek, company behind PrimeFaces is proud to announce a new technology partnership with Liferay Inc. PrimeTek is now officially listed at Liferay Partners page.

Customers who have purchased Liferay EE and PrimeFaces PRO now enjoy the benefit of a communication channel between our companies, so that technology issues can be resolved in accordance with corresponding Service Level Agreements (SLAs). In addition, this partnership will ensure that our mutual customers will be able to develop PrimeFaces portlets that can be used in conjunction with the Liferay Faces Alloy component suite.

Posted in JSF | 1 Comment
Oct 30

Tour de PrimeFaces

October is over and so is Tour De PrimeFaces where PrimeFaces lead Cagatay Civici has visited JavaOne in San Francisco, ParisJUG in France and BeJUG-BruJUG in Belgium.

Here are some photos from the tour! Slides are also available at PrimeFaces homepage. BruJUG is recorded so we also hope to post the video soon. JavaOne Unlocking the JavaEE session video is already available at JavaOne homepage.

Note: The tour is now over which means Heavy PrimeFaces Development Begins !!!

JavaOne 2012

NetBeans Panel

Unlocking the Java EE 6 Platform

PrimeFaces Session

Paris JUG

BeJUG

BruJUG

Posted in JSF | 2 Comments
Oct 23

Roadmap Update

We would like to give an update to PrimeFaces community on a roadmap change, as we announced before PrimeFaces 4.0 replaced 3.5 mainly due to PrimeUI but we have decided to revert this decision and get back to 3.5 and reserve 4.0 for JSF 2.2 compatibility.

Our initial idea was to create PrimeUI and make PrimeFaces use PrimeUI internally but PrimeUI would be using jQuery UI WidgetFactory and PrimeFaces would be keeping the mature JSF optimized native Widget apis so there is basically no major reason to jump to 4.0. Also JSF 2.2 is on the corner and we need to make some changes in our components to support JSF 2.2 (e.g. pass thru attributes support) so 4.0 is reserved for JSF 2.2.

Tentative Dates for PrimeFaces projects are;

- Core 3.5 – Q1 of 2013
- Core 3.4.2 – Mid November 2012
- Mobile 1.0 – End of 2012
- PrimeUI 0.1 – Mid November 2012
- PrimeFaces.NET – Mid 2013

Posted in JSF | 10 Comments
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