0% found this document useful (0 votes)

230 views

JSF 2.0 Portlet Using PrimeFaces PDF

IBM DISCLAIMS ALL WARRANTIES, EITHER EXPRESS OR IMPLIED. Some jurisdictions do not allow for the exclusion or limitation of implied warranties. IBM shall not be liable for any damages you suffer as a result of using, modifying or distributing the sample program or its derivatives.

Uploaded by

colorado.rg

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

230 views

JSF 2.0 Portlet Using PrimeFaces PDF

Uploaded by

colorado.rg

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 58

Developing JSF 2.0 Portlet Applications using Primefaces with Rational Application Developer 8.

The sample program is provided to you on an "AS IS" basis, without warranty of any kind. IBM HEREBY EXPRESSLY DISCLAIMS ALL WARRANTIES, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. Some jurisdictions do not allow for the exclusion or limitation of implied warranties, so the above limitations or exclusions may not apply to you. IBM shall not be liable for any damages you suffer as a result of using, modifying or distributing the sample program or its derivatives.

Table of Contents
Abstract.....................................................................................................................................3 Overview...................................................................................................................................3 Sample application ...................................................................................................................3 Developing the sample application ...........................................................................................4 Creating a Faces Library Definition.......................................................................................4 Portlet Project and Portlet Creation.......................................................................................7 Developing Market Watch Portlet............................................................................................11 Creating scoped managed bean.........................................................................................11 Custom code specific to the application......................................................................16 Developing GUI using Primefaces widgets.........................................................................16 Developing Trading Portlet......................................................................................................19 Creating scoped managed bean.........................................................................................22 Custom code specific to the application......................................................................23 Custom code specific to the application......................................................................24 Developing GUI using Primefaces widgets.........................................................................25 Developing Portfolio Portlet.....................................................................................................33 Creating scoped managed bean.........................................................................................33 Custom code specific to the application......................................................................34 Custom code specific to the application......................................................................34 Developing GUI using Primefaces widgets.........................................................................35 Developing Watchlist portlet....................................................................................................37 Creating scoped managed bean.........................................................................................37 Custom code specific to the application......................................................................38 Custom code specific to the application......................................................................38 Developing GUI using Primefaces widgets.........................................................................38 Deploying application on WebSphere Portal server................................................................41 Executing the application on the server...................................................................................43 Market Watch Portlet...........................................................................................................43 Trading Portlet ....................................................................................................................44 Portfolio Portlet....................................................................................................................46 Watchlist Portlet..................................................................................................................46 Buy and Sell Operations.............................................................................................47 Buy Operation from Trading Portlet....................................................................47 Sell Operation from Trading Portlet....................................................................51 Watching operation from Trading portlet ....................................................................55 Removing transactions from Watchlist portlet.............................................................56 Conclusion...............................................................................................................................58 References..............................................................................................................................58
The sample program is provided to you on an "AS IS" basis, without warranty of any kind. IBM HEREBY EXPRESSLY DISCLAIMS ALL WARRANTIES, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. Some jurisdictions do not allow for the exclusion or limitation of implied warranties, so the above limitations or exclusions may not apply to you. IBM shall not be liable for any damages you suffer as a result of using, modifying or distributing the sample program or its derivatives.

Abstract
The article illustrates procedure to create and publish a JSF 2.0 portlet project on IBM WebSphere Portal v8.0 server using IBM Rational Application Developer. A sample Market Snapshot application, showcases the usage of JSF 2.0 features in a JSR 286 portlet application. Detailed instructions in the article shows some of the key JSF 2.0 features, such as Annotations, Ajax, and Resource Loading. The sample application that is developed in the article can be deployed on IBM WebSphere Portal version 8.0.

Overview
Java Server Faces(JSF) is a popular technology to build web applications these days. After combining the capabilities of JSF with IBM WebSphere Portal Server, then you get a combination which is hard to beat in the industry. Not only that, you still have the choice to customize your web application behavior by using features provided by a third party component libraries of JSF. This article discusses one such library Primefaces. It demonstrates how you can use an ensemble of these technologies to build a powerful and compelling web applications. Prerequisites 1. IBM Rational Application Developer version 8.5 2. IBM WebSphere Portal Server version 8.0 3. Primefaces version 3.0 component Java archive

Sample application
The Stock Market sample application is a JSF v2.0 based JSR 286 portlet application for a financial domain. The application comprises of four portlets: Market Watch This portlet displays latest market trends from different stock exchanges. It also shows intra-day graphs for the exchanges. Trading This portlet searches, buys, sells and adds stocks to the watchlist from different exchanges. Go to help mode of Trading portlet to check the list of stocks in the database. Portfolio This portlet displays portfolio stocks in an account. You can buy or sell the stocks from Portfolio portlet as well. Watchlist This portlet displays list of stocks that are on the watch list of an account. You can buy, sell, or remove the stocks from the watch list. This sample application leverages the JSF 2.0 features and demonstrates how the following technology features are consumed in the portlet application using intuitive tools available with IBM Rational Application Developer version 8.5 Ajax Annotations Composite components Implicit Navigation Resource loading Template

Developing the sample application

Creating a Faces Library Definition
To develop the sample application, first download the PrimeFaces component Java archive (JAR) file from the PrimeFaces Web site (http://primefaces.org/downloads.html), which is used as a third-party component library. Start by creating a Library Definitions Project to contain the library's configuration metadata. Select File > New > Project > Web > Library Definitions Project to display the Library Definitions Project wizard. 2. Enter the project a name (in this case, PrimeFaces Components), as shown in Figure 1. Click Finish. Figure 1. Create a Faces Definitions Project 1.

To create a library definition for the PrimeFaces library and examine its elements: Right-click the new project that you just created and select New > Faces Library Definition. Enter the new definition a name (for example, primefaces). 1. Click the browse button next to the Jar file field. Select the location of the JAR file that you downloaded from the Primefaces site, as shown in Figure 2. Click Finish.

Figure 2. Create a new Faces Library Definition

After a short time spent analyzing the PrimeFaces JAR file and generating files, the wizard completes and opens the new JLD configuration file (primefaces.jld) in the editor. When the portlet project created and facelet page opens in the editor, the new Primefaces drawer in the palette view, as shown in Figure 3.

Figure 3: Palette with primefaces components

Portlet Project and Portlet Creation

Now create a JSF 2.0 portlet project to see how the new component library integrates with the JSF tools. 1. Select File > New > Project > Portlet Project to display the project wizard. 2. Enter StockSample_Primefaces as the portlet project name. 3. In the Portlet settings group, Create a portlet check box is selected by default. Specify the portlet name as Market Watch. 4. Select WebSphere Portal v8.0 as the Target Runtime, as shown in Figure 4.

Figure 4: Portlet Project Creation Wizard

5. Click Modify button beside Configuration to display the Portlet Project Configuration wizard. 6. Select JSR 286 API and Faces as the Portlet Type, as shown in Figure 5. Click OK.

Figure 5: Select Portlet API and type

7. Click Finish. When prompted, switch to the Web perspective. A portlet project and the corresponding EAR are created, and it appears in the Enterprise Explorer view. 8. Given that the sample application covers four portlets. The next step is to add rest of the portlets to the portlet application. To add portlets to the portlet project: Right-click the portlet deployment descriptor node and select New > Portlet. Enter the portlet name as Trading, and click Finish. Repeat these steps to add the other two portlets: Portfolio and Watchlist.

9. Create following folder structure and copy all images, JavaScript and CSS files (copy the files from the WebContent\resources folder in the sample attached with this article) to the folders respectively, as shown in Figure 7: WebContent\resources\img WebContent\resources\js WebContent\resources\style

Figure 7: Location of image, js and css files

In this application, you will use EXtensible Markup Language (XML), which is in lightweight interchange format, and presents data which is easy to parse and is in human readable form. The data provided by the XML file is copied to the data table. Copy the following XML files (from the WebContent folder in the attached sample) to the WebContent folder of the project. exchange.xml trading.xml portfolio.xml watchlist.xml

Developing Market Watch Portlet

This portlet shows the trends for different exchanges and has an intra-day graph. It also shows the details of the various exchanges in a tabular form. Thus, creates a managed bean with the properties for the columns shown in the table.

Creating scoped managed bean

Steps below illustrate the creation of managed bean using annotations in Rational Application Developer. 1. Create a Java class using New->Class from the context menu of Java Resources in the portlet project as shown in Figure 8. Give the name as Exchange.

Figure 8: Create a Managed Bean

Add the following annotations to the class, which define this class as a request scoped managed bean. The request scope managed bean must implement Serializable interface, as shown in Code Snippet 1:

Code Snippet 1 import java.io.Serializable; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean(name="exchange") @RequestScoped public class Exchange implements Serializable { 3. Now add the class variables and constants for the managed bean, as shown in Code Snippet 2:

Code Snippet 2 private private private private private private private private String name; float lastPrice; String change; String percentChange; static static static static final final final final String String String String RED_COLOUR = "#FF0000"; GREEN_COLOUR = "#006400"; UP_ARROW = "arrow_up_green.gif"; DOWN_ARROW = "arrow_down_red.gif";

Right-click in the file and select Source->Generate Getters and Setters, to generate the getters and setters, as shown in Figure 9.

Figure 9: Generate Getters and Setters

Right-click in the file and select Source->Generate Constructor using Fields to generate the constructor with fields for managed bean, as shown in Figure 10.

Figure 10: Generate Constructor using Fields

Custom code specific to the application

To customize the portlets and add exchange specific display to the Stock application, add the following methods: 1. 2. 3. 4. Add getPercentChangeFontColor(), getImage() methods in the managed bean class, that is Exchange.java, which is needed to get the color of the arrow showing the trends, font color based on profit and loss in the change column. See Exchange.java (in the attached sample) for the details of this method. Similarly create another annotated managed bean and specify the name as ExchangeList. Add annotations to the class, as shown in Code Snippet 1. Give managed bean name as exchangeList. Add the following variables in the ExchangeList.java file, as shown in Code Snippet 3:

Code Snippet 3 private ArrayList<Exchange> exchange; private CartesianChartModel linearModel; private static final String EXCHANGE_FILE = "/exchange.xml"; 5. Add getExchange(), setStocks(), getLinearModel(), setLinearModel(), updateLinearModel() methods in ExchangeList.java to display the default and updated values in the lineChart. See the ExchangeList.java file (in the attached sample) for the details of these methods. Add parseXML()method to read the sample data from the XML file. See the ExchangeList.java file (in the attached sample) for the details of this method.

Developing GUI using Primefaces widgets

1. Open the MarketWatchView.xhtml file and drag lineChart item from the primefaces drawer of the Palette view onto the facelet (MarketWatchView.xhtml) file. A dialog box appears asking to copy new project resources. 2. Click OK to add Primefaces into the portlet project. Note that the lineChart tag is added to the page. 3. Right-click the linechart and select Properties. Specify the value of the linechart by clicking the browse button in the value field. Select #{exchangeList.linearModel} as value of the linechart, as shown in Figure 11:

Figure 11: lineChart Properties

The linechart tag is as shown in Code Snippet 4: Code Snippet 4 <primefaces:lineChart styleClass="lineChart" id="lineChartRenderer1" value="#{exchangeList.linearModel}" legendPosition="e" style="width: 435px;height:300px"></primefaces:lineChart> 4. Drag the item dataTable from Primefaces drawer of the Palette (MarketWatchView.xhtml) file, and add columns as shown in Code Snippet 5: Code Snippet 5 <primefaces:dataTable id="dataTableRenderer1" var="exchange" value="#{exchangeList.exchange}" style="width: 435px"> <primefaces:column styleClass="column" id="column1" headerText="Exchange"> <primefaces:commandLink styleClass="commandLink" id="commandLinkRenderer1" style="font-weight: bold" update=":subview1:form1:chart1" actionListener="#{exchangeList.updateLinearModel}" value="#{exchange.name}"> <f:param name="name" value="#{exchange.name}"></f:param> </primefaces:commandLink> </primefaces:column> view onto the facelet

</primefaces:dataTable>

5. Drag column item from the primefaces drawer of the Palette view onto the facelet (MarketWatchView.xhtml) file to add columns - Last Index, Change, and % Change, as shown in Code Snippet 6: Code Snippet 6 <primefaces:column styleClass="column" id="column2" headerText="Last Index"> <h:outputText styleClass="outputText" id="text1" value="#{exchange.lastPrice}" style="float: right;color: #{exchange.percentChangeFontColor}"></h:outputText> </primefaces:column> <primefaces:column styleClass="column" id="column3" headerText="Change"> <primefaces:graphicImage styleClass="graphicImage" id="graphicImageRenderer1" value="/resources/img/#{exchange.image}" style="float: right"></primefaces:graphicImage> <h:outputText styleClass="outputText" id="text2" value="#{exchange.change}" style="float: right;color:#{exchange.percentChangeFontColor}"></h:outputText> </primefaces:column> <primefaces:column styleClass="column" id="column4" headerText="% Change"> <h:outputText styleClass="outputText" id="text3" value="#{exchange.percentChange}%" style="float: right;color: #{exchange.percentChangeFontColor}"></h:outputText> </primefaces:column>

Developing Trading Portlet

This portlet is used to get the quotes for the stocks. 1. 2. 3. Select New->Web Page from the context menu of the portlet project. Select Portlet Facelet in New Web Page wizard. Enter the File Name as template as shown in Figure 12. Click Finish.

Figure 12: New Web Page Wizard to add template

Drag the Insert from the Facelet drawer of the Palette view onto the facelet (template.xhtml) file. Enter the name as bodyarea for the insert tag in the Properties view as shown in Figure 13:

Figure 13: Template Page

Select New->Web Page from the context menu of the portlet project and click Options and create a new portlet facelet page with the template you created.

Select Portlet Facelet in New Web Page Options wizard and select Set as initial page. Click Close, as shown in Figure 14.

Figure 14: New Web Page Options

Select template.xhtml file from MyTemplates. Click Finish, as shown in Figure 15:

Figure 15: TradingPortletView Page

Creating scoped managed bean

1. 2. 3. Create a Java class as shown in Figure 8. Specify the name as TradingService. Add annotations to the class, as shown in Code Snippet 1. Give managed bean name as tradingService. Add the class variables and constants for the managed bean, as shown in Code Snippet 7:

Code Snippet 7 @ManagedProperty(value = "#{param.exchangename}") private String exchangename; @ManagedProperty(value = "#{param.stockname}") private String stockname; @ManagedProperty(value = "#{param.portletname}") private String portletname; private private private private String String String String lastPrice; percentChange; dataExists = "hidden"; message;

private static final String PORTFOLIO_FILE = "/portfolio.xml"; private static final String TRADING_FILE = "/trading.xml"; private static final String WATCHLIST_FILE = "/watchlist.xml"; 4. Right-click in file and select Source->Generate Getters and Setters. to generate the getters and setters for the added classes, as shown in Figure 9.

Custom code specific to the application

To customize the portlets and add trading specific service to the Stock application, add the following methods. See the TradingService.java (in the attached sample) for the details about the added methods. 1. 2. 3. 4. 5. 6. 7. 8. Add getQuotes(), getSelectedStock() methods to get the data for the selected stock. See Add buyPage(), sellPage(), goBack() methods to navigate to Buy and Sell page respectively. Add buyStock() method to buy the stock and add details of that stock in XML file. Similarly add sellStock() method to sell the stock and update details of that stock in XML file. Now add addToWatch() method to add the selected stocks in your watchlist. Create a Java class as shown in Figure 8. Specify the name as StockBean. Add annotations to the class, as shown in Code Snippet 1. Give managed bean name as stockBean. Now add the class variables for the managed bean, as shown in Code Snippet 8:

Code Snippet 8 private private private private String String String String exchangename; stockname; lastPrice; percentChange;

Right-click in the file and select Source->Generate Getters and Setters, to generate the getters and setters, as shown in Figure 9. 10. Right-click in the file and select Source->Generate Constructor using Fields to generate the constructor with fields for managed bean, as shown in Figure 10. See the code generated in Code Snippet 9:

Code Snippet 9 public StockBean(String exchangename, String stockname, String lastPrice, String percentChange) { this.exchangename = exchangename; this.stockname = stockname; this.lastPrice = lastPrice; this.percentChange = percentChange; } 11. Add getImage(), getPercentChangeFontColor() methods in the managed bean class that is, StockBean.java, needed to get the color of the arrow showing the trends, font color based on profit and loss in the % change and last price columns. See StockBean.java (in the attached sample) for the details of this method. 12. Create a Java class as shown in Figure 8. Specify the name as BuySellBean. 13. Add annotations to the class, as shown in Code Snippet 1. Give managed bean name as buySellBean. 14. Now add the class variables for the managed bean, as shown in Code Snippet 10: Code Snippet 10 @ManagedProperty(value = "#{param.exchangename}") private String exchangename; @ManagedProperty(value = "#{param.stockname}") private String stockname; @ManagedProperty(value = "#{param.price}") private String price; @ManagedProperty(value = "#{param.quantity}") private String quantity; @ManagedProperty(value = "#{param.portletname}") private String portletname; private String visibility = "visible"; 15. Right-click in the file and select Source->Generate Getters and Setters to generate the getters and setters as shown in Figure 9.

Custom code specific to the application

To customize the portlets and add stock trade confirmation services to the Stock application, add buyConfirmPage(), sellConfirmPage() methods to navigate to the confirmation page of buy and sell operations. See BuySellBean.java (in the attached sample) for the details of this method.

Developing GUI using Primefaces widgets

In this application composite component helps to display faces messages in the page. You can add the composite component to different pages, wherever these messages are required. To add composite components: 1. 2. Create a Facelet composite page, and name it as message.xhtml, as shown in Figure 12. Drag Output from the Standard Faces Components drawer of the Palette view onto the facelet(message.xhtml), and set the properties as shown in Figure 16:

Figure 16: Properties view Facelet Composite

Open the TradingPortletView.xhtml file, and insert the composite component. Drag message from the Facelet Composites drawer of the Palette view onto the facelet, as shown in Figure 17:

Figure 17: Facelet Composite in palette

Drag Output from Standard Faces Components drawer of the Palette view onto the facelet (TradingPortletView.xhtml) and set the properties, as shown in Figure 18:

Figure 18: Properties view output text

Drag Panel Grid from Standard Faces Components drawer of the Palette view onto the facelet (TradingPortletView.xhtml) and set the properties, as shown in Figure 19:

Figure 19: Panel Grid

6. 7.

Drag Label from Standard Faces Components drawer of the Palette view inside panel grid onto the facelet (TradingPortletView.xhtml) and name it as Exchange. Drag selectOneMenu from primefaces drawer of the Palette view inside panel grid onto the facelet (TradingPortletView.xhtml). Set the choices and the Value. It is needed to view the list of exchanges, to select from, as shown in Code Snippet 11:

Code Snippet 11 <h:outputLabel value="Exchange: " styleClass="outputLabel" id="label1" for="selectOneMenuRenderer1" style="font-weight: bold; font-size: small"></h:outputLabel> <primefaces:selectOneMenu styleClass="selectOneMenu" id="selectOneMenuRenderer1" value="#{tradingService.exchangename}"> <f:selectItem itemLabel="SAUAGA" itemValue="SAUAGA" id="selectItem1" <f:selectItem itemLabel="JASSIN" itemValue="JASSIN" id="selectItem2" <f:selectItem itemLabel="MANANE" itemValue="MANANE" id="selectItem3" <f:selectItem itemLabel="MANGAB" itemValue="MANGAB" id="selectItem4" <f:selectItem itemLabel="MEGKUC" itemValue="MEGKUC" id="selectItem5" </primefaces:selectOneMenu>

/> /> /> /> />

Drag Label named Stock: from Standard Faces Components drawer of the Palette view onto the facelet (TradingPortletView.xhtml) and add a inputText from primefaces drawer under the Palette view with the properties set as shown in Figure 20:

Figure 20: TradingService stockname properties

Drag commandButton, next to Stock to get the quote based on the stock entered. Set the actionListener of the commandButton to the getQuotes method, as shown in Figure 21:

Figure 21: Command Button Properties view

10. Drag dataTable item from the primefaces drawer of the Palette (TradingPortletView.xhtml), and add the columns as shown in Code Snippet 12: Code Snippet 12

view

onto

the

facelet

<primefaces:dataTable id="dataTableRenderer1" var="stock" value="#{tradingService.selectedStock}" style="margin-left: 5px; width: 450px; visibility: #{tradingService.dataExists}"> <primefaces:column styleClass="column" id="column1" headerText="Name"> <h:outputText styleClass="outputText" id="text2" value="#{stock.stockname}"></h:outputText> </primefaces:column> </primefaces:dataTable> 11. Drag column item from the primefaces drawer of the Palette view onto the facelet (TradingPortletView.xhtml) file to add columns - Last Price and % Change, as shown in Code Snippet 13: Code Snippet 13 <primefaces:column styleClass="column" id="column2" headerText="% Change"> <h:outputText styleClass="outputText" id="text3" value="#{stock.percentChange}%" style="float: right;color:#{stock.percentChangeFontColor}"></h:outputText> </primefaces:column> <primefaces:column styleClass="column" id="column3" headerText="Last Price"> <primefaces:graphicImage id="graphicImageRenderer1" value="/resources/img/#{stock.image}" style="float: right"></primefaces:graphicImage> <h:outputText styleClass="outputText" id="text4" value="#{stock.lastPrice}" style="float: right;color:#{stock.percentChangeFontColor}"></h:outputText> </primefaces:column> 12. Add three columns to the data table with command links to buy, sell, and watch the stocks, as shown in Code Snippet 14: Code Snippet 14 <primefaces:column styleClass="column" id="column4" headerText=" "> <primefaces:commandLink styleClass="commandLink" id="commandLinkRenderer1" ajax="false" style="float: right;font-weight: bold" action="#{tradingService.buyPage}" value="Buy"> <f:param name="exchangename" value="#{stock.exchangename}"></f:param> <f:param name="stockname" value="#{stock.stockname}"></f:param> <f:param name="portletname" value="trading"></f:param> </primefaces:commandLink> </primefaces:column> <primefaces:column styleClass="column" id="column5" headerText=" ">

<primefaces:commandLink styleClass="commandLink" id="commandLinkRenderer2" ajax="false" style="float: left;font-weight: bold" action="#{tradingService.sellPage}" value="Sell"> <f:param name="exchangename" value="#{stock.exchangename}"></f:param> <f:param name="stockname" value="#{stock.stockname}"></f:param> <f:param name="portletname" value="trading"></f:param> </primefaces:commandLink> </primefaces:column> <primefaces:column styleClass="column" id="column6" headerText=" "> <primefaces:commandLink styleClass="commandLink" id="commandLinkRenderer3" ajax="false" style="float: left;font-weight: bold" action="#{tradingService.addToWatch}" value="Watch"> <f:param name="exchangename" value="#{stock.exchangename}"></f:param> <f:param name="stockname" value="#{stock.stockname}"></f:param> </primefaces:commandLink> </primefaces:column>

13. Add Help mode to display the list of stock and exchange names that are used to get the quotes in the TradingPortletView page. For this, create a Portlet Facelet page name as TradingHelp.xhtml, as shown in Figure 12. 14. Add content same as shown in the Figure 22. See the sample for details of this page. Figure 22: Trading Help page content

15. Add a parameter init-param to the Initialization section under the Portlets tab for Trading portlet as shown in Figure 23: Figure 23: Portlet tab Initialization section

Developing Portfolio Portlet

The Portfolio portlet displays the stocks in a trading account portfolio, that is the list of the stocks that are bought. Create a managed bean for the Portfolio portlet to hold the required data.

Creating scoped managed bean

1. 2. 3. Create a Java class as shown in Figure 8. Give the name as Portfolio. Add annotations to the class, as shown in Code Snippet 1. Give managed bean name as portfolio. Now add the class variables and constants for the managed bean, as shown in Code Snippet 15:

Code Snippet 15 private private private private private private private private private 4. 5. String String String String String static static static static exchangename; stockname; buyPrice; currentPrice; quantity; final final final final String String String String RED_COLOUR = "#FF0000"; GREEN_COLOUR = "#006400"; UP_ARROW = "arrow_up_green.gif"; DOWN_ARROW = "arrow_down_red.gif";

Right-click in the file and select Source->Generate Getters and Setters, to generate the getters and setters, as shown in Figure 9. Right-click in the file and select Source->Generate Constructor using Fields to generate the constructor with fields for managed bean, as shown in Figure 10.

Custom code specific to the application

To customize the portlets and add trading specific status services to the Stock application, add the following methods. 1. Add getStatusImage(), getFontColor(), getMarketValue(), getStatus() methods in the managed bean class that is, Portfolio.java, which is needed to get the color of the arrow showing the trends, font color based on profit and loss in the Profit/Loss column. See Portfolio.java (in the attached sample) for the details of these methods. 2. Similarly create another annotated managed bean and specify the name as PortfolioList. 3. Add annotations to the class, as shown in Code Snippet 1. Give managed bean name as portfolioList. 4. Add the following variables in PortfolioList.java, as shown in Code Snippet 16: Code Snippet 16 private private private private ArrayList<Portfolio> stocks; ArrayList<Portfolio> filteredStocks; String selectedView; static final String PORTFOLIO_FILE = "/portfolio.xml";

Custom code specific to the application

To customize the portlets and add portfolio specifics service to the Stock application, add the following methods. See the PortfolioList.java (in the attached sample) for the details about the added methods. 1. Add updateValue(), getFilteredStocks() methods which are needed to filter the stock data. 2. Add parseXML(), checkPortfolioData() methods which are needed to read the data from the XML file.

Developing GUI using Primefaces widgets

1. Open the PortfolioView.xml file and drag a Panel-Grid item from the Standard Faces Components drawer onto the facelet (PortfolioView.xhtml), as shown in Code snippet 17:

Code Snippet 17 <h:panelGrid styleClass="panelGrid" id="grid1" columns="2"></h:panelGrid> 2. Drag Label from the Standard Faces Components drawer of the Palette view inside panel grid onto the facelet (PortfolioView.xhtml). Specify the value as Select View: Following tag would be added in facelet, as shown in Code snippet 18:

Code Snippet 18 <h:outputLabel styleClass="outputLabel" value="Select View: " id="label1" for="selectOneMenuRenderer1" style="font-weight: bold; font-size: small"></h:outputLabel> 3. Drag selectOneMenu from primefaces drawer of the Palette view inside panel grid onto the facelet (PortfolioView.xhtml). Set the choices and the Value. This is needed to view the filtered data of stocks based on profit and loss, as shown in Code Snippet 19:

Code Snippet 19 <primefaces:selectOneMenu styleClass="selectOneMenu" id="selectOneMenuRenderer1" value="#{portfolioList.selectedView}" valueChangeListener="#{portfolioList.updateValue}"> <f:selectItem itemLabel="All" itemValue="All" id="selectItem1" /> <f:selectItem itemLabel="Profit" itemValue="Profit" id="selectItem2" /> <f:selectItem itemLabel="Loss" itemValue="Loss" id="selectItem3" /> <primefaces:ajax event="change" update="dataTableRenderer1" process="form1" /> </primefaces:selectOneMenu> 4. Drag dataTable item from the primefaces drawer of the Palette view onto the facelet (PortfolioView.xhtml) and add the columns, as shown in Code Snippet 20:

Code Snippet 20 <primefaces:dataTable id="dataTableRenderer1" var="stock" value="#{portfolioList.filteredStocks}" style="width: 700px;margin-left:3px"> <primefaces:column styleClass="column" id="column1" headerText="Exchange"> The sample program is provided to you on an "AS IS" basis, without warranty of any kind. IBM HEREBY EXPRESSLY DISCLAIMS ALL WARRANTIES, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. Some jurisdictions do not allow for the exclusion or limitation of implied warranties, so the above limitations or exclusions may not apply to you. IBM shall not be liable for any damages you suffer as a result of using, modifying or distributing the sample program or its derivatives.

<h:outputText styleClass="outputText" id="text1" value="#{stock.exchangename}"></h:outputText> </primefaces:column> </primefaces:dataTable> 5. Drag column item from the primefaces drawer of the Palette view onto the facelet (PortfolioView.xhtml) file to add columns - Name, Buy Price, Current Price, Quantity, Market Value and Pofit/Loss, as shown in Code Snippet 21:

Code Snippet 21 <primefaces:column styleClass="column" id="column2" headerText="Name"> <h:outputText styleClass="outputText" id="text2" value="#{stock.stockname}"></h:outputText> </primefaces:column> <primefaces:column styleClass="column" id="column3" headerText="Buy Price"> <h:outputText styleClass="outputText" id="text3" style="float: right" value="#{stock.buyPrice}"></h:outputText> </primefaces:column> <primefaces:column styleClass="column" id="column4" headerText="Current Price"> <h:outputText styleClass="outputText" id="text4" style="float: right" value="#{stock.currentPrice}"></h:outputText> </primefaces:column> <primefaces:column styleClass="column" id="column5" headerText="Quantity"> <h:outputText styleClass="outputText" id="text5" style="float: right" value="#{stock.quantity}"></h:outputText> </primefaces:column> <primefaces:column styleClass="column" id="column6" headerText="Market Value"> <h:outputText styleClass="outputText" id="text6" style="float: right" value="#{stock.marketValue}"></h:outputText> </primefaces:column> <primefaces:column styleClass="column" id="column7" headerText="Profit/Loss"> <primefaces:graphicImage styleClass="graphicImage" id="graphicImageRenderer1" value="/resources/img/#{stock.statusImage}" style="float: right"></primefaces:graphicImage> <h:outputText styleClass="outputText" id="text7" style="float: right;color: #{stock.fontColor}" value="#{stock.status}"></h:outputText> </primefaces:column> 6. Add 2 more columns to the data table with command links to buy and sell the stocks, as shown in Code Snippet 22:

Code Snippet 22 <primefaces:column styleClass="column" id="column8" headerText=" "> <primefaces:commandLink styleClass="commandLink" id="commandLinkRenderer2" ajax="false" style="float: right;font-weight: bold" action="#{tradingService.buyPage}" value="Buy"> <f:param name="exchangename" value="#{stock.exchangename}"></f:param> <f:param name="stockname" value="#{stock.stockname}"></f:param> The sample program is provided to you on an "AS IS" basis, without warranty of any kind. IBM HEREBY EXPRESSLY DISCLAIMS ALL WARRANTIES, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. Some jurisdictions do not allow for the exclusion or limitation of implied warranties, so the above limitations or exclusions may not apply to you. IBM shall not be liable for any damages you suffer as a result of using, modifying or distributing the sample program or its derivatives.

<f:param name="portletname" value="portfolio"></f:param> </primefaces:commandLink> </primefaces:column> <primefaces:column styleClass="column" id="column9" headerText=" "> <primefaces:commandLink styleClass="commandLink" id="commandLinkRenderer3" ajax="false" style="float: left;font-weight: bold" action="#{tradingService.sellPage}" value="Sell"> <f:param name="exchangename" value="#{stock.exchangename}"></f:param> <f:param name="stockname" value="#{stock.stockname}"></f:param> <f:param name="portletname" value="portfolio"></f:param> </primefaces:commandLink> </primefaces:column>

Developing Watchlist portlet

The Watchlist portlet displays a list of stocks that are on the watch list of a trading account. You can buy or sell these stocks, or remove them from the watch list.

Creating scoped managed bean

1. 2. 3. Create a Java class as shown in Figure 8. and name it as Watch. Add annotations to the class, as shown in Code Snippet 1, and name the managed bean as watch. Add the class variables and constants for the managed bean, as shown in Code Snippet 23:

Code Snippet 23 private private private private private private private private 4. 5. String exchangename; String stockname; float lastPrice; String percentChange; static static static static final final final final String String String String RED_COLOUR = "#FF0000"; GREEN_COLOUR = "#006400"; UP_ARROW = "arrow_up_green.gif"; DOWN_ARROW = "arrow_down_red.gif";

Right-click in the file and select Source->Generate Getters and Setters to generate the getters and setters for added class, as shown in Figure 9. Right-click in the file and select Source->Generate Constructor using Fields to generate the constructor with fields for managed bean, as shown in Figure 10.

Custom code specific to the application

To customize the portlets and add watch list specific display to the Stock application, add the following methods: 1. Add getImage(), getPercentChangeFontColor() methods in the managed bean class that is Watch.java, which is needed to get the color of the arrow showing the trends, font color based on profit and loss in the last price column. See Watch.java (in the attached sample) for the details of this method.

2. 3. 4.

Similarly create another annotated managed bean and specify the name as WatchList. Add annotations to the class, as shown in Code Snippet 1, and name the managed bean as watchList. Add the following variables in WatchList.java, as shown in Code Snippet 24:

Code Snippet 24 private private private private private private ArrayList<Watch> stocks; static final String WATCHLIST_FILE = "/watchlist.xml"; static Boolean ascendingExchange; static Boolean ascendingStock; static Boolean ascendingPercentChange; boolean deleteAction = false;

Custom code specific to the application

To customize the portlets and add watch list specific display to the Stock application, add the following methods. See the WatchList.java (in the attached sample) for the details about the added methods. 1. 2. 3. Add sortByExchangeName(), sortByStockName(), sortByPercentChange() methods in WatchList.java to sort the columns of the dataTable. Add parseXML() method to read the sample data from the XML file. Add deleteStock() method to remove the selected stock from the watchlist portlet.

Developing GUI using Primefaces widgets

1. Open WatchlistView.xhtml and drag and drop dataTable under primefaces section of the Palette view in the facelet (WatchlistView.xhtml) and add the columns, as shown in Code Snippet 25:

Code Snippet 25 <primefaces:dataTable id="dataTableRenderer1" var="stock" value="#{watchList.stocks}" style="width: 500px"> <primefaces:column id="column1" styleClass="column"> <f:facet name="header"> <primefaces:commandLink styleClass="commandLink" value="Exchange" style="font-size: small; float: left" update="dataTableRenderer1" actionListener="#{watchList.sortByExchangeName}"> </primefaces:commandLink> </f:facet> <h:outputText id="text1" value="#{stock.exchangename}"></h:outputText> </primefaces:column> </primefaces:dataTable>

Drag column item from the primefaces drawer of the Palette view onto the facelet (WatchlistView.xhtml) file to add columns - Name, Last Price and % Change, as shown in Code Snippet 26:

Code Snippet 26 <primefaces:column id="column2" styleClass="column"> <f:facet name="header"> <primefaces:commandLink styleClass="commandLink" value="Name" style="font-size: small; float: left" update="dataTableRenderer1" actionListener="#{watchList.sortByStockName}"> </primefaces:commandLink> </f:facet> <h:outputText id="text2" value="#{stock.stockname}"></h:outputText> </primefaces:column> <primefaces:column id="column3" styleClass="column"> <f:facet name="header"> <h:outputText value="Last Price" styleClass="outputText" style="font-size: small; float: right"></h:outputText> </f:facet> <primefaces:graphicImage id="graphicImageRenderer1" value="/resources/img/#{stock.image}" style="float: right"></primefaces:graphicImage> <h:outputText id="text3" value="#{stock.lastPrice}" style="float: right;color:#{stock.percentChangeFontColor}"></h:outputText> </primefaces:column> <primefaces:column id="column4" styleClass="column"> <f:facet name="header"> <primefaces:commandLink styleClass="commandLink" value="% Change" style="font-size: small; float: right" update="dataTableRenderer1" actionListener="#{watchList.sortByPercentChange}"> </primefaces:commandLink> </f:facet> <h:outputText id="text4" style="float: right;color:#{stock.percentChangeFontColor}" value="#{stock.percentChange} %"></h:outputText> </primefaces:column>

Add 3 more columns to the data table with command links which enable the user to buy, sell and unwatch the stocks, as shown in Code Snippet 27:

Code Snippet 27 <primefaces:column id="column5" headerText=" " styleClass="column"> <primefaces:commandLink id="commandLinkRenderer2" ajax="false" style="float: right;font-weight: bold" styleClass="commandLink" action="#{tradingService.buyPage}" value="Buy"> <f:param name="exchangename" value="#{stock.exchangename}"></f:param> <f:param name="stockname" value="#{stock.stockname}"></f:param> <f:param name="portletname" value="watchlist"></f:param> </primefaces:commandLink> The sample program is provided to you on an "AS IS" basis, without warranty of any kind. IBM HEREBY EXPRESSLY DISCLAIMS ALL WARRANTIES, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. Some jurisdictions do not allow for the exclusion or limitation of implied warranties, so the above limitations or exclusions may not apply to you. IBM shall not be liable for any damages you suffer as a result of using, modifying or distributing the sample program or its derivatives.

</primefaces:column> <primefaces:column id="column6" headerText=" " styleClass="column"> <primefaces:commandLink id="commandLinkRenderer3" ajax="false" style="float: left;font-weight: bold" styleClass="commandLink" action="#{tradingService.sellPage}" value="Sell"> <f:param name="exchangename" value="#{stock.exchangename}"></f:param> <f:param name="stockname" value="#{stock.stockname}"></f:param> <f:param name="portletname" value="watchlist"></f:param> </primefaces:commandLink> </primefaces:column> <primefaces:column id="column7" headerText=" " styleClass="column"> <primefaces:commandLink id="commandLinkRenderer4" styleClass="commandLink" update="dataTableRenderer1" style="float: left;font-weight: bold" actionListener="#{watchList.deleteStock}" value="Unwatch"> <f:param name="exchangename" value="#{stock.exchangename}"></f:param> <f:param name="stockname" value="#{stock.stockname}"></f:param> </primefaces:commandLink> </primefaces:column> Similarly, create the following portlet facelets for buying and selling stocks, as shown in Figure 12. See sample code for details of these pages. Buy.xhtml BuyConfirm.xhtml BuySuccess.xhtml Sell.xhtml SellConfirm.xhtml SellError.xhtml SellSuccess.xhtml

Deploying application on WebSphere Portal server

To deploy the Stock sample application: 1. Right-click on portlet project and select Deploy Portlet.,Deploy Portlet wizard displays, as shown in Figure 24:

Figure 24: Deploy Portlet Wizard

2. 3. 4. 5.

Select WebSphere Portal Server v8.0 and click Finish. Right-click on server instance in the Server view and select Open Portal. Click Administration. Select Manage Pages and click on Content Root. Click the New Label and enter the title as Bank Home and Friendly URL name as bankhome and click OK. 6. Click the Bank Home label and create a new label title as Investments and Friendly URL name as investments and click OK. 7. Select Investments and click New Page. Create four pages as: First Page Name the title of the page as Markets Overview and Friendly URL name as marketwatch. Second Page Name the titleof the page as My Trading and Friendly URL name as trading. Third Page Name the title of the page as Portfolio and Friendly URL name as portfolio. Fourth Page Name the title of the page as Watchlist and Friendly URL name as watchlist.

Select Edit Page Layout as shown in Figure 25 to add the following portlets deployed in step 3 to the corresponding pages: For the first page, select the Market Watch portlet.

Figure 25: Edit Page Layout

For the second page, select the Trading portlet. For the third page, select the Portfolio portlet. For the fourth page, select the Watchlist portlet. 9. Click Bank Home from the Menu bar and click Edit Mode. 10. Select Layout tab, select 1 column, click Save, and then go back to View Mode. Repeat the steps for My Trading, Portfolio and Watchlist pages also.

Executing the application on the server

Market Watch Portlet
Markets Overview page contains the Market Watch portlet to view the latest market trends. To see the graphs for different exchanges, click on any Exchange link. For example.: click JASSIN as shown in Figure 26: Figure 26: Market Watch Portlet

NOTE: In this sample application the GREEN (upward arrow) color is used to show the upward trend of a stock

and the RED (downward arrow) color is used to show the downward trend on any trading day. The green color depicts that the stock gained points from its last trading day, and the red color depicts that it lost points.

Trading Portlet
Select any Exchange from the select box, enter stock name and click Get Quotes. A data table will display the information about that stock as shown in Figure 27: Figure 27: Trading Portlet

Figure 28: Trading Portlet View

On top of the portlet, a message is displayed "Go to Help mode for the sample input value." Go to Help mode to check all the stocks that are available in database as shown in Figure 29: Figure 29: Help mode of Trading Portlet

Portfolio Portlet
The Portfolio portlet displays a data table to show the existing stocks in a portfolio. Any stock that you buy, it automatically show up in the portfolio. Similarly, any stock that you sells from the portfolio, is removed as shown in Figure 30: Figure 30: Portfolio Portlet

Watchlist Portlet
The Watchlist portlet displays a data table of stocks that are monitored regularly. Any stock that you select from the trading portlet by clicking Watch link, it is automatically added to the watch list. You can buy, sell, and remove stocks from the watch list, as shown in Figure 31: Figure 31: WatchList Portlet

Buy and Sell Operations

Buy and Sell operations are performed from the following three portlets: Trading Portlet Portfolio Portlet Watchlist Portlet

Buy and Sell operation procedure is same from all the three portlets.

Buy Operation from Trading Portlet

1. Select an Exchange and enter the stock name, and click Get Quotes. A data table displays information about the stock. Click Buy link next to the stock you want to buy, as shown in Figure 32:

Figure 32: Buy operation in Trading portlet

A page opens with Exchange name and Stock name. Enter the price and quantity and click Submit, as shown in Figure 33:

Figure 33: Buy stocks page in Trading portlet

A confirmation page displays the details of the transactions. Click Confirm to execute the buy operation as shown in Figure 34:

Figure 34: Confirmation page

A page with a message, for example. 15 shares of MASSAU successfully bought at 2400 price displays, as shown in Figure 35:

Figure 35: Success Page

Sell Operation from Trading Portlet

1. Select an Exchange enter the stock name, and click Get Quotes. A data table displays information the stock. Click Sell link next to the stock you want to sell as shown in Figure 36:

Figure 36: Sell operation in Trading portlet

A page opens with Exchange name and Stock name. Enter the price and quantity and click Submit, as shown in Figure 37:

Figure 37: Stock Sell page in Trading portlet

If selected stock doesnt exist in your Portfolio, an error page is displayed with a message You cannot sell this stock as it does not exist in your portfolio as shown in Figure 38:

Figure 38: Sell operation in Trading portlet

If selected stock exists in your portfolio, a confirmation page displays the details of the transactions. Click Confirm to execute the sell operation as shown in Figure 39:

Figure 39: Sell operation confirmation page in Trading portlet

A page with a message, for example, 15 shares of JASSAU successfully sold at 2000 price. displays, as shown in Figure 40:

Figure 40: Sell operation in Trading portlet

Watching operation from Trading portlet

1. Select any Exchange and enter the stock name and click Get Quotes. A data table is displayed with information about that stock as shown in Figure 41:

Figure 41: Watch operation in Trading portlet

Click Watch to add the selected stock to the Watchlist portlet as shown in Figure 42:

Figure 42: Watch operation in Trading portlet

Removing transactions from Watchlist portlet

1. To remove a stock from the Watchlist portlet, click on Unwatch. as shown in Figure 43:

Figure 43: Remove transaction in Trading portlet

The stock is removed from the Watchlist portlet as shown in Figure 44:

Figure 44: WatchList portlet

Conclusion
In this article you not only saw the power of JSF and portlets working together, but also learnt how Rational Application Developer v8.5 makes it easy to configure and leverage a third party library like Primefaces. This library adds more richness and functionality to basic JSF widgets. JSF portal applications are significant as they bring together best of both worlds.

References
IBM Webphere Portal Server 8.0
http://www-01.ibm.com/support/docview.wss?uid=swg27007791 http://www-01.ibm.com/support/docview.wss?uid=swg24032855. http://www.primefaces.org

Rational Application Developer for WebSphere Software 8.5 Primefaces JSF component suite.

IBM WebSphere Application Server Interview Questions You'll Most Likely Be Asked
From Everand
IBM WebSphere Application Server Interview Questions You'll Most Likely Be Asked
Vibrant Publishers
No ratings yet
Waging War on Complexity Costs (PB)
From Everand
Waging War on Complexity Costs (PB)
Stephen A. Wilson
5/5 (1)
Computer Productivity 01le
100% (1)
Computer Productivity 01le
3 pages
WebSphere Application Server 8.5.5 For Developers - v8
No ratings yet
WebSphere Application Server 8.5.5 For Developers - v8
58 pages
Creating Web Service in Rad
No ratings yet
Creating Web Service in Rad
37 pages
Cobol Modem Architecture
No ratings yet
Cobol Modem Architecture
55 pages
New Rational Application Developer Portal Tools PDF
No ratings yet
New Rational Application Developer Portal Tools PDF
12 pages
WUG_WebSphere_Developer_Tools
No ratings yet
WUG_WebSphere_Developer_Tools
51 pages
Introduction To Websphere Application Server - Part 2: Ibm and Business Partner Sales Training Only
No ratings yet
Introduction To Websphere Application Server - Part 2: Ibm and Business Partner Sales Training Only
40 pages
DISWPS EM Migration Services For Web Sphere Application Practitioner Training 092308
No ratings yet
DISWPS EM Migration Services For Web Sphere Application Practitioner Training 092308
3 pages
Book:: Sg24-6948 Using Informix Dynamic Server With Websphere
No ratings yet
Book:: Sg24-6948 Using Informix Dynamic Server With Websphere
30 pages
Plain JavaScript: Learning the Front-End
From Everand
Plain JavaScript: Learning the Front-End
Roger Beans-Rivet
No ratings yet
HealthCareApplication Sample
No ratings yet
HealthCareApplication Sample
2 pages
Modeling and Simulation of Discrete Event Systems
From Everand
Modeling and Simulation of Discrete Event Systems
Byoung Kyu Choi
No ratings yet
WAS OEM
No ratings yet
WAS OEM
23 pages
Oracle Exalytics Revealed: E-Book
From Everand
Oracle Exalytics Revealed: E-Book
Mark Rittman
No ratings yet
Ibm Eserver Iseries Itso Technical Forum 2005: Introduction To Javaserver Faces (JSF) Development
No ratings yet
Ibm Eserver Iseries Itso Technical Forum 2005: Introduction To Javaserver Faces (JSF) Development
48 pages
IBM WAS 61 and WAS ND 61-March 2006-22491402 PDF
No ratings yet
IBM WAS 61 and WAS ND 61-March 2006-22491402 PDF
16 pages
Forms Experience Builder 85 Cluster Guide
No ratings yet
Forms Experience Builder 85 Cluster Guide
37 pages
IBM Certified WAS 8.5 Administrator Architecture
No ratings yet
IBM Certified WAS 8.5 Administrator Architecture
43 pages
Websphere
No ratings yet
Websphere
113 pages
7) Packaging and Deployment
No ratings yet
7) Packaging and Deployment
30 pages
Introducing The Ibm Websphere Application Server Version 4.0 For Z/Os and Os/390
No ratings yet
Introducing The Ibm Websphere Application Server Version 4.0 For Z/Os and Os/390
15 pages
Java 2 Platform, Enterprise Edition (J2EE) : Bruno Souza Java Technologist, Sun Microsystems, Inc
No ratings yet
Java 2 Platform, Enterprise Edition (J2EE) : Bruno Souza Java Technologist, Sun Microsystems, Inc
48 pages
(Ebook) Ejb 2.0 Development with Websphere Studio Application Developer by IBM Redbooks, Ueli Wahli ISBN 9780738426099, 0738426091 pdf download
No ratings yet
(Ebook) Ejb 2.0 Development with Websphere Studio Application Developer by IBM Redbooks, Ueli Wahli ISBN 9780738426099, 0738426091 pdf download
56 pages
Anatomy of Enterprise Application
No ratings yet
Anatomy of Enterprise Application
38 pages
Full Download (Ebook) Ejb 2.0 Development with Websphere Studio Application Developer by IBM Redbooks, Ueli Wahli ISBN 9780738426099, 0738426091 PDF DOCX
100% (1)
Full Download (Ebook) Ejb 2.0 Development with Websphere Studio Application Developer by IBM Redbooks, Ueli Wahli ISBN 9780738426099, 0738426091 PDF DOCX
81 pages
Websphere Basics: What Is WAS
No ratings yet
Websphere Basics: What Is WAS
17 pages
enterprise intro and Variants of java jvm jre
No ratings yet
enterprise intro and Variants of java jvm jre
39 pages
Info On IBM WS Certfns
100% (1)
Info On IBM WS Certfns
9 pages
RAD RationalApplicationDeveloper V6 DataSheet
No ratings yet
RAD RationalApplicationDeveloper V6 DataSheet
8 pages
Conquering Complexity in Your Business: How Wal-Mart, Toyota, and Other Top Companies Are Breaking Through the Ceiling on Profits and Growth: How Wal-Mart, Toyota, and Other Top Companies Are Breaking Through the Ceiling on Profits and Growth
From Everand
Conquering Complexity in Your Business: How Wal-Mart, Toyota, and Other Top Companies Are Breaking Through the Ceiling on Profits and Growth: How Wal-Mart, Toyota, and Other Top Companies Are Breaking Through the Ceiling on Profits and Growth
Michael L. George
4/5 (2)
WAS 7.0 - Overview and New Features
No ratings yet
WAS 7.0 - Overview and New Features
10 pages
What Is WAS
No ratings yet
What Is WAS
118 pages
Getting Started With Enterprise Javabeans Technology: Section 1. About This Tutorial
No ratings yet
Getting Started With Enterprise Javabeans Technology: Section 1. About This Tutorial
104 pages
Getting Started With WASCE
No ratings yet
Getting Started With WASCE
242 pages
Getting Started With DB2 App Dev p2
No ratings yet
Getting Started With DB2 App Dev p2
376 pages
JAVA PROGRAMMING FOR BEGINNERS: Master Java Fundamentals and Build Your Own Applications (2023 Crash Course)
From Everand
JAVA PROGRAMMING FOR BEGINNERS: Master Java Fundamentals and Build Your Own Applications (2023 Crash Course)
Theo Houle
No ratings yet
103-EJB Components
No ratings yet
103-EJB Components
34 pages
WA8551G - Architecture - Standalone
No ratings yet
WA8551G - Architecture - Standalone
29 pages
Financial Forecasting, Analysis, and Modelling: A Framework for Long-Term Forecasting
From Everand
Financial Forecasting, Analysis, and Modelling: A Framework for Long-Term Forecasting
Michael Samonas
4/5 (3)
Infosphere Master Data Management Collaboration Server V10: Application Development
No ratings yet
Infosphere Master Data Management Collaboration Server V10: Application Development
21 pages
Skills For Websphere Extreme Scale V7.1 Application Developer
No ratings yet
Skills For Websphere Extreme Scale V7.1 Application Developer
2 pages
Application Server For Developers
No ratings yet
Application Server For Developers
15 pages
Program AS 400
No ratings yet
Program AS 400
184 pages
ApplicationMigrationTool en US.3.5.1 WebSphere v2v PDF
No ratings yet
ApplicationMigrationTool en US.3.5.1 WebSphere v2v PDF
47 pages
Java™ Programming: A Complete Project Lifecycle Guide
From Everand
Java™ Programming: A Complete Project Lifecycle Guide
Nitin Shreyakar
No ratings yet
Websphere Application Server Product Family: Welcome To
No ratings yet
Websphere Application Server Product Family: Welcome To
22 pages
ZA380 Unit01 Script
No ratings yet
ZA380 Unit01 Script
9 pages
Umbraco User's Guide
From Everand
Umbraco User's Guide
Nik Wahlberg
4/5 (1)
WCS Doc
No ratings yet
WCS Doc
60 pages
Delivering New Business Value To The Enterprise On A Java 2 Platform, Enterprise Edition (J2EE) Technology and Web Services Base
No ratings yet
Delivering New Business Value To The Enterprise On A Java 2 Platform, Enterprise Edition (J2EE) Technology and Web Services Base
17 pages
Delivering Mobile E-Business: Paula H Richards PVC Solutions Enablement
No ratings yet
Delivering Mobile E-Business: Paula H Richards PVC Solutions Enablement
29 pages
WPF Sample Application
No ratings yet
WPF Sample Application
20 pages
Websphere Application Server: Muhammad Qasim
No ratings yet
Websphere Application Server: Muhammad Qasim
24 pages
Websphereinterview 100725022705 Phpapp02
No ratings yet
Websphereinterview 100725022705 Phpapp02
193 pages
What Is WAS
No ratings yet
What Is WAS
108 pages
JBoss Tools 3 Developers Guide
From Everand
JBoss Tools 3 Developers Guide
Anghel Leonard
No ratings yet
Microsoft Certified Azure Fundamentals Study Guide: Exam AZ-900
From Everand
Microsoft Certified Azure Fundamentals Study Guide: Exam AZ-900
James Boyce
No ratings yet
JavaScript All-in-One For Dummies
From Everand
JavaScript All-in-One For Dummies
Chris Minnick
5/5 (1)
Enterprise Java Beans
No ratings yet
Enterprise Java Beans
96 pages
SB-15-014 Correction of Burner System Workshop Manual
No ratings yet
SB-15-014 Correction of Burner System Workshop Manual
21 pages
Deshumidificador Confortfresh
No ratings yet
Deshumidificador Confortfresh
1 page
Welch Allyn: Whiter, Brighter and Greener
No ratings yet
Welch Allyn: Whiter, Brighter and Greener
2 pages
How To Generate A Runtime Dump On SAP HANA
No ratings yet
How To Generate A Runtime Dump On SAP HANA
5 pages
DB 1
No ratings yet
DB 1
81 pages
GBM-GBC Manual
No ratings yet
GBM-GBC Manual
26 pages
Ch01-Introduction To ELEC 301-S2022
No ratings yet
Ch01-Introduction To ELEC 301-S2022
24 pages
Hydrogen For Transportation
No ratings yet
Hydrogen For Transportation
5 pages
Am25ck PDF
No ratings yet
Am25ck PDF
2 pages
M-32 Emergency Shut-Off Valve
No ratings yet
M-32 Emergency Shut-Off Valve
19 pages
Thermolator Conair Manual
No ratings yet
Thermolator Conair Manual
115 pages
NX232A Earth-Fault Relay User's Guide: 1. Description
No ratings yet
NX232A Earth-Fault Relay User's Guide: 1. Description
4 pages
IbaPADU-8-M v1.9 en A4
No ratings yet
IbaPADU-8-M v1.9 en A4
39 pages
Cyber Summit Singapore 2024
No ratings yet
Cyber Summit Singapore 2024
2 pages
Schaefer VVD Flyer Arkel Arl-500 en
No ratings yet
Schaefer VVD Flyer Arkel Arl-500 en
2 pages
MX Sea STD 001 Fracas Process - Rev01
100% (1)
MX Sea STD 001 Fracas Process - Rev01
32 pages
CoinMarketCap - CoinMarketCap
No ratings yet
CoinMarketCap - CoinMarketCap
3 pages
Kamal Solanki: Career Objective
No ratings yet
Kamal Solanki: Career Objective
2 pages
Purple Pink Gradient Modern Metaverse Presentation
No ratings yet
Purple Pink Gradient Modern Metaverse Presentation
16 pages
Machine Tools Design: Instructors
100% (1)
Machine Tools Design: Instructors
31 pages
Saad Zarkout CV
No ratings yet
Saad Zarkout CV
3 pages
User - Guideamyuni PDF Converter
No ratings yet
User - Guideamyuni PDF Converter
60 pages
Epa 018
No ratings yet
Epa 018
2 pages
Chapter 5: Protecting Information Resources Multiple Choice
No ratings yet
Chapter 5: Protecting Information Resources Multiple Choice
4 pages
DC To DC Converter
No ratings yet
DC To DC Converter
4 pages
LHD Toro 410
100% (1)
LHD Toro 410
16 pages
OpenManage Enterprise - Deep Dive - Power Manager and Power Policies
No ratings yet
OpenManage Enterprise - Deep Dive - Power Manager and Power Policies
7 pages
Cardiff University Computer Science Coursework Cover Sheet
100% (1)
Cardiff University Computer Science Coursework Cover Sheet
8 pages
Annotated Bibliography
100% (1)
Annotated Bibliography
3 pages

JSF 2.0 Portlet Using PrimeFaces PDF

Uploaded by

JSF 2.0 Portlet Using PrimeFaces PDF

Uploaded by

Developing JSF 2.0 Portlet Applications using Primefaces with Rational Application Developer 8.

Developing the sample application

Figure 2. Create a new Faces Library Definition

Figure 3: Palette with primefaces components

Portlet Project and Portlet Creation

Figure 4: Portlet Project Creation Wizard

Figure 5: Select Portlet API and type

Figure 7: Location of image, js and css files

Developing Market Watch Portlet

Creating scoped managed bean

Figure 8: Create a Managed Bean

Figure 9: Generate Getters and Setters

Figure 10: Generate Constructor using Fields

Custom code specific to the application

Developing GUI using Primefaces widgets

Figure 11: lineChart Properties

Developing Trading Portlet

Figure 12: New Web Page Wizard to add template

Figure 13: Template Page

Figure 14: New Web Page Options

Figure 15: TradingPortletView Page

Creating scoped managed bean

Custom code specific to the application

Custom code specific to the application

Developing GUI using Primefaces widgets

Figure 16: Properties view Facelet Composite

Figure 17: Facelet Composite in palette

Figure 18: Properties view output text

Figure 19: Panel Grid

/> /> /> /> />

Figure 20: TradingService stockname properties

Figure 21: Command Button Properties view

Developing Portfolio Portlet

Creating scoped managed bean

Custom code specific to the application

Custom code specific to the application

Developing GUI using Primefaces widgets

Developing Watchlist portlet

Creating scoped managed bean

Custom code specific to the application

Custom code specific to the application

Developing GUI using Primefaces widgets

Deploying application on WebSphere Portal server

Figure 24: Deploy Portlet Wizard

Figure 25: Edit Page Layout

Executing the application on the server

Figure 28: Trading Portlet View

Buy and Sell Operations

Buy Operation from Trading Portlet

Figure 32: Buy operation in Trading portlet

Figure 33: Buy stocks page in Trading portlet

Figure 34: Confirmation page

Figure 35: Success Page

Sell Operation from Trading Portlet

Figure 36: Sell operation in Trading portlet

Figure 37: Stock Sell page in Trading portlet

Figure 38: Sell operation in Trading portlet

Figure 39: Sell operation confirmation page in Trading portlet

Figure 40: Sell operation in Trading portlet

Watching operation from Trading portlet

Figure 41: Watch operation in Trading portlet

Figure 42: Watch operation in Trading portlet

Removing transactions from Watchlist portlet

Figure 43: Remove transaction in Trading portlet

Figure 44: WatchList portlet

You might also like