Professional Documents
Culture Documents
iii
Add an Applicant First Name Field Add a State Drop-down List Add a Term Drop-Down List Add a Monthly Payment Field Preview Your Work
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
Bind WSDL Request and Response Elements to Form Fields Add a Submit Button for the Web Service Preview Your Work
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19
iv
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
Tutorial
Introduction
The Data Capture Challenge
Like all leading organizations in todays competitive business world, you face a signicant challenge when it comes to gathering and processing form-based data. Whether it is purchase orders and other forms associated with supply chain processes, or applications and similar forms that play a crucial role in managing customer relationships, you depend on fast, efcient data capture and processing to meet mission-critical goals throughout your enterprise. What are the keys to meeting this challenge? You must quickly design and create easy-to-use forms that meet corporate, industry, and government standards. You must deploy those forms over intranets and the Internet. And your forms must go beyond simple data capturethey must integrate with corporate databases and Web Services to form a comprehensive data capture and management solution.
Tutorial
In the tutorial, you will to do the following: Part A: Getting Started With Designer
You will open Designer and add elds to an existing form. This will get you started using Designer and introduce some of its basic features.
To work through this tutorial you will need to download the following les:
Adobe Designer 6.0 DesignerTutorialFiles.zip
http://partners.adobe.com/asn/developer/ibm/DesignerTutorialFiles.zip Unzip the les and place them in a convenient location on your computers hard disk. Throughout the tutorial, we will refer to this location as the tutorial install path.
Tutorial
1 Select Windows Start > Programs > Adobe Designer 6.0. 2 If the Welcome Screen appears, click New Form.
The Designer workspace appears. It is arranged to help you focus on creating and editing forms. You can customize the workspace to suit your requirements. If someone has used your copy of Designer, your workspace might look different from the one shown here.
A. Layout Editor B. Click to view more palettes C. Palettes D. Click to hide palettes
The Layout Editor is the main area where you create and maintain forms. You create the body and master pages for the form in the Layout Editor. You can also view and edit the forms XML source, preview the form, and test the elds in a PDF document. By default, the Layout Editor contains four tabs: Body Pages, Master Pages, XML Source, and PDF Preview. The PDF Preview tab only appears when Adobe Acrobat or Adobe Reader is installed. Tabbed palettes, such as the Library palette at the top right, are arranged around the layout area to provide easy access to the tools without cluttering your workspace. By default, the palettes to the left of the layout area are not displayed to leave the maximum space for you to work with. You can display and hide palettes in any of three ways:
Click the
Drag the palette border. Select Window > Manage Palettes, and select the palettes whose display you want to toggle.
Tutorial
1 Select Window, and make sure that Library is selected. 2 Select Window, and make sure that Font is selected. 3 Select View, and make sure that Object Boundaries is selected.
Object boundaries make it easy to see objects on a form. As you work through the tutorial, turn the boundaries off to see how the form will actually appear, and on to see the elds you are working with.
To hide the palettes you do not need:
1 1. Select Window, and make sure that Script Editor is not selected. 2 2. Select Window, and make sure that Hierarchy is not selected. 3 3. Select Window, and make sure that Data View is not selected.
1 Select File > Open. 2 In the File Open dialog box, use the Look In list to nd and double-click the le tutorial install path/MortgageApplication-start.xdp
Tutorial
The tutorial form is a mortgage application, but the steps you will perform and the concepts discussed apply to any type of form. As you can see, we have created titles for the forms elds, but left most of the entry areas blank. You will add elds in the highlighted areas in the graphic above. They include Applicant First Name, State, Terms, and Monthly Payment.
At install time, the Library palette contains the Standard, Barcodes, and Custom tabs. You can add, rename, and remove tabs according to your requirements. You can also create and add custom objects to the tabs.
Tutorial
1 In the Library palette, click the Standard tab, select the Text Field object
the Applicant First Name title on the form. The Applicant First Name eld looks like this.
The Applicant First Name area in the form already has a caption and a border, so you will remove the caption and border included with the eld you just added.
2 In the Layout palette, select None from the Caption list. The caption is removed.
3 In the Object palette, click the Field tab, select None from the Appearance list. The sunken border is removed.
You turned on Object Boundaries earlier, so a boundary remains to identify the object. The boundary does not appear on the rendered form.
4 To size the object, drag the border until the object ts in the eld.
Tip: You can also specify the size and position of the object in the Layout palette. Select the Layout palette and see how its values change as you drag the object borders. In Designer, as you work in a form, the information that displays in the palettes changes to reect the selected object.
To specify the font for entries in the eld:
1 Make sure your new eld is selected, and then click the Font tab. 2 Click the arrow
to the right of the words Currently editing Caption and Value. A menu appears.
3 From the menu, select Edit Value. 4 In the Font tab, set the font to Arial, the size to 9 point, and the style to Bold.
You have added a eld for Applicant First Name. Now youll add a drop-down list where users can select their State.
Tutorial
1 From the Custom tab in the Library, drag the U.S. States object to the space below the State title. 2 In the Layout palette, for the Caption position, select None. The caption is removed. 3 In the Object palette, for the Appearance, select None. The sunken box is removed. 4 To size the object, drag the border until it ts in the eld. When you are nished, the eld should look like this:
You have dened a drop-down list where users can select their state. Now you will add another drop-down list where users can select the term of their mortgage. S
Tutorial
1 In the Library palette, in the Standard tab, select the Drop-down List object area in Part III of the form. Your eld should look like this:
2 In the Layout palette, for the Caption position, select None. The caption is removed. 3 In the Object palette, in the Field tab, for the Appearance, select None. The sunken box is removed. 4 To size the object, drag the border until the object ts in the eld.
To dene values for the drop-down list:
1 In the Object palette, in the Field tab, double-click below the Text column heading in the List Items box.
2 Type 0 (zero) and press Enter. You have your rst entry. 3 Repeat Step 2 to add entries for 5, 10, 15, and 30. 4 If you want to reorder an item in the list, select the item in the List Items box, and click Move Up Down . 5 If you want to delete an item in the list, select the item in the List Items box, and click Delete Item
or Move .
Next you will specify a default entry for the drop-down list.
To specify a default entry for the drop-down list:
Tutorial
You have added a Terms drop-down list to the form, dened values for the list, and specied a default value. Next, you will add a monthly payment eld.
heading.
2 In the Object palette, in the Field tab, set the Appearance to None. The sunken box is removed. 3 In the layout palette, select None from the Caption drop-down list. The caption is removed. 4 Size the eld to t the available space. When you nish, the eld should look like this:
1 In the Object palette, click the Value tab. 2 In the Validation Pattern box, type 999.99
Tutorial
1 Type a name in the Applicant First Name eld. Notice that the font used is the one that you specied earlier. 2 Select a state in the State drop-down list. Remember that you created this eld using a predened object available in the Custom palette. 3 Notice that the default Term (years) is 0, and that you can select any of the values that you dened for the drop-
down list.
4 When you nish trying out the form, click the Body Pages tab.
To save your changes:
1 Select File > Save As. The Save As dialog box appears. 2 Set the Save As Type to Acrobat Form Files (*.pdf). (The .XDP option is the native Designer format.) 3 Deselect both of the Save Options and the Embed Fonts option at the bottom of the dialog box. 4 In the File Name box, type Yourname Tutorial. 5 Click Save. You have saved your le.
By now, you should have a pretty good feel for how you can use Designer to add and dene form elds. Of course, weve just scratched the surface of the many Designer features that are available. Next, you will learn how to bind form elds to an XML schema.
Tutorial
11
elds.
Use the SOAP 1.1 document style communication (SOAP bindings and an HTTP or HTTPS transport).
In the tutorial, you will use WebSphere to create a WSDL. You will then connect your Designer form to the WSDL. You will bind the request element in the WSDL to the State eld in the form, and the response element to the Interest Rate eld. When a form user species their state, the Web Service will return the appropriate interest rate for that state.
Create a WSDL
Now you will create a Web service that returns the current interest rate for a mortgage based on the U.S. state the user species.
To create a Web Service and associated WSDL:
1 Return to IBM WebSphere Studio Application Developer 5.1.1 2 Select the Web Perspective. 3 In the Project Navigator, select MortgageApplication.
Tutorial
5 In the Package box, type com.adobe.mortgage 6 In the Name box, type MortgageRateService
7 Click Finish.
Tutorial
9 Copy and paste the following code to create the function that implements the web service. This code is sample code and does include error checking that a production web service would require.
public double getInterestRate (St r ing state) { char rstLetter = state.toUpperCase().charAt(0); in t let terVa l = (in t)rstLetter ; if( ( let terVa l > 65) && (l etterVa l < 76)) { re tur n 5.00; } else{ re tur n 7.00; } }
10 Select File > Save. You now have the class required to process your data, and can build the WSDL. 11 Right-click MortgageApplication in the Project Navigator and select New > Other.
Tutorial
12 In the New dialog box, select Web Services on the left, and Web Service on the right.
13 Click Next. 14 In the Web Service dialog box, for the Web Service Type, select Java Bean Web Service.
15 Click Next.
Tutorial
16 The test server created in the Section B for the Echo servlet should be selected at this step. If not, create a new
test servlet using the WebSphere v5.1 Test Environment from Server Types. Make sure a server is selected (for demonstration purposes, we are using WebSphere v5.1 Test Environment from Server Types), and make sure your project MortgageApplication is displayed in the Service Web Project box.
17 Click Next. 18 Select the Java le (MortgageRateService.java) that you built earlier. 19 Select Browse Files, and then select MortgageRateService.java.
Tutorial
21 When conguring the Java bean to run as a Web service, make sure you have selected Document/Literal as the
22 Click Finish.
WebSphere Studio created the WSDL. To view the WSDL, navigate to it in the Project Navigator and open the WSDL.
Tutorial
1 Make sure that you returned to the Body Pages tab after nishing Part A. 2 Select File > New Data Connection. The rst screen in the wizard appears.
3 In the Name New Connection box, type MyWSDL. 4 Select the WSDL File option, and click Next.
Tutorial
5 To select the WSDL you created in the previous section, type in the URL associated with the IBM WebSphere Test Server: http://localhost:9080/MortgageApplication/wsdl/MortgageRateService.wsd. If you are not running IBM WebSphere, click Browse and search for and select the le tutorial install path/MortgageRateService.wsdl, and then click Next.
The New Data Connection dialog box displays a list of the methods the Web Service supports. In this case, it is just the getInterestRate method.
6 In the Select an Operation, click getInterestRate, and then click Finish.
Tutorial
in the Request branch, and bind it by dragging it onto the State eld that you created icon appears beside the element in the
earlier in the tutorial. To indicate that state is bound to a form eld as a request element, the Data View palette.
To bind the response element to the Interest Rate eld:
1 Select the getInterestRateReturn element in the Response branch, and drag it to where the Interest Rate eld
should be. To indicate that getInterestRateReturn is bound to a form eld as a response element, the icon appears beside the element in the Data View palette. You did not add an Interest Rate eld earlier in the tutorial, so the eld you added now has a caption and sunken border.
2 In the Layout palette, select None from the Caption drop list. The caption is removed. 3 In the Object palette, in the Field tab, for Appearance select None. The sunken box is removed. 4 Size the eld to t the available space.
Select the getInterestRateBtn button in the Data View palette, and drag it to the top right of the form.
Of course, in reality you would not add a button for this type of form. You would want a Web Service to return an interest rate when a user species their state and tabs out of the eld. Triggering the web service call in this scenario requires a small piece of JavaScript code. Open the Script Editor palette using the Script Editor command item in the Window menu. Select the State eld and then select the exit event from the Show list in the Script Editor. The JavaScript version of the code to add to the Script Editor is:
x f a . co n n e c t i o n S e t . My WS D L . exe c u te ( 0 ) ;
1 In the Layout Editor, click the PDF Preview tab. Designer converts the form to PDF and displays the PDF
document.
2 Select a state from the drop-down list. 3 Click the button getInterestRateBtn. 4 Depending on your state, selecting the Interest Rate eld will populate with either 5.0 or 7.0 5 In Designer, to return to the body page, click the Body Pages tab.
You have successfully bound a Web Service to your form. Next, you will dene validations for some form elds.
Tutorial
20
1 Make sure that you returned to the Body Pages tab after completing Part A. 2 Select File > New Data Connection.
The rst dialog box in the New Data Connection wizard appears.
A connection name must be one word. The rst character must be a letter. The remaining characters can be letters, digits, or underscores.
4 In the Get Data Description From area, select XML Schema.
Tutorial
5 Click Next. The next dialog box in the New Data Connection wizard appears.
in the dialog box located at the right edge of the Select XML Schema File box. A le browser window opens. Select Open. Using the XML Data Root Element Name list, you can choose a node in the XML schema. If you choose the top-level node, which is the default, the entire schema is used. If you choose a lower-level node, only that node and the nodes beneath it are used. Selecting a lower-level node is useful if you have a large, complicated, or industry-standard schema and your form uses only a portion of it. In the tutorial, the entire schema applies to the mortgage form, so you will accept the default. Using the other options in this dialog box, you can embed the XML schema in your form le, so it is always associated with the form. You can also transform data with an XSLT style sheet that will change the format of incoming and outgoing data associated with the form.
7 Click Finish. MyXMLSchema appears in the Data View palette.
8 To display the view for the full schema, in the Data View palette, click + to expand the MyXMLSchema tree.
Tutorial
appears beside the data node in the Data View to indicate that it is bound. You would use this method if your eld already exists in a form. on the page, you can move and format the elds to suit your requirements without affecting the binding. You would use this method if you dont already have elds on a form.
Drag a data node or group of nodes onto the page and Designer will automatically create associating elds. Once
You can easily see a elds binding properties in the Report Bindings palette. In the tutorial, you will bind the Applicant First Name eld (@rstName) element in the XML schema to the Applicant First Name eld in the form, and the terms element to the Terms eld.
To bind the Applicant First Name eld to the schema:
1 Click the Applicant First Name eld in the form to highlight it. This makes it easier to see where you will place the element on the form. 2 Drag the @rstName element from the Data View palette and drop it onto the Applicant First Name eld. This icon appears beside the data node in the Data View palette to indicate that the element is bound to a eld.
Select the Terms drop-down list in the form, and press Delete.
To bind the Terms drop-list to the schema:
1 Drag the Term element from the Data View palette (it is the second to last item in the schema) and drop it onto the Terms eld on the form. It should look like this:
You need to remove the eld title and sunken box, just as you did with earlier elds.
2 In the Layout palette, in the Caption Position list, select None. The caption is removed from the eld. 3 In the Object palette, in the Field tab, in the Appearance eld, select None. The sunken box is removed from around the eld. 4 Drag the objects borders to size it for the allotted space.
Tutorial
5 In the Text box in the Field tab, notice that the List Items are different from the ones you dened when you created the drop-down list manually.
You have bound two elds to schema elements. Now you will add a button to the form.
You will add a Submit button to submit the data from the completed form.
To add a Submit button:
1 In the Library palette, click the Standard tab, and then select the Button object and drag it to the top right corner of the form. 2 Double-click the text on the button to select it, and then type Submit. 3 Select the word Submit, and, in the Font palette, change the font from Arial 8 to Arial 12 bold. 4 In the Object palette, in the Field tab, for Control Type, select Submit. A Submit tab appears to the right of the Field tab.
In the Submit tab, you can specify the format to use when the form is submitted. You can change the format to PDF if you are sending the form to a user to be completed, to XDP if you are sending it to a program for processing, and to XML if you want to send only the data.
5 On the Submit tab, from the Submit Format list, select XML Data (XML). When you submit the form, the data will be submitted in XML format.
You have added a button that will enable users to submit the form data.
Tutorial
1 You will use Designer in the last step, so leave it open. 2 Start IBM WebSphere Studio Application Developer. 3 To open the Web perspective, select Window > Open Perspective > Web. 4 Select File > New > Dynamic Web Project. 5 In the Project name box, type MortgageApplication.
6 Click Finish.
Tutorial
1 In the Project Navigator pane, click MortgageApplication to select it. 2 Select File > Import.
Tutorial
4 In the Zip File dialog box, use the Browse button to select tutorial install path/Mortgage ApplicationServlet.zip. Ensure that all objects are selected in the left pane. If the Into folder does not display MortgageApplication, select Browse and select MortgageApplication from the list.
5 Click Finish.
The Echo servlet (Echo.java) and Web page (index.jsp) are installed in the MortgageApplication Web Project.
Tutorial
To ensure that your Web server is working, and that you have installed your project correctly, you can test the application.
To test the application:
1 Select index.jsp from the Project Navigator. 2 Right-click and select Run On Server.
Notice that you have a Web Project with a servlet named Echo that is congured to handle requests for MortgageApplication/EchoMe by the web.xml le.
1 Select File > Export, and select WAR le as your export destination. 2 Follow the wizard to export the project to your Web server.
Tutorial
1 You will use WebSphere Studio again, so leave it open. 2 Return to Designer, click the Submit tab, and in the Submit To URL eld, type the URL that species the project location on your computer. For example: http://localhost:9080/MortgageApplication/EchoMe.
1 In the Layout Editor, click the PDF Preview tab. Designer converts the form to PDF and displays the PDF document. 2 Check the Report tab to ensure there are no error warnings. 3 Enter a rst name in the First Name eld, select a State, select a Term, and then click the Submit button.
Clicking the Submit button causes the PDF to submit the XML data to the web application created in WebSphere Studio. That web application simply echoes the XML data back to the PDF Preview in Designer. A more complex web application might store the XML and return an HTML page conrming the submission.
4 In Designer, to return to the body page, click the Body Pages tab.
You have bound form elds to a schema and added a Submit button. Next you will use Web Services to invoke business logic in the form.
Tutorial
29
in this eld.
Create a validation pattern for the Social Security Number eld. When the user enters data in this eld, the data
is compared to the pattern. If the data does not match this pattern, no changes are made until the data is reentered and validation is successful.
1 Ensure you are back on the Body Page tab, and select the Applicant First Name eld. 2 In the Object palette, in the Value tab, select User EnteredRequired from the Type list.
3 In the Empty Message box, type: Please enter your rst name.
This message will appear if a user tries to submit a form and has not entered a value in the Applicant First Name eld.
1 Select the Social Security Number eld in the Applicant section of the form. 2 In the Object palette in the Field tab, in the Display Pattern list, type 999-99-9999 and press Enter.
Tutorial
The pattern displays in the Social Security Number eld. When the user types a Social Security Number in the eld, the format is applied. In patterns, the number 9 represents numbers, the letter a indicates alphabetic characters, and the letter O and the number 0 are both accepted as zero. Dashes are dashes. Any other special characters must be in quotes. There are three areas where patterns can be applied: to data coming in, to data being displayed, and to data going out. Data coming in is edited, data displayed is formatted, and data going out is displayed in the Binding tab.
1 Select the Monthly Payment eld. 2 In the Object palette, click the Value tab. 3 For Validation Script Message, select the Error option, and then enter the message: Entry must be between $400 and $500. The eld looks like this:
You will dene a Boolean expression in the Script Editor that will determine whether user entries are valid.
To dene the valid range for an entry:
1 If the Script Editor is not open, select Window > Script Editor. 2 In the Show list, as the condition to apply, select validate. 3 In the Language list, select JavaScript. 4 In the Script Editor, enter the following:
400 <= this.rawValue && this.rawValue <=500 When you nish steps 1 to 4, the Script Editor values should look like this:
Tutorial
1 In the Layout Editor, click the PDF Preview tab. Designer converts the form to PDF and displays the PDF document. 2 Click the Submit button. A message asks you to please enter your rst name, and tells you that the submit action is cancelled. 3 In the Social Security Number eld, type 123456789. The number is changed to the correct format. 4 In the Monthly Payment eld, enter 300. A message tells you that the entry is not within the necessary range of values. Try entering 400.
Finish Up
When you nish testing the form:
1 Click the Body Pages tab to return to the body page. 2 To save your le, select File > Save.
Where to Next?
What you have seen here just scratches the surface of what you can do with Adobe Designer and IBM WebSphere Studio. For more information about Designer, contact your Adobe representative, or visit http://www.adobe.com/. For more information about WebSphere Studio, visit www.ibm.com/us/.
Tutorial