1 What a developer needs to do in their application:
3 * They drop a single bootstrap.js file into their application. This contains
4 a basic loader script, plus defaults for the framework and theme to be used.
5 It also contains inlined versions of domready.js (for DOM ready checking)
6 and LAB.js (for async script loading). (Both are MIT licensed.)
8 * In index.html, they add a script tag to load bootstrap.js
9 and specify parameters for the loader. For example:
11 <script src="bootstrap.js"
12 data-framework-version="0.1"
13 data-framework-root="/path/to/tizen-web-ui-fw"
14 data-framework-theme="default">
17 * They create a config.js file to specify which of their own JS, CSS files
18 need to be loaded, other app config etc. For example:
25 /* link custom stylesheet */
31 In this case, 'S' is an arbitrary namespace I picked for
32 our framework; the load() function is defined in bootstrap.js, and
33 simply loads the remaining framework JavaScript files, followed by
34 the specified JS files (relative to the application root
37 Note that as config.js is loaded after jQuery but before jQuery Mobile:
38 this is so it can hook into jQuery Mobile configuration (via
39 $.mobile.* properties) and also bind to the pagecreate event for
40 the first page. Therefore, it shouldn't directly reference any
43 What happens when the app loads:
45 * bootstrap.js is loaded
47 * The auto-run function in bootstrap.js is called once the DOM is ready.
48 This does the following:
50 - Hides the <body> element until everything is loaded
52 - Sets a default root location for the framework files (tizen-web-ui-fw in
53 this demo, but could be an absolute file:// path)
55 - Sets a default version of the framework to load (0.1)
57 - Sets a default theme to load (default)
59 - Finds the bootstrap.js <script> element in the DOM
61 - Replaces any of the defaults (root, version, theme) with values
62 from data- attributes on the <script> element; available values
64 * root = <relative or absolute URI>
65 * version = 0.1 (actually the same jQuery Mobile version)
68 - Appends a <link rel="stylesheet"...> element to the head to
69 load the theme's stylesheet
71 - Uses LAB.js to load the framework JS files; the names of the files are
72 specified in bootstrap.js
74 - Loads config.js: any code in it runs; it should include a call
75 to S.load() to start the application; optionally, JavaScript files
76 can be passed to S.load() as arguments, to load application
79 - Shows the <body> element once the framework and all application
80 files have finished loading; NB this occurs once all the scripts
81 in the framework and the application (loaded by S.load()) have