Intro

1. Sicherungskasten 3.0(Fusebox 3.0)Michael Smith, TeraTech IncMDCFUGmichael@teratech.com Sandra Clark, Shayna ProductionsLACFUGslclark@shayna.com

2. Intro Who am I? • Michael Smith • President of TeraTech, Inc Rockville MD USA • http://www.teratech.com/ • ttWebReportServer, CFXGraphicserver • MDCFUG, CFUNK2, Fusebox Conf • Articles in CFDJ, Fusion Authority

3. Overview • General Concepts and Demo • Benefits of Standardization • What makes Fusebox 3, Fusebox 3? • How Fusebox Works • Pros and Cons of Fusebox 3 • Transitioning from FB2 to FB3 • Links of Interest

4. General Concepts There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.C.A.R. Hoare

5. Overview • Fusebox is a programming methodology (=way to organize code and projects) • Not language specific - CF, ASP, PHP • Fusebox is „Sicherungskasten“

6. Demo - overview • Mortgage app • No DSN required • Drag and drop a loan schedule component into the app • Show Mortgage site and calculators circuit • Show loan app component • Drag and drop loan app into calculator circuit

7. Demo - Wiring in the component • Edit /fuses/fbx_circuits.cfm <cfset fusebox.Circuits.loanapp="home/calculators/fb3_loanapp"> • Edit /calculators/fxb_switch.cfm add <cfset xfa.loanapp = "loanapp.input_loan"> 3. Edit /calculators/fuses/dsp_calchome.cfm add HTML for new link <A href="#self#?fuseaction=#XFA.loanapp#">

8. Demo - summary • That is it! Only two standard files had to be edited to wire in the component. • No editing the internals of the code required. • Can hand off the HTML to a design for “prettifying” • Will explain how this works in the rest of presentation.

9. State of the Art: Failure 70% Failure Rate! • Not completed • Buggy • Needs not met • Maintenance • headaches • Cost overruns

10. New York Point-to-Point Routing Tampa

11. Hub-and-Spoke System Chicago Seattle New York Atlanta Los Angeles Tampa

12. Point-to-Point Programming Module F Module E Module B Module C Module A Module D

13. Fusebox Programming Module F Module C Module E Fusebox Module A Module D Module B

14. Benefits of Standardization • Better team communication • Cheaper maintenance • Can pick up others code faster • Fewer bugs due to different styles • Can think about the fun stuff instead of code structure

15. Fuses always make requests of the fusebox <form action=“index.cfm” method=“post”> <input type=“hidden” name=“fuseaction” value=“Tampa”> <input type=“text” name=“username”> <input type=“password” name=“password”> <input type=“submit”> </form> Fusebox a fuse the fusebox

16. The fusebox <cfswitch expression = “#fusebox.fuseaction#”> <cfcase value=“Tampa”> <cfinclude template=“act_CheckBags.cfm”> <cfinclude template="dsp_TakeOff.cfm"> </cfcase> <cfcase value=“Chicago”> <cfinclude template=“act_CheckBags.cfm”> <cfinclude template=“dsp_ShuttleExpress.cfm”> </cfcase> </cfswitch> The fusebox

17. dsp_anotherFuse.cfm act_aFuse.cfm Including a fuse The fuseaction “doSomething” <cfswitch expression = “#attributes.fuseaction#”> <cfcase value=“doSomething”> <cfinclude template=“act_aFuse.cfm”> </cfcase> …. <cfcase value=“doSomethingElse”> <cfinclude template=“dsp_anotherFuse.cfm”> </cfcase> </cfswitch> dsp_yetAnotherFuse.cfm The fuses The fusebox with a lot of fuseactions

18. What makes Fusebox? • Route Fuseaction via index.cfm • Separate fuses in CFINCLUDEs by type • dsp, act, qry, url, fbx • Well documented (Fusedoc) for reuse and easier maintenance • Group code into circuits • Tools and community

19. What makes Fusebox 3 • Nested Circuits • Nested Layouts • Compound Fuseactions • Exit Fuseactions (XFA’s) • XML Fusedocs

20. Fusebox Project Cycle • Wireframe • HTML Prototype • Prototype + Devnotes • Final Code + Devnotes • Formal Sign off

21. Assumptions • Basic FB knowledge i.e. • Fuseaction • <CFSWITCH> • Naming of FB files, act_, dsp_, qry_ • Fusebox separates out SQL, CF, HTML and flow control

22. Bring on FB3 • 20 October 2001 at 2nd Fusebox Conference, Orlando. Keynoted by Jeremy Allaire, Hal Helms • Two day conference planned for next year, weekend preceeding DevCon 2002 • Big change from FB2 • Several revisions since launch to produce stable code (NO MAJOR CHANGES!)

23. Nested Circuits • One module is a circuit • Parent-child - nested

24. Nested Layouts

25. Compound Fuseactions • A request made of the server to perform some action is known as a fuseaction. • Fuseactions are made up of the circuit name, a dot separator, and the actual request. • Cart.addItem • Users.login • Scheduler.requestMeeting

26. Exit Fuseactions (XFAs) • A hardcoded value for the next fuseaction... • <cflocation url=“index.cfm?fuseaction=Catalog.main” addtoken=“yes”> • …is replaced with a variable: • <cflocation url=“index.cfm?fuseaction=#XFA.success#” addtoken=“yes”>

27. Setting XFAs • XFAs represent exit points for a fuseaction. • XFA values are set in FBX_Switch.cfm <cfcase value=“validateLogin”> <cfset XFA.success = “Home.main”> <cfset XFA.failure = “Login.badLogin”> <cfinclude template=“qry_findUser.cfm”> <cfinclude template=“act_findUser.cfm”></cfcase>

28. XML Fusedocs • Fusedocs are now in XML • Makes typing them easier – CF Studio help • Makes parsing them by programs easier – eg Jeff Peter’s fuse harness program, Bjorkman’s site inspector • Makes reading them easier – color coding

29. Fusedoc • A standardized documentation/program definition language for use with Fusebox • XML-based (DTD available) • Fusedoc tools (in the works)

30. How Fusebox Works – A Fusebox Request • A fuseaction request is sent to the web server’s default page: <a href=“index.cfm?fuseaction=Users.new”> Register Now</a>

31. A Fusebox Request • The default page includes the core Fusebox file: <cfinclude template=“FBX_Fusebox30_CF50.cfm”>

32. A Fusebox Request • The fusebox file determines which circuit the request belongs to and includes that circuit’s FBX_Switch.cfm file. • This switch file includes one or more fuses needed to fullfill the request: <!--- snippet from Users circuit’s FBX_Switch.cfm ---><cfcase value=“new”> <cfinclude template=“dsp_userInfo.cfm”></cfcase>

33. A Fusebox Request • The circuit is completed by the fuse making a new fuseaction request: <!--- snippet from dsp_userInfo.cfm---><form action=“index.cfm?fuseaction=Users.addUser” method=“post”>...

34. Transitioning from Fusebox to Fusebox3A 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_

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

36. What CHANGED IN index.cfm? Plenty!

37. 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">

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

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

40. 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

41. 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…

42. 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

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

44. 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>

45. 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>

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

47. Typical FB2 index.cfm

48. 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

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

50. 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…