Advanced Client-Side Scripting

Today's client-side scripts can get large and complex. Client-side scripting may use both script library classes and script library objects to handle such situations.

Script Libraries

Many scripts are reused over many pages in the system. When this happens, it is best to create and to maintain separate script library files (.js). These files contain a number of JavaScript functions that can be included in one shot by the client, making it easier to maintain common scripts. The following class and component stereotypes are used to model these client-side script files.

Name Script library.
Metamodel class Class.
Description Defines a number of JavaScript functions and variables.
Icon graphics/script.gif
Constraints None.
Tagged values None.
Name Script library.
Metamodel class Component.
Description Realizes one or more «script library» classes in the logical view.
Icon graphics/script1.gif
Constraints None.
Tagged values None.

Script libraries are modeled very simply (Figure 12-5). A client page draws a directional «script» stereotyped association to a script library class in the logical view. In the component view, a script library component (.js file) is modeled with a «script library» component and exists in a «physical root» hierarchy.

Figure 12-5. A script library with a «script» association in a client page


A script library component realizes a script library class (Figure 12-6).

Figure 12-6. Script library classes, realized by script library components


Script Objects

JavaScript is not a pure object-oriented language, but it can be used in an object-oriented fashion, even to the point of simulating object classes (see Chapter 3, Dynamic Clients). An excellent example of a well-designed, well-implemented JavaScript object is the Menu object, created by Gary Smith of Netscape Communications.[1] JavaScript objects are modeled with a «client script object» stereotyped class, and their attributes and operations are, of course, modeled by the class's attributes and operations. JavaScript does not define types, so no typing is required in the model. If the types are specified, they should be used only as a reference to the implementer.

[1] The full source code and copyright statement can be found in Appendix E.

Name Client script object.
Metamodel class Class.
Description A JavaScript object that has a prototype defined and usually defines a number of member variables and functions.
Icon graphics/scriptobject.gif
Constraints None.
Tagged values None.

Figure 12-7 shows a class diagram with a «client script object» defined. The object is instantiated twice by the client page: browseMenu and actionMenu. This diagram also shows that the client script object uses several array instances for member variables. The Array class in this diagram comes from the class model of the JavaScript class library.

Figure 12-7. Class diagram of Menu client script object used by a client page and referencing a JavaScript Array object


Overview of Modeling and Web-Related Technologies

Building Web Applications

Building Web Applications With UML
Building Web Applications with UML (2nd Edition)
ISBN: 0201730383
EAN: 2147483647
Year: 2002
Pages: 141
Authors: Jim Conallen © 2008-2020.
If you may any questions please contact us: