changes.
| | h1. Creating ICEfaces Applications with Eclipse using ICEfaces plugin |
| | |
| | The ICEfaces Eclipse Integration provides ICEfaces support for developers who use the Eclipse IDE for Java EE. The integration allows you to quickly start developing ICEfaces applications. Design view integration allows you to easily work with ICEfaces components. This plugin is available for versions of ICEfaces up to ICEfaces-3.3.0 (open source) ICEFaces-EE-3.3.0.GA_P01 (enterprise edition). The latest plugin works well in Eclipse version Keplar as well as Juno (tested by downloading both versions of Java EE Eclipse Downloads). |
| | Note that if you are having issues with the plugin, you may have updated some new eclipse classes to replace the original ones and you may have to download a clean version of the Eclipse Java EE bundle you want to use and start the plugin process again to see which classes may be causing issue. |
| | \\ |
| | \\ |
| | ---- |
| | \\ |
| | {panel}List of topics covered in this tutorial: |
| | |
| | | # [ICEfaces Eclipse Plugin|#plugin] |
| | | # [ICEfaces Eclipse Plugin|#plugin]. Eclipse Juno (v4.2) and Keplar (v4.3) were used for this tutorial |
| | # [Creating an ICEfaces Project|#creating] |
| | # [Running an ICEfaces Project|#running] |
| | # [Adding an ICEfaces Advanced (ACE) Component|#adding] |
| | |
| | {panel} |
| | \\ |
| | ---- |
| | h3. Development Tools Used |
| | |
| | The following tools are used in this tutorial: |
| | * [Eclipse|http://www.eclipse.org/downloads/] IDE for Java EE Developers |
| | * [Tomcat 7.x|http://tomcat.apache.org/download-70.cgi] Web Server |
| | * [Java 6.x|http://www.oracle.com/technetwork/java/javase/downloads/] |
| | * [Latest ICEfaces Integration for Eclipse|http://www.icesoft.org/downloads/icefaces-downloads.jsf] |
| | \\ |
| | \\ |
| | ---- |
| | h3.{anchor:plugin}ICEfaces Eclipse Plugin |
| | |
| | Download the Eclipse plugin from http://www.icesoft.org/downloads/icefaces-downloads.jsf under Tools Support -> Eclipse. |
| | Place the zip file in a local directory. |
| | \\ |
| | \\ |
| | !download1.png! |
| | \\ |
| | \\ |
| | Start Eclipse. From the Eclipse main menu bar, select Help -> Install New Software... -> Add --> Archive... |
| | Select the plugin (zip file) from your local directory, give it a name and click Ok. |
| | \\ |
| | \\ |
| | !plugin1.png! |
| | \\ |
| | \\ |
| | Select the checkbox beside ICEfaces Update Site, click Next, accept Licenses and click Finish. |
| | \\ |
| | \\ |
| | !plugin2.png! |
| | \\ |
| | \\ |
| | This will require a restart of Eclipse. |
| | \\ |
| | \\ |
| | ---- |
| | h3.{anchor:creating}Creating an ICEfaces Project |
| | |
| | Now that we have the ICEfaces plugin installed, we can create a new project with ICEfaces capabilities. |
| | From the Eclipse main menu bar, select File -> New -> Dynamic Web Project |
| | \\ |
| | \\ |
| | Type in the Project name and select a Target runtime. For Configuration, select 'ICEfaces 3 Default Project Configuration' and click Next> |
| | \\ |
| | \\ |
| | !newprojectdialog.png! |
| | \\ |
| | \\ |
| | In the JSF Capabilities dialog, there is a download button (with the arrow pointing down) available to download the required JSF and ICEfaces jars. Click on the button to launch the Download Library dialog. |
| | \\ |
| | \\ |
| | !jsfcapabilitiesbefore.png! |
| | \\ |
| | \\ |
| | Once you click the button you will see a list of selections similar to those in the image below. Libraries have to be downloaded one at a time. To download a library, highlight it and click Next> to accept the license. Finally, click Finish. |
| | The JSF 2 (Mojarra 2.1.3) jars are required. |
| | \\ |
| | \\ |
| | !jarselection.png! |
| | \\ |
| | \\ |
| | After the libraries have been downloaded select the libraries you want to include in your project by checking the checkbox beside each library. Click Next> |
| | \\ |
| | \\ |
| | !jsfcapabilitiesafter.png! |
| | \\ |
| | \\ |
| | The next dialog is related to ICEfaces configurations. Accept the defaults and Click Finish: |
| | \\ |
| | \\ |
| | !icefacesconfigurations.png! |
| | \\ |
| | \\ |
| | The new project should show up in Project Explorer: |
| | \\ |
| | \\ |
| | !projectexplorer.png! |
| | \\ |
| | \\ |
| | ---- |
| | h3. {anchor:running}Running an ICEfaces Project |
| | |
| | We have created an ICEfaces/JSF 2 project in above steps. To run the ICEfaces project just created, |
| | Right click on the project in Project Explorer |
| | Select Debug As... -> Debug On Server |
| | Choose Tomcat 7 in Run On Server dialog if you have installed Tomcat 7 locally |
| | After clicking on the Finish button, Eclipse will launch the application in the browser you have selected under Window -> Web Browser: |
| | \\ |
| | \\ |
| | !runninginbrowser.png! |
| | \\ |
| | \\ |
| | ---- |
| | h3. {anchor:adding}Adding an ICEfaces Advanced (ACE) Component |
| | |
| | The Eclipse Visual JSF Page Designer has been added since Eclipse 3.3 as part of WTP 2.0. The Design Time Canvas provides an intuitive close-to-WYSIWIG editing experience. It allows you to visually manipulate JSF page layout and components using drag and drop. |
| | |
| | The ICEfaces plugin includes design time support for ICEfaces ACE Component and ICEfaces ICE Component. This includes the palette view and property view when opening your ICEfaces pages with the Web Page Editor. |
| | |
| | To open your page with the Web Page Editor: |
| | Right click on the ICEfaces xhtml page |
| | Select Open With -> Web Page Editor |
| | \\ |
| | \\ |
| | !webpageeditor1.png! |
| | \\ |
| | \\ |
| | You can select ICEfaces ACE Components and/or ICEfaces ICE components from the Palette. In this case we select a dateTimeEntry component from the ICEfaces ACE components: |
| | \\ |
| | Drag and Drop the component on to the Design Time Canvas. The component will automatically be rendered in the Design Time Canvas: |
| | \\ |
| | \\ |
| | !dropped1.png! |
| | \\ |
| | \\ |
| | Create a new Java class file called {{YourBean}} in the package {{org.icefaces.view}} and paste the code below: |
| | |
| | {code:title=PersonBean.java}package org.icefaces.view; |
| | |
| | import java.io.Serializable; |
| | import java.util.Date; |
| | |
| | import javax.faces.bean.ManagedBean; |
| | import javax.faces.bean.ViewScoped; |
| | |
| | import org.icefaces.ace.event.DateSelectEvent; |
| | |
| | @ManagedBean(name= "yourBean") |
| | @ViewScoped |
| | public class YourBean implements Serializable { |
| | |
| | private Date selectDateProperty = new Date(System.currentTimeMillis()); |
| | |
| | public Date getSelectDateProperty() { |
| | return selectDateProperty; |
| | } |
| | |
| | public void setSelectDateProperty(Date selectDateProperty) { |
| | this.selectDateProperty = selectDateProperty; |
| | } |
| | |
| | public void dateSelectListener(DateSelectEvent event) { |
| | setSelectDateProperty(event.getDate()); |
| | } |
| | } |
| | {code} |
| | This bean model has an instance variable to back the field on our page. The {{dateSelectListener}} method will set the instance variable to the value what was submitted, but otherwise the class is simple. |
| | \\ |
| | \\ |
| | We can now run the application and see the added component rendered out to the browser: |
| | \\ |
| | \\ |
| | !browserrendering.png! |
| | \\ |
| | \\ |
| | ---- |
Using ICEfaces Eclipse plugin (for 3.3.0_P01 and earlier versions).