layouts in fusebox 4 sandra clark sclark@constellagroup.com

Layouts in Fusebox 4

• Sandra Clark

• sclark@constellagroup.com

Overview (1st 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

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.

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)

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.

Banners and Main Navigation

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

Is Application Layout

•Global to the entire site.

•Promotes Consistency

Not Application Layout

•Inconsistent between areas of the site.

Using Application Level Layouts

• Set up in the fusebox.xml file

• <globalfuseactions></globalfuseactions>– Call a fuseaction from a “Layout Fuse”

• Set up Headers in the <preprocess></preprocess> section

• Set up Footers in the <postprocess></postprocess> section

Application Layouts – Fusebox.xml

<globalfuseactions>

<preprocess>

<do action="layouts.heading" />

</preprocess>

<postprocess>

<do action="layouts.footer" />

</postprocess>

</globalfuseactions>

Application Layouts – Layout circuit.xml

<circuit access="internal">

<fuseaction name="heading">

<include template="layoutheader.cfm" />

</fuseaction>

<fuseaction name="footer">

<include template="layoutfooter.cfm" />

</fuseaction>

</circuit>

Application Layouts• Everything else displays within the header

and the footer.

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.

Is Circuit Level Layout

•Consistent within each sub area of the site.

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 <prefuseaction> area.• Separate out fuseactions into a public circuit (called via an <a

href>, 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 <prefuseaction> will be called for every fuseaction call to the circuit (which is not good for a layout).

Dynamic Side Navigation

• Side Navigation is a perfect example of circuit level layouts.

• The sub navigation will change for each circuit.

Side Nav Example - Billing

Side Nav Example - System

Circuit Level Layouts using circuit.xml

<circuit access="public">

<prefuseaction>

<include template="dspsidenav.cfm" />

</prefuseaction>

<fuseaction name="main">

<include template="dspmain.cfm" />

</fuseaction>

</circuit>

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.

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.

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

<phase name="postProcess"><plugin name="NestedLayouts" path="“template="NestedLayouts.cfm"><parameter name="file“ value="wrapper.cfm"/><parameter name="contentvariable“

value="fuseboxlayout"/></plugin>

</phase>

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.

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!

Break Time

Overview (2nd 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

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

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)

• Accessibility helps those who:– Cannot use a mouse (only have access to keyboards)– Are blind– Have other vision impairments– Are Deaf– Are Color Blind.

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/xhtml1» http://www.w3.org/TR/xhtml11

– XML» Extensible Markup Language 1.0» http://www.w3.org/TR/2000/REC-xml-20001006

• Presentation Languages– CSS

» Cascading Style Sheets Levels 1 and 2» http://www.w3.org/TR/REC-CSS1» http://www.w3.org/TR/REC-CSS2

– as well as emerging standards, such as those for television and PDA based browsers.

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

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.

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.

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.

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

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

Standards Forcing DocType Declarations

• HTML 4.x Strict– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

• HTML 4.01 Transitional – <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

• XHTML 1.0 Strict (no xml Declaration)– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">• XHTML 1.0 Transitional (no xml Declaration)

– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• Using an xml Declaration with XHTML will Force IE6 into Quirks Mode

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

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.

A More Flexible Way to Handle Layouts

• Content variables exist as an attribute to the <do /> command.

• All information that would be displayed from the fuseaction called by the <do /> command is captured into a contentvariable.

Content Variables

• Fuseactions called from <a href>, form submittals or url locations cannot be placed into a content variable.

• However, the fuseactions called within these locations can.

<circuit access="public">

<fuseaction name="main">

<set name="layout" value="withnav" />

<do action="vbilling.main" contentvariable= "maincontent" />

</fuseaction>

</circuit>

Content Variables

• Content Variables can be appended to have more than one fuseaction place their display within the same content variable.<fuseaction name="viewArticle">

<xfa name="submit" value="home.postComments" />

<do action="blog.viewArticle" contentvariable="maincontent" />

<do action="blog.listComments“ contentvariable="maincontent“append="true" />

</fuseaction>

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.

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.

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.

<div id="heading"><p>ACME ACCOUNTING SYSTEM</p><div id="mainmenu">#mainmenu#</div></div>

<div id="body"><div id="sidenav">#sidenav#</div><div id="maincontent">#maincontent#</div>

</div>

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.

Fuseaction Layouts

<fuseaction name="main">

<do action="vbilling.main" contentvariable="content.maincontent" />

<do action=“layouts.withnav” />

</fuseaction>

Fuseaction Layouts

<fuseaction name="main">

<do action =“layouts.itemheader” />

<do action="vbilling.main" />

<do action=“layouts.itemfooter” />

</fuseaction>

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.

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.

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.

Breadcrumb Trail

• Create a default variable “breadcrumb” in globals.cfm (called via a plugin)– <cfparam name=“breadcrumb” default=“”>

• For each circuit level, create a breadcrumb for the circuit at the <prefuseaction level>– Use Call Super to go up the parent path.<prefuseaction callsuper="true" >

<set name="thisbreadcrumb" value="Billing|billing.main" /><set name="breadcrumb" value="#listappend(breadcrumb,

thisbreadcrumb)#" /> </postfuseaction>

Breadcrumb Trail

• For each fuseaction to be breadtrailed.– Set the breadcrumb trail.

<fuseaction name="newActivity">

<set name="thisbreadcrumb" value="New Activity|

billing.newActivity" />

<do action="vbilling.main"

contentvariable="content.maincontent" /></fuseaction>

Breadcrumb Trail

• Use the <postfuseaction to append the main fuseaction to the list variable.<postfuseaction>

<set name="breadcrumb" value="#listappend(breadcrumb,

thisbreadcrumb)#" />

</postfuseaction>

Breadcrumb Trail

• In the fusebox.xml add a call to a breadcrumb action in the layouts circuit.

<postprocess>

<do action="layouts.breadcrumb" />

<do action="layouts.choose" />

</postprocess>• Which calls

<fuseaction name="breadcrumb">

<include template="actbreadcrumb.cfm" />

</fuseaction>

Breadcrumb Trail

• This action fuse actually puts the breadcrumb together into a content variable for display.

<cfset breadcrumbtrail = ""><cfloop from="1" to="#ListLen(breadcrumb)#" index="i"> <cfset aCrumb=GetToken(breadcrumb,i,",")> <cfoutput> <cfset breadcrumbtrail = breadcrumbtrail & ' <a href="#myself##GetToken(aCrumb,2,'|')#">#GetToken(aCrumb,1,'|')#</

a>'> <cfif i NEQ ListLen(breadcrumb)>

<cfset breadcrumbtrail = breadcrumbtrail & "&nbsp;&gt;&nbsp;"></cfif>

</cfoutput></cfloop>

QA