PDF01 by Hugo Fontes

Table of Contents

Exercise 1: Start the BPM UI Software ....................................................................................3 Exercise 2: MWS Session and Configuration.............................Error! Bookmark not defined. Exercise 3: Create a Basic Portal Site.........................................Error! Bookmark not defined. Exercise 4: Create a Skin..............................................................Error! Bookmark not defined. Exercise 5: Create a Shell.......................................................................................................23 Exercise 6: Creating a Custom Portal Site............................................................................27 Exercise 7: Portlet to Portlet Wiring ......................................................................................35 Exercise 8: Global Wiring .......................................................................................................39 Exercise 9: Designer and MWS Configuration .....................................................................45 Exercise 10: Building a CAF Application ..............................................................................51 Exercise 11: Using the Designer Views ................................................................................57 Exercise 12: Generate a User Interface.................................................................................64 Exercise 13: Using AJAX Controls ........................................................................................70 Exercise 14: Dynamic Drop-Down .........................................................................................72 Exercise 15: Validation of Form Data ....................................................................................78

webMethods Administrator, webMethods Broker, webMethods Dashboard, webMethods Developer, webMethods Glue, webMethods Fabric, webMethods Installer, webMethods Integration Server, webMethods Mainframe, webMethods Manager, webMethods Mobile, webMethods Modeler, webMethods Monitor, webMethods Optimize, webMethods Trading Networks, webMethods Workflow, and the webMethods logo are trademarks of webMethods, Inc. (now Software AG) "webMethods" is a registered trademark of webMethods, Inc. (now Software AG) All other marks are the property of their respective owners. Copyright ÂŠ 2004 - 2007 by webMethods, Inc. (now Software AG). All rights reserved, including the right of reproduction in whole or in part in any form.

webMethods 7 BPM Portlet & UI Workshop

Exercises

This page intentionally left blank.

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Exercise 1: Start the BPM UI Software Overview In this exercise, you will ensure the startup status of BPM UI support services start the Integration Server, and access the browser consoles for both the Integration Server and My webMethods Server, logging in to each as an administrative user.

Estimated Completion Time 15 minutes

Task 1. (H) In Services, ensure that the following service’s Startup Type is Automatic and Status is Started: o

MSSQLSERVER

webMethods Broker Monitor 6.5

webMethods MwS 7.0 (default)

2. Confirm that the dependent service webMethods Broker Server 6.5, port 6849 was started. 3. Start the Integration Server (IS) by one of the following two methods: o

Use the desktop shortcut

(H) Use a Command Prompt window with:

Directory: c:\webMethods7\IntegrationServer\bin

Command line: server.bat –debug 4 –log none

4. (H) After the IS comes up, use a browser to login to the Integration Server Admin Console o

URL: http://localhost:5555

User name: Administrator

Password: manage

5. (H) Use a second browser (or another tab in the browser that is already open), to bring up the MWS Console o

URL: http://localhost:8800

User name: sysadmin

Password: manage

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint s Hint: Step 1:

Hint: Step 3b:

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 4:

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 5:

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Exercise 2: MWS Session and Configuration Overview In this exercise, you will run the MWS Configurator Tool and activate the MWS Portal Development Tools, Samples, and Extras components. Following the configuration, you will login to the MWS Console as the System Administrator and review the changes.

Estimated Completion Time 15 minutes

Task 1. (H) In MWS Console (Login as sysadmin / manage), select the Public Folders link and confirm that it is empty. Logout from MWS and close the browser. 2. (H) Start the My webMethods Server Configurator tool. 3. (H) In the Configurator, select the Edit Server option and start the tool with Start Wizard. 4. (H) Select the Components tab. Scroll down and select the following checkboxes: a. Portal Development Æ Development and System Tools b. Samples c. Extras 5. (H) Select the Server tab. Click the appropriate button to stop MWS. 6. Select the Summary tab. Click Finish to perform the activation. 7. (H) Click the appropriate button to start MWS. Answer Yes to the first popup dialog box, and OK to the second popup box. 8. (H) Login to MWS as sysadmin / manage. From the Home Page, click on the Public Folders link to view the newly activated Samples and Extras. 9. In the MWS Configurator, use File Æ Exit to quit the tool.

Resou r ces Getting Started with My webMethods 7.0 Use the MWS Console On-Topic Help

Hint s

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 1: MWS Home Page before activation.

Hint: Step 2: Start Configurator

Hint: Step 3: Edit Server.

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 4: IMPORTANT: ONLY change the settings on the Components tab—do NOT change any other settings!

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 5: Stop the Service.

E10

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 7: Restart the Service.

Hint: Step 8: Review MWS Console changes.

E11

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

This page intentionally left blank

E12

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Exercise 3: Create a Basic Portal Site Overview In this exercise, you will create a site with a portal folder and a portal page, and you will add portlets to the portal page.

Estimated Completion Time 20 minutes

Task 1. (H) Login to MWS Console as Designer and select the link Public Folders from the main link list. 2. (H) Add a new folder called Partner Extranet to Public Folders. Extranet folder, create a new page called Partner Page.

Within the Partner

3. (H) From the Partner Extranet’s Tools menu, select Add to Favorites. Note that the link appears on the right side of the footer link bar. 4. (H) From the Partner Extranet’s Tools menu, select Edit Page. In Available Portlets, drag Portlets | Drawing | HTML Text onto the Page Editor’s top right column. 5. (H) In the HTML Text panel, click the Properties link and change: a. Name: Welcome to Partner Extranet b. Text: This is the Partner Extranet site, where partners can get information about orders and suppliers. (You may adjust the text appearance as you like) 6. (H) Click the Save button above the Available Portlets panel. From the Partner Extranet’s Tools menu, select Properties. Change the Full Page View setting to Portal Page. Click the Apply button. Return to the Partner Extranet page, and you should now see the HTML portlet displayed as a portlet 7. (H) From the Partner Page’s Tools menu, select Edit Page. In Available Portlets, drag Portlets Æ Internet - Tools Æ MapQuest onto the Page Editor’s top right column. Click Properties tab and fill in the MapQuest data sheet as follows: a. Address: 3877 Fairfax Ridge Road b. City: Fairfax c. State: VA d. Zip Code: 22030 8. (H) Save your work. View the Partner page, and click the Map it button to view a map of the address.

E13

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Use the MWS Console On-Topic Help

Hint s Hint: Step 1: Login to browser URL http://<hostname>:8800 as Designer (manage). Hint: Step 2: Right click the arrow and select New Folder and New Page to create.

1. Hint: Step 3: Add to Favorites.

E14

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 4: Edit Page and Add HTML Text portlet.

Hint: Step 5: Edit Page and Edit HTML Text portlet text content.

E15

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 6: Change default display to Portal Page rather than Folder Details.

Portal Page Display view:

E16

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 7: Edit Partner Page with MapQuest portlet content. Editing the Page and adding the portlet:

Hint: Step 8: Viewing the saved page:

E17

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Mapping the location:

E18

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Exercise 4: Create a Skin Overview In this exercise, you will create a Portal skin.

Estimated Completion Time 20 minutes

Task 1. Log in to the MWS Console as sysadmin. 2. (H) Click the following links, Administration Æ Administrative Folder Æ Administration Dashboard Æ User Interface Æ Skin Administration Æ Create New Skin option. Enter a. System Name: NewExtranet b. Display Name: NewExtranet c. Parent Skin: The Machine d. Click the Create button. 3. From the NewExtranet’s Tool menu, select Edit to edit the skin. 4. (H) Click the Colors tab. Scroll down in the Skin Properties panel, and select nav-bg global nav bar background entry. a. In the Color Picker area, select a color you like. b. Then, click the arrow that points down from the Color Picker to the Scratchpad to move the color you chose to the Scratchpad. c. Click the arrow to the left of the Scratchpad to use the color you chose for nav-bg. 5. Scroll down in the Skin Properties panel, and select titlebar-bg- titlebar background entry. a. In the Color Picker, enter the hexadecimal color #: 696DCC. b. Add the color to the Scratchpad. c. Click the left-pointing arrow to make the titlebar-bg color 6666CC. 6. (H) Scroll down in the Skin Properties panel, and select titlebar2-bg entry. a. In the Color Picker, enter the hexadecimal color #: 6666CC. Copyright © 2007 by webMethods, Inc. All rights reserved

E19

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

b. Add the color to the Scratchpad. c. Click the left-pointing arrow to make titlebar2-bg color 6666CC. 7. Scroll down in the main Skin Editor window, and in the Preview field select Public Folders. Click the Preview button. Note that the skin color scheme is in effect. 8. Go back to the Skin Editor to continue. Click the Select palette menu and select URL. Enter http://www.webmethods.com, and note that you may use colors from the palette selector in your skin. 9. Click the Fonts link near the top of the Skins window. a. In the Skin Properties window, select the hover property b. From the palette pane, select Skins: Pearls-Jade Green i

In the imported fonts, select SECTION-HEAD

Click the arrow to apply the SECTION-HEAD style to the hover skin property you selected earlier.

10. Preview the change on the Partner Extranet portal page. Note the mouseover style on the links. 11. (H) Go back to the skins editor and select the Images link of the Skin Editor. a. Click logo.gif within the Skin properties panel on the left to see an image preview at right. b. Use the palette selector to get images from the website you used in step 8. c. Add an image from the URL to your skin. 12. Preview. 13. Save your work.

Resou r ces Use the MWS Console On-Topic Help

Hint s Hint: Step 2:

E20

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 4:

Hint: Step 6:

E21

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 11:

E22

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Exercise 5: Create a Shell Overview In this exercise, you will create a new portal Shell.

Estimated Completion Time 15 minutes

Task 1. (H) Log in to the MWS Console as sysadmin. Access the Shell Administration function from the Administration Dashboard. 2. Click Create New Shell. In the Name field, type a name for the shell: NewExtranet. 3. From the Parent Shell list, choose the Power Drill Shell from which the new shell will inherit any unspecified properties. 4. (H) Click the Create button. 5. (H) After you have created your shell, click on the name of your shell from the Shell Administration screen to start editing the shell. 6. For the Header section, click the Clone from Parent button to create a new header. A new Header label should appear (NewExtranet Header) near the Header entry. 7. Click the Edit button to edit the new header. 8. (H) In the resulting Portal Page editor, find the Column containing the Portal Links. Select the title bar labeled Portal Links and remove the column entry by clicking on the X button in the selected area. Be careful to delete the Links item, not the column. 9. (H) Remove the entire Breadcrumbs row by selecting the Row first and then clicking the X button in the selected area. 10. (H) Remove the Siblings item by selecting the title bar and clicking on the X button on the top right. Save the page and then Save the Shell.

Resou r ces Use the MWS On-Topic Help

Hint Hint: Step 1:

E23

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint Step 4:

Hint Step 5:

E24

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint Step 8: Remove Portal Links entry

Hint Step 9: Remove Breadcrumbs Row entry

E25

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint Step 10: Remove Siblings entry

E26

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Exercise 6: Creating a Custom Portal Site Overview The purpose of this exercise is to create a new custom Portal site. This will be accomplished by creating a new user and a new start page, and finally creating new skin and shell rules to apply the recently created skin and shell.

Estimated Completion Time 20 minutes

Task 1. Login to MWS as sysadmin (manage). 2. (H) In the User Management section, use the Manage Users link to begin creating a new user. Click the Add User button to begin creation of a new user. Fill out the user information and click the Create button when completed: a. User ID: testuser b. Password: test123 c. First Name: Test d. Last Name: User 3. (H) Navigate to the Public Folders link. Click on the Tools

button to add a new Folder

to the Public Folders page (New Æ Folder). Name the folder TestFolder. 4. (H) Navigate to the new TestFolder and again use the Tools

button to create a new

page called TestPage. Click on the new page and Edit it with the Tools menu (Edit Page). 5. (H) From the Available Portlets category, select Portlets Æ Internet – News/Weather and then add the Yahoo! Weather portlet in the left column. Next, in the right column, add the MapQuest portlet from location Portlets Æ> Internet – Tools. Save your work. 6. (H) Create an Alias for your homepage by clicking on the

button again and selecting

Properties. In the Maintenance section at the bottom Add an Alias called testalias. Click Apply to complete this. 7. Return to the Manage Users function and find your new user testuser. Edit the user and click User Preferrences. 8. (H) In the Home Page section, click the Use Alias button. In the dialog following, enter testalias. Click on the Test button and note that the Alias name appears beside the Home page field. Click the Select button and then Apply button to save your work.

E27

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

9. Return to the sysadmin homepage and select Manage Shell Rules to create a new shell rule. Click on the Create New Rule tab to create a new rule. 10. Enter the following: a. Name: Testuser Shell b. Condition: portalResource isDescendant ("testalias") c. Result: NewExtranet 11. Click the Create Rule button when you are done. 12. Return to the sysadmin homepage and select Manage Skin Rules to create a new skin rule. Click on the Create New Rule tab to create a new rule. 13. Enter the following: a. Name: Testuser Skin b. Condition: portalResource isDescendant ("testalias") c. Result: NewExtranet 14. Click the Create Rule button when you are done. 15. The Site configuration is complete. Logout as sysadmin and then login as testuser (testuser123) to see the result.

Hint Hint Step 2: Create a New user

Hint Step 3-4: Create Folder & Page

E28

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint Step 5: Add Portlets to Start Page

E29

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint Step 6: Create a Start Page Alias

Hint Step 8: Apply the Alias to the User

E30

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint Step 9-11: Create a Shell Rule

E31

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint Step 12-14: Create a Skin Rule

E32

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint Step 17: Custom Site Completed

E33

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

This page intentionally left blank

E34

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Exercise 7: Portlet to Portlet Wiring Overview In this exercise, you will use wiring to connect the field of one portlet to another portlet.

Estimated Completion Time 10 minutes

Task 1. Login as sysadmin (manage). Navigate to Public Folders Æ TestFolder Æ TestPage. 2. (H) Select the portlet title bar for Yahoo! Weather. Click the Properties panel and scroll down to the Zip Codes property. Enter the zip code 22030 and save. 3. (H) Select the portlet title bar for MapQuest and click Tools > Wiring. In the ZipCode field combo box, select the Yahoo portlet and click the Browse button. From the Properties dialog select Zip Codes and then Submit to save your work. 4. (H) The Zip Code saved in the Yahoo! Weather portlet will now appear automatically in the Zip Code field of the MapQuest portlet. .

Resou r ces Use the On-Topic Help

Hint s Hint Step 2: Set the Source Portlet Property

E35

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint Step 3: Wire to the Destination Portlet Property

Hint Step 4: The Wiring Result

E36

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

E37

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

This page intentionally left blank

E38

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Exercise 8: Global Wiring Overview In this exercise, you will create wiring from a global property to a portlet. You will link the Personal Profile portlet to a weather portlet to always display the current weather for a given user.

Estimated Completion Time 10 minutes

Task 1. Login to MWS Console as Designer (password manage). 2. (H) Go to your personal profile and fill in the street address information (street, city, zip). • Go to the My Profile link (at the top of the page) • On the User Profile tab, fill in an address, city, state, and zip code (Postal Code) of your choice and Apply 3. Navigate to your Partner Extranet folder. Create a new portal page within the folder called “Weather”. 4. (H) Add the Yahoo! Weather portlet to the left column of the Weather page. The Yahoo! Weather portlet is under Portlets Æ Internet – News/Weather. 5. (H) While still in Page Editor view, click the Wiring option beside Properties on the bottom right of the Page Editor. From the Zip Codes drop-down box, select Other… which will bring up a wiring selection dialog. 6. (H) Navigate to Global Wiring Data Æ User Profile Wiring. 7. Click the right-pointing arrow to move User Profile Wiring to the Selected Items column and then click Select. 8. (H) Click the Browse button to the right of the Zip Codes box (you may have to scroll right), which will launch a window showing the User Profile Wiring options. 9. (H) Under the User Profile heading, select Postal Code and then click the Select button. Save your work. 10. Extra Credit: You can demonstrate the global nature of the profile wiring by switching your login to sysadmin, editing the User Preferences and entering a different Postal Code (such as 20190) for this user, saving the changes, and returning to view the same Weather portlet page.

E39

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint s Hint: Step 2:

Hint: Step 4:

E40

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 6:

E41

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 8:

E42

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 9:

Hint: Step 10:

E43

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

This page intentionally left blank

E44

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Exercise 9: Designer and MWS Configuration Overview In this exercise, you will perform the initialization required for Designer to be prepared to use an instance of My webMethods Server Runtime.

Estimated Completion Time 10 minutes

Task 1. From the Control Panel applet Services, confirm that MWS is running. If needed, start the Designer from Start Menu Æ All Programs Æ webMethods7 Æ Tools Æ Designer. 2. (H) In Designer, use the following information to create a runtime entry for My webMethods Server: o

Menu: Windows Æ Preferences

Folder: Server Æ Installed Runtimes and create a new Runtime entry for My webMethods Server.

Installation Directory: c:\webMethods7\Portal

3. If needed, place Designer in the My webMethods perspective. 4. (H) On the Designer Servers View tab, create a new Server Runtime instance for MWS. Use the following information: o

Tab: Servers

Menu: Right click and select New Æ Server.

Selection: My webMethods Server 7.0.x.

Port: 8800

Resou r ces Use the Designer On-Topic Help

Hint s Hint: Step 2: Add a Runtime in Designer Window -> Preferences Add a Runtime, then select My webMethods Server:

E45

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

E46

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

E47

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 4: Add a Servers View entry and change the port to 8800:

E48

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

E49

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

This page intentionally left blank

E50

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Exercise 10: Building a CAF Application Overview In this exercise, you will create a Composite Application Framework project, add a portlet to the project, and deploy the application to the Server.

Estimated Completion Time 20 minutes

Task 1. (H) In Designer, create a new Composite Application Project named BasicCAF. 2. (H) In the Portlet Application Configuration Introduction pane, click Start Æ Portlets Æ Add Æ Next. Name the portlet BasicPortlet and click Finish. You will then see a JSF form named BasicPortlet/default.view. 3. (H) From the Palette view, drag and drop the aZ Text control to the first row of the form on your canvas. 4. Click in the text area of the control and enter the value “Hello World”. Save your work. 5. (H) In the Servers view, right click the MWS entry and select Add and Remove Projects. Move the project BasicCAF in the dialog with the Add button and click Finish. 6. (H) To publish the application to the server, click the Publish to the Server button at the top right of the Servers view. When asked to authenticate, login as sysadmin (password manage).

Hint s Hint: Step 1: New Composite Application Project:

E51

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Project Name:

E52

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

E53

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 3: Add and edit a Text Control to the form:

E54

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises 1.

Hint: Step 5: Add the Project to the server:

Hint: Step 6: Publish the app to the server:

E55

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

E56

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Exercise 11: Using the Designer Views Overview In this exercise, you will continue development of the BasicCAF project and explore the relationship among some of the various Views within Designer while doing so.

Estimated Completion Time 20 minutes

Task 1. Start a browser and login to MWS Console as sysadmin. 2. (H) Select the Public Folders link and then create a folder within it named AnotherTest. Within the folder create a page named test. Edit the test page by clicking it and selecting Edit page from the Tools menu. 3. (H) From the Available Portlets section, drag and drop the BasicCAF portlet BasicPortlet to the upper left column of the page. 4. (H) View the portlet on the page, save your work, and then close the browser and return to the Designer. 5. (H) Use the MWS Admin view to reconnect to the deployed portlet in MWS Console. Navigate in the tree control to Public Folders Æ AnotherTest Æ test and double-click on BasicPortlet. The MWS console will be brought up in the default system browser. Login as sysadmin and you will see your portlet displayed. 6. (H) Return to the Canvas. Universe”.

Use the Property view to modify the portlet text to “Hello

7. (H) Redeploy and return to the browser and test again. You may have to refresh the page, or click on the test folder and then again on BasicPortlet. 8. Delete the Hello World/Universe text control and leave the form empty. 9. (H) Drag/Drop from the Palette under Data Æ Primitives Æ String a String property to the Bindings view, under the tree location Managed Beans Æ BasicPortlet/default Æ BasicPortlet Æ BasicCAF. In the dialog that pops up name the property label_string and make it writable (click the check box) 10. (H) From the Bindings view, drag the label_string property to the canvas. 11. (H) From the Palette view, drag/drop a Command Button from Control Æ Command. Drag an aZ Text control onto the button use the Property view to name it Submit. Then from Palette Æ Control Æ Output, drag a Header control to the canvas. 12. From the Bindings view, drag the label_string property to the Header field which will have the effect of binding whatever value is entered into the String text box and submitted to the Header display. Save, deploy, and test.

E57

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Use the Designer On-Topic Help

Hint s Hint: Step 2: Creating a new portal folder and page in Public Folders.

Hint: Step 3: Add the BasicPortlet to the page in the Page Edit mode

E58

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 4: View the page with the portlet after saving.

Hint: Step 5: Access the server through MWS Admin view.

E59

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Hint: Step 6&7:

Exercises

Edit the portlet text with the Property view and view redeployed portlet.

Hint: Step 9: Create a String property and move it to Bindings view.

E60

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 10: Finish the form with a button and header.

E61

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 11: Bind the property to the Header, redeploy, and test.

E62

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

This page intentionally left blank

E63

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Exercise 12: Generate a User Interface Overview In this exercise, you will create a customer user interface that will allow a customer to query order information from a database, using an Integration Server web service interface to a SQL Server database.

Estimated Completion Time 30 minutes

Task 1. Make sure that My webMethods Server and Designer are running. 2. (H) Launch webMethods Integration Server (IS) using the desktop icon labeled Start Integration Server. Allow at least 1 or perhaps more minutes for IS to start. 3. (H) In Designer, make sure your project BasicCAF is open and that the active perspective is My webMethods. Use the Portlet Application Configuration Editor to add a new generic portlet called OrderSearchPortlet. 4. (H) Open the IS Browser by clicking on the tag Default. If asked to login, enter user/password Administrator/manage. Open to CAFDemo Æ caf Æ northwind Æ SearchOrders in the browser and drag the service to the form control on the OrderSearchPortlet/default.view. Answer No to the pop-up dialog concerning a table provider. 5. Publish the new portlet to the server and save the portlet when asked. 6. (H) Create a public folder in MWS Admin view named OrderSearch. 7. (H) Right click the OrderSearch folder, and choose portlet Æ BasicCAF Æ basiccaf_ordersearchportlet portlet entry. Name it OrderSearchPortlet and click the Finish button. 8. (H) Double-click the new entry in the MWS Admin view to view the portlet. Use sysadmin/manage if prompted to login to MWS. 9. (H) The portlet display shows an Input screen, an Output results table definition, and a Refresh button. Enter ANTON in the field Keyword and click the Refresh button. 10. (H) Return to Designer to edit the new UI form. Move the Keyword row out of the Input Parameters table, under Search Orders directly. Next select the entire Input Parameters table and delete it. Redeploy and view. 11. (H) Test by entering AN for the Keyword which will generate more results. Note the automated paging control at the bottom. 12. Move the Refresh button up beside the Keyword item. Add a text control to the button and give it the value Search Orders. Remove the word Refresh from the Async Command Button’s Value parameter. Redeploy, view, and test.

E64

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Use the Designer On-Topic Help

Hint s Hint: Step 2. IS Start message in Command Prompt window

Hint: Step 3: Add a new Portlet to the Project

Hint: Step 4: Drag/Drop IS Service to Designer form

E65

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 6: Create a new folder in MWS Public Folders

E66

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 7. Add the new portlet to the new folder

Hint: Step 8: View the deployed portlet.

Hint: Step 9: Finish the portlet query results

E67

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 10: Edit the form

Hint: Step 11: Results from the edited form

E68

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 12: Finish the form with a button and header.

E69

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Exercise 13: Using AJAX Controls Overview In this exercise, you will add an AJAX control to your BasicCAF project to compare the working of standard form and whole page submission to the asynchronous AJAX control update.

Estimated Completion Time 10 minutes

Task 1. Make sure that MWS service and Designer are running. In Designer, reopen the BasicCAF project and the BasicPortlet/default.view. After the exercise on using Designer views, your project form should contain a label string property with an edit control, a command button, and a Header field bound to the text submitted by the command button. 2. (H) From the Palette view, drag and drop Control Æ Command ÆAsync Command Button to the canvas after the standard command button named Submit. Label the AJAX button as AJAX Update. Deploy your app to the server. 3. (H) Use Mozilla Firefox as your browser and login to the MWS Console as sysadmin. Navigate to your project page in Public Folders -> test. 4. (H) Enter a relatively lengthy string into your edit control and watch the Firefox toolbar for the Stop loading this page icon (the large red X) as you click the Submit button. Note that the enablement of this button indicates that a standard form submit is occurring and that a page is being received. You should also be able to see the visual refresh of the whole display area of the page. 5. Next watch the same icon as you press the AJAX Update button and note that the page icon button is never enabled. You should also be able to see that visual refresh of the page is limited only to the changed Header associated controls. Try the same thing with the Internet Explorer browser for comparison.

Resou r ces Use the Designer On-Topic Help

Hint s Hint: Step 2 & 3:

Updating the BasicPortlet for AJAX.

E70

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Hint: Step 4&5:

Exercises

The standard SUBMIT approach.

E71

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Exercise 14: Dynamic Drop-Down Overview In this exercise, you will configure the user interface that was created in the last exercise to use a dynamic drop down box as an input for the credit card type.

Estimated Completion Time 20 minutes

Task 1. Make sure both Integration Server and My webMethods Server are running. Make sure Designer is running and in My webMethods Perspective. 2. Create a new CAF project called UIexamples. Add a new generic portlet to the project called ControlExample. 3. (H) From the Palette view, drag/drop Control Æ Input Æ Dropdown to the canvas. 4. (H) Next, from the Palette view, drag/drop Control Æ Input Æ OptionGroup, directly onto the Dropdown control. 5. (H) In the IS Browser view, find CAFDemo Æ caf Æ northwind Æ GetShippers. Right click and select the option to Create a web service connector. 6. (H) Next, you will be taken through a series of input screens. Take the offered defaults and keep pressing the Next button until you reach the Dynamic Data Binding dialog. In the entry for Auto Refresh, click the Binding Expression column and change the value to true. Click Finish. 7. (H) In the Bindings view, under Managed Beans Æ ControlExample/default Æ Get Shippers Æ Output Results, select the Results item, right click, and select New Æ Content Provider. 8. (H) Again you will be taken through a series of input screens. Take the offered defaults and keep pressing the Next button until you reach the Dynamic Data Binding dialog. Select the entry for Table OptionGroup and click Next. 9. (H) In the dialog following, click the Binding Expression column for both the Label Property and Value Property and set the value to companyName. Click Finish. 10. (H) In the Bindings window you should see a generated Results binding called Results Provider. Drag/drop it to the option group of the dropdown control on the form. 11. Add the new project to the Server and publish, which will save your portlet. 12. (H) Create a new Public Folder on MWS named UIexample Folder and a page within it called ControlExample. Deploy your portlet (UIexamples Æ ControlExample) and test it.

E72

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint s Hint: Step 3: Drag/drop the Dropdown control

Hint: Step 4: Drag/drop the OptionGroup control on the Dropdown control

Hint: Step 5: Create Web Service Connector for IS Service

E73

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 6: Web Service Connector Dynamic Data Binding

E74

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 7: New Content Provider

Hint: Step 8: Web Service Connector Results Dynamic Data Binding

E75

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 9: Table OptionGroup Dropdown Properties

Hint: Step 10: Drag/drop dynamic Results Provider

E76

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 12: Completed Dynamic Dropdown

E77

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Exercise 15: Validation of Form Data Overview In this exercise, you will create a form with multiple text input fields in a group and validate some data the user enters into the form.

Estimated Completion Time 20 minutes

Task 1. Ensure both My webMethods Server and Designer are running and that Designer is in My webMethods Perspective. 2. Create a new CAF project called Validation and add a new generic portlet called Validator. 3. Add the Validation project to the Server and republish. In Public Folders, create a folder named Validation Folder and in that folder a page named Validation Page. Deploy the Validator portlet to the Validation Page. 4. (H) From the Palette, drag/drop the Control Æ Panel Æ Property Group to the form on the canvas. 5. (H) Again from the Palette, under Control Æ Panel, drag/drop a Property Line onto the Property Group. 6. (H) From Control > Input, drag/drop a Text Input control onto the Property Line item. Select the Property Line (which also selects the embedded control), and Copy it. Then Paste 5 times on the line following. You should end up with 6 fields embedded in the Property Group. 7. (H) Select each Property Line in turn. In the Properties view, select the Display tab and enter the Label field. The label fields are: Name, Address, City, State, ZIP, Email. 8. (H) From the Palette, select Validator Æ RegExpr and drag/drop it to the text control in the ZIP field. Select the ZIP field validator icon and use the Properties view to enter the data shown in the table:

Validation Field Zip Code

Data

Value

Validator Regular Expression Pattern

^\d{5}$

Custom Error Message

Please enter a valid US zip code.

Append CAF Error Message

false

9. (H) Add a Command button with an embedded Text Output control following the Property Group. Name the button Submit. Save and republish your project. Copyright © 2007 by webMethods, Inc. All rights reserved

E78

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

10. (H) View the portlet. Try to enter some invalid ZIP code data and Submit the order. Notice the error message.

Resou r ces Use the Designer On-Topic Help

Hint s Hint: Step 4: Drag/drop a Property Group

Hint: Step 5: Drag/drop a Property Line

E79

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 7: Label the Property fields

Hint: Step 9:

E80

Version:08AUG2007

webMethods 7 BPM Portlet & UI Workshop

Exercises

Hint: Step 10:

E81

Version:08AUG2007