The examples in this section guide you through creating a small application that uses three portlets. The portlets created in this tutorial include:
A list of the 25 most active stocks of the day
A stock quote portlet
A Google.com search of a company's name
The sample application that you build will use “portlet flow,” meaning all of the portlets are on the same page. See “Portlet flow”.
You will use the Application Builder to define click-across events and listeners in the portlets so data can be sent between them. You will define two click-across events on the 25 most active stocks portlet. The first event will send the stock symbol to the listening stock quote portlet and the second event will send the company name to the listening Google.com search portlet, which searches Google.com for the name of the company.
Creating the Most Actives portlet
Log in to Web Studio and select Build | Portlets from the menu in the left pane.
Click New on the Portlet Manager toolbar. You see the Portlet Builder.
Click the down arrow beside the Add button and select Web Element from the pop-up.
When the Web Studio – New Web Element window
displays, enter http://finance.yahoo.com/ in
the Location field and click Find. The Yahoo Finance Web site displays
in the window.
Click the link in the middle of the page titled “Most Actives.” The Web site changes to display NASDAQ Volume Leaders.
Click Next. When the page reloads, move the mouse around until the cursor is positioned over some text in the stock table and click once to perform a one-click capture. You see a preview with several selections. Each selection contains more data from the captured table.
Click Select next to the capture option you want to use, then click Next.
In the Split window, click Next.
In the Define window, click Next.
In the Filter window under Add Filter Rule, set a filter rule to remove extraneous columns from the table.
In the first drop-down list, select “Include field(s)”.
In the second drop-down list, select “number”.
In the text box, enter:
1-2,4-6
This tells the filter to include columns where the column number is in the ranges of 1 through 2 and 4 through 6.
Click Add and the grid should highlight the selected columns.
Click Next.
On the CGI parameter override screen, click Next.
On the final screen, give the Web element the name “Most Actives” and click Finish to close the window.
Back in Portlet Builder, you see a preview of the Most Actives element.
Click Save to save the portlet.
In the Finish window, complete these options:
Portlet Name – enter “Most Actives”.
Active, Iframe, Editable – select these options and leave the No Popup, Secure, and Versioning options unselected.
WARNING! Application messaging portlets will not work unless Iframe is selected.
Content Type – select “text/html”.
Charset – select “iso-8859-8”.
Content Cache Interval – select “Real-Time”.
Default Size – select “Medium”.
Assigned Roles – select PortalUser and click Add to move that role from the Available Roles list to the Assigned Roles list.
Accept the defaults for the remaining options.
Click Finish. When you see the confirmation that the portlet was saved successfully, click OK.
Click Close to exit the Portlet Builder.
On the Portlet Manager Status menu, click New to display the new portlet in the right pane detail window.
By default, a portlet has the “New” status
until you right-click the portlet in the detail pane, select Approval
Status from the pop-up and select a different status.
Right-click the Most Actives portlet and select Approval Status | Approved, then click Approved on the Status menu and verify that the Most Actives portlet displays in the Approved list.
Creating the Stock Quote portlet
Log in to Web Studio and select Build | Portlets from the menu in the left pane.
Click New on the Portlet Manager toolbar. You see the Portlet Builder.
Click the down arrow beside the Add button and select Web Element from the pop-up.
When the Web Studio – New Web Element window
displays, enter http://finance.yahoo.com/ in
the Location field and click Find. The Yahoo Finance Web site displays
in the window.
In the text box with the title “Enter symbol(s)” enter “SY”, select Detailed from the drop-down list to the right of the text box, then click Get.
This screen may vary depending on your browser’s
version. On some browsers, the drop-down list may not display and
the Get button is labeled Go. The most important thing is to enter
the SY symbol and click the button that means “go get it.”
You see the detailed stock quote for the stock symbol SY at Yahoo Finance.
Click Next. When the page reloads, move the mouse around until the cursor is positioned over some text in the stock table and click once to perform a one-click capture. You see a preview with several selections. Each selection contains more data from the captured table.
On the capture selection page, select the capture that displays the stock table, then click Next.
On the CGI parameter override window:
Select the Variable option next to the variable named “s”.
Change the Display Name to “Symbol”.
Enter “SY” for the Default Value.
Leave Type as “Text Field”.
Verify that the Required option is selected.
Click Next.
In the final window, enter “Yahoo Stock Quote” and click Finish.
Back in Portlet Builder, you see a preview of the Yahoo Stock Quote element.
Click Save to save the portlet.
In the Finish window, complete these options:
Portlet Name – enter “Yahoo Stock Quote”.
Active, Iframe, Editable – select these options and leave the No Popup, Secure, and Versioning options unselected.
WARNING! Application messaging portlets will not work unless Iframe is selected.
Content Type – select “text/html”.
Charset – select “iso-8859-8”.
Refresh Interval – select “Real-Time”.
Default Size – select “Medium”.
Assigned Roles – select PortalUser and click Add to move that role from the Available Roles list to the Assigned Roles list.
Accept the defaults for the remaining options.
Click Finish. When you see the confirmation that the portlet was saved successfully, click OK.
Click Close to exit the Portlet Builder.
On the Portlet Manager Status menu, click New to display the new portlet in the right pane detail window.
By default, a portlet has the “New” status
until you right-click the portlet in the detail pane, select Approval
Status from the pop-up and select a different status.
Right-click the Yahoo Stock Quote portlet and select Approval Status | Approved, then click Approved on the Status menu and verify that the portlet displays in the Approved list.
Creating the Google Stock Search portlet
Log in to Web Studio and select Build | Portlets from the menu in the left pane.
Click New on the Portlet Manager toolbar. You see the Portlet Builder.
Click the down arrow beside the Add button and select Web Element from the pop-up.
When the Web Studio – New Web Element window
displays, enter http://www.google.com/ in
the Location field and click Find. The Google search Web site displays
in the window.
Click Google Search. Google.com accepts the empty search string to create the required CGI request. The subsequent window shows the empty Google search result.
Select Page from the Format drop-down list and click Next. This option allows you to capture the entire results page instead of just a portion of it.
On the capture selection page, there should be only one option. Select the capture, then click Next.
On the CGI parameter override window:
Select the Variable option next to the variable named “q”.
Change the Display Name to “Search for”.
Select a Type of “Text”.
Verify that the Required option is not selected.
Click Next.
In the final window, enter “Google Stock Search” and click Finish.
Back in Portlet Builder, you see a preview of the Google Stock Search element.
Click Save to save the portlet.
In the Finish window, complete these options:
Portlet Name – enter “Google Stock Search”.
Active, Iframe, Editable – select these options and leave the No Popup, Secure, and Versioning options unselected.
WARNING! Application messaging portlets will not work unless Iframe is selected.
Content Type – select “text/html”.
Charset – select “iso-8859-8”.
Refresh Interval – select “Real-Time”.
Default Size – select “Medium”.
Assigned Roles – select PortalUser and click Add to move that role from the Available Roles list to the Assigned Roles list.
Accept the defaults for the remaining options.
Click Finish. When you see the confirmation that the portlet was saved successfully, click OK.
Click Close to exit the Portlet Builder.
On the Portlet Manager Status menu, click New to display the new portlet in the right pane detail window.
By default, a portlet has the “New” status
until you right-click the portlet in the detail pane, select Approval
Status from the pop-up and select a different status.
Right-click on the Google Stock Search portlet and select Approval Status | Approved, then click Approved on the Status menu and verify that the portlet displays in the Approved list.
Creating the application
Log in to Web Studio and select Build | Applications from the menu in the left pane.
Click New on the Portlet Manager toolbar. You see the Application Builder.
Click Add to add existing portlets to the application using the Search dialog box.
In the Search dialog box, click Search to retrieve a list of all approved portlets.
In the Results pane, hold down the Ctrl key and click the Google Stock Search, Most Actives, and Yahoo Stock Quote portlets that you created, then click Add to add them to the Application.
To adjust the portlet placement, drag and drop the portlets around the right side of the Application Builder window.
Most Actives portlet post processing
The Most Actives portlet will be used to publish click-across events. You can either define an event on the portlet outside of the Application Builder or within the Application Builder.
Right-click the Most Actives portlet in the Application Builder’s Portlets pane and select Define Events. This starts the Define Event wizard.
Defining events is a three-step process. The first step shows you all grid, table, or list (structured) objects contained in the current portlet. You can define events only on structured (tables and lists) content. The first screen shows you a list of tables in the selected portlet.
In the first wizard window, click Select to choose table of stock quotes and click Next. The next window allows you to define or edit an event.
You can define an event for a row, a column, or any subset of rows and columns. You can also use the row and column number to identify a specific cell to define an event.
In the Assign Event section, complete these fields:
Row – enter the keyword “all”.
Column – enter “1”.
Event Name – enter “Stock_Symbol”. The event name is a logical name that must be unique across the entire portal. You must have separate names for distinct events. You can reuse the name for different cells to have the same event generated.
Do
not using spaces in event names.
With – select “dynamic value” from the drop-down list. The value that gets transmitted on an event can be Dynamic, Static, or HREF. The differences between the types of data that can be sent in an event are:
Dynamic – sends the text you click on as the event data.
Static – sends a constant value you specify in the text box to the right of the drop-down list as the event data. If you select this option, you must enter a value.
HREF – if the text for which you are defining the event is a link, the underlying URL is sent as the event data.
Notify Now – send the event immediately.
Notify Across Page – send the event across pages if there is a listener on another page; otherwise, look for events on the current page. for this example, do not select this option.
Click Add to add the event. After a few moments, the first column turns blue. This means the event has been defined for the column.
Define an event on the second column:
Row – enter the keyword “all”.
Column – enter “2”.
Event Name – enter “Stock_Company”.
Do
not using spaces in event names.
With – select “dynamic value” from the drop-down list. The value that gets transmitted on an event can be Dynamic, Static, or HREF. The differences between the types of data that can be sent in an event are:
Dynamic – sends the text you click on as the event data.
Static – sends a constant value you specify in the text box to the right of the drop-down list as the event data.
HREF – if the text for which you are defining the event is a link, the underlying URL is sent as the event data.
Notify Now – send the event immediately.
Notify Across Page – send the event across pages if there is a listener on another page; otherwise, look for events on the current page. for this example, do not select this option.
Click Add to add the event. After a few moments, the second column turns blue. This means the event has been defined for the second column.
For more details on click-across and defining events, see “Building click-across messaging portlets”.
Click Next to continue and see a preview of the table with the defined events.
Click Finish to close the Define Events wizard. The Application Builder displays the two defined events beneath the Most Actives portlet in the Portlets list.
Google Stock Search portlet post processing
The Google Stock Search portlet will be used to listen for certain click-across events and perform a search for the data it receives with the event. You can define a listener for the portlet outside of the Application Builder or within the Application Builder.
In the Application Builder, right-click the Google Stock Search portlet and select Define Listeners to open the Listener Editor.
Select these options:
List of Events – “StockCompany”.
Listener param – “Search for”.
Auto Submit – select, then click the plus sign to enable the listener.
If Auto Submit is enabled, a listener portlet re-executes
when it receives an event. If Auto Submit is disabled, the portlet
does not re-execute right away.
Click OK to save the settings. The listener you defined displays beneath the Google Stock Search portlet in the Application Builder Portlets list.
To remove a listener from the portlet, click the associated
X in the Action column.
Yahoo Stock Quote portlet post processing
The Yahoo Stock Quote portlet will be used to listen for certain click-across events and performs a stock symbol search at http://finance.yahoo.com for the data it receives with the event. You can define a listener on the portlet outside of the Application Builder or within the Application Builder.
In the Application Builder, right-click the Yahoo Stock Quote portlet and select Define Listeners to open the Listener Editor.
Select these options:
List of Events – “Stock_Symbol”.
With most Listeners, you can select an event from the
list or enter a name manually into the Event Name field.
Listener param – “Symbol”.
Auto Submit – select, then click the plus sign to enable the listener.
If Auto Submit is enabled, a listener portlet re-executes
when it receives an event. If Auto Submit is disabled, the portlet
does not re-execute right away.
Click OK to save the settings. The listener you defined displays beneath the Google Stock Search portlet in the Application Builder Portlets list.
To remove a listener from the portlet, click the associated
X in the Action column.
Saving the application
In the Application Builder, click Save to save the application you built. This opens the Application Properties window.
Complete these fields:
Name – enter “StockApp”.
Type – select Portlet Flow.
When you select Page Flow, you are prompted to specify
the number of frames. Set the number of frames to the number of
pages in the application and select Auto Initialize so the listener
self registers.
Status – select Approved.
Roles – select PortalUser and click Add to move that role from the Available Roles list to the Assigned Roles list.
Click OK to save your entries.
Previewing the application
To preview your new application, click Preview in the Application Builder. This opens the application in a new window that lets you test-drive a preview of your application.
Editing and deleting applications
To edit an application, select Build | Applications.
Select the status of the application you want to edit.
In the detail view, select the application and click Edit.
To disable or inactivate an application:
Select the application in the detail view and click Edit.
When the Application Builder displays, select Properties, change the Status to Deleted, then click OK.
Click Save to implement your change, then click Close to exit the Application Builder.
Select Build | Page Groups and change the status of the Page Group associated with the application to Deleted or mark the Page Group as Inactive.
Click Update on the Page Group Manager toolbar to update Portal Interface with the changes.
| Copyright © 2004. Sybase Inc. All rights reserved. |
|
|
