Layouts in Fusebox 4 Sandra Clark sclarkconstellagroup com

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

Overview (1 st Half) • • • Layout Concepts in Fusebox 4 Layouts at the Application Level Layouts at the Circuit Level Content Variables Layouts at the Fuseaction Level Sandra Clark

Layout Concepts in Fusebox 4 • 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. Sandra Clark

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) Sandra Clark

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. Sandra Clark

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

Is Application Layout • Global to the entire site. • Promotes Consistency Sandra Clark

Not Application Layout • Inconsistent between areas of the site. Sandra Clark

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 Sandra Clark

Application Layouts – Fusebox. xml <globalfuseactions> <preprocess> <do action="layouts. heading" /> </preprocess> <postprocess> <do action="layouts. footer" /> </postprocess> </globalfuseactions> Sandra Clark

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> Sandra Clark

Application Layouts • Everything else displays within the header and the footer. Sandra Clark

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. Sandra Clark

Is Circuit Level Layout • Consistent within each sub area of the site. Sandra Clark

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). Sandra Clark

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

Side Nav Example - Billing Sandra Clark

Side Nav Example - System Sandra Clark

Circuit Level Layouts using circuit. xml <circuit access="public"> <prefuseaction> <include template="dspsidenav. cfm" /> </prefuseaction> <fuseaction name="main"> <include template="dspmain. cfm" /> </fuseaction> </circuit> Sandra Clark

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. Sandra Clark

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. Sandra Clark

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> Sandra Clark

Content Variables • Content Variables can be appended to have more than one fuseaction place their display within the same content variable. <fuseaction name="view. Article"> <xfa name="submit" value="home. post. Comments" /> <do action="blog. view. Article" contentvariable="maincontent" /> <do action="blog. list. Comments“ contentvariable="maincontent“ append="true" /> </fuseaction> Sandra Clark

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. Sandra Clark

Content Variables and FB 4. 1 • The <include /> verb now allows for content variables <include template=“dsp_fuse” contentvariable=“content. main” /> • Allows use of Content Variables without needing to use an MVC design pattern. • Content Variables works in almost the same way with <include> as they do with the <do /> command. Sandra Clark

Content Variables and FB 4. 1 • Can append to a contentvariable using append=“true” • One way include content variables work differently is – If an include specifies a content variable with overwrite=“false”, the included fuse will not be run if the content variable already exists. Sandra Clark

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. Sandra Clark

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 id="body"> <div id="sidenav">#sidenav#</div> <div id="maincontent">#maincontent#</div> Sandra Clark

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. Sandra Clark

Fuseaction Layouts <fuseaction name="main"> <do action="vbilling. main" contentvariable="content. maincontent" /> <do action=“layouts. withnav” /> </fuseaction> Sandra Clark

Fuseaction Layouts <fuseaction name="main"> <do action =“layouts. itemheader” /> <do action="vbilling. main" /> <do action=“layouts. itemfooter” /> </fuseaction> Sandra Clark

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. Sandra Clark

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. Sandra Clark

QA Sandra Clark

Don’t forget your tools • Fusedoc and Fusebox 4 (XML) Toolsets – Dreamweaver – Homesite/Cold. Fusion Studio 5 – Available for Free at • http: //www. shayna. com Sandra Clark