Dreamweaver MX 2004 phần 8 pptx

4306c23.qxd 3/18/04 8:34 PM Page 474 474 ■ chapter 23: Working with JSP 5. Specify the location of the JDBC-ODBC driver. Select “Using Driver On This Machine” (for a local web server) or “Using Driver On Testing Server” (for a remote web server). 6. Enter a user name and password if necessary to access the database. 7. Click Test. An alert box displays to let you know if the connection was successful. For more information on using databases in Dreamweaver, see Chapter 19, “Database Connectivity.” Creating a Dynamic JSP Page Now let’s create a simple JSP page to show the current date and time, and test it in our web server. This page accesses the current date and time on the server that processes the JSP page. If you’re using a local web server, it will display the local values for time and date. If you’re using a remote web server, it will display the time and date for the server location. 1. Open a new JSP file in Dreamweaver (File ➔ New ➔ Dynamic Page ➔ JSP). 2. Save the file as today2.jsp. 3. Open the Design panel group and click on the Options menu in the upper-right cor- ner. Select “Attach Style Sheet.” From the Attach External Style Sheet window, click on the Sample Style Sheets link at the bottom. Choose the Colors: Yellow/Brown style sheet (it’s included in the Chapter 23 folder on the CD as colors4.css). 4. Add the following HTML text to highlight the time: Today is Figure 23.5 5. Leave a space, then add the following code to request the current time from the server Using the JSP Server and write it to the page: to display the cur- rent date and time. <%= new java.util.Date() %> Note the <% and %> tags, which indicate that this is a JSP script block. 6. Save the page. 7. Preview the page in a browser (File ➔ Preview In Browser). It should resemble Figure 23.5. 4306c23.qxd 3/18/04 8:34 PM Page 475 using jsp in dreamweaver ■ 475 Using JSP in Dreamweaver Now that a database connection is established, you’re ready to use JSP and Dreamweaver MX 2004 to access the TrioMotors database and build a search and result page. You’ll build a search page using an HTML form. You’ll use a single parameter from the TrioMotors database (region) to search for all TrioMotors locations in that region, and then display those results to the user via a results page. First, create the search page: 1. Open a new JSP page in Dreamweaver (File ➔ New ➔ Dynamic Page ➔ JSP). 2. Open the Design panel group, click the Options menu at the upper-right, and select Attach Style Sheet. Browse to the location of the colors4.css file. 2. Insert an HTML form (Insert ➔ Form ➔ Form). 3. Enter results.jsp for the action, and GET for the method. 4. Add a List (Insert ➔ Form ➔ List/Menu). In the Tag Editor dialog box, enter region for the Name and 1 for the size. 5. Click on the opening select tag and open the Property inspector. 6. Click on the List Values button, and then enter the following values in the Labels col- umn of the List Values dialog box: • North America • South/Central America • Europe •Africa • Asia Figure 23.6 • Australia List Values 7. Enter values in the Values column of the dialog box, starting with 1 for North Amer- dialog box for ica and ending with 6 for Australia, as shown in Figure 23.6. JSP Search Page 8. Add a Submit button (Insert ➔ Form ➔ Button). Choose sub- mit from the drop-down menu, and enter Submit in the Name and in the Value field. 9. Save the page as search.jsp. 4306c23.qxd 3/18/04 8:34 PM Page 476 476 ■ chapter 23: Working with JSP Next, create the results page: 1. Create a new JSP page (File ➔ New ➔ Dynamic Page ➔ JSP). 2. Save the page as results.jsp. 3. Open the Design panel group, click the Options menu at the upper-right, and select Attach Style Sheet. Browse to the location of the colors4.css file. 4. Open the Bindings panel in the Application panel group. 5. Click the + (Plus) button at the upper-left of the panel and choose Recordset. 6. The Recordset dialog box displays in Simple view. Choose TrioMotors from the Con- nection drop-down menu, select the LOCATIONS table, and all columns, as shown in Figure 23.7. 7. From the first row of drop-down menus in the Filter area, choose REGION_ID and =; in the second row, choose URL parameter (because you’re using the GET method) and the name of the form object on the search.jsp page that accepts the search parameter ( region). 8. From the Sort drop-down menus choose REGION_ID and Ascending so that the loca- tions for that region will display in alphabetical order. Your settings should now look like those in Figure 23.8. 9. Click the Test button to preview the data display. Keep the page open. Finally, add a dynamic table to display the results: 1. Insert a dynamic table after the opening body tag (Insert ➔ Application Objects ➔ Dynamic Data ➔ Dynamic Table). Figure 23.7 Figure 23.8 Choosing the results display from the Recordset dialog Finalizing the settings in the Recordset dialog 4306c23.qxd 3/18/04 8:34 PM Page 477 other technologies ■ 477 2. In the Dynamic Table dialog box, select Show 10 Records At A Time, and then click OK to insert the table. 3. Save the page. 4. Open the search.jsp page, and preview it in a browser (File ➔ Preview in Browser). Choose a region from the drop-down menu and click the Submit button. The results for that region should display on the results.jsp page. Figure 23.9 and 23.10 show the display in Internet Explorer. Figure 23.9 search.jsp in Advanced JSP in Dreamweaver Internet Explorer If you are an experienced JSP developer, you can also use Dreamweaver to create JavaBeans or use JSP stored procedures or prepared statements to modify a database. For more information, see the Dreamweaver Help menu and the JRun section of the Macromedia site ( www.macromedia.com/software/jrun/). If you have installed JRun, see the Getting_Started_with_JRun section in the html folder in the docs folder in the directory where JRun is installed (usually C:\JRun4). Other Technologies In addition to the four server technologies that you’ve learned about in the last four chap- ters (ColdFusion, ASP, PHP, and JSP), Dreamweaver also supports a fifth server technol- ogy: ASP.NET, which along with emerging technologies is covered in Chapter 25. Dreamweaver also includes support for Extensible Markup Language (XML). The next chapter explores the use of XML and XHTML in Dreamweaver MX 2004. Figure 23.10 results.jsp in Internet Explorer This page intentionally left blank 4306c24.qxd 3/18/04 8:34 PM Page 479 CHAPTER 24 Working with XML and XHTML HTML is fine for most person-to-machine interactions, but machines have a hard time reading HTML. This is because HTML is mostly formatting information (which machines don’t care about) and links (which they do), and machines don’t read the content the way humans do. Basically, machines read data and need metadata or some sort of context to help them understand the meaning or applicability of that data. For day- to-day websites, this may not be very important. But for B2B (business-to-business) web- sites, it can make or break the project. One way that both humans and machines can understand is to encode the meaning or metadata surrounding data with XML (Extensible Markup Language), which is used to create custom markup languages (XML applications). You can design your own language by creating a set of tags that describe the content they contain. You can use this set of cus- tom tags to specify a structure for the content of your XML document. This chapter covers the following topics: ■ The basics of XML ■ Using XML in Dreamweaver ■ XHTML in Dreamweaver ■ Validating XML and XHTML documents ■ Using XML news feeds 4306c24.qxd 3/18/04 8:34 PM Page 480 480 ■ chapter 24: Working with XML and XHTML XML Concepts Why should you care about XML? XML and its associated technologies are one of the most rapidly growing areas in web development today. Even if you never deal with “data” on the websites you design, XML can be used to efficiently update and maintain the text content of web pages. Check out the resources listed at the end of this section to continue your introduction to XML. Flash 2004 and ColdFusion both include extensive support for XML application development, and future versions of Dreamweaver are likely to include much more support for XML and XHTML. One of the most important and basic features of XML is extensibility. Extensibility means that, in contrast to HTML, there is no core set of tags that make up the language. You can create whatever tags you need to structure your XML document so that the con- tent is in a form that meets your needs. If you give your tags meaningful names that describe the content, it is easy for you and others to understand what information is contained in the document. Dreamweaver itself is written partly in XML as well as HTML and JavaScript. For example, the configuration of your menus is stored in an XML file. Dreamweaver also supports the use of XML, through the use of Dreamweaver templates to import and export XML. Creating XML documents requires planning. If you are sharing XML documents with a larger group or industry, it’s important to make sure that the documents are structured in a consistent way so that the information can be accessed and exchanged easily and efficiently. For example, to create an XML document ( inventory.xml) that can be used for parts inventory information, follow these steps: 1. Start the XML document with an XML declaration like this one: <?xml version=”1.0”?> This XML declaration tells the processor that this is an XML file, and it also specifies which version of XML is used in the document. Version 1.0 is currently the only ver- sion of XML available, so it’s the only one we can specify in our XML declaration! 2. Add a root element to the document. In this case, the root element is inventory. Everything that follows the XML declaration is contained within this root element. <inventory> 3. Add a part element. This element is the first child of the inventory element. <part>1971</part> 4. Add additional child elements of the inventory element. These child elements contain information about a specific part in our inventory. <name>Maxwell Silver Hammer</name> 4306c24.qxd 3/18/04 8:34 PM Page 481 xml concepts ■ 481 <description>12” hammer with silver coating on head</description> <warranty>lifetime</warranty> <costRetail>25.00</costRetail> <costWholesale>12.50</costWholesale> <discount>yes</discount> <shipping>7.95</shipping> <stock>5</stock> 5. Close the inventory tag to complete the document. </inventory> The complete markup for inventory.xml is shown in Listing 24.1 and is also included in the Chapter 24 folder on the accompanying CD. Listing 24.1 XML File for Inventory Data (inventory.xml) <?xml version=”1.0”?> <inventory> <part>1971</part> <name>Maxwell Silver Hammer</name> <description>12” hammer with silver coating on head</description> <warranty>lifetime</warranty> <costRetail>25.00</costRetail> <costWholesale>12.50</costWholesale> <discount>yes</discount> <shipping>7.95</shipping> <stock>5</stock> </inventory> The markup in XML documents is often indented, as shown in Listing 24.1, to highlight the underlying structure of the document and to make it easier to read the code. This XML document (inventory.xml) illustrates the following basic rules of XML syntax: An XML document must contain a root element that contains all the other elements in the document. The XML declaration, links to other documents, and comments are the only components that can be outside of the root element container. The root element in this example is inventory. Every element must have a closing tag. Most commonly, XML elements contain content, either text or data, and need both an opening and a closing tag. However, XML can also include empty elements (elements that contain no content). Empty elements can use a combined opening and closing tag <warehouse/> 4306c24.qxd 3/18/04 8:34 PM Page 482 482 ■ chapter 24: Working with XML and XHTML or can use separate opening and closing tags <warehouse></warehouse> Empty elements often include attributes, but the attributes are contained within the tag itself: <warehouse branch=”east”/>. Elements must be properly nested. If you open one element and then open a second ele- ment before you close the first one, you must close the second element before you close the first one. For example, this is correct XML syntax: <apples> <oranges> </oranges> </apples> This is incorrect: <apples> <oranges> </apples> </oranges> Unlike HTML, XML syntax has strict rules that must be followed. XML documents will not function correctly if the syntax is not correct. XML is case sensitive. Case matters in XML. The elements APPLES, Apples, and apples are three different elements in XML. It doesn’t make a difference which case you use, but you must be consistent. All attribute values must be quoted. An attribute’s value must be enclosed in either single Figure 24.1 or double quotation marks; for example: inventory.xml in Internet Explorer 6 <part number=”1971”> An XML document that follows the rules of XML syntax is a well-formed XML document. An XML doc- ument that is well-formed will display in a browser; however, the display itself varies with the browser. Internet Explorer 6 displays the source code of the XML document. Figure 24.1 shows inventory.xml as displayed in Internet Explorer 6. Unlike Internet Explorer 6, Netscape 6+ displays the content of all the tags. Because XML does not include any information about the presentation of the content, 4306c24.qxd 3/18/04 8:34 PM Page 483 xml in dreamweaver mx 2004 ■ 483 the content is displayed in a straight line without any formatting. Figure 24.2 shows inventory.xml as displayed in Netscape 7. Style information can be added to an XML document by using a Cascading Style Sheet (CSS) or Extensible Style Language Trans- formations (XSLT) style sheet. Since the content is separated from the style, XML information exchange is not limited to the Web, but can also be used on other devices such as wireless appliances. In addition to being well-formed, XML documents should be valid. To determine if an XML document is valid, test it against another document that specifies the rules for the structure of the XML document. Either a document type definition (DTD) or a schema can be used for vali- Figure 24.2 inventory.xml dating XML documents. A DTD is a set of rules for the elements and attributes in a docu- in Netscape 7 ment. The syntax of a DTD is based on Standardized General Markup Language (SGML), the parent language of many other markup languages, including XML and HTML. A schema is also a set of rules for a document’s structure. Schemas are written in XML itself. For additional information about XML, check out the following online resources: • The W3C XML 1.0 (Second Edition) specification at www.w3.org/TR/REC-xml •XML tutorial at www.w3schools.com/xml/default.asp • IBM Developer Works at www-106.ibm.com/developerworks/views/xml/tutorials.jsp, which offers several XML tutorials including “Intro to XML” and “Validating XML” • “What the Hell Is XML?” an article by Troy Janisch at www.alistapart.com/stories/ hellxml/ • “How Should My XML Look? Using Style Sheets with XML,” an article by Jennifer Kyrnin at http://html.about.com/library/weekly/aa110600a.htm XML in Dreamweaver MX 2004 XML’s main role in Dreamweaver at the current time is for the underlying configuration of the Dreamweaver program itself. If you look at the files in the Configuration folder included in the Dreamweaver installation (the default path to the folder on a PC is usually C:\Program Files\Macromedia\Dreamweaver MX 2004\Configuration\), you’ll see that most of Dreamweaver’s configuration files are either XML, JavaScript, or HTML files. Open the Configuration folder and then open the folders named CodeColoring, CodeHints, Menus, or Toolbars, for example, and you’ll find XML files. The following code snippet is taken from Dreamweaver’s toolbars.xml file (in the Toolbars folder) that specifies the appearance of toolbars in Dreamweaver. <menubutton id=”DW_ValidatorErrors” image=”Toolbars/images/MM/validatornoerrors.png” [...]... the next chapter, you’ll learn about using emerging web technologies with Dreamweaver MX 2004, including how to use special types of XML files (WSDL and SOAP files) to add web services to your pages, and you will also find out how to use the NET framework with Dreamweaver MX 2004 CHAPTER 25 Emerging Technologies Dreamweaver MX 2004 features extensive support for web devel­ opment, including five server-side... the Dreamweaver toolbars and menus, as dis­ cussed in the preceding paragraph You can also create custom tags to use in Dreamweaver by using XML to create the specific features of the tags These aspects of Dreamweaver are covered in detail in Chapter 32, “Customizing and Extending Dreamweaver. ” How else can you use XML in Dreamweaver? • You can open an XML file for editing directly in Dreamweaver Dreamweaver... http://msdn.microsoft.com/netframework/using/ In the Hands On tutorial at the end of this chapter, you will add a web service to a Dreamweaver MX 2004 page using ASP.NET ■ 499 500 ■ chapter 25: Emerging Technologies Introducing Rich Internet Applications Studio MX 2004 introduces Rich Internet Application (RIA) development with Flash MX 2004 RIAs are a new form of web application that let you do the following: • Present a single screen... details on creating a Dreamweaver site, see Chapter 3, “Setting Up Your Workspace and Your Site.” Creating a Web Service You can create your own web service and add it to a Dreamweaver page, or you can use Dreamweaver MX 2004 to add a prebuilt web service to a Dreamweaver page (ASP.NET, ColdFusion, or JSP) In this tutorial, you’ll create your own simple web service and then add it to a Dreamweaver ASP.NET... and export XML to and from Dreamweaver with XML templates However, Dreamweaver requires the XML to be in a Dreamweaver- specific, nonstan­ dard form If you work with XML files regularly, it’s not likely you’ll want to take the extra time to convert your XML files to Dreamweaver format If you work with XML only in Dreamweaver, and want to display XML content in your HTML pages, Dreamweaver s XML templates... Dreamweaver XML format (either using item elements or using editable region names as tag names), they can be directly imported into Dreamweaver templates to create HTML files Importing Tags from XML Files Dreamweaver MX 2004 allows you to import tags from an XML DTD (Document Type Definition) or XML Schema document These imported tags are added to the Tag Library and then are available for use in Dreamweaver. .. with XML and XHTML Figure 24.7 DW MX 2004 Savvy Radio Weblog Using XML and XHTML Although Dreamweaver has strong support for creating and using XHTML, XML’s role in Dreamweaver is still mainly behind the scenes in configuration files Although you can edit XML files in Dreamweaver, for serious XML development work, we recommend an XML editor such as XMLSPY rather than Dreamweaver In the next chapter,... for use with Dreamweaver in Dreamweaver Help (Help ➔ Using Dreamweaver) When you use Dreamweaver to upload your site files to a web server, Dreamweaver automatically copies the pages, the proxy, and any necessary library files to the web server These items must be available to the web server or your pages will not be able to commu­ nicate with the web service application If you do not use Dreamweaver. .. Dreamweaver is to create a Dreamweaver template, use the template to create an HTML page, and then export the editable regions from this HTML page to create an XML file This XML file can then be used to create other XML files in a format that can be imported into Dreamweaver XML must be formatted in a very specific way in order to be imported into a Dreamweaver template, and any XML exported from Dreamweaver. .. doctype is required for a valid XHTML document Dreamweaver MX 2004 automatically uses the transitional XHTML doctype for any XHTML document that is not in frames, in which case it uses the frameset XHTML doctype The strict XHTML doctype is not available in Dreamweaver MX 2004, although you can always manually change the doctype to XHTML strict ■ 489 490 ■ chapter 24: Working with XML and XHTML Other rules . 4306c23.qxd 3/ 18/ 04 8: 34 PM Page 475 using jsp in dreamweaver ■ 475 Using JSP in Dreamweaver Now that a database connection is established, you’re ready to use JSP and Dreamweaver MX 2004 to access. any information about the presentation of the content, 4306c24.qxd 3/ 18/ 04 8: 34 PM Page 483 xml in dreamweaver mx 2004 ■ 483 the content is displayed in a straight line without any formatting basics of XML ■ Using XML in Dreamweaver ■ XHTML in Dreamweaver ■ Validating XML and XHTML documents ■ Using XML news feeds 4306c24.qxd 3/ 18/ 04 8: 34 PM Page 480 480 ■ chapter 24: Working with