Transcript Putting It Together: Developing Web

Putting It All Together:
Developing Web Applications Using
Fusebox and Frames
Presented by
Nat Papovich
GeoAgents.com
9/16/2000
9/16/2000
Nat Papovich – Putting It All Together
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.
9/16/2000
Nat Papovich – Putting It All Together
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…
9/16/2000
Nat Papovich – Putting It All Together
WWW vs. Win32







Stateless
Server-side processing
Server response times
COM and ActiveX
Need Web access
Request-based
Centralized data
9/16/2000







Stateful
Client-side processing
Client speed
Local system access
No Web access needed
Client initiates changes
Individualized data
Nat Papovich – Putting It All Together
Frames vs. Single Page






Magic display updates
Multiple processes
Fast, concise updates
Less server load
Track sessions better
The Dark Side
9/16/2000






Users lose control
Hard to perform
Whole page reloads
More server load
Are they still there?
No target worries
Nat Papovich – Putting It All Together
Now You’re Convinced!
9/16/2000
Nat Papovich – Putting It All Together
Quick Fusebox Review
 All form and URL
links go to index.cfm
http://index.cfm?fuseaction
=login
THEREFORE
 All frame sources go to
index.cfm
 The frameset gets
loaded via the
index.cfm
9/16/2000
Fusebox
http://index.cfm?
fuseaction=validateUser
Nat Papovich – Putting It All Together
Loading the Frameset
 The default Fuseaction loads the frameset.
9/16/2000
Nat Papovich – Putting It All Together
The Frameset Page
 Here’s a look at fra_Mother.cfm, called from
index.cfm.
9/16/2000
Nat Papovich – Putting It All Together
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.
9/16/2000
Nat Papovich – Putting It All Together
That’s All There Is To It!
9/16/2000
Nat Papovich – Putting It All Together
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.
9/16/2000
Nat Papovich – Putting It All Together
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.
9/16/2000
Nat Papovich – Putting It All Together
Dynamic Frame Sources
 Upgraded fra_Mother.cfm (main frameset page):
9/16/2000
Nat Papovich – Putting It All Together
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.
9/16/2000
Nat Papovich – Putting It All Together
Multiple Framesets
9/16/2000
Nat Papovich – Putting It All Together
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.
9/16/2000
Nat Papovich – Putting It All Together
Hidden Frames
 Keep them on the highest frameset level.
 Used to auto-update other frames.
9/16/2000
Nat Papovich – Putting It All Together
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.
9/16/2000
Nat Papovich – Putting It All Together
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.
9/16/2000
Nat Papovich – Putting It All Together
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.
9/16/2000
Nat Papovich – Putting It All Together
Bookmarking Frame Elements
 Good luck
 No, seriously…
9/16/2000
Nat Papovich – Putting It All Together
Bookmarking Frame Elements
 Remember the “Guarantee Framing of Frames”
script?
 Use it to place a physical link on each frame for
users to bookmark.
9/16/2000
Nat Papovich – Putting It All Together
Fusebox and Frames Rule!
9/16/2000
Nat Papovich – Putting It All Together