Transcript Layouts in Fusebox 4

Layouts in Fusebox 4
• Sandra Clark
• [email protected]
Overview
st
(1
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
• 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.
• Think Russian Dolls, every
display fuse was encapsulated in
that circuit’s layout which was
encapsulated in the parent
circuits’s layout ….
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
nd
(2
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
–
•
HTML 4.01 Transitional
–
•
<!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 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 HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.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