Sep 30

PrimeFaces 6.0.5 Released

PrimeFaces 6.0.5 is now available with 11 improvements, the highlight of this release is filtering support for Tree. The new filterBy attribute enables filtering tree nodes by a property.

<p:tree value="#{bean.root}" filterBy="#{node.name}" var="node">
   <p:treeNode>
       <h:outputText value="#{node.name}" />
    </p:treeNode>
</p:tree>

Here is the full changelog;

Download

Elite releases are available at PrimeStore.

Roadmap

6.0.6 is already being worked on, we’ll introduce new p:textEditor component successor to the p:editor and also add pagination support for TreeTable.

Posted in PrimeFaces | Leave a comment
Sep 19

PrimeNG 1.0.0-beta.16 Released

PrimeTek is glad to announce the new update for PrimeNG featuring the new confirmDialog component, native slider, accessibility improvements and more.

Angular 2.0 Final

First of all, congratulations to Angular team for releasing 2.0 final, we’ve been working on it since the early alphas as an early adopter and witnessed the great amount of work put in to the framework. Beta16 is tested against 2.0 final and fully supports it.

ConfirmDialog

ConfirmDialog is a reusable dialog backed by a service to make confirmation of actions easier than ever. See the live demo for an example.

import {ConfirmDialogModule,ConfirmationService} from 'primeng/primeng';
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="425"></p-confirmDialog>

<button type="text" (click)="confirm()" pButton icon="fa-check" label="Confirm"></button>
export class ConfirmDialogDemo {

    constructor(private confirmationService: ConfirmationService) {}

    confirm() {
        this.confirmationService.confirm({
            message: 'Are you sure that you want to perform this action?',
            accept: () => {
                //Actual logic to perform a confirmation
            }
        });
    }
}

To display the dialog, get an instance of confirmationService and call confirm method by passing several options including the accept callback that will actually perform the action. Great thing is the ability to use the same dialog over and over by other actions on the same component. Under the hood a Observables and RxJS is utilized to communicate between the caller and the dialog.

Native Slider

Slider was using jQuery UI slider and we’ve reimplemented it as a native component to avoid this dependency. The apis are same so there is no backward compatibility issue. We’ll also redo calendar and inputmask as native components in upcoming releases to remove jquery dependency of these components. p-schedule based on FullCalendar will remain as the only component of PrimeNG with jquery dependency.

Accessibility

We’re constantly improving support for specifications like section 508 to add keyboard and screen reader compatibility. Beta16 brings improvements to components such as tabview, accordion, checkbox, radiobutton, paginator and sortable datatable headers.

Breaking changes

  • Tree template requires pTemplate with node type
  • click event of RadioButton is renamed to onClick

Full Changelog

Roadmap

Our plan is to release the first release candidate at the end of october after removing jquery from calendar and inputmask, along the way we’ll look at popular requests like custom components inside datatable filters and others. 1.0 final will follow the RCs and our estimate is november 2016 for it. Most of the APIs are already stable and no major breaking changes are expected. After 1.0, we have tons of work to do such as new spreadsheet component, recaptcha, image cropper, frozen columns-rows for datatable, block ui, color picker, knob.

Ultima

Ultima is the best seller admin template at PrimeStore and we’re currently porting it to PrimeNG, we plan to release Ultima for PrimeNG by the end of september. Checkout the PrimeFaces version for a preview.

Posted in PrimeNG | 7 Comments
Sep 16

End of Sale for Some Premium Templates

In spring 2016, we’ve drastically changed how we create premium application templates which has involved new team members (developer+designer), new tools (sketch, zeplin), sass and more. Details are available at our official announcement.

There are four stages in product lifecycle; Introduction, Growth, Maturity and Decline. Following templates have completed their lifecycle so they are now at End of Sale (EOS) state, meaning they won’t be offered for sale anymore at PrimeStore.

We strongly want to emphasize that end of sale does not mean end of life. We’ll continue updating them periodically and provide technical support at their dedicated forum topics. There is no end of life or no end of support planned or even considered for these products. For instance next week, all 11 of them will get new releases for existing users. They are mature and stable projects, the updates will mostly contain maintenance improvements however we might add small new features if there is popular demand amongst users. Their forum and issue tracker are the best places to give feedback so that we can continuously improve them.

New sales will only be available for nextgen layouts such as Icarus, Omega, Apollo, Ultima and the upcoming ones. There is no end of sale planned for nextgen layouts in the future as we’ve done a significant amount of investment and planning for them recently to make a fresh start for our product suite based on PrimeFaces and PrimeNG.

As always PrimeTek guarantees continous support and backing for all its products.

Posted in Uncategorized | 5 Comments
Sep 12

PrimeFaces Elite 6.0.4 and 5.3.17 Released

PrimeFaces Team is pleased to announce new updates for Elite Subscribers that bring accessibility enhancements.

New Features and Enhancements

Defect Fixes

Download

1 year Elite subscription is only $99 per developer including the Omega Layout.

Posted in PrimeFaces | 2 Comments
Sep 07

PrimeFaces 6.1 Roadmap

PrimeFaces 6.1 is under development and we thought it would be a useful to give an update to the community along with the upcoming features.

Spreadsheet

Spreadsheet will be the highlight of 6.1 providing an excel like functionality, it is basically a specialized datatable for editable data.

TriStateCheckbox is also another one which is available since 6.0.1 to elite subscribers.

New Features

DataTable will get enhancements such as row grouping, a better subtable and TableState api that automatically keeps its state across pages so whenever the users changes the state of data e.g. paging, sorting, filtering the state gets lost once the user leaves the page. With new TableState feature, datatable will be able to keep its state across pages. Also we have plans to integrate Dialog Framework with FacesFlows.

Accessibility

As usual, high level of support for section 508 is one of our primary goals, many components have first class aria, keyboard and screen reader support already. We’ll keep working on the components who have room for improvements regarding accessibility.

Defect Fixes

Our team constantly works on fixing the reported defects and we’ll continue to improve the overall quality of the library.

Backward Compatibility

As with recent releases, there are no planned breaking changes so update will be smooth.

New Website

A brand new primefaces.org will be ready in 2 weeks time featuring a modern and responsive look.

Timeframe

6.1 final is planned for mid january 2017, after holiday period and we hope to do various RCs before. Progress will be delivered to Elite subscribers bi-weekly until then so they will have early access.

Always bet on Prime!

Posted in PrimeFaces | 3 Comments
Sep 07

PrimeNG 1.0.0-beta.15 Released

PrimeNG is updated to 1.0.0-beta.15 with Angular2 RC6 support, file upload enhancements and various other improvements. FileUpload now supports auto uploads and customizable file display with templating.

New Features and Enhancements

Defect Fixes

Roadmap

beta16 is due next week with accessibility (508) improvements, feature implementations of user requests. We’re also updating premium layouts to RC6 with Beta15 and started porting our new material Ultima template as well. We also need to switch router to lazy mode to speed up demo however we’re waiting for official documentation from Angular team as it currently works out of the box with System.js only which we don’t use. Finally, we’ll start rewriting slider and calendar as native components to avoid dependency to jquery ui for these two.

Posted in PrimeNG | 1 Comment
Sep 02

2 New Themes for Ultima

Ultima 1.0.2 is now available featuring two new themes along with a video tutorial to show how easy it is to create your own. The new themes are named dark-blue & dark-green and we really suggest using them with their dark menu mode as it looks awesome.

Check out the live preview to see these to in action.

Dark-Blue

Dark-Green

Tutorial

Here is a video tutorial to show how easy it is to create your own theme in a few minutes.

Download

Ultima is available at PrimeStore.

Posted in PrimeFaces | 2 Comments
Sep 01

Ultima Compact Mode

Material design specification uses slightly bigger font sizes and paddings and the common feedback we’ve got for Ultima is providing an alternative way for making the theme-layout smaller to make space for other content.

So we’ve implemented the new compact mode that applies a smaller font size and smaller paddings overall to reduce the dimensions of layout elements as well as the PrimeFaces themes. At live preview, under the customization menu there are two links to switch between default mode and the compact mode to see the difference. To enable compact mode, you just need to add layout-compact style class to the h:body element and that is it.

Compact mode is available in Ultima 1.0.1 along with various defect fixes initially reported by the Ultima users. We’ll also create a video tutorial to show how easy it is to create a custom Ultima layout-theme with your own colors in 5 minutes with sass.

Posted in PrimeFaces | 2 Comments
Aug 31

PrimeNG 1.0.0-beta.14 Released

PrimeTek is excited to announce the new update on PrimeNG, beta14 brings the all-new fileupload component, resource reorganization, templating support for datatable header and footers and defect fixes to improve the overall quality.

FileUpload

FileUpload is an advanced uploader with dragdrop support, multi file uploads, progress tracking and validations.

Styles from PrimeUI

PrimeNG has been depending on PrimeUI for the styles and this has started to make our job harder as we had to go to PrimeUI to do styling. Instead all the styles have been moved to PrimeNG, this means PrimeNG does not depend on PrimeUI at all. Migration is simple as changing below;

<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />

to

<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />

Animations

With beta14, we’ve started to make use of Angular2 animation apis to enhance the user experience. Various components such as Dialog are using native fade animation whereas panel, accordion and fieldset are now using a slide animation to switch between collapsed and visible state of content.

Multi Templating

DataTable and TreeTable now allows adding custom content to header and footer sections of a column as well, this is a breaking change as we had to introduce the new pTemplate decorator to identify the type of the template. Migration is done by adding pTemplate directive to the template element with type=”header|body|footer” attribute.

<p-column field="color" header="Color">
    <template let-col let-car="rowData">
        <span [style.color]="car[col.field]">{{car[col.field]}}</span>
    </template>
</p-column>

becomes;

<p-column field="color" header="Color">
    <template let-col let-car="rowData" pTemplate type="body">
        <span [style.color]="car[col.field]">{{car[col.field]}}</span>
    </template>
</p-column>

To define another template for header, use;

<p-column styleClass="col-button">
    <template pTemplate type="header">
        <button type="button" pButton icon="fa-refresh"></button>
    </template>
    <template let-car="rowData" pTemplate type="body">
        <button type="button" pButton (click)="selectCar(car)" icon="fa-search"></button>
    </template>
</p-column>

Full Changelog

New Features and Enhancements

Defect Fixes

Download

PrimeNG is available at npm.

Premium Layouts

We are currently working on updating the existing premium layouts to latest Angular2 RC and Beta14, they will be released by the end of this week. Also PrimeFaces Ultima will be ported to PrimeNG in 2 weeks, Ultima will replace Rio-Adamantium-Modena trio as the material admin template.

Posted in PrimeNG | 13 Comments