Using Adobe Designer 6.

0 with IBM WebSphere Studio

Extend the reach of J2EE Applications with Intelligent Documents

 2004 Adobe Systems Incorporated. All rights reserved.

Adobe, the Adobe logo, Acrobat, Acrobat Capture, the Adobe PDF logo, FrameMaker, GoLive, InDesign, PageMaker, Photoshop, PostScript, and Reader are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Mac is a trademark of Apple Computer, Inc., registered in the United States and other countries. Microsoft, Windows, and Windows XP are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. All other trademarks are the property of their respective owners. Mention of third party products is for informational purposes only and constitutes neither an endorsement nor recommendation.

iii

Using Adobe Designer 6.0 with IBM WebSphere Studio

Introduction
The Data Capture Challenge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1 . . . . . . . . . . . . . . . . .1 . . . . . . . . . . . . . . . . . . . . . . . . . . . .1 The Adobe Designer IBM WebSphere Solution See For Yourself: A Hands-On Tutorial

Part A: Getting Started With Designer

Set Up Your Workspace Open the Tutorial Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

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

Part B: Using Web Services to Invoke Business Logic on the Server

Create a WSDL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17 . . . . .18 . . . . . . . . . . . . . . . . . . . . . . .19 Connect to the WSDL

Bind WSDL Request and Response Elements to Form Fields Add a Submit Button for the Web Service Preview Your Work

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19

Part C: Using XML to Connect a Form to a Data Source

Connect to an XML Schema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20 . . . . . . .22 . . . . . . . . . . . . . . . . . . . . . .22 Bind the Applicant First Name Field to a Schema Element Bind the Terms Field to a Schema Element Add a Submit Button Create a Web Project Preview Your Work

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28

iv

Part D: Validating Entries in Form Fields

Make the Applicant First Name Field Mandatory Validate a Value Range Preview Your Work Finish Up Where to Next? . . . . . . . . . . . . . . . .29 . . . . . . . . .29 Create a Validation for the Social Security Number eld

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .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.

The Adobe Designer IBM WebSphere Solution

Together, Adobe Designer and IBM WebSphere Studio Application Developer 5.1 provide a powerful solution to the data capture challenge. Adobe Designer is a client-based point-and-click graphical form design tool that simplies the creation of XML form designs for deployment as Adobe PDF or HTML forms. Using Designer, form authors can drag-and-drop graphics and other objects, such as list boxes, drop-down lists, and command buttons, onto their forms. They can design a form, dene its logic, modify it to match paper counterparts or meet strict legislative requirements, and then preview the form before deploying it. But the capabilities of Designer go beyond simple form creation. Form developers can use Designer to build and maintain data capture solutions that read from, validate against, and add to corporate data sources. With Designer, you can integrate PDF documents into existing workows by binding forms to XML schemas, XML example les, databases, and web services. Thats where WebSphere comes in. By combining Designer with the award-winning IBM environment for creating Web services and Java 2 Enterprise Edition (J2EE) applications, you can extend your data capture and management capabilities signicantly. You are able to build forms that integrate with server side business logic using HTTP and Web Services. The integration increases the capability of the form to provide up-to-the minute data, such as current interest rates in a mortgage application. The integration also reduces form related re-working by reducing the need to duplicate business logic in both the application tier and the presentation tier. Combining the sophisticated form design capabilities of Designer with Web services developed using WebSphere Studio lets you streamline and automate business processes, minimize distribution and turnaround times, and reduce costs. The results? Better, more efcient data capture and management systems. Competitive advantage. And the maximum return on your investment in enterprise applications.

See For Yourself: A Hands-On Tutorial

If you have Adobe Designer and IBM WebSphere Studio installed, and some additional les from Adobe, you can use this tutorial to see for yourself how Adobe Designer and IBM WebSphere work together. If you dont have the les, its not a problem. You can learn about Designer and WebSphere by reading the tutorial.

Tutorial

ADOBE DESIGNER 6.0 2

Introduction

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.

Part B: Using Web Services to Invoke Business Logic on the Server

You will ensure that the data captured by the form you are working on adheres to a predened XML Schema Denition (XSD). To do this you will bind the form elds to XML schema elements. You will use WebSphere Studio to create a web project that tests some of the elds in your form.

Part C: Using XML to Connect a Form to a Data Source

To obtain data for your form from a Web Service, you will create a Web Services Denition Language (WSDL) le, connect your form to it, and map form elds to the WSDL request and response messages.

Part D: Validating Entries in Form Fields

You will continue to extend the forms functionality by adding calculations and validations to form elds. You will dene simple validations that use built-in Designer functionality, and more complex calculations that use JavaScript.

Installing the Tutorial Files

To complete the tutorial, you must have the necessary software installed and the tutorial les available.
Tutorial Files

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

Part A: Getting Started With Designer

In the rst part of the tutorial, you will start Designer and add some elds to a form that we have created for you to use.
To start Designer:

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

icon at the left, right, and top of the screen.

Drag the palette border. Select Window > Manage Palettes, and select the palettes whose display you want to toggle.

Tutorial

ADOBE DESIGNER 6.0 4

Part A: Getting Started With Designer

Set Up Your Workspace

As you become comfortable working with Designer, you can customize the workspace to suit your preferences. For example, you can hide rarely used palettes and move frequently used ones into one palette window. For now, so that you have everything you need for the tutorial, you will set up your workspace.
To display the palettes you will need:

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.

Your workspace is set up for the tutorial.

Open the Tutorial Form

To open the tutorial form:

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

ADOBE DESIGNER 6.0 5

Part A: Getting Started With Designer

The tutorial form appears.

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.

Add an Applicant First Name Field

To add a eld where applicants can enter their rst name, you will drag a Text Field object from the Library palette and place it in the space below the Applicant First Name eld title. The Library palette contains default and user-dened objects that you can add to a form. Objects are organized into groups. Each group is represented by a tab, which is labeled with the groups name.

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

ADOBE DESIGNER 6.0 6

Part A: Getting Started With Designer

To add the Applicant First Name eld:

1 In the Library palette, click the Standard tab, select the Text Field object

, and drag it to the blank area under

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

ADOBE DESIGNER 6.0 7

Part A: Getting Started With Designer

Add a State Drop-down List

You dont always have to create elds from scratch in Designer. You can easily create and add your own custom objects to the Library palette, and then use them to create new elds on a form. For example, you could drag the Applicant First Name eld onto the Custom tab to create a custom eld for name entries. You can even combine objects to create a custom object, for example a reusable group of static elds and text entry elds for collecting a persons name and address. Simply create the object in a form, and then drag it into the Library palette. This creates a new custom object that can reused in future forms development. Designer includes several custom objects for you. For example, State is common to many forms. Rather than dene it on every form, we have dened a custom U.S. States object and added it to the Custom tab in the Library palette. You will add it to the form now, in the space under the State heading:

To add a State Drop-down List

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

Add a Term Drop-down List

If you dont have a custom object, you can create a drop-down list from scratch, and dene its values. You will do that now, in the Term (years) eld.

Tutorial

ADOBE DESIGNER 6.0 8

Part A: Getting Started With Designer

To add a Term drop-down list:

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:

and drag it to the Term (years)

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.

A cursor appears in the Text 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:

1 In the Object palette, click the Value tab.

Tutorial

ADOBE DESIGNER 6.0 9

Part A: Getting Started With Designer

2 In the Default eld, select 0.

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.

Add a Monthly Payment Field

You will add a Monthly payment eld and specify a display pattern for the eld. Later in the tutorial, you will validate an entry in the eld.

To add a monthly payment eld:

1 In the Library Palette, select the Numeric Field object

and drag it onto the form under the Monthly Payment

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:

To set a validation pattern for the eld:

1 In the Object palette, click the Value tab. 2 In the Validation Pattern box, type 999.99

You will check the validation later in the tutorial.

Tutorial

ADOBE DESIGNER 6.0 10

Part A: Getting Started With Designer

Preview Your Work

As you work, you can preview and test your form to see how it will look from the end users perspective. You will do that now, to see what the form looks like and to test the eld you have added to the form.
To preview your work:

In the Layout Editor, click the PDF Preview tab.

Designer converts the form to PDF and displays the form.

To try out the form:

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

Part B: Using Web Services to Invoke Business Logic on the Server

A Web Service is exactly as the name states, a service offered via the Web. Such services can expose any number of operations that can be called from applications, using the SOAP protocol over HTTP. For each operation, there is an input message (sent to the Web Service) and an optional output message (a response sent from the Web service to the calling application). The specic operations that can be called from your application is determined by the Web Service Description Language (WSDL) document, which is an XML-based denition of what operations the Web Service offers, and how to call them. You can create and bind elds in a Designer form to one or many Web Services. The messages you send must follow the WSDL format of your Web Service. There are two types of Web Service messages: RPC and DocLiteral. Designer supports DocLiteral. To support RPC, you would need to add JavaScript code to your form to process the response. Using WSDL, you can do the following:
Bind one or multiple operations within one or more Web Services. Attach the execution of a Web Service operation to a button click event. Call a Web Service operation from any event via JavaScript. Enable script access to all returned elements of a Web Service regardless of whether those elements are bound to

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

ADOBE DESIGNER 6.0 12

Part B: Using Web Services to Invoke Business Logic on the Server

4 Right-click and select New > Class.

5 In the Package box, type com.adobe.mortgage 6 In the Name box, type MortgageRateService

7 Click Finish.

Tutorial

ADOBE DESIGNER 6.0 13

Part B: Using Web Services to Invoke Business Logic on the Server

8 The wizard generates a Java le with an empty class denition.

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

ADOBE DESIGNER 6.0 14

Part B: Using Web Services to Invoke Business Logic on the Server

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

ADOBE DESIGNER 6.0 15

Part B: Using Web Services to Invoke Business Logic on the Server

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.

20 Click OK, and then click Next.

Tutorial

ADOBE DESIGNER 6.0 16

Part B: Using Web Services to Invoke Business Logic on the Server

21 When conguring the Java bean to run as a Web service, make sure you have selected Document/Literal as the

Style And Use.

22 Click Finish.

WebSphere Studio created the WSDL. To view the WSDL, navigate to it in the Project Navigator and open the WSDL.

Tutorial

ADOBE DESIGNER 6.0 17

Part B: Using Web Services to Invoke Business Logic on the Server

Connect to the WSDL

Next, you will connect your form to the WSDL.
To create a data connection to a Web service:

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

ADOBE DESIGNER 6.0 18

Part B: Using Web Services to Invoke Business Logic on the Server

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.

MyWSDL appears in the Data View palette below MyXMLSchema.

7 Collapse the MyXMLSchema hierarchy, and expand MyWSDL to display all of its elements.

You are ready to bind elements in the WSDL to form elds.

Bind WSDL Request and Response Elements to Form Fields

The WSDL in the Data View palette contains two branches getInterestRate Request and getInterestRate Response and a button that can be used to submit the Web Services request. You will bind the request to the State eld and the response to the Interest Rate eld. You will also create a button to submit the process.

Tutorial

ADOBE DESIGNER 6.0 19

Part B: Using Web Services to Invoke Business Logic on the Server

To bind the request element to the State eld:

Select the state item

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.

Add a Submit Button for the Web Service

You can drag the button from a WSDL to your form. The Web Service lookup is performed when a user clicks the button.
To add a button:

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 ) ;

Preview Your Work

If you have a Web Service running, you can preview your work.
To preview your work:

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

Part C: Using XML to Connect a Form to a Data Source

You can connect Designer forms to different types of data sources, and then bind form elds to elements in the data source. This lets you capture, present, move, process, output, and print information associated with forms. In this part of the tutorial, you will connect to an XML (Extensible Markup Language) schema. An XML schema formally describes the elements in an XML document. After you connect the form to the schema, you will bind the forms Applicant First Name eld to an element in the schema, and then submit your collected XML to a servlet created with IBM WebSphere.

Connect to an XML Schema

Connecting a form to an XML schema is the rst step towards binding data in the schema to elds in the form. The schema you will connect to is called mortgage.xsd.
To connect to the XML schema:

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.

3 In the Name New Connection box, type MyXMLSchema

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

ADOBE DESIGNER 6.0 21

Part C: Using XML to Connect a Form to a Data Source

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.

6 Click the browse icon

8 To display the view for the full schema, in the Data View palette, click + to expand the MyXMLSchema tree.

You are ready to bind data elements to form elds.

Tutorial

ADOBE DESIGNER 6.0 22

Part C: Using XML to Connect a Form to a Data Source

Bind the Applicant First Name Field to a Schema Element

Once you have displayed the XML schema in the Data View palette, you can bind elds to individual data elements in the schema. The primary ways to create a bound eld are:
Drag the data node onto the eld to which you want to bind it. This icon

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.

Bind the Terms Field to a Schema Element

You can dene many different elements in a schema to use for different form elds. For example, you can dene values to be used in a drop-down list. In part A of the tutorial you added a drop-down list box to the Terms eld. Now, to see how you can create the same eld in one step using a schema, you will delete that drop-down list and recreate it by binding the Terms eld to a schema element.
To delete the Terms drop-down list:

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

ADOBE DESIGNER 6.0 23

Part C: Using XML to Connect a Form to a Data Source

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.

Add a Submit Button

You can add a button to a form so that users can perform actions such as submitting data or executing a command. There are three types of buttons:
A Regular button is used to run a script that causes an action, such as changing pages. When the user clicks a

regular button, the script that you have created executes.

A Submit button indicates that the user has completed the form and is ready to send data to the Web server. An Execute button is used for Web Services.

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

ADOBE DESIGNER 6.0 24

Part C: Using XML to Connect a Form to a Data Source

Create a Web Project

A form can be used to capture data, but delivers much more compelling value when integrated with an application that manages, stores, and integrates that data. The Adobe Intelligent Document Platform is designed to create forms that work well with modern web-based applications. This section of the tutorial shows how to connect the form to a Java-based web application created in the IBM WebSphere Studio product. Included in the tutorial les is a WebSphere Studio project that contains a servlet that echoes back the submitted data. To test the Submit button that you created, you will create a Web project that echoes the data submitted with the button. To do this, you will start IBM WebSphere Studio Application Developer 5.1.1, create a Web project, import the J2EE application (servlet) Mortgage Application into the project, test the application, and publish the project. Then you will enter the project URL for your Submit button in Adobe Designer.
To create a Web Project:

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.

You have created and named a Web project.

Tutorial

ADOBE DESIGNER 6.0 25

Part C: Using XML to Connect a Form to a Data Source

To import the Mortgage Application servlet:

1 In the Project Navigator pane, click MortgageApplication to select it. 2 Select File > Import.

3 In the Import window, select Zip File, and click Next.

Tutorial

ADOBE DESIGNER 6.0 26

Part C: Using XML to Connect a Form to a Data Source

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

ADOBE DESIGNER 6.0 27

Part C: Using XML to Connect a Form to a Data Source

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.

3 Click the Show Data button.

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.

To publish the project to your Web server:

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

ADOBE DESIGNER 6.0 28

Part C: Using XML to Connect a Form to a Data Source

To specify the project location in Designer:

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.

Preview Your Work

Now you can preview your form and try out the Submit button.
To preview your work:

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

Part D: Validating Entries in Form Fields

In Designer, you can dene validations for form elds. In most cases, data validation is controlled through object attributes, or in the case of objects that accept complex data patterns, through pattern settings in the Value tab of the Object palette. In addition, you can associate objects that accept data with FormCalc or JavaScript expressions that validate the data. You will do the following:
Make the Applicant First Name eld mandatory. You will set up a message that appears when the user does not ll

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.

Make the Applicant First Name Field Mandatory

In the rst part of the tutorial, you added an Applicant First Name eld to the form. Now you will make that eld mandatory, so that users must enter a value when completing the form.
To make the Applicant First Name eld mandatory:

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.

Create a Validation for the Social Security Number eld

Next, you will specify the format in which social security number entries appear in the form.
To create a validation pattern for the SSN 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

ADOBE DESIGNER 6.0 30

Part D: Validating Entries in Form Fields

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.

Validate a Value Range

In the rst part of the tutorial, you created a Monthly Payment eld. Now you will specify a range of valid entries for the eld. First you will dene an error message to be displayed when the user enters a value outside the range, and then you will use the Script Editor to dene a range from $400 to $500.
To specify a message to display when the entry is invalid:

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:

Preview Your Work

For the last time in the tutorial, you will preview your form.

Tutorial

ADOBE DESIGNER 6.0 31

Part D: Validating Entries in Form Fields

To preview your work:

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.

You have completed the tutorial.

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