Adobe Dreamweaver CS3 Unleashed- P29 pptx

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 user requests a page (usually by typing in the HTTP address), and a response is returned in the form of a website. The protocol that the website was delivered with was HTTP. SOAP, on the other hand, is the protocol used to define how objects are accessed and transferred across networks, typically packaged using 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 on the Web, SOAP can use HTTP to deliver the "wrapped" XML messages in a universal, operating system independent 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 use WSDL 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 and use 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, and UDDI. But how do these components make up the web services architecture? Figure 29.1 sheds some more light 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 service after 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 the future. 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 web services 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 supported out-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 have only briefly mentioned it; now it's time to go over it in greater detail. You can find the Components panel by selecting 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, both ColdFusion 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 a precompiled 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 web service. The most important feature in the Components panel by far is the Add Component option. As you will see in this chapter, adding the web service to your applications can be accomplished in one of two ways (one if you're working in ColdFusion): Add Using WSDL and Add Using Proxy Classes. Because of the relative similarities between the two options, we'll use the Add Using WSDL option for both ASP.NET and ColdFusion examples. Building a Simple Calculator Web Service Now that you have a basic understanding of web services, what they do, what they are composed of, and how to implement them using Dreamweaver, let's build a web service that performs a simple calculation of two numbers. After we've created the simple web service, we'll review how to consume it using both the ASP.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, pick the 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 web services.) 4. Switch to Code view, remove all existing code, and add the following code to the page in its place: <%@ Webservice class="CalculateService" %> Imports System.Web.Services Public Class CalculateService Inherits System.Web.Services.WebService <WebMethod()> Public Function Calculate(x As Integer, y As Integer) As String Return x + y End Function End Class The code should include the Webservice directive, the System.Web.Services namespace import, and the CalculateService class that defines the Calculate function. Notice that the function is distinguished as a web method by the special <WebMethod()> identifier. The function accepts two parameters (x and y) as integers and performs a simple addition on them, returning the value as a string. Save your work. That's it! You've just created your first web service. With the web service now created, you can launch the browser to test its functionality. Testing the web service in a browser is important because it lets us make any 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 a list 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 allows you to see all the information related to the web service, including the class name, web methods exposed 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 that the function will accept as parameters. Enter numeric values into both the x and y text boxes and then click the Invoke button that appears similar to Figure 29.4. Figure 29.4. Click the Invoke button to invoke the function. [View full size image] 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 describing data. For this reason, a web service can be created using any language. As long as the output is in XML, any server-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 we are responsible for building. In the next two sections, we'll build an application and consume the web service using 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 you used in the previous section can get you only so far. To really take advantage of the newly created web service, 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 y values from the ASP.NET application into the web service, collect a result, and process the information accordingly. 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 choosing File, New. Select the ASP.NET VB option from the Blank Page category, choose the <none> option from the Layout type list and click Create. 2. Switch to the Components tab and select the Add Component (+) button. Choose the Add Using WSDL option. 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 do this 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 in Figure 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 the Calculate 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 for more 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 and add 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 TextBox controls, 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 cursor under 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) within the <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 the Calculate() method and passing in the Text values of both the TextBox controls. The completed code should resemble Figure 29.9 in Dreamweaver. [...]... for learning new technologies Let's review what Dreamweaver adds under the hood before proceeding with the visual aspects of the Spry framework within Dreamweaver When you're working with Spry, two key files, xpath.js and SpryData.js, are required and are generally included for you in your project Dreamweaver automatically copies these files from the Dreamweaver configuration folder and places them... experiences through faster loading pages In 2006, Adobe jumped on the trend by releasing Spry as a publicly available download from the Adobe Labs website Officially known as the Spry Framework for Ajax, Spry is a collection of JavaScript libraries combined with methods for applying JavaScript functions on standard web pages Like most other technologies that Dreamweaver adopts, the majority of the Spry... you're working with Ajax—XML Next we'll provide a generic overview of Ajax, followed by an in-depth overview of Spry Note For more information on the Spry framework for Ajax, you can visit Adobe' s Spry website at labs .adobe. com/technologies/spry/ What Is XML? HTML, as you know, is short for Hypertext Markup Language The "markup" refers to the library of tags that describes how data should be organized... with Spry widgets to incorporate form validation and advanced page layout options Let's get started! Introduction to XML, Ajax, and Spry As you browse through Dreamweaver' s interface and documentation, it might not seem all that obvious that Spry is Adobe' s implementation of Ajax But what exactly does this implementation entail or, more specifically, why do we need an implementation? To answer this question,... appearance, functionality, and more This same analogy holds true of Ajax Ajax is the name given to the overall concept of limited page refreshes, and Spry is Adobe' s implementation of Ajax The next few sections aim at providing a brief overview of Ajax and Adobe' s implementation of Ajax—Spry We'll begin with a brief overview of the technology used behind the scenes when you're working with Ajax—XML Next we'll... with Spry widgets to incorporate form validation and advanced page layout options Let's get started! Introduction to XML, Ajax, and Spry As you browse through Dreamweaver' s interface and documentation, it might not seem all that obvious that Spry is Adobe' s implementation of Ajax But what exactly does this implementation entail or, more specifically, why do we need an implementation? To answer this question,... appearance, functionality, and more This same analogy holds true of Ajax Ajax is the name given to the overall concept of limited page refreshes, and Spry is Adobe' s implementation of Ajax The next few sections aim at providing a brief overview of Ajax and Adobe' s implementation of Ajax—Spry We'll begin with a brief overview of the technology used behind the scenes when you're working with Ajax—XML Next we'll... you're working with Ajax—XML Next we'll provide a generic overview of Ajax, followed by an in-depth overview of Spry Note For more information on the Spry framework for Ajax, you can visit Adobe' s Spry website at labs .adobe. com/technologies/spry/ What Is XML? HTML, as you know, is short for Hypertext Markup Language The "markup" refers to the library of tags that describes how data should be organized... seen, creating web services in ASP.NET is fairly simple The only downside to the ASP.NET server 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 is slightly more intuitive and can be accomplished using the panels that appear in the Application panel group... true meaning and implementation of this powerful new technology That's where this chapter comes into play This chapter aims at demystifying the key component of the next generation Internet in Ajax and Adobe' s implementation of Ajax in Spry As you'll see throughout the chapter, you'll learn how to integrate XML data within Spry datasets to display in your web pages You'll learn how to create interactive . services in its .NET initiative. By the same token, Adobe has implemented ways of interacting with and using web services in its Dreamweaver product. Note In Dreamweaver, web services are supported only. 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. 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