an introduction to xfb 1 xfb there's a fine line between genius and insanity. i have erased...

An Introduction to XFB 1

XFB

There's a fine line between genius and insanity. I have erased this line.Oscar Levant


Origins of XFB

XFB (Extended Fusebox) grew out of a desire to tip the scale of project success.

XFB combines technical innovations (XFAs, query sims, nested circuits, nested layouts, integrated security, etc.) with project management features.


70% Failure


Req

uire

men

tsD

esig

n

Cod

ing

Test

ing

Del

iver

y

Time Expended

Nike Method

Arc

hite

ctur

e


Req

uire

men

ts/D

esig

n

Arc

hite

ctur

e

Test

ing

Del

iver

y

Time Expended

Extended Fusebox Method

Cod

ing


Main Points of XFB

Project Management– wireframes– prototypes– devnotes

Technical– xfas– fusedocs– nested circuits– nested layouts– query sims– security– assertions


Wireframe


Wireframe

Wireframes provide a "booster rocket" to help us escape the gravitational pull of our prejudices and assumptions about what clients want.


Wireframe

The wireframe is a skeleton-model of an application.

It is meant to help clients and developers discuss what an application should do.


Wireframe


Wireframe

Download available at www.bjork.net


Prototype w/DevNotes


Why a prototype?

"Requirements gathering" doesn't work The Musee d'Orsay in Paris wants to hire you

to reproduce a famous painting: Arrangement in Black and Grey No. 1

Specification: "The work shall be oil on canvas, 56-1/4" x 63-1/4"..."


Is this what they want?


THIS is what they want!


Why the prototype?

Clients can only tell you what they want after they see it


What is the prototype?


Leaving no "wiggle room"

The prototype The deployed application


An iterative process

The wireframe forms the basis for the first cut of the prototype

Prototypes have minimal code—and are often best handled by non-programmers

The prototype is refined through interaction with client and developer using DevNotes


What is DevNotes?

DevNotes is a simple, threaded message system that sits below each individual prototype page.

All issues related to the application are recorded as DevNotes


What are DevNotes used for?

Client direction: "Move the buttons to the left/Make the blue a little more like cornflower and less like slate"

Developer questions: "Where will the product information come from?/Is there an existing database or file with authorized users?"

Client answers: "I think the IT people have a spreadsheet or something with users."


What are DevNotes used for?

Developer self-notes: "Use JavaScript for client processing of this procedure"


Prototype freeze

We are done with the prototype when both client and developer are confident that – all questions regarding functionality have been

resolved– all content has been received from client– graphical interface/look and feel has been approved– any changes occurring after this point will either

become a new release or will be exorbitantly expensive


Fusebox architecture


Unplanned program flow

Module A

Module B

Module D

Module E

Module F

Module C


Architected program flow

Module A Module BModule D

Module EModule F Module C


A Fusebox request

Fusebox

loginUser

validateLogin

newUser

qryValidateLogin.cfm

validateLogin

actValidateLogin.cfm

the fuseaction

the fusebox

fuseactions

fuses


Fuses always make requests of the fusebox

<form action=“index.cfm” method=“post”><input type=“hidden”name=“fuseaction”value=“validateUser”>

<input type=“text” name=“username”><input type=“password” name=“password”><input type=“submit”>

</form> Fusebox

the fuseboxa fuse


The fusebox copies all URL and form variables into attributes scope

url.productID = 1027form.lastName = ‘Helms’

<cf_FormURL2Attributes>

attributes.productID = 1027attributes.lastName = ‘Helms’


The fusebox

The fusebox

<cfswitch expression = “#attributes.fuseaction#”>

<cfcase value=“loginUser”><cfinclude template=“dspLoginUser.cfm”>

</cfcase>…<cfcase value=“validateLogin”><cfinclude template=“qryValidateLogin.cfm”><cfinclude template=“actValidateLogin.cfm”>

</cfcase>

</cfswitch>


Fuseactions

The fuseaction is the motivating force in an application.

Suggestion: use name is form of verbNounPhrase such as:– addItemToCart– getUserInfo– showProductInfo


The fusebox

The fusebox


<cfcase value=“doSomething”><cfinclude template=“aFuse.cfm”>

</cfcase>….<cfcase value=“doSomethingElse”>

<cfmodule template=“anotherFuse.cfm”></cfcase>

</cfswitch>


Including a fuse

The fusebox


<cfcase value=“doSomething”><cfinclude template=“aFuse.cfm”>

</cfcase>….<cfcase value=“doSomethingElse”>

<cfmodule template=“anotherFuse.cfm”></cfcase>

</cfswitch>

anotherFuse.cfm

yetAnotherFuse.cfm

aFuse.cfm

“doSomething”

The fuseaction

The fuses


Nested circuits


Benefits of nested circuits

More and easier code reuse Independent, concurrent development of code

modules Descendant modules inherit variables from

parents Variables from parents are inherited by children Layout files can be nested Exceptions bubble upwards


XFB nested circuits


Conflicting circuit names


Resolving circuit naming conflicts

Create a Circuits.cfm file Alias name conflicts

bpcf/completed/circuits.cfm


FB3: nested circuits

Fusebox 2 worked with the concept of a federation of circuits,each having to know of the existence of each other

Fusebox 3 works with the concept of interchangeable circuits that can be reused in different applications


Inheritance

<cfset dsn = "OurApplication">

<cfquery datasource=#dsn#>


Bubbling exceptions

Lets architect determine where certain exception types will be handled

Lets coder write fuses without worrying about handling certain classes of exceptions

<cftry>

<cfcatch type=“UserAlert”><script>

alert(</script>

</cfcatch></cftry>



Example: Bubbling exceptions

 <cftry> <cfinclude template=“myPage.cfm”> <cfcatch> <cf_LogException

message=“#cfcatch.message#”><cfthrow type=“UserAlert”></cfcatch>

</cftry>


XFAs


XFAs

A typical Fusebox 2 page has fuseactions hardcoded in place.

Examples:– <form action="index.cfm?

fuseaction=updateProductInfo">– <a href="index.cfm?fuseaction=showUserMenu">– <cflocation url="index.cfm?

fuseaction=showMainPage">


XFAs

XFAs are variables that lets fuseactions be resolved at run time

Examples– <form action="index.cfm?

fuseaction=#XFA.submitForm#">– <a href="index.cfm?fuseaction=#XFA.next#">– <cflocation url="index.cfm?

fuseaction=#XFA.home#">


Identifying XFAs

Mark up the prototype for any exit points – any point at which the user or the system can make another fuseaction request


Identifying XFAs


Assigning values to XFAs

Login XFA.submitForm validateUserLogin Login Validation XFA.success showMainCatalogPage Product Detail XFA.buyItem addItemToCart Cart XFA.adjust quantities adjustCartQuantities Cart XFA.removeItem removeItemFromCart Registered User XFA.editInfo editUserInfo Registered User XFA.saveInfoUpdate saveUser Admin Page XFA.newUser newUser

Identifying common nouns


Identifying circuit and fuseaction


Identifying needed fuses


Fusedoc


Fusedocs

Provide documentation/PDL (program design language) for each fuse

Tells coder what they need to know to write a fuse without knowledge of the application

XML-based with DTD for validation


Nested layouts


<cf_bodycontent> tag

Used to capture the output of code and save as a request-scoped variable

Replaced in ColdFusion release 5 with <cfsavecontent>


Example <cf_bodycontent>

<cf_bodyContent name="me"><cfset reverseColor = RandRange( 0, 1 )>

<table border="2"> <tr> <td>I am the left side</td> <td>I am the right side</td> </tr> </table></cf_bodyContent>

<cfinclude template="layout.cfm">


Example <cf_bodycontent>

<cfoutput><cfset thebg = "white"><cfset thefg = "black">

<cfif reversecolor><cfset thebg = "black"><cfset thefg = "white">

</cfif>

<style>td{ background-color : #thebg#; color : #thefg#; }</style>

<p>#request.me#</p></cfoutput>

XMLSpy/FD4validateLogin.cfm


Nested layouts

Nested circuits

Parent

Child

GrandChild

UKDAXF/SampleFB3/


Post-processing decision making

Because the child is returned to the parent as a variable (rather than simply output onto the screen), the parent can make decisions based on the results of the child's processing


Implementing nested layouts

Wrap the code in index.cfm with <cfsavecontent> (version 5) or <cf_bodycontent> (version 4) using the circuit's alias as the name of the variable

(Illustration next)

<cfsavecontent variable="Users"> <cfinclude template="app_locals.cfm"><cfif ListLen( attributes.fuseaction, '.' ) GT 1> <cfinclude template="#ListFirst( attributes.fuseaction, '.' )#/index.cfm"><cfelse> <cfswitch expression = "#attributes.fuseaction#"> <cfcase value="home">

<cfinclude template="UserInfo.cfm"> </cfcase> <cfdefaultcase>

<cfoutput> I am the #GetDirectoryFromPath( GetCurrentTemplatePath())# fusebox and I received a fuseaction called <B><FONT

COLOR="000066">"#attributes.fuseaction#"</FONT></B> that I don't have a handler for.

</cfoutput> </cfdefaultcase> </cfswitch></cfif> </cfsavecontent>



If the child is to display something, call the layout file after the <cfsavecontent> tag

<cfinclude template="dsp_layout32a.cfm">


Query sims


Query sims

Provides a simulated query to work with code Allows code architecture to be done before all

database decisions have been finalized Provides instruction to SQL coders on what

information is needed Lets architect determine data variable names

test/QSimSample


Test harnesses

Provides an easy-to-implement way of unit-testing fuses

Should accompany all completed fuses


Example: test harness

<cfset self=“TestMe.cfm”><cfset XFA.submitForm = “”><cfset XFA.cancelForm = “”><cfset attributes.userID = “101”>

<cfinclude template=“dspEditUser.cfm”>


Proving the concept

We all agree that your theory is crazy, but is it crazy enough?Niels Bohr

an introduction to xfb 1 xfb there's a fine line between genius and insanity. i have erased...

Documents