This chapter is from the book
This chapter is from the book
This chapter is from the book
JavaScript Frameworks
A framework is an established library of code designed to perform common tasks. Instead of having to write, test, and debug the code necessary to do a particular thing, you can save yourself a lot of time and hassle by using a framework.
A ton of JavaScript frameworks are available, each with their own strengths and weaknesses. Frameworks you might want to consider include (in no particular order):
- Yahoo! User Interface (YUI) Library (http://developer.yahoo.com/yui/)
- Dojo (www.dojotoolkit.org)
- Rico (www.openrico.org)
- qooxdoo (www.qooxdoo.org)
- Ext JS (www.extjs.com)
- mootools (www.mootools.net)
- script.aculo.us (http://script.aculo.us)
Most are free of charge (others require licenses for some uses). Which you use on any project is up to you. How you use each specific framework is far too complicated to discuss here, but I will demonstrate the basics of incorporating one into your AIR applications.
To use a framework:
Determine which framework you'd like to use and download it.
To make that decision, start by looking at the framework's features: Does it do what you need it to do in your program? As part of this question, make sure the framework functions perfectly in Apple's Safari Web browser. Because Safari uses the same HTML and JavaScript rendering engine as Adobe AIR, if the framework is good for Safari, it's good for your AIR application.
A second but still important consideration is the quantity and quality of documentation available for the framework (including tutorials or articles put together by third parties). The point of a framework is to save you time; spending hours figuring out how to use a framework defeats that purpose.
For these next steps, let's use the Yahoo! User Interface (YUI) Library, which was at version 2.4.1 at the time of this writing.
- Begin a new AIR project in your text editor or IDE.
-
Copy any required files to your project's directory.
This may be the hardest step because it requires a thorough understanding of how the framework will be used. For example, to use the YUI calendar widget (Figure 4.4), you need to copy three files from the downloaded code into the project folder (all are within the build directory found in the YUI download):
- yahoo-dom-event/yahoo-dom-event.js
- calendar/calendar-min.js
- calendar/assets/skins/sam/calendar.css
Figure 4.4 The YUI calendar widget creates a calendar you can use in your AIR applications (or Web pages, naturally). It's scrollable by month and allows the user to select any date.
I put the two JavaScript files into a folder called js, the CSS file into a folder called css, and some images into an assets folder (Figure 4.5).
Figure 4.5 All of the files and folders in this project, as shown in Aptana Studio's project window.
- Include the framework files in your HTML page (Script 4.1):
<html><!-- Script 4.1 --> <head> <script type="text/javascript" src="js/AIRAliases.js"> </script> <link rel="stylesheet" type="text/css" href="css/calendar.css"> <script type="text/javascript" src="js/yahoo-dom-event.js"> </script> <script type="text/javascript" src="js/calendar-min.js"> </script> </head>Script 4.1. By including and using the Yahoo! User Interface framework, a few lines of code can create a complete calendar (see Figure 4.4).
1 <html><!-- Script 4.1 --> 2 <head> 3 <script type="text/javascript" src="js/AIRAliases.js"></script> 4 <link rel="stylesheet" type="text/css" href="css/calendar.css"> 5 <script type="text/javascript" src="js/yahoo-dom-event.js"></script> 6 <script type="text/javascript" src="js/calendar-min.js"></script> 7 </head> 8 <body class="yui-skin-sam"> 9 <div id="calendarDIV"></div> 10 <script type="text/javascript"> 11 var c = new YAHOO.widget.Calendar("calendarDIV"); 12 c.render(); 13 </script> 14 </body> 15 </html>As with any JavaScript file you use, you must include it in your HTML page to be able to use its functionality. Here the three files from YUI (mentioned in step 3) are included, along with the AIRAliases.js file.
- Use the framework in your HTML page as needed:
<body class="yui-skin-sam"> <div id="calendarDIV"></div> <script type="text/javascript"> var c = new YAHOO.widget.Calendar("calendarDIV"); c.render(); </script> </body> </html>These lines are all that's necessary to make the AIR application shown in Figure 4.4. Whenever you use a framework, most of the code in the HTML page will be derived from the framework's documentation, modified to suit your application. For this YUI calendar widget, a DIV is created, and then a new YAHOO.widget.Calendar object is created. Finally, the object's render() method is called to actually generate the calendar.
Be sure to include the framework files when building the application!
How you do this depends on what you're using to build the application. With Aptana Studio, all files listed in the project window (see Figure 4.5) will automatically be included. With Dreamweaver, you just need to make sure you add all the files in the AIR Application and Installer Settings window (see Figure 4.3 for the previous example). If you're using the command-line adt, all of the files and directories must be listed in the command (see Figure 4.2 for the previous example).
)
)
){kind=link}
){kind=link}