Out with the old in with the new

1. Out with the oldin with the new An introduction to Fusebox 3.0 for current Fusebox developers By Erik Voldengen erikv@erikv.com

2. What WILL WE talk about? Change is Good! Look at the FB2 Methodology Migrate to the new FB3 spec

3. A Sample FB2 Site • Let’s take a quick look at our sample FB2 application… • index.cfm • app_globals / app_Locals • CF_FormURL2Attributes • CF_BodyContent / app_Layout.cfm

4. 2 New Elements of Fusebox • Exit FuseActions (XFAs) • Fusedocs

5. Exit FuseActions (XFAs) • What is an Exit ? • Exit – an exit point of a fuse, e.g. links, forms, and redirects.

6. Fun Time! Find the Exits <H2><b>Envision your question to the Magic Eight Ball...</b></H2> <BR><BR> <A HREF="#request.self#?fuseaction=answer"> VIEW YOUR ANSWER</A> <BR><BR><BR> <A HREF=“../#request.self#?fuseaction=cover"> back to main menu</A>

7. XFA’s – the Big Picture The Big Picture: We use variables for our exit fuseactions.

8. Defined in each FuseAction… <cfinclude template="app_locals.cfm"> <cf_bodycontent> <cfswitch expression = "#attributes.fuseaction#"> <cfcase value="question"> <cfset XFA.mainMenu = "home"> <cfset XFA.answer = "answer"> <cfinclude template="dsp_question.cfm"> </cfcase> <cfcase value="answer"> <cfset XFA.mainMenu = “cover"> <cfset XFA.question = “question"> <cfinclude template="act_generateAnswer.cfm"> <cfinclude template="dsp_answer.cfm"> </cfcase> <cfdefaultcase> Sorry, unknown fuseaction </cfdefaultcase> </cfswitch> </cf_bodycontent> <cfinclude template="#request.fuse_root#/app_layout.cfm"> <cfcase value="question"> <cfset XFA.mainMenu = "cover"> <cfset XFA.answer = "answer"> <cfinclude template="dsp_question.cfm"> </cfcase>

9. …And Used in Your Code <H2><b>Envision your question to the Magic Eight Ball...</b></H2> <BR><BR> <A HREF="#request.self#?fuseaction=#XFA.answer#"> VIEW YOUR ANSWER</A> <BR><BR><BR> <A HREF=“../#request.self#?fuseaction=#XFA.menu#"> back to main menu</A>

10. Example Exit Fuseactions • Link <a href=“#request.self#?fuseaction=#XFA.add#”> Add User </a> • Form <form action=“#request.self#?fuseaction=#XFA.edit#” method=“post”> • Redirect <cflocation template=“#request.self#?fuseaction=#XFA.true#”>

11. FuseDocs The Big Picture: • Fusedocs are the blueprint of the fuse. • You should be able to know everything about a fuse just by reading its FuseDoc.

12. Example FuseDoc • Let’s look at an example Fusedoc…

13. On to the nuts and bolts…

14. A New Prefix – fbx • “app_” denotes “application” • “fbx_” denotes “fusebox” Our settings only apply to a fusebox, not the entire application, so we’re going with fbx_

15. THE FBX FILES • fbx_fusebox_cfxx.cfm • fbx_settings.cfm • fbx_layouts.cfm • fbx_switch.cfm • fbx_circuits.cfm

16. What CHANGED IN index.cfm? Plenty!

17. Typical FB2 index.cfm <cfinclude template="app_locals.cfm"> <cf_bodycontent> <cfswitch expression = "#attributes.fuseaction#"> <cfcase value="cover"> <cfinclude template="dsp_cover.cfm"></cfcase> </cfswitch> </cf_bodycontent> <cfinclude template=“../app_layout.cfm">

18. Typical FB2 index.cfm… <cfinclude template="app_locals.cfm"> App_Locals.cfm fbx_settings.cfm (MyGlobals.cfm = fbx_settings.cfm)

19. fbx_settings.cfm • Takes the place of app_globals and app_locals. • One fbx_settings file per circuit • Let’s take a look…

20. Typical FB2 index.cfm <cf_bodycontent></cf_bodycontent><cfinclude template=“../app_layout.cfm"> fbx_fusebox_cfxx.cfm fbx_layouts.cfm cf_bodycontent app_layout.cfm

21. fbx_layouts.cfm • Layout settings for the circuit <cfset fusebox.layoutdir=""> <cfset fusebox.layoutfile=“testLayout.cfm"> Let’s take a look at a layout file…

22. Typical FB2 index.cfm <cfswitch expression = "#attributes.fuseaction#"> <cfcase value="cover"> <cfinclude template="dsp_cover.cfm"></cfcase> </cfswitch> Fusebox code in the cfswitch fbx_switch.cfm

23. Fbx_switch.cfm • Contains the <cfswitch> code, nothing else.

24. Typical FB2 index.cfm <cfinclude template="app_locals.cfm"> <cf_bodycontent> </cf_bodycontent> <cfinclude template=“../app_layout.cfm"> <cfswitch expression = "#attributes.fuseaction#"> <cfcase value="cover"> <cfinclude template="dsp_cover.cfm"> </cfcase> </cfswitch>

25. Typical FB2 index.cfm <cf_bodycontent> </cf_bodycontent> <cfinclude template=“../app_layout.cfm"> <cfswitch expression = "#attributes.fuseaction#"> <cfcase value="cover"> <cfinclude template="dsp_cover.cfm"> </cfcase> </cfswitch>

26. Typical FB2 index.cfm <cf_bodycontent> </cf_bodycontent> <cfinclude template=“../app_layout.cfm">

27. Typical FB2 index.cfm

28. So what’s in index.cfm? Index.cfm contains the core Fusebox file • cfinclude the fbx_fusebox30_cfxx.cfm file -or- • copy/paste the code from fbx_fusebox into index.cfm

29. Fbx_Fusebox30_CFXX.cfm • Contains the “guts” of fusebox. • Combines several FB2 tags (and then some) • You never need to touch this file.

30. All Done! That was easy! • Transitioning from FB2 to FB3 is not as intimidating as it may sound! • If you (or your boss) have strong resistance to change, try doing it in phases…

31. FB TRANSITION Phases In the real world, not every organization will switch to FB3 instantly. If this is you, you can transition your methodology in phases: • XFAs • Fusedocs • Plunge in 100%

32. Questions? Time permitting, I’d be happy to answer any questions…

33. Thank you!