1 / 52

ASP.NET 2.0

ASP.NET 2.0. Chapter 3 Designing Web Applications. Objectives. Creating Cascading Style Sheets. Cascading style sheets (CSSs) store information about how to present a web site Easier to maintain

senta
Download Presentation

ASP.NET 2.0

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ASP.NET 2.0 Chapter 3 Designing Web Applications

  2. Objectives ASP.NET 2.0, Third Edition

  3. Creating Cascading Style Sheets • Cascading style sheets (CSSs) store information about how to present a web site • Easier to maintain • Changes to the Color property within the CSSs are reflected immediately across the entire web site • Create your CSSs before you start developing your application ASP.NET 2.0, Third Edition

  4. Overview of CSS Style Rules • A style rule is the information that is applied to a single HTML tag • Syntax varies depending where the rule is located • Inline styles format a single HTML tag • Embedded styles are placed in the heading section • External styles apply across multiple web pages • Each web page includes a reference to the external style using a <link> tag • If you make a change to a style rule, only make the change in one location ASP.NET 2.0, Third Edition

  5. Inline Styles or CSSs • HTML tag within a style sheet is referred to as an element • Keyword style • Separate name of the property and value with a (:) • Multiple pairs of style rules separated with a (;) • Sample <h1 style="color:green;">Welcome to Tara Store!</h1> ASP.NET 2.0, Third Edition

  6. CSS Syntax • The basic unit is a rule • Key : value; • Several rules can be listed together • In an embedded style sheet or in an external style sheet, there must be a way to associate rules with tags • Selectors specify certain tags that a set of rules will apply to • Sets of rules are grouped using curly braces CBS 5/14/08

  7. CSS Selectors • Simplest: the tag name • To apply a set of rules to more than one tag, list the tag names separated by commas • Use .classvalue to select any tag whose class attribute has that value • Use tagname.classvalue to select a tag that has the class attribute with the given value • Many others, see the specification at http://www.w3.org/TR/CSS21/ CBS 5/14/08

  8. Embedded Styles or CSSs ASP.NET 2.0, Third Edition

  9. External Styles or CSSs ASP.NET 2.0, Third Edition

  10. External Styles or CSSs (continued) ASP.NET 2.0, Third Edition

  11. Comments within CSSs ASP.NET 2.0, Third Edition

  12. Cascading Priority with Rules • Each of the three types of CSSs can contain style rules that conflict with the style rules of another CSS • Conflicts resolved through a cascading priority • Inline takes precedence over Embedded • Embedded takes precedence over External ASP.NET 2.0, Third Edition

  13. Cascading Priority with Rules (continued) ASP.NET 2.0, Third Edition

  14. Creating Classes ASP.NET 2.0, Third Edition

  15. XSLT • XSLT documents are called stylesheets even though they are used to transform an XML document • A transform stylesheet can be associated with an XML document in a number of ways • Specifying the transform stylesheet in the XML document itself • By external means known to the system performing the transformation CBS 05/14/08

  16. XSLT Actions • A transformation stylesheet is applied to an XML document • Text in the stylesheet that is not processing commands will be sent to the output directory • The most important processing is done with templates CBS 5/14/08

  17. XSLT Templates • An XSLT template definition applies to certain tags in a document • The content of the definition will be processed by passing non-command text through to output and carrying out processing instructions • An apply-templates command can be used to instruct the processor to look at certain elements in the input document and apply templates defined for them CBS 5/14/08

  18. XSLT for-each • The for-each command causes the processor to step through a list of elements and process the body of the loop for each element CBS 5/14/08

  19. Starting the Transformation • The processor starts processing by using a template that matches ‘/’ to start • The text calls this the main template CBS 5/14/08

  20. XSLT and Browsers • Certain browsers can carry out transformations on XML documents • Firefox • Internet Explorer • The Opera browser does not perform transforms • To have this happen, the stylesheet must be specified in the XML document being served to the browser CBS 5/14/08

  21. XSLT Stylesheets • XSLT stylesheets • XML and XHTML can be formatted using CSS • XML documents can be formatted using XSL Transformations (XSLT) stylesheet • XSLT is a language for transforming XML documents • XSL stands for Extensible Stylesheet Language • Transformation – XSLT stylesheets retrieve and format individual elements or groups of elements within the XML document • Browser requests an XML file, and XML file refers to XSLT stylesheet that processes the XML file • Stylesheet is hard-coded into the XML document • Insert an XSLT stylesheet directly into an XML document and view the formatted output using an XML parser such as a browser • Web Form formats XML document with XSLT stylesheet with an XML control • Can dynamically change the XML document source, or the XSLT stylesheet programmatically, without directly altering the XML document ASP.NET 2.0, Third Edition

  22. Understanding the Structure of an XSLT Stylesheet • XSLT stylesheet is an XML document • Contains information about how to format a different XML document • Contains HTML, style rules, and XSTL commands • First line identifies the version of XML • Root node (xsl:stylesheet) indicates that the document is an XSLT stylesheet • File extension XSLT stylesheet is .xsl. • xmlns:xsl attribute indicates the schema supported for stylesheet • Schema or rules – XSL Transform standards maintained by W3C; describe how stylesheets format XML documents • Comments <! - - and - - > tags • Close the root element ASP.NET 2.0, Third Edition

  23. Using XSLT Stylesheets to Formatthe Main Template ASP.NET 2.0, Third Edition

  24. Using XSLT Stylesheets to Format the Main Template (continued) ASP.NET 2.0, Third Edition

  25. Using XSLT Stylesheets to Format the Main Template (continued) ASP.NET 2.0, Third Edition

  26. Using XSLT Stylesheets to Format the Main Template (continued) ASP.NET 2.0, Third Edition

  27. Using a Main Template with Element Templates • xsl:value-of attribute – retrieves the value of the element from the XML document • Apply to all the other elements in the node; use an asterisk as the value for the Match property <xsl:template match="*"> <div class="product"><xsl:value-of select="."/></div> </xsl:template> • Display the contents of any node, just by using a period; means everything within the node is selected <xsl:template match="value"> <b><xsl:value-of select="." /> </b> </xsl:template> ASP.NET 2.0, Third Edition

  28. Using a Main Template with Element Templates (continued) ASP.NET 2.0, Third Edition

  29. Using a Main Template with Element Templates (continued) ASP.NET 2.0, Third Edition

  30. Using a Main Template with Element Templates (continued) ASP.NET 2.0, Third Edition

  31. Many processing instructions available in XSLT: xsl:for-each Looping structure xsl:for-each select xsl:choose to allow you to analyze the value of something such as the value of the rating xsl:when to test if the condition listed in the test attribute is met. xsl:when test xsl:otherwise to apply to data that doesn’t meet the condition; that may not apply to the other choices listed xsl:sort to display the value in a sequential order xsl:sort select xsl:number to display a value xsl:number value xsl:if Test a condition is met or not statement is similar to the xsl:if-else-end if control statement, but does not run unless the conditional statement resolves to true xsl:if test xsl:if-else-end if Test a condition is met or not Runs if true or false xsl:if-else-end if test Processing XML Data with an XSLT Stylesheet ASP.NET 2.0, Third Edition

  32. Processing XML Data with an XSLT Stylesheet (continued) ASP.NET 2.0, Third Edition

  33. Processing XML Data with an XSLT Stylesheet (continued) ASP.NET 2.0, Third Edition

  34. Inserting and Configuring an XML Control in a Web Form • Configure the XML control to locate the XML data • DocumentSource — a physical or virtual path to the XML document • Document — located in an object called XMLDocument • DocumentContent — a string containing the entire text of the XML document • Set DocumentSource property in code to System.XML.XMLDocument, XML string object • XML input stream instead of a physical file read into the DocumentSource property ASP.NET 2.0, Third Edition

  35. Inserting and Configuring an XML Control in a Web Form (continued) • Configure XML control to locate the XSLT stylesheet • TransformSource — identifies the physical or virtual path to the XSL or XSLT stylesheet • Transform — allows you to use an object called XSLTransform, which contains the XSL or XSLT stylesheet; this stylesheet then is used to transform the document before displaying it • TransformArgumentList — contains a reference to an object called XsltArgumentList that contains the arguments to be passed to the stylesheet • Set TransformSource property to System.XML.XSLTransformObject; use a stream that contains the XSL style information without having a physical file and read into the TransformSource property ASP.NET 2.0, Third Edition

  36. Inserting and Configuring an XML Control in a Web Form (continued) ASP.NET 2.0, Third Edition

  37. Inserting and Configuring an XML Control in a Web Form (continued) ASP.NET 2.0, Third Edition

  38. Master and Content Pages • Web Page Layout and Design Methods • Flow-based layout – HTML tags were processed and displayed in the order in which they appeared within the source code • Tables were used to control the page layout (Frames and imagemaps and server-side includes to a lesser extent) • Master and content pages • Easily bound different pages dynamically at runtime • Master page • Provides hierarchical control of content, layout, and design • Contains one or more ContentPlaceHolder controls to identify locations where content may be inserted in a content page • Content pages • Contain content controls that map to the ContentPlaceHolder controls • Insert content only within areas defined by the ContentPlaceHolder controls of the master page ASP.NET 2.0, Third Edition

  39. Using Master and Content Pages • Force the web site to apply a specific master page globally • Pages node of web configuration file, insert MasterPageFile = "[master page path and file name].master" • Override – set MasterPageFile property in the individual web pages • Can nest master and content pages but can’t easily edit them in Design mode • Both pages can have code associated with the page • Code within content page will run before the code in master page • Each page has its own page event model • Can change master page in PreInit event handler • Page has not been built yet, so the page is identified using the keyword, Me • Master page is compiled as part of final version of content page ASP.NET 2.0, Third Edition

  40. Creating a Navigational System • Hierarchical navigation data is made available to the controls through the use of a site map • Site map is an XML file that contains the navigation data • XMLSiteMapProvider will parse the site map file • SiteMapDataSource control used to connect navigation controls to the site map file ASP.NET 2.0, Third Edition

  41. The Site Map ** Save your old site map files each time you modify them for a new activity in this chapter ** • Site map XML file stores web site navigation data • Web.sitemap – represents your hierarchical web site map • Each siteMapNode element contains string values for title and description – URL is required and must be unique and valid • Cannot use the site map files across web sites • Cannot use multiple web site maps in the same application unless you create your own providers • Can work with multiple Web.sitemap files in one application • Register them in the web configuration file • Set the SiteMapProvider property for the SiteMapPath control ASP.NET 2.0, Third Edition

  42. The Site Map (continued) ASP.NET 2.0, Third Edition

  43. Building Breadcrumb Trails with the SiteMapPath Control • SiteMapPath control is used to create this breadcrumb trail • Frequently located at the top and bottom of your web pages • Contains many additional properties or attributes to configure the appearance ASP.NET 2.0, Third Edition

  44. TreeView Control • TreeView control – display the site map data like a tree when all of the nodes are displayed • Click hyperlink and redirect to a new page • Click the image next to hyperlink, node will expand child nodes list • Control the appearance – styles through a TreeView styles class • Set globally such as spacing between nodes as attributes, individual properties, or programmatically • Does not support style templates • Style properties can be specific to the level of the node within the XML file, and the type of node ASP.NET 2.0, Third Edition

  45. Creating a TreeView Control (continued) ASP.NET 2.0, Third Edition

  46. The Menu Control • The Menu control allows you to display hierarchical data in a menu. The Menu control allows you to display only a single submenu at any one time. The Menu control can display the root node, parent nodes, and child nodes using fly out menus. The static menu appears, showing the root level items when the menu is first generated. Then, dynamic menus are created that will fly out when an item in the root menu is selected. Each of these menus can be configured using styles or templates. You can modify the individual item, the mouse hover item, or the selected style. • Unlike the TreeView control, the Menu control allows you to use templates to give more control over the styles. Menu control styles can be set using the style base classes named MenuStyle and MenuItemStyle. The Menu control styles can be set using CSS. If you color the default hyperlink text in a CSS, the CSS will override the Menu style setting. While the Menu control supports templates, it does not support using check boxes to indicate which item is selected. ASP.NET 2.0, Third Edition

  47. The Menu Control • The Menu control can be bound to several types of sources of data, including the site map file. You can fill the Menu class declaratively or programmatically using the DataBindings property. The Menu control allows you to customize the data binding method such as another XML file instead of the default site map file. You can create custom methods to look up the siteMapNode based on the URL that was clicked. For example, you can retrieve and use multiple pieces of data within the Menu control; these pieces can include the title and description. Remember that you can alter the nodes that are displayed using the ShowStartingNode property of the SiteMapDataSource control. You also can hide the root node so that your menu starts with the second level node. ASP.NET 2.0, Third Edition

  48. Using the Multiview Control • MultiView control presents multiple pieces of content from a single page • Used for presentations and processing forms • Creating interactive presentations or content based on user selections • Do not need to write the underlying navigational code • Wizard control is useful in building very complex multipage forms • MultiView control, nests zero or more View controls • Views collection is the entire group of controls • View control is like the box around your content • Include Server controls, Data controls, HTML controls, graphics, text • Navigation between View controls is through controls and events • Buttons and links can trigger the switch view event • Iterate through multiple views similar to PowerPoint presentation ASP.NET 2.0, Third Edition

  49. XSLT Examples • If we have time • Follow the examples in the text on pages 130, 133, 135, 137, 141, 143, 144 ASP.NET 2.0, Third Edition

  50. Summary • Inline CSSs rules apply only to a single element • Embedded CSSs rules are applied to multiple elements within the same page • External CSSs linked contain rules that can be applied to multiple pages • CSSs follow a set of rules that determines which style is expressed when styles conflict • XML files can be formatted with CSSs or XSLT stylesheets • XSLT stylesheets format the XML document using a main template and individual element templates • Processing instructions can be used to select a subset of data from the XML file ASP.NET 2.0, Third Edition

More Related