Prime Faces

  • View
    386

  • Download
    1

Embed Size (px)

Text of Prime Faces

PRIMEFACESUSERS GUIDEAuthorsagatay ivici Yigit Darn

Last Update: 14.02.2010 Covers: 1.0.0 and 2.0.0

Prime Technology

This page is intentionally left blank2

Prime Technology

1. Introduction!What is PrimeFaces?!

99

2. Setup!2.1 Download! 2.2 Dependencies! 2.3 Conguration!2.3.1 JSF 1.2 with PrimeFaces 1.x! 2.3.2 JSF 2.0 with PrimeFaces 2.x!

1010 11 1111 12

2.4 Hello World!

13

3. Component Suite!3.1 AccordionPanel! 3.2 AjaxStatus! 3.3 AutoComplete ! 3.4 BreadCrumb! 3.5 Captcha ! 3.6 Calendar! 3.7 Carousel! 3.8 Charts!3.8.1 Pie Chart! 3.8.2 Line Chart! 3.8.3 Column Chart! 3.8.4 Stacked Column Chart! 3.8.5 Bar Chart! 3.8.6 StackedBar Chart! 3.8.7 Chart Series! 3.8.8 Skinning Charts!3

1414 18 21 27 30 33 41 4747 50 53 55 57 59 61 62

Prime Technology

3.8.9 Real-Time Charts! 3.8.10 Interactive Charts!

65 67

3.9 Collector! 3.10 Color Picker! 3.11 Column! 3.12 CommandButton! 3.13 CommandLink! 3.14 ConrmDialog! 3.15 DataExporter! 3.16 DataTable! 3.17 Dialog! 3.18 Drag&Drop! 3.19 Dock! 3.20 DockItem! 3.21 Editor! 3.22 Effect! 3.23 FileDownload! 3.24 FileUpload! 3.25 GraphicImage ! 3.26 GraphicText! 3.27 Growl! 3.28 HotKey! 3.29 IdleMonitor! 3.30 ImageCompare! 3.31 ImageCropper!4

69 72 76 77 82 86 88 92 110 115 119 121 122 126 129 131 137 142 144 147 150 153 155

Prime Technology

3.32 ImageSwitch! 3.33 Inplace ! 3.34 InputMask! 3.35 Keyboard! 3.36 Layout! 3.37 LayoutUnit! 3.38 LightBox! 3.39 LinkButton! 3.40 Media! 3.41 Menu! 3.42 Menubar! 3.43 MenuItem! 3.44 Message! 3.45 Messages! 3.46 NoticationBar! 3.47 OutputPanel! 3.48 Panel! 3.49 Password Strength! 3.50 PickList! 3.51 Poll! 3.52 Printer! 3.53 Push! 3.54 Rating! 3.55 RemoteCommand! 3.56 Resizable!5

159 162 164 167 175 182 184 189 191 194 199 203 204 206 208 211 213 217 222 227 230 232 233 236 238

Prime Technology

3.57 Resource! 3.58 Resources! 3.59 Schedule ! 3.60 ScheduleEventDialog! 3.61 Slider! 3.62 Spinner! 3.63 Submenu! 3.64 Stack! 3.65 StackItem! 3.66 TabSlider! 3.67 TabView! 3.68 Terminal! 3.69 Tooltip! 3.70 Tree! 3.71 TreeNode! 3.72 UIAjax! 3.73 Watermark! 3.74 Wizard!

241 242 244 256 258 261 265 266 268 269 271 276 279 283 297 298 301 303

4. TouchFaces!4.1 Getting Started with TouchFaces! 4.2 Views! 4.3 Navigations! 4.4 Ajax Integration! 4.5 Sample Applications ! 4.6 TouchFaces Components !6

308308 310 313 315 316 317

Prime Technology

4.6.1 Application! 4.6.2 NavBarControl! 4.6.3 RowGroup! 4.6.4 RowItem! 4.6.5 Switch! 4.6.6 TableView! 4.6.7 View!

317 318 319 320 321 323 324

5. Partial Rendering and Processing!5.1 Partial Rendering!5.1.1 Infrastructure! 5.1.2 Using IDs! 5.1.3 Notifying Users! 5.1.4 Bits&Pieces!

325325325 325 328 328

5.2 Partial Processing!5.2.1 Partial Validation! 5.2.2 Keywords! 5.2.3 Using Ids! 5.2.4 Ajax vs Non-Ajax!

328328 329 330 330

6. Ajax Push/Comet!6.1 Atmosphere ! 6.2 PrimeFaces Push!6.2.1 Setup! 6.2.2. CometContext! 6.2.3 Push Component!

331331 332332 333 333

7. Javascript !7.1 PrimeFaces Global Object!7

335335

Prime Technology

7.2 Namespaces! 7.3 Ajax API!

335 336

8. Utilities!8.1 RequestContext! 8.2 EL Functions!

339339 341

9. Integration with Java EE! 10. IDE Support !10.1 NetBeans! 10.2 Eclipse!

342 343343 343

11. Portlets! 12. Project Resources! 13. FAQ!

346 348 349

8

1. IntroductionWhat is PrimeFaces?PrimeFaces is an open source component suite for Java Server Faces featuring 70+ Ajax powered rich set of JSF components. Additional TouchFaces module features a UI kit for developing mobile web applications. Main goal of PrimeFaces is to create the ultimate component suite for JSF.

Rich set of components (HtmlEditor, Dialog, AutoComplete, Charts and more). Built-in Ajax with Lightweight Partial Page Rendering. Native Ajax Push/Comet support. Mobile UI kit to create mobile web applications for handheld devices with webkit based browsers.(IPhone, Palm, Android Phones, Nokia S60 and more) Compatible with other component libraries. Unobstrusive javascript. Extensive documentation.

Prime TechnologyPrimeFaces is maintained by Prime Technology, a Turkish software development company specialized in Agile consulting, Enterprise Java and outsource software development. Project is led by aatay ivici, a JSF Expert Group Member.

Prime Technology

2. Setup2.1 DownloadPrimeFaces has a single jar called primefaces-{version}.jar. There are two ways to download this jar, you can either download from PrimeFaces homepage or if you are a maven user you can dene it as a dependency. Download manuallyhttp://www.primefaces.org/downloads.html

Download with Maven Group id of the dependency is org.primefaces and artifact id is primefaces. org.primefaces primefaces 1.0.0 or 2.0.0

In addition to the conguration above you also need to add Prime Technology maven repository to the repository list so that maven can download it. prime-repo Prime Technology Maven Repository http://repository.prime.com.tr/ default

10

Prime Technology

2.2 DependenciesPrimeFaces only requires a JAVA 5+ runtime and a JSF 1.2+ implementation as mandatory dependencies. Other than these required dependencies, therere some optional libraries for certain features. Dependency JSF runtime itext Version * 1.2.x or 2.x 1.4.8 Type Required Optional Used for Apache MyFaces or Sun Mojarra PDF export support for DataExporter component Excel export support for DataExporter component FileUpload FileUpload Ajax Push Ajax Push

apache poi

3.2-FINAL

Optional

commons-leupload commons-io atmosphere-runtime atmosphere-compat

1.2.1 1.4 0.5.1 0.5.1

Optional Optional Optional Optional

* Listed versions are tested and known to be working with PrimeFaces, other versions of these dependencies may also work but not tested.

2.3 Conguration2.3.1 JSF 1.2 with PrimeFaces 1.xResource Servlet Resource Servlet must be congured in web.xml. Resource Servlet org.primefaces.resource.ResourceServlet Resource Servlet /primefaces_resource/*

11

Prime Technology

Resources Component Resource component needs to be present on a page that has PrimeFaces components, this component outputs the link and script tags that are necessary for PrimeFaces components to work. The ideal place to put resources component would be the html head element.

We could have wrapped the output response with a servlet lter, parse the html, insert the link and script tags to the head element but this would be an expensive operation and effect the applications performance badly. A tip regarding p:resources is to add this component to the facelets or jsp template once, so that it gets added to each page automatically using the application.

2.3.2 JSF 2.0 with PrimeFaces 2.xResource Servlet Although PrimeFaces 2.x uses JSF2 resource APIs to place resources on page, due to limitations of JSF2 resource loading mechanism, PrimeFaces Resource Servlet is required to stream the resources from the bundle. If youre running PrimeFaces in a Servlet 3.0 environment like Glasssh V3, this servlet is auto-registered so you dont need to congure it manually. Resource Servlet org.primefaces.resource.ResourceServlet Resource Servlet /primefaces_resource/*

Allowing Text Children When using Mojarra 2.x, enable allowTextChildren conguration. com.sun.faces.allowTextChildren true

12

Prime Technology

2.4 Hello WorldThat is all for conguration, now dene the taglib to import PrimeFaces in your pages and try a component to test if setup is working. Taglib If you're a facelets user, the xml namespace conguration would be;xmlns:p="http://primefaces.prime.com.tr/ui"

If you're using jsp the taglib denition is;

Try a component For JSF 1.2 and PrimeFaces 1.x an example page would be;

And with JSF 2.0 and PrimeFaces 2.x. (Note that you dont need p:resources);

13

Prime Technology

3. Component Suite3.1 AccordionPanelAccordionPanel is a container component that renders its children in seperate tabs and displays a sliding animation when a tab is being collapsed or expanded.

InfoTag Tag Class Component Class Component Type Component Family Renderer Type Renderer Class accordionPanel org.primefaces.component.accordionpanel.AccordionpanelTag org.primefaces.component.accordionpanel.Accordionpanel org.primefaces.component.AccordionPanel org.primefaces.component org.primefaces.component.AccordionPanelRenderer org.primefaces.component.accordionpanel.AccordionPanelRenderer

14

Prime Technology

AttributesName id rendered Default Assigned by JSF TRUE Type String boolean Description Unique identier of the component Boolean value to specify the rendering of the component, when set to false component will not be rendered. An el expression that maps to a server side UIComponent instance in a backing bean Index of the active tab, use a comma seperated list to specify multiple tabs. Allows having more than one active tab Speed of the toggle animation in seconds. Style of the root html container element. Style class of the root html container element. Enables toggling on hover. Time to wait in terms of ms to toggle a tab when it is hovered. Javascript variable name of the client side widget.

binding activeIndex multiple speed style styleClass hover hoverDelay widgetVar

null null FALSE 0.5 null null FALSE 500 null

Object String boolean double String String boolean integer String

Getting started with Accordion Panel Accordion panel consists of one or more tabs and each