Forging Ahead

Team-Fly    

Macromedia® DreamWeaver® MX Unleashed
By Matthew Pizzi, Zak Ruvalcaba
Table of Contents
Chapter 25.  Looking Ahead


Although Dreamweaver MX cannot fully integrate every conceivable technology and language within its framework, it can better prepare itself and its users for emerging technologies. This section helps you understand those technologies that are on the verge of being used by the global Web development community and what Dreamweaver is doing to integrate those technologies within its development environment.

XHTML

You have probably heard of the term XHTML but might not be sure what it is. This section's purpose is to clear up any questions or rumors regarding the subject. In fact, the popular rumor is that XHTML is this revolutionary new language that will streamline the way developers create Web pages. Although there is truth to that statement, it isn't entirely correct. Yes, XHTML is aimed at streamlining the way developers create Web pages, but it is not a new technology. As you will see, XHTML has its roots in HTML and XML and is quite simple to pick up within the scope of this short section.

As just mentioned, XHTML has its roots in HTML and XML. Makes sense, right? Combine the eXtensible Markup Language with the Hypertext Markup Language and you're bound to get the eXtensible Hypertext Markup Language or XHTML. But what makes XHTML so extensible if its roots lie in HTML? As you may know, over the years HTML has turned into a mishmash of "bad" code. This isn't by any means the fault of the language. After all, when HTML was first conceived, it was meant to be written correctly and well formed. Over the years, as browsers began to fight for superiority, browser manufacturers began correcting users code by adding misplaced or forgotten tags, combining invalidly nested tags, and even removing tags when they didn't have to be there. Try the following line of code in your favorite browser:

 <html>  <head> <title>Bad HTML Example</title> <body> <h1>Some more bad HTML </body> 

Still works, right? Even though the closing </html>, </h1>, and </head> tags are all missing. Although this seems more of a flaw of the browser, you can partially thank the browser manufacturers for fixing the problems that we as developers were bound to make. Could you imagine if you were writing hundreds of lines of HTML and you got an error every fifth line as the browser was parsing the document? Who would ever want to write HTML? The problem now becomes the evolution of micro Internet devices in PDAs and cell phones. Because the browsers in these devices have to be small enough to compensate for the amount of memory they contain, browsers can't afford to check and correct errors for you any longer. In comes XHTML. Because XHTML combines the power and robustness of HTML with the rules and well-formed attributes of XML, it's the perfect language not only for well-formed hand-held Web sites, but large scale corporate ones as well.

XHTML is the new generation of HTML. If you haven't noticed, the HTML specification stopped at 4.01. It's been there for a couple of years now. The World Wide Web Consortium (W3C) recommends its newest XHTML 1.1 standard when creating Web sites and as you will soon learn, Dreamweaver MX has complete support for it. XHTML is written similarly to HTML, with some minor differences in the way that it's written. The most important differences are the following:

  • XHTML elements must be properly nested In the past, developers could accidentally write tags that were improperly nested. For instance, the following code would italicize and bold the text "Hello World":

     <b><i>Hello world</b></i>  

    As you can see, this line of code contains an improperly nested bold tag. The correct way of writing this using XHTML standards would read:

     <b><i>Hello world</i></b>  
  • Tag names must be in lowercase Why does it matter if tags are lowercase versus uppercase? XML is case sensitive. For this reason, the XHTML specification states that all XHTML tags and attributes should be written in lowercase. Remember, in XHTML the <BR> and <br> tags are considered different tags.

  • All XHTML elements must be closed Although this seems like an obvious point, think again. Although most elements in HTML contain closing tags, empty elements exist that do not contain closing tags. For example, consider the following code:

     <form name="form1" method="post" action="someform.asp">  <input type="text" name="fname"><br> <input type="text" name="lname"><br> <input type="submit" value="Submit"> </form> 

    Although this seems correct in HTML, it is completely wrong in XHTML. Notice that the <input> and <br> tags don't have closing tags associated with them. In HTML they don't. In XHTML, even empty elements must have the closing tag, or "/". The correct way of writing the preceding code is the following:

     <form name="form1" method="post" action="someform.asp">  <input type="text" name="fname" /><br /> <input type="text" name="lname" /><br /> <input type="submit" value="Submit" /> </form> 

    This is now correct because even the empty elements within the code have closing tags associated with them.

  • Attribute values must be quoted In the past, you could write a tag and its attributes and completely ignore the fact that attribute values were missing their quotes. For example, the following code would be fine in HTML:

     <img src=Images/myimage.gif width=400 height=400>  

    The following line would have to be rewritten for XHMTL. The result would encapsulate the attribute values within quotes like this:

     <img src="/books/4/291/1/html/2/Images/myimage.gif" width="400" height="400" />  
  • Attribute minimization is forbidden With HTML there were certain tags form tags, for instance that could contain minimized attributes. In HTML you could create a read-only text box and a checked check box by writing the following code:

     <input type="text" name="fname" readonly>  <input type="checkbox" name="cbox1" checked> 

    The correct rewrite within XHTML would be as follows:

     <input type="text" name="fname" readonly="readonly" />  <input type="checkbox" name="cbox1" checked="checked" /> 
  • The id attribute replaces the name attribute In HTML 4.01, the name attribute was used to give reference to HTML tags such as input, img, div, span, map, and so on. In XHTML, the name attribute is deprecated. The id attribute should be used instead.

  • The XHTML DTD defines mandatory elements Although this topic can cover an entire chapter, it is important to point out that all XHTML documents must contain the DOCTYPE declaration. The reason for the DOCTYPE is simple:

    • Document Type Declaration, or DTD, specifies the syntax of a Web page in SGML.

    • DTD is used by SGML applications such as HTML to specify rules about how a page is written; XHTML is specified in an SGML document type definition or DTD.

    • An XHTML DTD describes in precise, computer-readable language the allowed syntax and grammar of XHTML markup.

    • There are three types of DTDs Strict, Transitional, and Frameset. They can be written similar to the following:

       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  [ic:cc]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/ graphics/ccc.gifxhtml1/DTD/xhtml1-strict.dtd> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" http://www.w3.org/TR/xhtml1/ graphics/ccc.gifDTD/xhtml1- frameset.dtd> 

      NOTE

      The DTD is not related to XHTML is any way and therefore does not need to be written in lowercase and does not require a closing tag.


  • CSS is used instead of block-level formatting options For years, developers got away with formatting text quickly with the use of the font tag, cellpadding and cellspacing attributes with tables, left margin and top margin attributes in the body, and so on. Now with XHTML, developers are forced to use CSS whenever formatting needs to be accomplished.

As you can see, XHTML should be quite familiar to you if you know HTML. It's a simple matter of remembering rules that should be habit by now if you wrote HTML pages the correct way from the start. If you don't care, that's okay too, because Dreamweaver alleviates the heartache by including a check box that instantly turns on the "well-formed" code-writing features within Dreamweaver MX. This check box can be turned on by selecting it whenever you create a new document. Figure 25.1 shows where that check box is located.

Figure 25.1. Turn on XHTML compatibility within Dreamweaver MX.

graphics/25fig01.jpg

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 laid out within a page. The browser then parses the information out of those tags and presents it to the user in a friendly and legible fashion. What HTML doesn't do is give any information about what the data means, called metadata. Without metadata, search engines and other data-filtering techniques have to rely on keyword searches or even content searches to retrieve information for the user. Even so, they can miss entirely, returning paint chips rather than potato chips.

XML is about metadata and the fact that different people have different needs for how they categorize and organize that data. Like HTML, XML is a set of tags and declarations. Rather than being concerned with how the data is structured and subsequently parsed by the browser, XML provides information on what the data means and how it relates to other data.

In the near term, it provides an immediate opportunity for intranet database-driven site development. As is the case within large organizations, many departments may use the same database in different ways. Accounting needs payable and receivable information. Sales wants to monitor information by salesperson to figure out commission structures. Marketing wants data organized by product and industry segment to figure out future release strategies. Using XML, you will be able to customize the presentation of the queried data in a fashion most useful to the person making the query.

Like HTML, XML's purpose is to describe the content of a document. Unlike HTML, XML does not describe how that content should be displayed. Instead, it describes what that content is. Using XML, the Web author can mark up the contents of a document, describing that content in terms of its relevance as data. For example, the following HTML element:

 <P>Star Wars Episode I: The Phantom Menace</P>  

describes the contents within the tags as a paragraph. This is fine if all we are concerned with is displaying the words "Star Wars Episode I: The Phantom Menace" within a Web page. But what if we want to access those words as data? Using XML, we can mark up the words "Star Wars Episode I: The Phantom Menace" in a way that better reflects their significance as data:

 <film>Star Wars Episode I: The Phantom Menace</film>  

XML does not limit you to a set library of tags. When marking up documents in XML, you can choose the tag name that best describes the contents of the element. For instance, in the preceding example, you may need to differentiate between the VHS version and the DVD version. This can be achieved by using an attribute to describe the type. XML allows you to place attributes on elements. Using an attribute, you could describe "Star Wars Episode I: The Phantom Menace" as a film and then specify whether that film is the DVD version or the VHS version:

 <film version="DVD">Star Wars Episode I: The Phantom Menace</film>  

The following document describes the contents of a personal video library:

 <H1>The Library of Zak Ruvalcaba</H1>  <TABLE> <TR> <TD>Star Wars Episode I: The Phantom Menace</TD> <TD>Star Wars Episode I: The Phantom Menace</TD> <TD>The Return of the Jedi</TD> </TR> </TABLE> 

This document provides us with information, but that information is not too clear. Does Zak own two copies of the DVD version? Does he own a DVD version and a VHS version? The code below may be better suited for the preceding example:

 <library>  <owner>Zak Ruvalcaba</owner> <films> <film version="DVD">Star Wars Episode I: The Phantom Menace</film> <film version="VHS">Star Wars Episode I: The Phantom Menace</film> <film version="VHS">The Return of the Jedi</film> </films> </library> 

Because XML is concerned with how data should be defined, it does not make a good presentational language. If you created an XML document from the preceding example and tried to view it in the browser, you would get little more than a simple collapsible menu showing you the items within the tags. Despite this, XML plays a crucial role in Web development and will continue to do so now and in the future. For now, know that technologies that we use today include remnants of XML, including XHTML, Web Services, WML, and so on. If you are interested in creating XML files within Dreamweaver MX, you can select the XML document by selecting New from the File menu, as shown in Figure 25.2.

Figure 25.2. Select the XML file from the New File menu.

graphics/25fig02.jpg

XML Web Services

Looking back over the past few years, it's hard to imagine networked computers without the Web. The Web allows for networked communication with hundreds of services provided by hundreds of companies and organizations. From a user standpoint, if you can type, you can access these services. From an application service provider (ASP) standpoint, if you can set up a Web site, communication is opened up to other services. The problem doesn't lie in the access of those services but in the communication between the users and the services. The Web Service movement aims to solve this problem by facilitating the communication between users and services and even services between services.

By "services," I don't mean the typical online shopping or auction service, such as Amazon.com or eBay. Services can range from something as simple as a service that checks the weather or validates a credit card to something as complex as an airline flight reservation service that automatically deducts money from a centralized account that you specify, updates a global calendar that you maintain, and even reserves a hotel and rental car based on the destination that you desire. Seem far off?

Web Services are new types of Web applications. They are self-contained, modular programs that can be published, found, and called via the Web. They perform functions, which can range from something as simple as validating a credit card to updating hotel reservations. After a Web Service is deployed, users, applications, and other Web Services can invoke those functions within the Web Service. Still seem like it's too good to be true? Think again. Web Services are currently being used in Microsoft's My Services and Passport initiatives. The Passport authentication service is a self-contained Web Service that exposes an authentication scheme allowing other developers and applications to validate a user's credentials from one location. What this means is that if every developer used the Passport authentication service, it would eliminate the need for ever having to program your own login page.

So what makes up a Web Service? The basic framework within a Web Service lies within its platform:

  • XML XML is the meta language used to write specialized languages to articulate interactions between clients and services.

  • HTTP HTTP drives how we access information on the Web.

  • SOAP The Simple Object Access Protocol, or SOAP, is a protocol specification that defines a uniform way of passing XML data between networks. SOAP stems from the fact that no matter how great current middleware services (CORBA, DCOM, and the like) are, they still need some sort of wrapper. 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 Web site. The protocol that the Web site 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 up using XML within a SOAP envelope "wrapper." A user or service makes a SOAP request and a response is returned, just as is the case with HTTP.

  • UDDI The Universal Description, Discovery, and Integration Service, or 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.

  • WSDL The Web Services Definition Language, or 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.

Now that you have some familiarity with Web Services, what they do, and what they are composed of, let's build a Web Service that performs a simple calculation of two numbers. You can begin creating your Web Service by following these steps:

  1. Open a document in Dreamweaver MX and switch to code view.

  2. Immediately save your file as sample.asmx. ASMX is the extension given to Web Services.

  3. Add the code that follows. The code should include the Web Service directive, the Web.Services namespace import, and the Service1 class that defines the Calculate function. Notice the function is distinguished as a Web method by the special <WebMethod()> tag. The function accepts two parameters (X and Y) as integers and performs a simple addition on them.

     <%@ Webservice  %>  Imports System.Web.Services Public Class Service1    Inherits System.Web.Services.WebService    <WebMethod()> Public Function Calculate(x As Integer, y As Integer)      Calculate = x + y    End Function End Class 
  4. With the Web Service now created, you can launch the browser to test its functionality. Navigate to the folder where your Web Service is located and find the ASMX file. The service screen shows you a list of all available Web methods. Figure 25.3 shows that we just have the Calculate function. Obviously you never wrote code that resembles what you are seeing. This screen is a service of the .NET SDK and is available with its installation for use in testing Web Services.

    Figure 25.3. The service contains just one method, Calculate.

    graphics/25fig03.jpg

  5. Selecting Calculate redirects you to a new screen that will allow you to input the X and Y values that the function will accept and perform the calculation on. Click the Invoke button, as shown in Figure 25.4.

    Figure 25.4. Click the Invoke button to invoke the function.

    graphics/25fig04.jpg

  6. The result of the calculation is shown in XML format similar to that of Figure 25.5.

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

    graphics/25fig05.jpg

  7. Obviously this does no one any good if it's not applicable in a programmed environment. You can generate a proxy class that you will be able to program against within your ASP.NET pages. This allows for customization of Web controls that invoke and return values for the Web Service. Begin the process of generating the proxy class by opening the Command window. Select Start, Run, and type cmd. The Command window will open.

  8. Switch to the folder that the ASMX file is located in by using the CD command. Type the following code to generate the VB code that contains the necessary code to eventually generate the proxy class:

     wsdl /l:vb http://localhost/WebStore/sample.asmx?WSDL /n:AppSettings  

    The result is shown in Figure 25.6.

    Figure 25.6. Generate the new VB file.

    graphics/25fig06.jpg

  9. Now generate the new proxy class by typing in the following code:

     vbc /out:Service1.dll /t:library  /r:system.Web.dll,system.dll,system.xml.dll,system.Web.services.dll,system. data.dll Service1.vb 

    The result is shown in Figure 25.7.

    Figure 25.7. Generate the new proxy class.

    graphics/25fig07.jpg

  10. Notice that each time you run the code, the new file is created within the folder that contains the original ASMX file.

  11. Now open Dreamweaver MX and create a new ASP.NET page. Make sure that the proxy class (Service1.dll) is located within the Bin directory of the project you are working with.

  12. Switch to the Components tab and select the "+" icon.

  13. Select Add Using Proxy Classes as shown in Figure 25.8.

    Figure 25.8. Add the new proxy class.

    graphics/25fig08.jpg

  14. Browse to the location of the proxy class as shown in Figure 25.9. Make sure that the .NET DLL Reader is selected.

    Figure 25.9. Find the class file.

    graphics/25fig09.jpg

  15. Select OK. The Web Service is shown within the Components panel. You can view the Calculate function by expanding the service.

  16. Add two new textbox controls, one button control, and a label control as shown in Figure 25.10.

    Figure 25.10. Add new controls to handle the user calculation values.

    graphics/25fig10.jpg

  17. Now create a new script tag within the <title> tag. Drag the service in followed by the Calculate function. Code similar to Figure 25.11 should be created for you.

    Figure 25.11. Drag the object and method into the Code window.

    graphics/25fig11.jpg

  18. Next add the subroutine, the text value parameters, the code to set the label, and an onClick event to the button, as shown in Figure 25.12.

    Figure 25.12. Add the appropriate code to complete the subroutine.

    graphics/25fig12.jpg

  19. Save your work as sample.aspx and test it in the browser. The result is shown in Figure 25.13.

    Figure 25.13. Test the ASPX file within the browser. Set values and invoke the method passing in the parameters to return a result.

    graphics/25fig13.jpg

How simple was that? 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.

WML

To better understand the Wireless Markup Language, you first should understand the protocol that it sits on. Founded by the WAP Forum in 1997 by Ericsson, Motorola, Nokia, and Unwired Planet, WAP, or the Wireless Application Protocol, was developed to showcase Internet-based content on wireless devices. The WAP protocol is the leading standard for information services on wireless devices such as digital mobile phones. Although it is based on Internet standards (HTML, XML, and TCP/IP), it consists mainly of the WML language specification, a WMLScript specification, and a Wireless Telephony Application Interface (WTAI) specification. To fit into a small wireless terminal, WAP uses a Micro Browser, a small piece of software that makes minimal demands on hardware, memory, and CPU.

Micro browsers display information written in a restricted markup language called WML. WML stands for Wireless Markup Language. It is a markup language similar to SGML, but because it is based on XML, it has much stricter syntax. Because WML is an XML application, all tags are case sensitive and must be properly closed. WML pages are called decks and are constructed as a set of cards related to each other with links. When a WML page is accessed from a mobile phone, all the cards in the page are downloaded from the WAP server. The following is a simple example of a WML page:

 <?xml version="1.0"?>  <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card  title="Example 1"> <p>Example 1</p> </card> <card  title="Example 2"> <p>Example 2</p> </card> </wml> 

As you can see from the example, the WML document is an XML document. The DOCTYPE is defined to be WML, and the DTD is accessed at www.wapforum.org/DTD/wml_1.1.xml. The document content is inside the <wml> and </wml> tags. Each card in the document is inside <card> and </card> tags, and actual paragraphs are inside <p> and </p> tags. Each card element has an id and a title.

Although a full reference on WML is beyond the scope of this book, it is important to note that WML contains important formatting elements that are worth mentioning because of their relevance within Dreamweaver MX. They are:

Tag Purpose
Deck/Card Elements
<access> Defines information about the access of a deck
<card> Defines a card in a deck
<head> Contains information about the document
<meta> Defines meta information about the document
<template> Defines a template for all the cards in a deck
<wml> Defines a WML deck
<!--> Defines a comment
Text Elements
<br> Defines a line break
<p> Defines a paragraph
<table> Defines a table
<td> Defines a table cell
<tr> Defines a table row
Text Formatting Tags
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<u> Defines underlined text
Anchor Elements
<a> Defines an anchor
<anchor> Defines an anchor
Image Elements
<img> Defines an image
Event Elements
<do> Performs a task when the user clicks a link
<onevent> Contains code to be executed when an event occurs
<postfield> Contains information to be sent to the server
Task Elements
<go> Represents the action of switching to a new card
<noop> Says that nothing should be done
<prev> Returns to the previous card
<refresh> Refreshes a specified card
Input Elements
<fieldset> Used to group together elements in a card
<input> Defines an input field
<optgroup> Defines an option group in a selectable list
<option> Defines an option in a selectable list
<select> Defines a selectable list
Variable Elements
<setvar> Sets a variable
<timer> Defines a card timer

You can access WML-specific tags by first creating a WML page. Select New from the File menu and choose Other from the category. Select WML page from the subcategory as shown in Figure 25.14.

Figure 25.14. Create a new WML page.

graphics/25fig14.jpg

With the page created, you are now able to insert WML-specific tags by selecting them from the Tag Chooser as shown in Figure 25.15.

Figure 25.15. Insert WML-specific tags from the Tag Chooser.

graphics/25fig15.jpg


    Team-Fly    
    Top


    Macromedia Dreamweaver MX Unleashed
    Macromedia Dreamweaver MX 2004 Unleashed
    ISBN: 0672326310
    EAN: 2147483647
    Year: 2002
    Pages: 321

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net