Jan 20

PrimeElements with JavaEE 8 MVC

JavaEE 8 MVC 1.0 is an upcoming web framework in the next EE release and Ozark is the reference implementation. The concept is pretty much the same with Spring MVC or ASP.NET MVC where Controllers handle requests and provide respond backed by a model.

PrimeElements suits very well in the context of a MVC framework, Anghel Leonard has created a small proof-of-concept form sample on using Ozark with PrimeElements where a form with various PrimeElements are used to collect data followed by a confirmation step.

This is one of the reasons why we announced PrimeElements as the future is here tagline. It is designed to work with frameworks that are not even released yet.

The code is available at GitHub and Glassfish 4.1.1 is required to run it.

Related resources;

Posted in PrimeUI | 1 Comment
Jan 18

Introducing PrimeNG for AngularJS 2

PrimeTek is excited to announce a brand new project called PrimeNG to provide UI components for AngularJS 2. Similar to PrimeUI and PrimeElements, PrimeNG is a sibling of the mighty PrimeFaces and the new member of Prime Family.

PrimeNG is open source under Apache License and hosted at GitHub. Initial 0.1 release will be done in mid february and 1.0 is planned for the end of the year. It will be developed by PrimeUI team at PrimeTek along with PrimeUI itself. PrimeNG will be based on PrimeUI as we’d like to reuse our existing codebase and our plan is to provide over 100 components along the way. In the meantime, PrimeFaces Team will be working on PrimeFaces 6.0 due spring so a lot of going on at the same time at PrimeTek these days.

PrimeFaces is a huge success, way beyond our imagination and we’re excited to explore new lands with PrimeUI, PrimeElements and PrimeNG in 2016.

Always bet on Prime!

Posted in General | 9 Comments
Jan 13

PrimeFaces Elite 5.3.5 and 5.2.18 Released

PrimeFaces Elite releases, 5.3.5 and 5.2.18 are now available with new components and defect fixes to improve overall quality.

KeyFilter

Keyfilter from extensions project is moved into PrimeFaces. KeyFilter is a handy helper to filter keyboard input on specified input components

Repeat

PrimeFaces has now its own p:repeat component, this is due to provide compatibility between JSF implementations and fix issues such as this.

New Features and Enhancements

Defect Fixes

Download

Binaries, Sources, API docs and VDL docs are available in PrimeFaces Elite Portal for ELITE and PRO users as an official release bundle.

Posted in PrimeFaces | 1 Comment
Jan 11

Introducing PrimeElements with PrimeUI 3.0

Future is here!

PrimeUI 3.0 is now available featuring PrimeElements, the WebComponents library to create user interfaces declaratively with custom html elements. In addition to PrimeElements, template support and defect fixes, there are 4 new components as well.


Web Components is a collection of four specifications to create reusable user interface components. These different technologies are Custom Elements, Shadow DOM, Html Imports and Templates. Modern browsers provide native implementations and javascript libraries called pollyfills are available to use them on older browsers. There are some libraries to create web components easily such as Google Polymer or Mozilla X-Tag while providing additional features.

PrimeElements is an add-on library for PrimeUI that only uses the Custom Elements technology based on X-Tag APIs, a simple and lightweight library to create cross browser custom elements. PrimeElements is a library not a framework, features such as data binding, validation, routing are out of scope since they can be provided by your framework of choice. As they are regular html elements, there are various use cases including integration with a simple REST backend, a javascript mvc framework or implementation in a server side rendering web framework such as PHP, JSP, RoR, Django, ASP.NET MVC, Spring MVC, JavaEE MVC and many more. Advanced cases such as hybrid mobile apps and offline support is also possible since there is no dependency to a server side api.

PrimeElements drastically reduce the amount of work required to create nice looking and functional UIs by providing a rapid application development kit based on standard Web Components technologies. Maintenance effort also benefits from this as there is less amount of script involved. For example Modena for PrimeUI demo provides regular jQuery implementation and PrimeElements implementation of a complex sample page where PrimeElements page is 200 lines less and 5kb smaller in size.

Creation

A common approach to use a widget on a page involves a markup and invoking a jquery plugin on that markup.

<select id="basic" name="basic">
    <option value="0">Select One</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
    $('#basic').puidropdown();

On the contrary, elements are created using their tags without need of an initialization script.

<p-dropdown>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</p-dropdown>

That is it! As PrimeElements are also regular dom elements, they can be initialized with document.createElement() where you can later attach it to another element.

var dropdown = document.createElement('p-dropdown');

Extending Elements

Some of the PrimeElements extend standard elements instead of providing their own tags, p-button is one of them so same UI can be defined using “is” attribute. Notice that
there is no need for a script anymore as approach is declarative.

    <button id="btn" type="button">Save</button>
    $('#btn').puibutton();

Extend a Button

<button is="p-button" type="button" id="btn">Save</button>

Accessing APIs

Elements can be interacted using their public apis. Example below demonstrates how to show a dialog at a button click.

<button type="button" is="p-button" icon="fa-external-link" onclick="document.getElementById('dlgelement').show()" >Show</button>

<p-dialog id="dlgelement" title="Dialog Header" modal showeffect="fade" hideeffect="fade" draggable resizable>
    <p>Dialog content here.</p>
</p-dialog>

Data Components

A complex example is datatable where there are many options for customization. Regular way is to write the markup and the script.

<div id="tbl"></div>
            $('#tbl').puidatatable({
                caption: 'List of Cars',
                paginator: {
                    rows: 10
                },
                columns: [
                    {field: 'vin', headerText: 'Vin', sortable: true, filter: true},
                    {field: 'brand', headerText: 'Brand', sortable: true, filter: true},
                    {field: 'year', headerText: 'Year', sortable: true, filter: true},
                    {field: 'color', headerText: 'Color', sortable: true, filter: true, content: function(car){return $(<span style="color: {{color}};">{{color}}</span>);}}
                ],
                datasource: function(callback) {
                    $.ajax({
                        type: "GET",
                        url: 'rest/cars/list',
                        dataType: "json",
                        context: this,
                        success: function(response) {
                            callback.call(this, response);
                        }
                    });
                },
                selectionMode: 'single'
            });
        

PrimeElement shortens the code required using p-datatable and p-column elements.

<p-datatable datasource="rest/cars/list" paginator rows="10" selectionmode="single">
    <p-column field="vin" headertext="Vin" sortable filter></p-column>
    <p-column field="year" headertext="Year" sortable filter></p-column>
    <p-column field="brand" headertext="Brand" sortable filter></p-column>
    <p-column field="color" headertext="Color" sortable filter>
        <script type="x-tmpl-mustache">
            <span style="color:{{color}}">{{color}}</span>
        </script>
    </p-column>
</p-datatable>

Containers

PrimeElements can have any content as children just like a standard div element. Here is an example of tabview.

<div id="tabview">
    <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">
            Tab 1 Content
        </div>
        <div id="tab2">
            Tab 2 Content
        </div>
        <div id="tab3">
            Tab 3 Content
        </div>
    </div>
</div>
    $('#tabview').puitabview();

And the PrimeElement way to do the same.

<p-tabview>
    <p-tab title="Tab 1">
        Tab 1 Content
    </p-tab>
    <p-tab title="Tab 2">
        Tab 2 Content
    </p-tab>
</p-tabview>

Events

PrimeElements provide event callbacks prefixed with “on” keyword. An example with rating is below;

<p-rating stars="10" onrate="MyApp.handleRate"></p-rating>
            var MyApp = {
                handleRate: function(event, value) {
                    //value = new rating value
                }
            };
        

Premium Layouts and Themes

In addition to the free themeroller based themes, PrimeElements support premium layouts and themes as well to give the elements a great look and a responsive template to work within. Modena, Rio and Adamantium are now available at the brand new PrimeFaces Market.

Download

There are two ways to download the library, simpler way is to use bower and alternative is the zip file bundle. With bower it is easy as running “bower install primeui”. Zip file on the other hand is available at github releases. Check out quickstart page for the installation of the library.

Roadmap

Next major release is 3.1 along with 3.0.x maintenance releases. For 3.1, we plan to add new features to DataTable like frozen rows-columns, add new widgets like MegaMenu and DataList. In parallel, we’re doing proof-of-concept work to create a UI component suite called PrimeNG for AngularJS2.

Posted in PrimeUI | 13 Comments
Dec 22

PrimeFaces Elite 5.3.4 and 5.2.17 Released

PrimeFaces Team is pleased to announce the new elite releases for 5.3. and 5.2. As we’ve announced before Extensions will be moved into PrimeFaces and work has started for the merger. 5.3.4 brings the new InputNumber component to begin with. Another nice addon we’ve included is ability to export multiple datatables in Excel exporter each having a separate sheet and inclusion of a dropdown to enable sorting in reflow mode of datatable for small screens.

There are also good amount of defect fixes such as advanced filtering compatibility with dynamic columns.

New Features and Enhancements

Defect Fixes

Download

Binaries, Sources, API docs and VDL docs are available in PrimeFaces Elite Portal for ELITE and PRO users as an official release bundle.

Posted in PrimeFaces | Comments Off
Dec 14

Titan Has Arrived

PrimeTek is thrilled to announce the all-new premium layout&theme called Titan.

For the first time ever, we’ve added a cover page in addition to the regular layout pages. This cover page can be used as the landing page of your application. Titan is inspired by the recently released U.S. Web Design Standards which we consider as a clean and elegant design.

Responsive

As usual, Titan is a responsive layout, combined with the responsive design enhancements in PrimeFaces 5.3, developing an application that targets multiple screen sizes is quite trivial.

Live Demo

Live preview is available at Titan Demo.

Market

Titan is now available for purchase at PrimeFaces Market.

Always bet on Prime!

Posted in Uncategorized | Comments Off
Dec 09

25% Discount at PrimeFaces Market

2015 has been a success for PrimeFaces, to celebrate we’re now offering a 25% year end discount at PrimeFaces Market for all Premium Layouts-Themes and the Elite Subscription.

The offer is valid for a limited time until the end of year.

As an example, Elite Subscription is $186 instead of $249 and basic license of a Premium Layout+Theme is only $59 instead of $79.

Posted in Uncategorized | Comments Off
Dec 08

PrimeUI 2.2 Released

PrimeTek is pleased to announce the brand new release for PrimeUI bringing new features to DataTable, new OrderList widget, enhancements to core and defect fixes to improve the overall quality.

DataTable

Many features already available at PrimeFaces are now ported to PrimeUI as well, these include;

OrderList

OrderList is the new addition to the suite featuring dragdrop based reordering as well as a response ui with multiple ways to provide a datasource such as a select element, local javascript array or a remote datasource.

Defect Fixes

Various defects reported by PrimeUI users have been fixed and closed, special thanks to the folks who have tested the last week’s RC release.

Changelog

Full changelog is available at GitHub issue tracker.

Download

There are two ways to download the library, simpler way is to use bower and alternative is the zip file bundle. With bower it is easy as running “bower install primeui”. Zip file on the other hand is available at github releases. Check out quickstart page for the installation of the library.

Roadmap

There are two main features coming, one will change the way PrimeUI is used (hint: web components via new PrimeElements project) and another will make it look beautiful (hint: Modena, Rio, Volt…). So keep an eye for PrimeUI 3.0 in January, exciting times ahead.

Posted in PrimeUI | 3 Comments
Dec 03

PrimeFaces Elite 5.2.16 and 5.3.3 Released

5.2.16 and 5.3.3 Dual release continue to bring accessibility improvements and defect fixes. Most notable improvement it the keyboard navigation support for datatable selection allowing the use of arrow keys and enter key to make selections in datatable.

New Features and Enhancements

Defect Fixes

Download

Binaries, Sources, API docs and VDL docs are available in PrimeFaces Elite Portal for ELITE and PRO users as an official release bundle.

Posted in PrimeFaces | 2 Comments