PrimeNG 0.1 Released

PrimeTek is excited to announce the first release of PrimeNG, the UI component suite for AngularJS 2. As we’ve announced before, PrimeNG is a sibling of the mighty PrimeFaces and the new member of Prime Family of open source products that also includes PrimeUI and PrimeElements.

The initial 0.1 version brings 15 components, a new showcase, top notch documentation, integration with 38 themes and more.

The initial line up of components consists of;

  • Accordion
  • Button
  • Checkbox
  • Dialog
  • Fieldset
  • Galleria
  • InputText
  • InputTextarea
  • Panel
  • Password
  • RadioButton
  • Rating
  • Spinner
  • TabView
  • ToggleButton

Showcase

Showcase of PrimeNG provides all the demos and documentation. It will be updated after each release.

Themes

38 Themes of PrimeUI can also be used for PrimeNG, showcase utilizes them already and themes can be switched on the fly using the switcher at top right of the screen. After 1.0, we’ll offer premium layouts and themes such as Modena, Rio, Volt, Spark, Atlas, Titan and more.

PrimeUI and jQuery

In an Angular2 application, you don’t need to use jQuery directly however some of the PrimeNG components are based on existing jQuery plugins in PrimeUI and others are native components. jQuery based ones are optimized for PrimeNG integration using a technique called enhanced mode where plugin assumes dom is already created by PrimeNG component. As a result, jQuery plugin does not manipulate dom, only adds lightweight behaviors and low level requirements such as positioning. Changes as a result of one or two way binding are properly reflected between the UI and model. In addition components are destroyed whenever page is navigated away via router.

Download

PrimeNG is available at npm, simple running “npm install primeng –save” will get it for you. For other setup details, visit the setup page. There is also a primeng-quickstart sample application available at github.

Code

All source code including components and showcase are avialable at GitHub. PrimeNG is licensed under apache license v2 and totally free to use even in commercial applications.

Forum

A forum is created for discussions, support and feedback.

Roadmap

We plan to reach 1.0 with around 50 components in May 2016 and a plan is available at primeng wiki. For example, next version 0.2 will bring listbox, messages, growl, dropdown, inputswitch and carousel next week.

PrimeFaces Elite 5.3.6 and 5.2.19 Released

PrimeFaces Team is pleased to announce the new updates for Elite subscribers featuring the brand new Knob component, nested dialog support for Dialog Framework and maintenance improvements.

Knob Component

Knob component is moved to PrimeFaces from extensions, it is an input component with knob control. Live demo is available at PrimeFaces Showcase.

Nested Dialogs in Dialog Framework

Dialog Framework is a handy utility to open another JSF page in a dynamically generated dialog, until now nested dialogs haven’t been supported meaning, it was not possible to open a dynamic dialog from another dynamic dialog. As it has been a popular feature request, we’ve implemented it and put up a demo with 3 levels.

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.

PrimeFaces Atlas

PrimeTek is pleased to announce the all-new premium layout&theme called Atlas.

Atlas provides a responsive layout, two different dashboard examples, a cover page, popup and horizontal menu options, 8 different menu colors to choose from Atlas Palette, its very own Atlas Theme for PrimeFaces components, utility pages like login, error and more.

Responsive

Live Demo

Live preview is available at Atlas Demo.

Market

Titan is now available for purchase at PrimeFaces Market.

Always bet on Prime!

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;

Introducing PrimeNG for Angular 2

PrimeTek is excited to announce a brand new project called PrimeNG to provide UI components for Angular 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!

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.

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.

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.

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!