Web site optimization – CHAPTER 5 DISPLAYING XML USING CSS 123

CHAPTER 5 DISPLAYING XML USING CSS 123 example, I ve set the color property, which sets the foreground or text color of the heading. The value of the property is #2B57A1, a blue color. The rule ends with a semicolon. Tip A CSS declaration can consist of several property-value pairs, and each property-value pair within a rule must be separated with a semicolon. If you forget the semicolon, property-value pairs that appear afterwards will be ignored. While you don t have to add a semicolon at the end of a single declaration, it s good practice in case you want to add more declarations afterwards. CSS supports a system of inheritance. Once you declare a rule for an element, it applies to all child elements as well. If you set a rule specifying the color for the , all child elements will inherit that color, including



, and

elements. The exception here is links, which a web browser often overrides. You may have to include a separate rule for the element. This is one of the reasons for the name cascading stylesheets. The CSS declarations flow down the element tree. Another reason for the name is that you can use rules from several stylesheets by importing one into another or importing multiple stylesheets into the same XHTML file. In addition, the rules apply in a cascading order. An inline declaration overrides a declaration embedded in the section of a page, which overrides an external stylesheet. The following example shows a single rule containing multiple declarations. This means that the rule applies to several elements at the same time: h1, h2, h3 {color:# 2B57A1; font-family:Verdana, Arial, sans-serif; font-weight:bold;} Commas separate the element names in the selector: h1, h2, h3 Here, semicolons separate several properties for these elements, and all properties appear between curly braces: {color:# 2B57A1; font-family:Verdana, Arial, sans-serif; font-weight:bold;} If you want the

element to appear in italics as well, you can add an additional rule: h3 {font-style:italic;} By declaring the common properties together, you can avoid repeating all the other property-value pairs when declaring the

element individually. Rules declared individually have a higher level of precedence in the cascade. For example, if you add a font-weight:normal declaration in the rule for

, it will override the bold declaration in the preceding rule. You can find a list of CSS2 properties at http://www.w3.org/TR/REC-CSS2/propidx.html. Many web sites explain how these properties are applied within stylesheets.
Note: If you are looking for cheap and reliable webhost to host and run your mysql application check
mysql web server services.


122 CHAPTER 5 DISPLAYING XML USING CSS these versions. I ve also included support for the Macintosh IE and Safari web browsers where possible. As with the previous chapters, you can download the resources for this chapter from the Source Code area of the Apress web site (http://www.apress.com). Let s start with a quick recap of CSS. Introduction to CSS Since the early days of printing, stylesheets have provided instructions about which font family and size to use when printing a document. You can use CSS to provide styling information for web documents. A CSS stylesheet is effectively a text document saved with the .css extension. Why CSS? When you include presentation elements within an XHTML page, the content can easily get lost within the style or presentation rules. The following benefits arise from separating the content from the style and using a stylesheet to indicate how a document can be presented visually: A single stylesheet can alter the appearance of multiple pages, meaning that you don t need to edit each individual page to make changes. Different stylesheets offer alternative views of the same content. The content is simpler to author and interpret because it doesn t include presentation information. Web pages load more quickly because a stylesheet is downloaded once and cached. You can then reuse it throughout the site. The pages themselves are smaller because they no longer contain styling information. A CSS document contains style rules that apply to the elements of a target document, indicating how the content of those elements should be rendered in a web browser. CSS Rules CSS is based on rules that govern how the content of an element or set of elements should be displayed. You ll see how to specify which elements to style a little later when I discuss the CSS selectors. Here s an example of a CSS rule: h1 {color:# 2B57A1;} The rule is split into two parts: the selector (h1) and the declaration (color:# 2B57A1). The selector shows which element or elements the declaration should apply to while the declaration determines how the element(s) should be styled. In this example, all

elements have been specified, but selectors can be more sophisticated, as you ll see later. The declaration has two components: a property and a value, separated by a colon. The property is the visual property that you want to change within the selected element(s). In this
From our experience, we are can tell you that you can find a reliable and cheap webhost service at Java Web Hosting services.

Windows 2003 server web – Displaying XML Using CSS CHAPTER 5 You re probably

Displaying XML Using CSS CHAPTER 5 You re probably familiar with Cascading Style Sheets (CSS) and using CSS declarations to style your XHTML pages. As you ve already seen, stylesheets are very helpful for separating the content of an XHTML page from its presentation. They also allow you to be more efficient in managing web sites, because you can update styles across multiple pages by editing a single stylesheet. In this chapter, you ll learn about CSS and see how you can use it to style XML documents. I ll start with an introduction to CSS and show you how it styles XHTML documents. This will help to clarify the terms and roles of CSS and show you what s possible. You ll then work through examples that style XML documents with CSS. This process will show you some of the limitations and the special considerations when styling with CSS. I ll discuss issues such as adding links, including images, adding content before or after elements, and displaying attribute content. All of these areas require special CSS techniques. CSS styling of XML provides some special challenges. With XHTML, a web browser understands the meaning of each of the elements and can display them accordingly. For example, a web browser understands how to render an or

tag when it appears in an XHTML page. If the same tag appears in an XML document, there is no intrinsic meaning, so a browser cannot make any assumptions about how to render the element. This chapter will Summarize how CSS works with XHTML Style XML documents with CSS Use CSS selectors with XML Discuss the CSS box model and the positioning schemes Lay out tabular XML data with CSS Link XML documents Add images to XML documents Add text to XML documents from the stylesheet Use attribute values from XML documents Within the chapter, I ll mention which browsers support each approach. I tested these examples with Internet Explorer (IE) 6, Netscape 8, Firefox 1.5, Amaya 9.1, and Opera 8.51. Therefore, when I mention that something isn t supported in a web browser, I m referring to
Go visit our
java server pages services for a reliable, lowcost webhost to satisfy all your needs.

120 CHAPTER (Web hosting servers) 4 CLIENT-SIDE XML You can

120 CHAPTER 4 CLIENT-SIDE XML You can implement this type of architecture either by building your own framework or by relying on existing tools. Some of the existing tools include Apache AxKit: http://www.axkit.org/ Apache Cocoon Project: http://cocoon.apache.org/ PolarLake Integration Suite: http://www.polarlake.com/en/html/products/ integration/index.shtml Visual Net Server: http://www.visualnetserver.com/ In addition, web servers such as Adobe (formerly Macromedia) ColdFusion (http:// www.macromedia.com/software/coldfusion/) and Microsoft Internet Information Services (IIS) (http://www.microsoft.com/WindowsServer2003/iis/default.mspx) offer good XML application tools. Serving XML to Client-Side Code In this approach, the browser receives the XML content as data embedded within the client- side code. You can use this approach to build dynamic pages that don t have to make a round-trip to the server for additional processing. The application makes XML data available to client-side code by Loading XML into a DOM variable using the browser s proprietary DOM load method. Using the XMLHTTP Request objects in IE, Mozilla, and Opera. This option is the core technology behind an approach called Asynchronous JavaScript and XML (AJAX) that you ll learn about in Chapter 9. Using XML-aware client-side development tools such as Flash. Working with XML data islands. Serving XML directly to the client reduces the number of round-trips to the server. Without XML, the application would have to make a call to the server each time to request new content, which has the potential to slow down the user experience. Summary In this chapter, you ve examined the XML support available in current versions of the major browsers. You ve seen the different ways that you can process XML in a web browser, including some advanced functionality offered by IE. I ve also shown you three different approaches to using XML in web applications. Chapters 5 to 10 examine how to implement the areas that you ve examined in this chapter. Chapter 5 looks at styling XML documents with CSS, and Chapters 6 and 7 cover XSLT in detail. Chapter 8 looks more closely at scripting in the browser, while Chapter 9 examines one browser scripting approach, called Ajax. In Chapter 10, I ll introduce you to Flash as an alternative method for working with XML.
Searching for affordable and proven webhost to host and run your servlet applications? Go to Linux Web Hosting services and you will find it.

Web server version – CHAPTER 4 CLIENT-SIDE XML 119 Generating XML

CHAPTER 4 CLIENT-SIDE XML 119 Generating XML on the Server The first step is much like building a dynamic web page, except that instead of generating XHTML, the application generates XML. The structure of the XML depends on the data source and the application. Transforming the XML Content into XHTML In the second stage, the application determines where the transformation should take place and transforms the data. The result of the transformation is an XHTML document that contains CSS references. If the client has the capability to transform the data, it should apply the stylesheet at that point to reduce the load on the server. However, this determination must be made on the server, so that you can apply a server-side transformation if necessary. If you re using XSLT to access a small amount of content from a larger XML document, the overhead of sending the XML to the browser may be more than the time saved in client-side processing. It may make more sense to transform the content on the server and deliver XHTML to the browser. Another alternative is to combine both server-side and client-side transformations. The server-side transform selects the content and delivers XML to the client. The client then performs another transformation to generate the final XHTML. Styling the XHTML with CSS Once the browser receives the XHTML content, it is styled with CSS either through a linked external stylesheet or through embedded or inline CSS declarations. The result is a styled XHTML page. Advantages and Disadvantages Transforming XML into XHTML is a useful approach because it offers the following advantages compared with traditional XHTML-based dynamic web pages: The application separates the data, layout, and styling of pages quite rigidly. Separating styling provides more manageability for web applications. This type of architecture can be easily adapted to a server farm environment. The application can target different platforms with the same server-side code. For example, the same content can be presented on web and mobile-phone browsers by applying a different XSLT stylesheet for each device. The same application can be used for multiple purposes. For example, stylesheets could transform application-specific XML into a format suitable for sharing with business partners. They could then browse the transformed XML with a corporate system, allowing both parties to interact without making major changes to either system. Bear in mind that if you apply XSLT transformations on the server side, the server must carry out additional processing. Through this process, you may lose gains arising from reduced server traffic.
Check Tomcat Web Hosting services for best quality webspace to host your web application.

118 CHAPTER 4 CLIENT-SIDE XML (Web server extensions) Using XML

118 CHAPTER 4 CLIENT-SIDE XML Using XML Within a Dynamic Web Page In this approach, the application processes XML using a server-side scripting language, such as C#, VB .NET, PHP, or JavaServer Pages (JSP), and presents the end result to the browser as XHTML. The browser can then style the content using server-side languages that provide DOM or SAX support, allowing the application to process XML content easily. Transforming XML into XHTML The second approach is to generate XML and use XSLT to transform it into XHTML for presentation on the browser. You can apply the XSLT stylesheet transformation on either the server or client, depending on the browser capabilities. If the browser has XSLT support, the transformation occurs there; otherwise, it takes place on the server. Once generated, the application can style the XHTML in the browser using CSS. Figure 4-11 shows the workflow involved in this approach. Figure 4-11. The process of transforming XML into XHTML This architecture involves the following steps: 1. Generate XML on the server. 2. Transform the XML content into XHTML on either the server or client. 3. Style the XHTML with CSS. I ll explain each step in a little more detail.
Check Tomcat Web Hosting services for best quality webspace to host your web application.

Cpanel web hosting – CHAPTER 4 CLIENT-SIDE XML 117 Using Client-Side

CHAPTER 4 CLIENT-SIDE XML 117 Using Client-Side XML At the beginning of this chapter, you saw that the main benefits of working with XML on the client were a reduction of traffic between server and client, and a reduction in server-side load. Let s examine these concepts more closely with an example. Suppose you need to display a list of properties that are for sale on a web site. Using XHTML and server-side processing, you could Load a list of the property addresses and allow users to drill down to view the details of each property on a separate page List all details of every property in a list on a single page The second approach isn t practical. If you need to display a large number of properties, the page will be very long and will take a long time to download. You will also have a hard time locating information. In the first approach, viewing the details of a new property requests information from the server, which reloads the interface to display those details. Even if you need only a small amount of information, you ll still need to refresh the page and load additional content from the server each time. Separating the content from the interface saves server traffic and download times each time you want to view another property. One solution is to use XML on the client side. The server downloads the interface once, when you first load the page. Each time you request further property details, you can download the new content to the client, transform and style the XML into the desired format, and insert the styled content into the cached interface. The only problem with this approach is that the application can only run in a client that has the appropriate level of XML support. If the content is served within a web browser, you need to be careful, because the level of support differs greatly between the major players. For example, Opera versions 8 and below don t support XSLT. Using Server-Side XML One solution might be to process the XML on the server instead. Using server-side processing can avoid any of the specific browser issues. However, as discussed, this means users place more load on the server with more frequent trips to request information. Unless you re dealing with a particularly data-intensive application, this isn t likely to overshadow the advantages of the server-side approach. I ll discuss this in more detail in Chapters 11 to 13, where you ll see some approaches to using server-side XML. There are three broad approaches to using XML in web browser applications: Using XML on the server side only and sending XHTML to the web browser Transforming the XML into XHTML for delivery to the browser Serving XML to the web browser and manipulating it with client-side scripting I ll look at each of these approaches in the following sections. I ll examine Flash as a special case in Chapter 10.
If you are in need for cheap and reliable webhost to host your website, we recommend http web server services.

116 CHAPTER 4 CLIENT-SIDE XML The aim (Medical web site)

116 CHAPTER 4 CLIENT-SIDE XML The aim of the project is to provide online content for students and teachers through learning objects. A high proportion of the learning objects available use Flash and XML for portability and platform independence. You can find examples of learning objects at http:// www.thelearningfederation.edu.au/tlf2/showMe.asp?nodeID=242#groups. Figure 4-10 shows one learning object. Figure 4-10. A Flash movie displaying XML content Now that I ve covered the range of client-side options available for working with XML data, let s examine when client-side processing is appropriate. Choosing Between Client and Server It s important to decide whether an XML application should use client-side XML, server-side XML, or some combination of the two types of processing. So far, you ve seen several clients that can work with XML content. In Chapters 5 to 10, you ll look at client-side communication in more detail. Chapters 11 to 13 will examine server-side applications. In this section, I ll cover different approaches for client-side and server-side interactions in XML applications.
If you are looking for affordable and reliable webhost to host and run your business application visit our ftp web hosting services.


CHAPTER 4 CLIENT-SIDE XML 115 Figure 4-9. Raw XML content displayed in Opera 8.5 You can see the content within the XML document by choosing View . Source. Determining XML Content Opera uses the content type followed by the file extension to determine whether a file contains XML content. In addition, Opera looks at the first line of the file for an XML declaration. Opera also checks whether an XML document is well formed. As with the other browsers, Opera generates a parser error if it loads a document that is not well formed. However, unlike the other browsers, Opera displays the part of the XML file that it successfully parsed prior to reaching the error. Using Proprietary Functionality in Opera Opera doesn t offer much in terms of proprietary XML tools. However, it offers native support for some XML vocabularies: native SVG 1.1 Tiny and native WML. Native SVG 1.1 Tiny Support Opera has native support for SVG 1.1 Tiny, a subset of the SVG recommendation suitable for cell phones. This means that Opera natively supports SVG opacity, font handling, and animation. Native WML Support WML is a vocabulary of XML used to mark up documents for display in mobile phone-based browsers. Opera supports most of WML 1.3 and WML 2.0, and Opera is the only major browser to offer support of WML natively. Adobe (Formerly Macromedia) Flash Flash provides another option for the display and manipulation of XML content. Since version 5, Flash has been able to parse XML documents into a tree. Flash uses an internal XML class that is similar to, but not fully compliant with, the W3C DOM. One advantage of Flash movies is that they can display in a web browser or within standalone applications. You can find out more about Flash and XML in Chapter 10. The Le@rning Federation project provides a good example of using XML with Flash. This project is an initiative of the governments of Australia, the Australian states, and New Zealand. You can find out more about the project at http://www.thelearningfederation.edu.au/.
Please visit our professional web hosting services to find out about cheap and reliable webhost service that will surely answer all your demands.

114 CHAPTER 4 CLIENT-SIDE (Bulletproof web design) XML XUL XUL

114 CHAPTER 4 CLIENT-SIDE XML XUL XUL (pronounced zool and rhymes with cool) is a proprietary language created by Mozilla that describes Mozilla user interfaces. You can use XUL to create interfaces containing elements such as form controls, toolbars, and menus. The advantage is that it provides a simple way to define user interface widgets. You might use XUL to add functionality to Mozilla or to create complete applications such as Firefox and Thunderbird. XUL is beyond the scope of this book, but you can find a great introduction to it at http://developer.mozilla.org/en/docs/XUL_Tutorial. XBL XBL works with XUL to describe the behavior of XUL widgets. Again, Mozilla developed XBL and submitted it as a note to the W3C. It provides similar functionality to IE XML data binding, combined with IE DHTML behaviors. You can find out more about XBL at http:// developer.mozilla.org/en/docs/XUL_Tutorial:Introduction_to_XBL. Native SVG Support Chapter 3 introduced you to SVG. The latest version of Firefox, 1.5, includes native SVG for most of the SVG 1.1 recommendation. It doesn t include support for filters, SVG-defined fonts, and declarative animations. Netscape 8 doesn t offer SVG support. Opera Opera has supported XML since version 4, but it doesn t yet have the same level of support offered by the other major browsers. At the time of writing, the next release, 9.0, plans to increase XML support. Examining the Expat Parser Like Mozilla, Opera also makes use of the Expat open source parser. W3C DOM Support Opera 8 has full support of XML DOM 2. XSLT Opera 8.5 has no support for XSLT stylesheets, though it s planned for the forthcoming release of Opera 9. You must apply XSLT stylesheet transformations on the server side if you re targeting Opera. Viewing Raw XML in Opera Opera ignores the XML tags within a document and displays only the content from the elements, in accordance with the recommendation. Figure 4-9 shows how the XML document dvd.xml, displays in Opera. Opera treats all elements as inline and renders all text in the same font.
You want to have a cheap webhost for your apache application, then check apache web hosting services.