Adobe Dreamweaver CS3 Unleashed- P29

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:50

0
31
lượt xem
4
download

Adobe Dreamweaver CS3 Unleashed- P29

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Adobe Dreamweaver CS3 Unleashed- P29: The good news is Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. The bad news, unfortunately, is that Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. Why so many windows, panels, and so on, Dreamweaver is unprecedented in the feature set it provides, allowing developers complete control when building websites and applications....

Chủ đề:
Lưu

Nội dung Text: Adobe Dreamweaver CS3 Unleashed- P29

  1. 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]
  2. 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.
  3. 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.
  4. 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.
  5. 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 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: Imports System.Web.Services Public Class CalculateService Inherits System.Web.Services.WebService 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 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.
  6. 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]
  7. 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.
  8. 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 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.
  9. 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.
  10. [View full size image] 9. Switch to Code view and add a new code declaration block ( block) within the 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: Sub Calculate(s As Object, e As EventArgs) End Sub 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: Sub Calculate(s As Object, e As EventArgs) dim aCalculateService as new CalculateService() End Sub 11. To round off the functionality, insert the following bolded code: Sub Calculate(s As Object, e As EventArgs) dim aCalculateService as new CalculateService() lblResult.Text = aCalculateService.Calculate(txtX.Text, txtY.Text) End Sub 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.
  11. 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: As you probably know by now, adding this value guarantees that when the button is clicked, the Calculate() method in the page is called and, of course, the code within the method is executed. Second, you need to click, hold, and drag the CalculateService.dll file currently residing in the project root into the Bin folder. After those two steps are complete, you're ready to test the functionality. Note You're probably wondering where that CalculateService.dll file in the VectaCorpASPX folder came from. 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 within the project and place the CalculateService.dll file in the folder.
  12. 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 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 to the calculatesample.aspx page. Notice that the application functions in a way similar to the application you used to test the web service earlier in the chapter. The difference here is that the application is actually consuming and using the web service. Imagine how complex this can get: You could create web services to handle all sorts of functions. In fact, 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. From there, we'll move forward, discussing web services and database interaction.
  13. Consuming the Calculator Web Service in ColdFusion As you've seen, consuming web services through an ASP.NET web application was relatively simple. The same can be said for ColdFusion applications. By programming against the functionality exposed in the web service (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 the information accordingly. To create a ColdFusion application that consumes the web service, follow these steps: 1. Open the currently defined VectaCorpCFM site and immediately create a new document by choosing File, New. Select the ColdFusion option from the Blank Page category, choose the option from the 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 dialog appears. 4. 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, 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 web service to reveal the class, method, and parameters outlined by the web service, similar to Figure 29.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 choosing Insert, 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.
  14. 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 tag of the document, enter the following code: In this case, the tag is used to make reference to the web service. Using the Webservice attribute, we need only add the location to the WSDL contract as a value. The second attribute, Name, allows us to uniquely name the web service reference so that we can invoke the method later in code. 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, we set a variable named strVal to nothing. If a value has been returned by the form (the user clicked the Invoke button), we set the same strVal variable equal to the result of calling the Calculate() method and 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 do this by adding the following code directly beneath the existing Button form object: #strVal#
  15. As you can see (below the code for the Submit button), the tag is used to display the value returned by the web service. The result of the code additions resembles Figure 29.13. Figure 29.13. Use the 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 the txtX 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 to Figure 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. [View full size image]
  16. Web Services and Database Interaction So far, you've learned to use web services to return simple calculations as strings. This section goes beyond the traditional web services paradigm and teaches you how to programmatically access database data through web services. The beauty in this task lies in the fact that you can eliminate the arduous task of repeatedly making database calls through your various dynamic pages by allowing the web service to do all the work. In this section, we'll build a web service that pulls data from the x_CompanyEvents table contained in the Vecta Corp database. Unlike previous sections where we used an ASP.NET web service to do all the work by exposing a familiar interface to both ASP.NET and ColdFusion applications, in this section you'll learn how to create two types of web services using Dreamweaver. First, you'll create an ASP.NET web service that pulls data from the x_CompanyEvents table and returns the results to the ASP.NET application in the form of a Dataset; second, you'll create a ColdFusion component (CFC) that pulls data from the x_CompanyEvents table, 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#, a developer 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 the results to a DataGrid. We'll certainly get to that functionality in the next section, but for now, let's focus on developing 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 option from the Layout type list, and click Create. 3. Immediately save your file as companyeventsservice.asmx, saving it to the newly created folder C:\Inetpub\wwwroot\CompanyEventsService. 4. Switch to Code view, remove the existing code, and replace it with the following code: Code View: Imports System.Web.Services Imports System.Data Imports System.Data.OleDb Public Class CompanyEventsService Inherits System.Web.Services.WebService Dim oConn As New OleDbConnection("Provider=Microsoft.Jet.OleDB.4.0;" & _ "Data Source=C:\Inetpub\wwwroot\VectaCorpASPX\Database\vectacorp.mdb") Dim oDA As New OleDbDataAdapter("SELECT * FROM x_CompanyEvents", oConn) Dim oDS As New DataSet _ Public Function getCompanyEvents() As DataSet oDA.Fill(oDS, "CompanyEvents") Return oDS End Function End Class
  17. 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 CompanyEventsService: Second, we import the necessary namespaces: Imports System.Web.Services Imports System.Data Imports System.Data.OleDb 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 a new 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: Code View: Public Class CompanyEventsService Inherits System.Web.Services.WebService Dim oConn As New OleDbConnection("Provider=Microsoft.Jet.OleDB.4.0;" & _ "Data Source=C:\Inetpub\wwwroot\VectaCorpASPX\Database\vectacorp.mdb") 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: _ Public Function getCompanyEvents() As DataSet oDA.Fill(oDS, "CompanyEvents") Return oDS End Function Last, we close the class by adding the following line: End Class 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 the method. 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 the results as a DataSet, click the Invoke button. Immediately, the results are returned, similar to Figure 29.15.
  18. 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 the ASP.NET web application that we'll use to consume the data that it returns. You can build the web application 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. The Add Using WSDL dialog appears.
  19. 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 the Bin 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: 8. Scroll to the top of the page and enter a new code declaration block, a Page_Load() subroutine, and the functionality that binds the web service to the DataGrid, as follows: Sub Page_Load()
Đồng bộ tài khoản