1. Layouts in Fusebox 4 Sandra Clark sclark@constellagroup.com

2. Overview (1 st Half) Layout Concepts in Fusebox 4 Layouts at the Application Level –Banners and Main Navigation Layouts at the Circuit Level –Dynamic Side Navigation Nested Layouts

3. Layout Concepts in Fusebox4 Fusebox 4 gives the architect and developer the tools to make the layout decisions best for the application. Layouts are under the total control of the developer. Layouts can be as broad based or as granular as you decide.

4. Layout Concepts Layouts are divorced from your circuit placement. –How you design your circuit directories has NO BEARING now on how your layouts are handled. –This means that architectural design and layout design are totally separate items and have no bearing on each other (Good Thing)

5. Layouts at the Application Level Application Level Layouts are high level items that keep your entire site consistent. If its not going to be the same throughout your application, it is not an application level layout.

6. Banners and Main Navigation Top Level Banners and Main Application navigation are perfect contenders for application level layouts.

7. Is Application Layout Global to the entire site. Promotes Consistency

8. Not Application Layout Inconsistent between areas of the site.

9. Using Application Level Layouts Set up in the fusebox.xml file –Call a fuseaction from a “Layout Fuse” Set up Headers in the section Set up Footers in the section

10. Application Layouts – Fusebox.xml

11. Application Layouts – Layout circuit.xml

12. Application Layouts Everything else displays within the header and the footer.

13. Layouts at the Circuit Level Layouts at the circuit level are items which are consistent within a circuit. Sub Navigation would commonly be a circuit level layout.

14. Is Circuit Level Layout Consistent within each sub area of the site.

15. Circuit Layout Considerations Needs to be applied only once per call. Can be called in one of two places. –Fusebox.xml as a plugin in the preprocess phase. Need to write a plugin. –In the circuit’s circuit.xml area. Separate out fuseactions into a public circuit (called via an, form or url submittal. –Put the circuit layout call in this circuit. An internal circuit, one which handles all the internal fuseaction calls. Otherwise, the will be called for every fuseaction call to the circuit (which is not good for a layout).

16. Dynamic Side Navigation Side Navigation is a perfect example of circuit level layouts. The sub navigation will change for each circuit.

17. Side Nav Example - Billing

18. Side Nav Example - System

19. Circuit Level Layouts using circuit.xml

20. Nested Layouts Think Russian Dolls, every display fuse was encapsulated in that circuit’s layout which was encapsulated in the parent circuits’s layout …. Fusebox 3 introduced the concept of Nested Layouts which was part of the core files. Every Fusebox 3 application had to deal with Nested Layouts whether they wanted to or not.

21. Why Not to Use Nested Layouts on New Projects Nested Layouts are linked to nested tables which is a poor aid to accessibility. Nested Layouts are not flexible. Your architecture is directly tied to your layout.

22. Nested Layouts and Conversion from FB3 Use only on apps you want to move from FB3 to FB4. Not recommended for new applications Nested Layouts use a plugin, nestedlayouts.cfm <plugin name="NestedLayouts" path="“ template="NestedLayouts.cfm"> <parameter name="contentvariable“ value="fuseboxlayout"/>

23. Nested Layouts and Conversion from FB3 Since each nested layout needs to be captured in a content variable, for each fuseaction currently in FB3 a controller fuseaction must be created which wraps the call.

24. After the Break How to build Web Sites which are accessible, flexible and easy to manage using the newest tool in our Fusebox 4 layout toolkit!

25. Break Time

26. Overview (2 nd Half) Accessible Web Sites and Web Standards Content Variables –A more flexible way to handle layouts –Benefits of Content Variables with Layouts –A Portal Layout –Content Variables and Web Standards Layouts at the Fuseaction Level –Different Fuseactions call for Different Layouts Putting it all together –Breadcrumb Trail

27. What are Accessible Web Sites Accessibility is a standard promoted by the Worldwide Web Consortium (W3C) It is also a legal requirement for many government web sites. Accessibility deals with making a web site available to users who are disabled. The largest hurdle to making a web site accessible to the disabled is making it available to user’s who are blind and who access your site through a speech browser

28. Why are Accessible Web Sites Important Accessible Web Sites are important for all types of web sites. –15 – 30% of the general population have functional limitations that can affect their ability to use technology products (http://isoc.org/briefings/002)http://isoc.org/briefings/002 Accessibility helps those who: –Cannot use a mouse (only have access to keyboards) –Are blind –Have other vision impairments –Are Deaf –Are Color Blind.

29. Design to the Standards What "Standards"? –When we speak about "standards" for the Web, we mean: Structural Languages – XHTML »Extensible Hypertext Markup Language 1.0 and 1.1 »http://www.w3.org/TR/xhtml1http://www.w3.org/TR/xhtml1 »http://www.w3.org/TR/xhtml11http://www.w3.org/TR/xhtml11 –XML »Extensible Markup Language 1.0 »http://www.w3.org/TR/2000/REC-xml-20001006http://www.w3.org/TR/2000/REC-xml-20001006 Presentation Languages –CSS »Cascading Style Sheets Levels 1 and 2 »http://www.w3.org/TR/REC-CSS1http://www.w3.org/TR/REC-CSS1 »http://www.w3.org/TR/REC-CSS2http://www.w3.org/TR/REC-CSS2 –as well as emerging standards, such as those for television and PDA based browsers.

30. Why design to the standard “Designing and building with these standards simplifies and lowers the cost of production, while delivering sites that are accessible to more people and more types of Internet devices. Sites developed along these lines will continue to function correctly as traditional desktop browsers evolve, and as new Internet devices come to market.” –http://www.webstandards.org

31. Using Nested Tables for Layouts Most of us use tables for layout. –This is not what tables in HTML were designed for By using tables for layouts, we are not only limiting ourselves, but we are limiting the ways in which our work can be utilized. Tables are limiting, the web is designed to be limitless.

32. Separating Content from Presentation Content is the most important aspect of the web. –What you get is more important than how you see it. Separating Content from Presentation gives you –Increased accessibility –Improved Performance –Easier initial work and easier maintenance.

33. CSS and Positioning By using Cascading Style Sheets for positioning and design, we are truly separating content from presentation. All Major Browsers (IE 6, Netscape 7, Opera 6) support CSS-2 (which includes Positioning). XHTML requires CSS for all presentation in its strict format. CSS-2 allows different style sheets to be employed for different media. –Change the way your page looks on a printer without changing the page.

34. Are the newer browsers truly compliant? Most Newer Browsers are compliant –IE6, NS7, IE5Mac, Opera 6, Konqueror (Linux), IBM Web Browser When writing to the standard, make sure you tell the browser to go into standards mode though. –In order to deal with both old tag soup written to old browser quirks and new standards-compliant pages, Mozilla (and Mozilla-based browsers, such as Netscape 6, Netscape 7, Chimera, Galeon and Beonex), Mac IE 5 and Windows IE 6 have two layout modes. In one mode the layout engine attempts to comply with W3C Recommendations. In the other mode the layout engine tries to mimic old browsers. In Mozilla these modes are known as “the Standards mode” and “the Quirks mode” respectively

35. How to force Browsers into Standards Mode Mozilla, Mac IE 5 and Windows IE 6 all use doctype sniffing in order to decide between the standards mode and the quirks mode. This means that the mode is picked based on the document type declaration (or the lack thereof) at the beginning of an HTML document. –Full list can be found at: http://www.hut.fi/~hsivonen/doctype.html

36. Standards Forcing DocType Declarations HTML 4.x Strict – HTML 4.01 Transitional – XHTML 1.0 Strict (no xml Declaration) – XHTML 1.0 Transitional (no xml Declaration) – Using an xml Declaration with XHTML will Force IE6 into Quirks Mode

37. Fusebox 4 and Accessibility The Fusebox philosophy encourages separation of business logic from presentation logic which is good. Fusebox 4 fully allows for separating presentation and content which are necessary for fully accessible and compliant web sites

38. Content Variables What they are: –A more flexible way of capturing discrete bits of content. –Allows for the same content to be served in a variety of layouts –Allows the architecture to think only about architecture and the designer to only think about design.

39. A More Flexible Way to Handle Layouts Content variables exist as an attribute to the command. All information that would be displayed from the fuseaction called by the command is captured into a contentvariable.

40. Content Variables Fuseactions called from, form submittals or url locations cannot be placed into a content variable. However, the fuseactions called within these locations can.

41. Content Variables Content Variables can be appended to have more than one fuseaction place their display within the same content variable.

42. Benefits of Content Variables with Layouts Allows for multiple layouts with the same content. Web Standards layouts for Web Standards and Speech Browsers Tabled Layout for older Browsers. SEPARATE AND EQUAL.

43. A Portal Layout Portal Applications typically have more than one set of information being displayed at one time. –Typically this means that more than one fuseaction is being called to supply that information. Portals are a great example of using Content Variables.

44. Content Variables and Web Standards Content Variables are a great way to implement web standards Since content variables contain discrete information, they are simple in layouts. Also makes it very simple for web designers to work with as well. ACME ACCOUNTING SYSTEM #mainmenu# #sidenav# #maincontent#

45. Layouts at the Fuseaction Level Fuseaction level layouts allow you to call a layout as a <do command at the end of the fuse queue. Allows for granular formatting of specific objects.

46. Fuseaction Layouts

47. Fuseaction Layouts

48. Fuseaction Layouts Considerations for fuseaction layouts –Will still apply any other application or circuit level layouts called. –When using Fuseaction level layouts, make sure they are being applied properly. Forgetting a layout might cause your information not to be displayed if you are using content variables with it.

49. Breadcrumb Trail Breadcrumb navigation displays the current page's context within the site structure. The term "breadcrumb" is as in "Hansel and Gretel" - leaving a trail of crumbs in order to find their way back out of the forest. The benefit of this approach is that it makes obvious the ways in which information has been grouped and allows the user both to move between these groupings and understand the information structure.

50. Breadcrumb Trail The Breadcrumb trail will use a mixture of layouts to implement. General Header and Footer will be implemented by the Application level layouts Content Variables will be used to handle the rest along with. Dynamic Side menus will be handled at the circuit level. Breadcrumbs will be applied at all levels into a content variable.

51. Breadcrumb Trail Create a default variable “breadcrumb” in globals.cfm (called via a plugin) – For each circuit level, create a breadcrumb for the circuit at the –Use Call Super to go up the parent path.

52. Breadcrumb Trail For each fuseaction to be breadtrailed. –Set the breadcrumb trail.

53. Breadcrumb Trail Use the <postfuseaction to append the main fuseaction to the list variable.

54. Breadcrumb Trail In the fusebox.xml add a call to a breadcrumb action in the layouts circuit. Which calls

55. Breadcrumb Trail This action fuse actually puts the breadcrumb together into a content variable for display. <cfset breadcrumbtrail = breadcrumbtrail & ' #GetToken(aCrumb,1,'|')# '>

56. QA