Putting It All Together: Developing Web Applications Using Fusebox and Frames

1. Putting It All Together:Developing Web Applications Using Fusebox and Frames Presented by Nat Papovich GeoAgents.com 9/16/2000 Nat Papovich – Putting It All Together

2. What is a Web Application? • A Web application is a collection of scripts, run from a Web server designed to perform a specific function directly for the user or, in some cases, for another application. Examples of Web applications include email programs such as Hotmail, communication programs such as chat forums, contact manager systems like a Yahoo address book, and stock trading tools like Datek. Nat Papovich – Putting It All Together

3. Why Use Web Applications? • Speed of development • Application Service Provider Model • Ease of updates and patches • Portability - establish requirements for use • Users can access from anywhere • Revenue from advertisers, not users • More… Nat Papovich – Putting It All Together

4. Stateless Server-side processing Server response times COM and ActiveX Need Web access Request-based Centralized data Stateful Client-side processing Client speed Local system access No Web access needed Client initiates changes Individualized data WWW vs. Win32 Nat Papovich – Putting It All Together

5. Magic display updates Multiple processes Fast, concise updates Less server load Track sessions better The Dark Side Users lose control Hard to perform Whole page reloads More server load Are they still there? No target worries Frames vs. Single Page Nat Papovich – Putting It All Together

6. Now You’re Convinced! Nat Papovich – Putting It All Together

7. All form and URL links go to index.cfm THEREFORE All frame sources go to index.cfm The frameset gets loaded via the index.cfm http://index.cfm?fuseaction=login Quick Fusebox Review Fusebox http://index.cfm? fuseaction=validateUser Nat Papovich – Putting It All Together

8. Loading the Frameset • The default Fuseaction loads the frameset. Nat Papovich – Putting It All Together

9. The Frameset Page • Here’s a look at fra_Mother.cfm, called from index.cfm. Nat Papovich – Putting It All Together

10. Calling the Frames • The fra_Mother.cfm frameset had frames that called the index.cfm to get their sources. Here are the Fuseactions to load the frames. Nat Papovich – Putting It All Together

11. That’s All There Is To It! Nat Papovich – Putting It All Together

12. Frame Buster • CFStudio’s “Frame Buster” doesn’t work. • Include this script in your main frameset page (fra_Mother.cfm). It will prevent the page from being loaded inside another frame. Nat Papovich – Putting It All Together

13. Guarantee Framing of Frames • Add this script at the top of each page that is framed. • It will reload the master frameset around the existing frame. Nat Papovich – Putting It All Together

14. Dynamic Frame Sources • Upgraded fra_Mother.cfm (main frameset page): Nat Papovich – Putting It All Together

15. Cross-Frame Posting • Remember, link and form actions go to index.cfm. • The content of the form will not change during cross-frame postings. • You will have to update the page with JavaScript. Nat Papovich – Putting It All Together

16. Multiple Framesets Nat Papovich – Putting It All Together

17. Nested Fuseboxes and Nested Framesets • With a well-planned frame naming scheme, you can nest many framesets and frames. • The more frames you have, the cooler your application will be. Nat Papovich – Putting It All Together

18. Hidden Frames • Keep them on the highest frameset level. • Used to auto-update other frames. Nat Papovich – Putting It All Together

19. Dynamic Form Selects • First, populate the array in ColdFusion by • defining the arrays, • looping through a recordset (in this case “CmListAll”), • and populating the array elements. • Do this as many times as you have select boxes. Nat Papovich – Putting It All Together

20. Dynamic Selects Step 2 • Load the select box with the first set of options. • These options are not dynamic on the page. • The onChange event for the select box runs the function to populate the second select list. Nat Papovich – Putting It All Together

21. Dynamic Selects Step 3 • When the page loads, the CF array is looped through and the matching values in the second query are built into JavaScript arrays. • The function used to load the dynamic select box chooses which JavaScript array to use. Nat Papovich – Putting It All Together

22. Bookmarking Frame Elements • Good luck • No, seriously… Nat Papovich – Putting It All Together

23. Bookmarking Frame Elements • Remember the “Guarantee Framing of Frames” script? • Use it to place a physical link on each frame for users to bookmark. Nat Papovich – Putting It All Together

24. Fusebox and Frames Rule! Nat Papovich – Putting It All Together