Image Not Show Up First Time Upload in Primeface

This article is dedicated to JSF developers who accept never heard about PrimeFaces or never tried it in a existent awarding. I'm certain that after we highlight the main advantages provided by PrimeFaces, you will want to join the slap-up PrimeFaces customs, and all your JSF production's application will be developed nether the PrimeFaces UIs umbrella. I know that it sounds like a too enthusiastic an introduction, but after you will read this article, yous will feel the same.

In a simple but meaningful definition, PrimeFaces is a gold mine for JSF developers. Technically speaking, PrimeFaces is a comprehensive set of 100+ JSF UI components uniform with HTML5. Also the nifty look and experience, PrimeFaces components support fine-grained AJAX capabilities, are responsive eligible, and are compatible with any mod browser and device (for example, from desktop to mobile devices). In add-on, PrimeFaces comes with PrimeFaces PUSH (based on the Temper framework), PrimeFaces Extensions, which is a lightweight open source component library for JSF 2.0.  Further, we have to mention the Prime UI, which is a spin-off from PrimeFaces and is a drove of rich JavaScript widgets based on the jQuery UI. Recently (January 11, 2016), PrimeUI 3.0 is available featuring PrimeElements, which is the WebComponents library to create user interfaces declaratively with custom HTML elements. Practically, PrimeElements is an improver library for PrimeUI. And, let's not forget the WIP project named Prime NG, which is a drove of rich UI components for AngularJS2. All these goodies were developed by the PrimeFaces squad (leader Cagatay Civici) and are divers as the "Ultimate UI Framework for Coffee EE."

And, if this information is not enough to make you curious well-nigh exploring the PrimeFaces world, perhaps several testimonials and the listing of PrimeFaces users will do it. Need even more? Well, how well-nigh PrimeFaces web log, events, training, forum, books, certification, and partners? Still more? How about PrimeFaces themes and astonishing layouts: Titan, Volt, Adamantium, Modena, Rio, Ronin, Spark and last (for the moment) Sentry.

Delight allow me to add my ain testimonial here: My main expanse of expertise is focused on developing GIS RIA applications using Coffee EE technologies. These kinds of applications involve pretty rich GUIs and geographical maps. I remember that when I discovered PrimeFaces I was trying to find a set of components that will allow me to have a chief layout (to place the map in the center), collapsible-expandable components, built-in upload for multiple files with progress bar, slap-up look and feel and powerful AJAX capabilities for supporting RIA concept. Well, since and then I've developed four such projects based on PrimeFaces, and you lot tin see some screenshots hither. So, a big thanks to the PrimeFaces squad for developing this bully library.

Well, I think that if y'all've read this far, I've got your attention.

Information technology is time to have a closer look to what PrimeFaces tin do for your JSF application. Of grade, is impossible to cover everything in an article, but in one case you "taste" PrimeFaces via this article, you will run for more on PrimeFaces Showcase and PrimeFaces Transmission.

Let'due south get started our overview with PrimeFaces' AJAX support.

Installing PrimeFaces

Installing PrimeFaces is very piece of cake to accomplish. Yous can add PrimeFaces into a project as a JAR or as a Maven dependency:

<dependency>    <groupId>org.primefaces</groupId>    <artifactId>primefaces</artifactId>    <version>5.three</version> </dependency>        

Setting a theme can be achieved past post-obit the instructions from hither.

Cursory Overview of PrimeFaces Components

If you lot are familiar with JSF, learning PrimeFaces will be like a walk in the park!

PrimeFaces AJAX Cadre

Figure 1: The AJAX cadre

One of the nearly powerful features of PrimeFaces consists of AJAX support for all its components. Because you are a JSF developer, you should be familiar with <f:ajax/>, but PrimeFaces comes with an improved version of this tag, named <p:ajax/>. The <p:ajax/> has the same core functionalities as <f:ajax/>; it allows usa to indicate the components to procedure via procedure attribute (alias <f:ajax execute>) and the components to update via the update aspect (alias <f:ajax render>). In addition, <p:ajax/> is integrated with <p:ajaxStatus/> (this is a global and configurable indicator to provide feedback about the ongoing AJAX request), allows the use of callback parameters, uses jQuery for DOM manipulation, and supports the @parent keyword. Nevertheless, <p:ajax/> doesn't take children. Hither information technology is a snippet of a phone call using <p:ajax/>:

<h:class>    <p:inputText value="#{fooBean.fooValue}">       <p:ajax result="fooEvent" update="fooId"          listener="#{fooBean.fooListener}" />    </p:inputText>    <h:outputText id="fooId"       value="#{fooBean.fooValue}" /> </h:form>        

To provide feedback nigh the ongoing AJAX request, PrimeFaces comes with a Condition component exposed via the <p:ajaxStatus/> tag. This component can be used with a facet-driven declarative approach or by using callbacks. This will piece of work globally at view level, which means that any AJAX request in the page volition exist monitored by <p:ajaxStatus/>. For example, if you choose the facet-driven declarative approach, yous can rely on this skeleton:

<p:ajaxStatus>    <f:facet name="default">          // a text or an image to be displayed by default          </f:facet>     <f:facet proper noun="outset">          // a text or an epitome (blithe GIF) to be displayed       // during AJAX asking processing          </f:facet>     <f:facet proper noun="complete">          // a text or an image to be displayed after the AJAX       // request was processed          </f:facet> </p:ajaxStatus>        

Or, if you lot rely on callbacks, you can easily shape a modal dialog to announced when an AJAX request is processed:

<p:ajaxStatus onstart="PF('fooDialog').show()"               onsuccess="PF('fooDialog').hide()" />  <p:dialog widgetVar="'fooDialog'" modal="true"              draggable="false"           closable="false" resizable="imitation"              showHeader="false">          // add the dialog content here          </p:dialog>        

This was simply a small introduction in PrimeFaces AJAX Cadre. Via PrimeFaces Showcase you tin can explore more goodies, such every bit Poll, RemoteCommand, partial submit, and so forth.

PrimeFaces Input Components

Effigy 2: The PrimeFaces input components

To collect data from the user, PrimeFaces comes with 25+ defended components. You retrieve of an input component … and PrimeFaces has it!

We can say that in the first category of input components we accept the components that be in JSF also, such as <h:inputText/>, <h:selectManyCheckbox/>, <h:selectManyMenu/>, <h:inputTextarea/>, and then on. Each of these components has been improved by PrimeFaces and fortified with more features and attributes. For case, PrimeFaces InputText extends standard InputText with skinning capabilities, wheereas the PrimeFaces SelectManyMenu provides an advanced version of standard SelectManyMenu that allows us to display checkboxes, images, and the like in the list of items via <p:column/>. The PrimeFaces InputTextarea extends standard InputTextarea with autoComplete, autoResize, remaining characters counter, and theming features.

In the 2nd category of input components, we have components that don't be in the JSF core; some of them doesn't exist in other JSF extensions, either. These are mighty components and each of them is implemented equally a high-functioning server-side web UI component. For case, you lot need a absurd agenda in your page? But attempt the PrimeFaces Calendar component. Amidst others, you tin can choose between inline calendar:

<p:agenda id="inline" value="#{fooBean.fooDate}"             style="inline" />        

a popup calendar:

<p:calendar id="popup" value="#{fooBean.fooDate}" />

just time selection:

<p:calendar id="time" value="#{fooBean.fooDate}"             blueprint="HH:mm" timeOnly="truthful" />        

Or, possibly you demand a practiced-looking rating component. How nigh PrimeFaces Rating component with callback, AJAX rate, and read-only capabilities? The following snippet of code will render a rating component with an AJAX rate:

<p:rating value="#{fooBean.fooRatingValue}">    <p:ajax issue="rate" listener="#{fooBean.onrate}"       update="..." />    <p:ajax event="cancel" listener="#{fooBean.oncancel}"       update="..." /> </p:rating>        

When browsing the consistent listing of input components, practice not hesitate to check out the AutoComplete, InputMask, Inplace, and InputNumber components.

PrimeFaces Push Components

Figure 3: The PrimeFaces push components

I'm sure that yous already noticed the well-known Button, Link, CommandButton, and CommandLink components. PrimeFaces extends the JSF standard ones with AJAX, partial processing and skinning features. By default, a PrimeFaces command push/link will fire an AJAX POST asking, and in gild to obtain a non-AJAX POST request you lot need to explicitly set ajax="imitation". Here information technology is a simple PrimeFaces command button which volition fire an AJAX request and will execute some JavaScript code at the terminate depending on the asking status:

<p:commandButton value="Click Me!" action="#{fooBean.fooAction()}"                  oncomplete="fooScript();"                  onsuccess="buzzScript();"                  onerror="bizzScript();"/>        

Moreover, you may demand a SplitButton which displays a default control and boosted ones in an overlay. All these artifacts accept access to fine-grained AJAX capabilities via attributes like process, update, partialSubmit, partialSubmitFilter, delay, and timeout.

Commonly, you volition come across usages every bit beneath (this button will submit the current form via AJAX request, volition update the messages and will execute a slice of JavaScript (for case, display a dialog window) when the AJAX asking completes):

<h:grade>    ...    <p:messages id="fooId"/>          ...

<p:commandButton value="Click Me!" action="#{fooBean.fooAction()}" update="fooId" oncomplete="fooScript();"/> … </h:course>

PrimeFaces Data Components

Figure iv: The PrimeFaces data components

PrimeFaces information components are another strong reason for using PrimeFaces. Here, we have a bunch of components capable of displaying and manipulating data. From the mighty DataTable to the "exotic" Band, from the very useful PickList to the fun TagCloud, these components are really awesome. Practically, yous tin write a great volume nigh only these components and proper name it something like PrimeFaces Information Processing UIs.

The DataTable component provided by PrimeFaces is a real deal and is very powerful compared to the JSF cadre data table. Tabular data are a very important aspect in Spider web applications and features such equally pagination and lazy loading are always welcome. The complete list of DataTable features consists of: Basic, Facets, Paginator, Sort, Filter, Pick, Grouping, SubTable, SummaryRow, Expansion, Columns, Edit, Coil, RowColor, Lazy, Resize, Reorder, ColToggler, ContextMenu, Mucilaginous, Responsive, and RTL.

For example, a data table with pagination and lazy loading looks similar this:

<p:dataTable var="t" value="#{fooBean.fooList}" rows="10"              paginator="true"              paginatorTemplate="{CurrentPageReport}                 {FirstPageLink} {PreviousPageLink}                 {PageLinks} {NextPageLink} {LastPageLink}                 {RowsPerPageDropdown}"              rowsPerPageTemplate="5,10,15">    <p:column headerText="Id">       <h:outputText value="#{t.fooProperty}" />    </p:column>    ... </p:dataTable>        

Some other popular information component is PickList. This is a dual list input component with Elevate and Drop-based reordering, transition effects, theming filtering, captions, checkbox selection, client-server callbacks, responsive layout, and more. A unproblematic PickList looks like the following:

<p:pickList id="fooId" value="#{fooBean.dualListModel}"             var="t" itemLabel="#{t}" itemValue="#{t}" />        

A PickList every bit you take never seen earlier has Pojo Support with Result, Captions, Custom Content, Reordering, Filtering, Checkboxes, Ajax Events, and Responsive. Such an case is available on PrimeFaces Showcase.

Among other popular information components, we take: GMap, Tree, and DataExporter.

PrimeFaces Panel Components

Figure 5: The PrimeFaces panel components

There is no secret that JSF has a pretty limited offering of panels. Basically, nosotros accept the <h:panelGroup/>, which tin be rendered as a <div/> or a <span/>, and the <h:panelGrid/>, which is rendered equally an HTML table.

Compared to this offer, PrimeFaces provides a comprehensive suite of panels. Personally, I beloved to use the Layout panel in my JSF applications. You simply put the Layout in a folio and start building your application interface in its panels. You lot can display all of its v panels, or only a sub-set of panels, and each panel excepting the heart panel is closable and collapsible. Moreover, they are resizable and support a broad range of effects when they are complanate/expanded. Post-obit, you can see a skeleton code for a full page Layout:

<p:layout fullPage="true">    <p:layoutUnit position="due north" size="150" header="Tiptop"                  resizable="true" closable="truthful" collapsible="truthful">       //page code    </p:layoutUnit>     <p:layoutUnit position="southward" size="150" header="Bottom"                  resizable="true" closable="true" collapsible="truthful">       //page code    </p:layoutUnit>     <p:layoutUnit position="west" size="250" header="Left"                  resizable="true" closable="true"                  collapsible="true">       //page code    </p:layoutUnit>     <p:layoutUnit position="due east" size="250" header="Right"                  resizable="true" closable="true"                  collapsible="true" event="driblet">       //page code    </p:layoutUnit>     <p:layoutUnit position="eye">       //page code    </p:layoutUnit> </p:layout>        

The Accordion and Fieldset components are as well amidst my favorites. Considering they are toggleable, nosotros can use them to manage the folio space in an optimal approach. For instance, the skeleton of an squeeze box with three tabs is:

<p:accordionPanel>    <p:tab title="tab_1_Name">       // tab content    </p:tab>    <p:tab title="tab_2_Name">       // tab content    </p:tab>    <p:tab title="tab_3_Name">       // tab content    </p:tab> </p:accordionPanel>        

Whereas a togglable fieldset looks like this:

<p:fieldset legend="fieldset_legend" toggleable="truthful"       toggleSpeed="miliseconds">    // fieldset content </p:fieldset>        

At that place is fifty-fifty a panel named Dashboard. This component supports drag&drop-based content reordering similar to portal environments.

PrimeFaces Overlay Components

Effigy six: The PrimeFaces overlay components

PrimeFaces overlays are very useful to display dialogs (modals/non-modals), confirmation dialogs, display images, inline content, iframes, tooltips, and more than. Typically, these kinds of artifacts are obtained via additional JavaScript libraries. With PrimeFaces, we have them out of the box.

Probably, Dialog is the nigh used overlay component, so let's have a cursory skeleton of how it is commonly used (I also like the LightBox demo):

<p:commandButton value="Show Dialog!" type="push button"    onclick="PF('fooWV').show();" /> ... <p:dialog header="fooHeader" widgetVar="fooWV"           modal="truthful" >    // dialog content </p:dialog>        

Yous may also exist interested in Dialog Framework.

PrimeFaces Menu Components

Figure vii: The PrimeFaces menu components

Using menus in JSF is a real challenge. Practically, we don't have whatsoever congenital-in component capable of rendering an HTML snippet of code that looks similar a menu bar.

Well, PrimeFaces provides a pretty cool menu bar (Menubar) and much more. An interesting menu is the ContextMenu, which brings one of the most mutual desktop UIs into a JSF page. PrimeFaces allows us to attach the context carte to whatsoever component in page (tree, data table, and so forth).

Not all PrimeFaces menus are "sober." Check out the funny Stack and Dock menus. Yous probably call up that you need a circuitous piece of code to obtain a menu like Stack, but PrimeFaces simplifies this task so much that all yous demand is to follow this skeleton:

<p:stack icon="yourIconPath" expanded="true">    <p:menuitem value="fooValue" icon="yourIconPath"       url="#"/>    <p:menuitem value="fooValue" icon="yourIconPath"       url="#"/>    <p:menuitem value="fooValue" icon="yourIconPath"       url="#"/>    ... </p:stack>        

Personally, I've used the SlideMenu several times in product; it displays nested submenus with a slide animation. This is a pretty cool menu because it occupies little space, has peachy slide animations, and looks peachy in an Squeeze box component.

PrimeFaces Charts Components

Figure 8: The PrimeFaces charts components

It is obvious that PrimeFaces has paid attention to charts. Most of the common charts types are available with zooming, animations, boundaries, and formatting capabilities.

They expect very professional person, they are interactive, tin can be updated in real time, support multi axes, tin can be exported equally static images, can be combined, and are responsive. There is no demand to rely on other charts libraries anymore.

Starting from the classical charts types similar Line, Bar, and Area, continuing with the well-known Pie, Chimera, and MeterGauge, and ending with the Donut and OHLC. They are all peachy.

Especially for charting dates, PrimeFaces has the Engagement nautical chart. Dates in charts are displayed past using the DateAxis API that provides special zooming, boundaries, and formatting capabilities.

For each type of chart, y'all accept to provide the correct nautical chart model and utilise <p:chart/>:

<p:chart type="line" model="#{fooBean.lineModel}"          fashion="height:300px;"/>        

The preceding lineModel should represent an instance of org.primefaces.model.chart.LineChartModel. More details about PrimeFaces chart models can be plant on PrimeFaces Showcase and official documentation.

PrimeFaces Messages Components

Figure 9: The PrimeFaces messages components

Every bit you know, JSF support four types of letters: info, error, warn, and fatal.

By default, these messages are rendered to the user via an HTML <ul/> list. On the other hand, PrimeFaces offers a stylized version that looks friendlier by signaling the message types via a meaningful colors and icons. Check a demo of Messages.

Beside Messages, PrimeFaces provides the possibility to display FacesMessages in a groovy looking and configurable overlay named Growl. This is typically configured every bit in the following skeleton:

<h:form>    <p:growl id="fooId" showDetail="true" sticky="truthful" />     // more content (inputs)     <p:commandButton value="Submit"                     actionListener="#{fooBean.fooAction()}"                     update="fooId" /> </h:grade>        

If you want to mode the Growl component, possibly this article will assist you lot.

PrimeFaces Multimedia Components

Figure 10: The PrimeFaces multimedia components

Although the JSF core allows us to brandish images via <h:graphicImage/>, PrimeFaces allows us to do much more than than that. We can brandish, compare, and crop images, play video content, and even to take photos with the webcam and send them to the backend model.

My favorite components from this category are the gallery component Galleria and the cantankerous-browser generic player Media.

Basically, all components from this category save us a lot of work and time spent for developing or searching media components on the Internet. As long as yous have the media content, simply laissez passer information technology to the desired component and PrimeFaces will practise the residual for you.

Check out how simple we tin obtain an paradigm compare awarding:

<p:imageCompare leftImage="left_image_path"                 rightImage="right_image_path"                 width="x" pinnacle="y"/>        

There is also a Barcode component capable to generate various types of barcodes in PNG or SVG formats.

PrimeFaces File Components

Figure xi: The PrimeFaces file components

There are only ii components under the File category, Upload and Download. The PrimeFaces Upload component looks keen and works very well. I've tried information technology several times in production with ten+ files and upward to 500MB and information technology worked as expected. Currently, PrimeFaces provides five types of upload: basic, unmarried, multiple, motorcar, and drag&drop. Here it is a skeleton for multiple uploading:

<h:form>    <p:fileUpload fileUploadListener="#{fooBean.fooHndleFileUpload}"                  mode="advanced" dragDropSupport="false"                  multiple="true" update="fooId"                  sizeLimit="100000" fileLimit="3"                  allowTypes="/(.|/)(gif|jpe?g|png)$/" />     <p:growl id="fooId" showDetail="true" /> </h:form>        

PrimeFaces DragDrop Components

Figure 12: The PrimeFaces DragDrop components

By using the <p:draggable/> tag, nosotros tin add drag&driblet capability to a component. Basically, we demand to refer the respective component via its customer ID in the for attribute of the <p:draggable/> tag.

The DataTable and DataGrid components provide a data table; respectively, a data filigree with elevate and drop capabilities. Practically, you tin drag the rows from a table; respectively, the items from a data grid into a droppable surface area.

In improver, PrimeFaces allows u.s. to customize the drag&drop feature via JavaScript.

PrimeFaces Client Side Validation

Figure thirteen: The PrimeFaces client side valiation

Definitely, this is one of the most powerful feature of PrimeFaces. Validation is always an of import attribute of an application and everybody wants it to have place quickly and securely, or … secure and quick. Obviously, this goal is pretty hard to achieve considering fast takes place on the client-side, but is non that secure, whereas secure takes place on the server-side, but is not that fast. Well, PrimeFaces comes with the Customer Side Validation Framework that implements JSF validation API within the browser. As the official Showcase points, this validation is characterized by the post-obit aspects:

• Compatible with Server Side Implementation
• Conversion and Validation happens on the client side
• Fractional Processing support for AJAX
• I18n support along with component specific messages
• Client side Renderers for message components
• Like shooting fish in a barrel to write custom client converters and validators
• Global- or Component-based enable/disable
• Niggling footprint using HTML5
• Advanced Edible bean Validation Integration

Personally, I similar the Bean validation which is integrated with Bean Validation Specification, but I also like the Custom, which allows u.s.a. to write a custom customer converter or validator based on JSF and/or Edible bean Validation APIs. In this article, you tin can read well-nigh PrimeFaces' cantankerous-field customer bean validation.

PrimeFaces Miscellaneous Components

Figure 14: The PrimeFaces miscellaneous components

A significant number of components that don't fit in the preceding categories are bachelor under the miscellaneous category.

Actually, here we take several slap-up components, such as Captcha, RequestContext, ProgressBar, Responsive, and then on.

Manifestly, you have to take your fourth dimension and explore at least once each of these components. I'm certain that components such as Spotlight, BlockUI, or DefaultCommand already have captured your marvel.

Well, that'south all, folks! I hope yous enjoyed this article and PrimeFaces soon will get your favorite JSF UI library. Currently, facts prove that PrimeFaces is the leading JSF framework and information technology definitely deserves its place:

• Number two at DevRates when this article was written, with 8.eight points.
• PrimeFaces forum reaches 130,000+ posts and 60,000+ registered community members.
• The well-nigh accessed components on JSF Showcase is the ZEEF page.

For those who also are fans of OmniFaces, you may be interested in the WIP book PrimeFaces & OmniFaces Powers Combined.

ezelltorgent.blogspot.com

Source: https://www.developer.com/design/primefaces/

Share this post