TurboWidgets library folder. This folder contains all resources needed for a server install of TurboWidgets. The contents of this folder should be copied to a web server folder./documentation/
contains developer information not necessary for server deployment./documentation/examples/
contains the widget example viewer and example source.
/builds/
alternate TurboWidgets builds (JS files) for custom installs.
/source/
TurboWidgets source code.
The TurboWidgets example viewer and example source is available in the /documentation/examples/ folder.
Additional TurboWidgets examples are available in the /documentation/examples/more/ folder.
TurboWidgets requires some minimal files on your server, including JavaScript source and template files. A single compressed JavaScript file containing the required Dojo and TurboWidgets libraries is included in the distribution. Serving this single-file build is recommended, but other solutions are available.
A typical install folder appears as shown below. <install> refers to the user-selected installation folder on the server.
<install>/dojo/dojo.js <install>/turbo/turbo.js <install>/turbo/turbo.widgets.js <install>/turbo/widgets/<contents of widgets folder from the distribution>
It's important not to rename the turbo folder in this configuration.
Other server configurations are shown in Working with Dojo.
Pages that employ TurboWidgets must load the required JavaScript libraries. Once the libraries are loaded, widgets are automatically generated from markup and then made available to the application. Source from a TurboWidgets page might look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- This DOCTYPE enables standards mode on most browsers, especially Internet Explorer. We recommend standards mode for maximum browser compatibility. --> <html> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta> <!-- Load our JavaScript --> <script type="text/javascript" src="<install>/dojo/dojo.js"></script> <script type="text/javascript" src="<install>/turbo/turbo.js"></script> <script type="text/javascript" src="<install>/turbo/turbo.widgets.js"></script> <!-- Here is our application logic --> <script type="text/javascript"> djConfig.isDebug = true; // optional, to enable debug messages dojo.addOnLoad(function() { // code here executes after all widgets are initialized }); </script>
<span dojoType="TurboButton">A Button</span>In other words, attaching a dojoType attribute to an element tells Dojo to convert that element into a widget at the user's browser. The type of the element (SPAN in the example) does not matter to the Dojo parser. You can set properties on your widget by including them as custom attributes. For example,
<span toggle="true" state="down" theme="H2O" dojoType="TurboButton">A Button</span>creates a toggle button which starts in the down state and uses the H2O theme.
TurboWidgets includes a set of components that work behind the scenes to help structure user interfaces. The TurboAligner object manages page layouts. TurboModule loads HTML/JS from an external URL into a container. TurboNotebook contains multiple overlapping content areas, but reveals only one area at a time, to implement tabbed pages for example.
The optional TurboAligner system can layout content areas like a traditional desktop application. The window does not scroll, but is instead divided into smaller regions that can be individually resizable or scrollable.
Here is an screenshot of an example page that uses TurboAligner:
The colored areas (DIVs) are aligned. Areas aligned to the top or bottom have a fixed height, areas aligned to the left or right have a fixed width, while client areas resize to fit the remaining space. Aligned areas maintain their relative positions as the page resizes. A container can have any number of side-aligned areas, but only one client area.
TurboAligner will automatically adjust this layout to fit the browser window if the window resizes. So in other words, the browser window itself never has scrollbars, but individual aligned areas can.
For the aligner to fit content to the page, document body and html scrolling must be disabled. It's generally easiest to do this in a style sheet, as shown below. Setting zero padding and margin is optional, but is frequently appropriate.
<style type="text/css">
body, html {
margin: 0;
padding: 0; overflow: hidden;
}
</style>
To align an element, simply assign the turboalign attribute, which can take values left, top, right, bottom, client, none. Note however that there are some requirements for using turboalign:
dojo.addOnLoad( /* register this function to fire after initialization */
function() {
turbo.aligner.addTarget('myContainerId' /*, <other container id>, ... */);
});
TurboSplitter widget creates a user-resizable border between aligned areas.
The following body markup:
<div turboalign="top" style="height: 48px">Header</div>
<div turboalign="left" style="width: 64px">Left</div>
<div turboalign="left" dojoType="TurboSplitter"></div>
<div turboalign="client">Client</div>
produces a page as below. The Left bar can be resized by dragging the TurboSplitter widget (silver bar) between the Left and Client areas.
If you would like to collect all library files into a single file turbo.js you can use the following procedure.
The dojo folder in the distribution contains only a compressed version of Dojo. To include additional resources and work with the Dojo source, this can be replaced with a Dojo source folder tree. The file layout and script tags are as follows:
Server file setup:
<install>/dojo/dojo.js <install>/dojo/<any Dojo support files and folders you need, e.g. src/ or templates/> <install>/turbo/turbo.js <install>/turbo/turbo.widgets.js <install>/turbo/widgets/<contents of widgets folder from the distribution>Accompanying script tag usage:
<!-- Load core JavaScript --> <script type="text/javascript" src="<install>/dojo/dojo.js"></script> <script type="text/javascript" src="<install>/turbo/turbo.js"></script> <script type="text/javascript" src="<install>/turbo/turbo.widgets.js"></script> <!-- Load additional modules --> <script type="text/javascript"> dojo.require("dojo.widget.Editor");
</scriptIn addition the uncompressed build library versions in the builds folder may be used to provide more clear debugging information.
The following setup is an example of a TurboWidgets source installation. The contents of the source folder from the download package folder should be copied into the turbo folder in the install. In script, the main difference between source and build installs is that needed TurboWidgets or modules must be included or required explicitly.
Server file setup:
<install>/dojo/dojo.js <install>/dojo/<dojo support files and folders>
<install>/turbo/<contents of source folder from distribution> <install>/turbo/widgets/<contents of widgets folder from the distribution>Accompanying script tag usage:
<!-- Load core JavaScript --> <script type="text/javascript" src="<install>/dojo/dojo.js"></script> <script type="text/javascript" src="<install>/turbo/turbo.js"></script> <!-- Example of loading dojo and TurboWidgets code --> <script type="text/javascript"> <!-- Load Dojo modules --> dojo.require("dojo.widget.Editor"); <!-- Load TurboWidgets modules --> dojo.require("turbo.widgets.TurboButton");
</script>