Adobe Dreamweaver CS3 Unleashed- P29 pptx

[View full size image] The Components panel consists of the following features: Component Type— Enables you to specify the type of component you'll be working with.. Under the ASP.NET se

SOAP— The Simple Object Access Protocol (SOAP) is a protocol specification that defines a uniform

way of passing XML data between networks Think of SOAP in terms of HTTP With HTTP, a userrequests a page (usually by typing in the HTTP address), and a response is returned in the form of awebsite The protocol that the website was delivered with was HTTP SOAP, on the other hand, is theprotocol used to define how objects are accessed and transferred across networks, typically packagedusing XML within a SOAP envelope "wrapper." A user or service makes a SOAP request and a response

is returned, as is the case with HTTP

HTTP— The Hypertext Transfer Protocol (HTTP) drives how we access information on the Web Web

services use SOAP in conjunction with HTTP Because HTTP is the protocol for accessing information onthe Web, SOAP can use HTTP to deliver the "wrapped" XML messages in a universal, operating systemindependent and server technology agnostic format

WSDL— The Web Services Definition Language (WSDL) provides a way for web service providers to

describe how and what their web services do, where they reside, and how to invoke them You will useWSDL in more detail later in this chapter

UDDI— The Universal Description, Discovery, and Integration service (UDDI) provides a mechanism

for clients to dynamically find other web services Using a UDDI interface, applications can locate anduse other web services You can think of UDDI as a DNS for business applications or web services

As you can see, the foundation for web services lies in open standards such as XML, SOAP, HTTP, WSDL, andUDDI But how do these components make up the web services architecture? Figure 29.1 sheds some morelight on the subject

Figure 29.1 XML, SOAP, HTTP, WSDL, and UDDI are all key components in the web services

architecture.

[View full size image]

The building blocks of web services are solidly rooted in open source standards such as XML, SOAP, HTTP,WSDL, and UDDI But how do you use these standards to create your own web services? For the most part,the development of web services is up to you More specifically, web services are created by your language

of choice in VB NET, C#, ColdFusion, and more How you expose, consume, and discover the web serviceafter it's created is ultimately up to the standards mentioned in Figure 29.1

Dreamweaver and Web Services Integration

Now you know that XML web services are meant to revolutionize the way we do business now and in thefuture Microsoft has realized this and implemented ways of working with and interacting with web services

in its NET initiative By the same token, Adobe has implemented ways of interacting with and using webservices in its Dreamweaver product

Note

In Dreamweaver, web services are supported only in the ASP.NET and ColdFusion server models

Although ASP and PHP support web service development, web service development is not supportedout-of-the-box by Dreamweaver and therefore is not discussed in this chapter

Remember that Components panel that was part of the Application panel group? Up to this point, we haveonly briefly mentioned it; now it's time to go over it in greater detail You can find the Components panel byselecting the Components tab from the Application panel group, also shown in Figure 29.2

Figure 29.2 The Components panel enables you to work with web services.

[View full size image]

The Components panel consists of the following features:

Component Type— Enables you to specify the type of component you'll be working with Under the

ASP.NET server model, Web Services is the only option Under the ColdFusion server model, bothColdFusion Components and Web Services options appear in this menu

Add Component— Adds a new component to the development environment Under the ASP.NET

server model, you have the opportunity to add a component using WSDL or by simply browsing to aprecompiled class (DLL) Under the ColdFusion server model, you're limited to WSDL only

Remove Component— Removes a specific component from the list.

Deploy (ASP.NET only)— Deploys the DLL (DreamweaverCtrls.dll) required to work with your

component in Dreamweaver to the testing server

Component window— Provides you with a treelike view of your web service, including the name of

the service, the class within that service, and all the web methods and properties outlined by the webservice

The most important feature in the Components panel by far is the Add Component option As you will see inthis chapter, adding the web service to your applications can be accomplished in one of two ways (one ifyou're working in ColdFusion): Add Using WSDL and Add Using Proxy Classes Because of the relativesimilarities between the two options, we'll use the Add Using WSDL option for both ASP.NET and ColdFusionexamples

Building a Simple Calculator Web Service

Now that you have a basic understanding of web services, what they do, what they are composed of, andhow to implement them using Dreamweaver, let's build a web service that performs a simple calculation oftwo numbers After we've created the simple web service, we'll review how to consume it using both theASP.NET and ColdFusion server models You can begin creating your web service by following these steps:

1. Start by creating a new folder in C:\Inetpub\wwwroot called CalculateService

2. In Dreamweaver, create a new document by choosing File, New Choose the Blank Page category, pickthe ASP.NET VB option, choose <none> from the Layout type, and then click Create

Note

Remember that web services are operating system agnostic and server technology

independent For this reason, you can create the web service with VB NET and have it

be consumed using ASP.NET VB, ASP.NET C#, or ColdFusion For the sake of simplicity,we'll create the web service using VB NET but consume it using both ASP.NET and

ColdFusion

3. Immediately save your file as calculate.asmx, saving it to the newly created folder

C:\Inetpub\wwwroot\CalculateService (Note that ASMX is the extension given to ASP.NET webservices.)

4. Switch to Code view, remove all existing code, and add the following code to the page in its place: <%@ Webservice class="CalculateService" %>

That's it! You've just created your first web service With the web service now created, you can launch thebrowser to test its functionality Testing the web service in a browser is important because it lets us makeany necessary tweaks before we consume the web service using either ASP.NET or ColdFusion To test the

web service, open a browser and type the URL http://localhost/CalculateService/calculate.asmx This

is the URL to the web service that we just created Immediately, a service screen appears, showing you alist of all available web methods Figure 29.3 displays the only method in your web service: Calculate

Figure 29.3 The service contains just one method—Calculate.

[View full size image]

Note

Obviously, you never wrote code that resembles what you are seeing This screen is a service of the.NET Framework and is available with its installation for use in testing web services The utility allowsyou to see all the information related to the web service, including the class name, web methodsexposed by the service, the WSDL contract, and more

Now let's test the functionality of the Calculate web service To do this, select the Calculate link that

appears Immediately, you are redirected to a new screen that enables you to input the x and y values thatthe function will accept as parameters Enter numeric values into both the x and y text boxes and then clickthe Invoke button that appears similar to Figure 29.4

Figure 29.4 Click the Invoke button to invoke the function.

A new browser window opens, displaying the result of the calculation in XML format similar to Figure 29.5.

Figure 29.5 The result of the calculation is shown in XML format.

[View full size image]

But why is the result shown in XML format? Recall that XML is a universally adopted format for describingdata For this reason, a web service can be created using any language As long as the output is in XML, anyserver-side technology consuming that web service can read the result

Now that the web service is built, we need only to consume the web service using a web application that weare responsible for building In the next two sections, we'll build an application and consume the web serviceusing both the ASP.NET and ColdFusion server models

Consuming the Calculator Web Service in ASP.NET

Our Calculate web service has been created; now what? Unfortunately, the web service testing utility youused in the previous section can get you only so far To really take advantage of the newly created webservice, we'll need to create a web application that acts as a consumer By programming against the

functionality exposed within the web service, our ASP.NET application can then dynamically pass in x and yvalues from the ASP.NET application into the web service, collect a result, and process the informationaccordingly To create an ASP.NET application that consumes the web service, follow these steps:

1. Open the currently defined VectaCorpASPX site and immediately create a new document by choosingFile, New Select the ASP.NET VB option from the Blank Page category, choose the <none> option fromthe Layout type list and click Create

2. Switch to the Components tab and select the Add Component (+) button Choose the Add Using WSDLoption The Add Using WSDL dialog appears

3. With the Add Using WSDL dialog open, enter the path to the web service's WSDL contract You can dothis by entering the path to the calculate.asmx file followed by the ?WSDL parameter (in this case,that path is http://localhost/CalculateService/calculate.asmx?WSDL) The result is shown inFigure 29.6

Figure 29.6 Browse to the WSDL contract exposed by the web service.

[View full size image]

Note

If you have a proxy generator that isn't listed in the menu, it means that you do not

have the NET Framework SDK installed The NET Framework SDK contains the

necessary WSDL utilities, including proxy class generators, that are required by

Dreamweaver To obtain the NET Framework SDK, visit www.asp.net Click the

Downloads option in the navigation menu, choose the Microsoft NET 2.0 Framework

link, and then click the SDK link next to the appropriate language You will be redirected

to a Microsoft download page Click the Download button, download the setup.exe file

to your computer, and then double-click it to begin the installation After the SDK is

installed, a proxy generator will appear within the Proxy Generator menu

4. Click OK The web service is shown in the Components panel, similar to Figure 29.7 You can view theCalculate function by expanding the service

Figure 29.7 The web service appears in the Components panel Expand the web

service to see the class and web method.

[View full size image]

Note

If you receive an Unable to Generate Proxy error, don't be alarmed This is a fairly

common problem and can be resolved in a few short steps Visit the following website formore information: kb.adobe.com/selfservice/viewContent.do?

externalId=tn_19102&sliceId=2 Although the reference made in the website is to

Dreamweaver MX, the solution will work for all versions of Dreamweaver

5. It's time to create the application that will use the web method exposed by the web service To do this,start by adding a new form (choose Insert, Form, Form) Make sure that you switch to Code view andadd the runat="server" attribute and value to the form

6 Add two new TextBox controls by choosing Insert, ASP.NET Objects, asp:TextBox Name them txtX and txtY, respectively.

7. Place your cursor after the txtY TextBox control and press Enter With your cursor under the TextBoxcontrols, add a Button control by choosing Insert, ASP.NET Objects, asp:Button Name the Button

control btnInvoke and give it the text label Invoke.

8. Place your cursor just after the new Button control and press Enter again This time, with your cursorunder the Button control, add a Label control by choosing Insert, ASP.NET Objects, asp:Label Name

the Label control lblResult The result of the completed user interface resembles Figure 29.8

Figure 29.8 Add new controls to handle the user input of the calculation values.

[View full size image]

9. Switch to Code view and add a new code declaration block (<script runat="server"> block) withinthe <head> tag of the page Within the new code declaration block, create a new subroutine called

Calculate() The result of the code addition should resemble the following:

<script runat="server">

Sub Calculate(s As Object, e As EventArgs)

End Sub

</script>

10 Click, hold, and drag the CalculateService() method from the Components panel into the

subroutine A new class instantiation is created within the subroutine as follows:

<script runat="server">

Sub Calculate(s As Object, e As EventArgs)

dim aCalculateService as new CalculateService()

End Sub

</script>

11 To round off the functionality, insert the following bolded code:

<script runat="server">

Sub Calculate(s As Object, e As EventArgs)

dim aCalculateService as new CalculateService()

lblResult.Text = aCalculateService.Calculate(txtX.Text, txtY.Text)

End Sub

</script>

In this case, we're setting the Text property of the Label control equal to the result of executing theCalculate() method and passing in the Text values of both the TextBox controls The completed codeshould resemble Figure 29.9 in Dreamweaver

Figure 29.9 Add the appropriate code to complete the subroutine.

[View full size image]

12 Before we test our code, however, there are two final steps First, you must add the

onClick="Calculate" attribute and value to the Button control as follows:

functionality

Note

You're probably wondering where that CalculateService.dll file in the VectaCorpASPX folder camefrom As soon as you added the web service using the Add Component dialog box, Dreamweaver

generated a proxy class and compiled it for you It then took the compiled DLL and placed it in your

project's root All you have to do now to get the application to work is to create a Bin folder withinthe project and place the CalculateService.dll file in the folder

Save your work as calculatesample.aspx To test the results in the browser, press F12 (Option+F12).

Enter numeric values into both text boxes and click the Invoke button The result is shown in Figure 29.10

Figure 29.10 Test the ASP.NET page in the browser Type values into both text boxes and invoke the method by clicking the Button control The calculation is performed and the result is

displayed in the label (which renders as a <span> tag).

[View full size image]

Note

Because the calculatesample.aspx file resides in the VectaCorpASPX folder, and the folder is

secured with forms authentication, you'll be required to log in first Log in using any of the

credentials in the database (for example, "ada" and "ada") and you'll immediately be redirected tothe calculatesample.aspx page

Notice that the application functions in a way similar to the application you used to test the web serviceearlier in the chapter The difference here is that the application is actually consuming and using the webservice Imagine how complex this can get: You could create web services to handle all sorts of functions Infact, hundreds of web services are available already that allow you to create searches, check weather,stocks, and so on In the next example, you will learn how to consume web services using ColdFusion Fromthere, we'll move forward, discussing web services and database interaction

Consuming the Calculator Web Service in ColdFusion

As you've seen, consuming web services through an ASP.NET web application was relatively simple Thesame can be said for ColdFusion applications By programming against the functionality exposed in the webservice (regardless of the language it was created in), our ColdFusion application can also dynamically pass

x and y values from the ColdFusion application into the web service, collect a result, and process theinformation accordingly To create a ColdFusion application that consumes the web service, follow thesesteps:

1. Open the currently defined VectaCorpCFM site and immediately create a new document by choosingFile, New Select the ColdFusion option from the Blank Page category, choose the <none> option fromthe Layout type list, and click Create

2 Save the page as calculatesample.cfm.

3. Switch to the Components tab and click the Add Component (+) icon The Add Using WSDL dialogappears

4. With the Add Using WSDL dialog open, enter the path to the web service's WSDL contract You can dothis by entering the path to the calculate.asmx file followed by the ?WSDL parameter (in this case,

type http://localhost/CalculateService/calculate.asmx?WSDL).

5. Click OK The web service is listed in the Components panel Try expanding the nodes of the webservice to reveal the class, method, and parameters outlined by the web service, similar to Figure29.11

Figure 29.11 Expand the nodes of the web service to view the class, method, and

parameters exposed by the service.

6. It's time to create the application that will eventually invoke the method exposed by the web service

To do this, start by inserting a new form into the blank HTML page you created in step 1 by choosingInsert, Form, Form With the form selected, keep the Method at POST and change the Action to

calculatesample.cfm In this case, the page will POST to itself

7. Add two Text Field form objects and a Button form object, naming them txtX, txtY, and Submit,respectively The result of what you should have thus far is shown in Figure 29.12

Figure 29.12 Add two text fields and a button form object to the form.

[View full size image]

8. Switch to Code view In the <head> tag of the document, enter the following code:

<CFOBJECT

WEBSERVICE="http://localhost/CalculateService/calculate.asmx?WSDL"

NAME="cs">

<CFIF ISDEFINED("FORM.txtX") AND ISDEFINED("FORM.txtY")>

<CFSET strVal = cs.calculate(FORM.txtX, FORM.txtY)>

As a value, I entered cs, which is short for CalculateService Next, and more importantly, we use a

CFIF tag to determine whether a value has been returned from the txtX and txtY text fields If not, weset a variable named strVal to nothing If a value has been returned by the form (the user clicked theInvoke button), we set the same strVal variable equal to the result of calling the Calculate() methodand passing in the values of the txtX and txtY form objects as parameters

9. With the strVal parameter set, we can now output its value under our Invoke form button You can dothis by adding the following code directly beneath the existing Button form object:

<CFOUTPUT>#strVal#</CFOUTPUT>

As you can see (below the code for the Submit button), the <CFOUTPUT> tag is used to display the valuereturned by the web service The result of the code additions resembles Figure 29.13.

Figure 29.13 Use the <CFOUTPUT> tag to display the result of the set variable.

[View full size image]

Save your work and test the results in the browser by pressing F12 (Option+F12) Enter a value into thetxtX text field and a value into the txtY text field and click the Submit button The calculation is performed

by the ASP.NET-based web service and returns a result to the ColdFusion-based web application similar toFigure 29.14

Figure 29.14 The ColdFusion application calls the web service, passing in the value of the X and

Y text fields The ASP.NET web service processes the request and sends the result back to the

ColdFusion application.

Web Services and Database Interaction

So far, you've learned to use web services to return simple calculations as strings This section goes beyondthe traditional web services paradigm and teaches you how to programmatically access database datathrough web services The beauty in this task lies in the fact that you can eliminate the arduous task ofrepeatedly making database calls through your various dynamic pages by allowing the web service to do allthe work

In this section, we'll build a web service that pulls data from the x_CompanyEvents table contained in theVecta Corp database Unlike previous sections where we used an ASP.NET web service to do all the work byexposing a familiar interface to both ASP.NET and ColdFusion applications, in this section you'll learn how tocreate two types of web services using Dreamweaver First, you'll create an ASP.NET web service that pullsdata from the x_CompanyEvents table and returns the results to the ASP.NET application in the form of aDataset; second, you'll create a ColdFusion component (CFC) that pulls data from the x_CompanyEventstable, exposes it as a web service, and then consumes the data using a ColdFusion web application

Building the Company Events Web Service Using ASP.NET

One of the most flexible interfaces for exposing web services is ASP.NET Using either VB.NET or C#, adeveloper can easily connect and issue a command to a database, fill a Dataset, and then return the results

to an ASP.NET web application The ASP.NET web application, accepting a Dataset, needs only to bind theresults to a DataGrid We'll certainly get to that functionality in the next section, but for now, let's focus ondeveloping the web service You can begin by following these steps:

1 Start by creating a new folder within C:\Inetpub\wwwroot called CompanyEventsService.

2 In Dreamweaver, create a new document by choosing File, New Choose the ASP.NET VB option from

the Blank Page category, choose the <none> option from the Layout type list, and click Create

3 Immediately save your file as companyeventsservice.asmx, saving it to the newly created folder

5 Save your work.

Before we proceed any further, let's break down the code in hopes that you'll understand it better Initially,

we add the Webservice directive, which defines the page as a web service and outlines the class as

Importing these three namespaces gives our web service access to DataSet, OleDbConnection,

OleDbCommand, and various other web service classes for use in our web service

Next, we outline our class, inherit from the WebService class, instantiate a new instance of the

OleDbConnection class, passing in the connection string as a parameter to the constructor, instantiate anew instance of the OleDbDataAdapter class, passing in the SQL statement and connection object as

parameters into the constructor, and create a new instance of the DataSet class:

Dim oDA As New OleDbDataAdapter("SELECT * FROM x_CompanyEvents", oConn)

Dim oDS As New DataSet

Next, we outline our web method, the public function named getCompanyEvents(), setting the return type

as a DataSet; then we fill the DataSet and return it:

To test the results, open a browser and enter the path

http://localhost/CompanyEventsService/companyeventsservice.asmx Immediately, the web

service testing application opens in the browser, displaying the only web method, getCompanyEvents(),exposed by the web service

Select the link As in the calculator example, you're redirected to a page that allows you to invoke themethod This time, however, because our method doesn't accept any parameters, text boxes don't appear

To see the results of the web service connecting to the database, issuing a command, and returning theresults as a DataSet, click the Invoke button Immediately, the results are returned, similar to Figure 29.15

Figure 29.15 The company events are returned in XML format.

[View full size image]

It works! Our next step is to build the ASP.NET application that will consume the data

Note

It's important to understand that the DataSet type is not a universal web service return type.Datasets are native to NET and cannot be consumed in other server models such as ColdFusion,PHP, or even ASP To make this universal, we'd have to return an array instead of a DataSet

Consuming the Company Events Web Service in ASP.NET

Now that the web service has been created and we've tested it to make sure that it works, let's build theASP.NET web application that we'll use to consume the data that it returns You can build the webapplication by following these steps:

1. With the VectaCorpASPX site selected in the Files panel, open the default.aspx page

2. Open the Components panel by choosing Window, Components

3. Click the Add Component (+) button and select the Add Using WSDL option from the submenu TheAdd Using WSDL dialog appears

4. In the Add Using WSDL dialog box, enter the path

http://localhost/CompanyEventsService/companyeventsservice.asmx?WSDL and click OK.

The CompanyEventsService option appears in the Components panel list similar to Figure 29.16

Figure 29.16 The CompanyEventsService appears in the Components list.

5. Select the CompanyEventsService.dll file that appears in your defined site's list and drag it into theBin directory You'll receive errors when you run the page if this step is not performed

6. Select the existing Welcome to the Vecta Corp site! text and press Delete to remove it.

7. With your cursor still blinking in the cell, switch to Code view and add the DataGrid tag as follows:

dim ces as new CompanyEventsService()

Figure 29.17 The company events data appears in the DataGrid.

[View full size image]

Building the Company Events Web Service Using ColdFusion and Components

As you have seen, creating web services in ASP.NET is fairly simple The only downside to the ASP.NETserver model is that you have to code the functionality by hand Fortunately for you, there's a better way.Because Adobe heavily promotes ColdFusion, creating web services using the ColdFusion server model isslightly more intuitive and can be accomplished using the panels that appear in the Application panel group.Creating a ColdFusion web service begins with ColdFusion Components or CFCs The benefit to using CFCs isthat they can be created as either standalone components or as publicly accessible web services To explorethis model further, follow these steps:

1. Start by creating a new folder in C:\Inetpub\wwwroot\VectaCorpCFM called cfc

2. Open the index.cfm file

3. Open the Components panel by choosing the Components option from the Window menu

4. In the Components panel, select the CF Components option from the Components Type menu.

5. Click the Add Component (+) button The Create Component dialog appears

6 In the Name text box in the Component section, enter the value CompanyEvents Browse to the

C:\Inetpub\wwwroot\VectaCorpCFM\cfc folder in the Component Directory File field The resultappears similar to Figure 29.18

Figure 29.18 Give your component a name and a directory to save to.

[View full size image]

7. Switch to the Functions section Click the Add Function (+) button to create a new function Assign the

value getCompanyEvents in the Name text box, select the remote option from the Access menu, and

choose the query option from the Return Type menu The results appear similar to Figure 29.19

Figure 29.19 Give your function a name, an Access type, and a Return type.

[View full size image]

8. Click OK The dialog closes and the CompanyEvents.cfc file opens complete with the necessary code toget you started (see Figure 29.20).

Figure 29.20 The new CompanyEvents.cfc file opens complete with the necessary

code to get you started.

[View full size image]

9. Switch to the Bindings panel and select the Recordset option from the Add (+) menu The Recordsetdialog appears.

10 Enter the name rsCE in the Name text box.

11 Make sure that the getCompanyEvents function is selected from the Function menu.

12 Choose the connVectaCorp option from the Data Source menu.

13 Choose the x_CompanyEvents option from the Table menu.

14 Click the Selected option button from the Columns option button group and highlight only the Event,

Date, and Location fields

15 Click OK Again, the necessary code is added to the CompanyEvents.cfc file similar to Figure 29.21.Save your work

Figure 29.21 The appropriate code is added to the CompanyEvents.cfc file.

[View full size image]

You're done! You've successfully created a ColdFusion web service In the next section, we'll review theprocess of consuming the web service using a ColdFusion web application

Consuming the Company Events Web Service in ColdFusion

With the web service created, you're now ready to add the code to the web application that will consume thedata the web service exposes To add this functionality, follow these steps:

1. Open the index.cfm page if it's not already open.

2. Select the existing Welcome to the Vecta Corp site! text and delete it.

3. With your cursor still highlighted in the cell, switch to Code view and add the following code:

<table width="100%" border="0" cellspacing="0" cellpadding="2">

5. Save your work

To test the functionality in the browser, press F12 (Option+F12) As you'll see, the company eventsdata is presented in the table