src/template/README.txt

   1 What a developer needs to do in their application:
   2
   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.)
   7
   8 * In index.html, they add a script tag to load bootstrap.js
   9   and specify parameters for the loader. For example:
  10
  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">
  15   </script>
  16
  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:
  19
  20   S.load(
  21     'src/app_manage.js',
  22     'src/theme.js',
  23   );
  24
  25   /* link custom stylesheet */
  26   S.css.load(
  27     'src/app_manage.css',
  28     'src/theme.css'
  29   );
  30
  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
  35   directory) in order.
  36
  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
  41   framework functions.
  42
  43 What happens when the app loads:
  44
  45 * bootstrap.js is loaded
  46
  47 * The auto-run function in bootstrap.js is called once the DOM is ready.
  48   This does the following:
  49
  50   - Hides the <body> element until everything is loaded
  51
  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)
  54
  55   - Sets a default version of the framework to load (0.1)
  56
  57   - Sets a default theme to load (default)
  58
  59   - Finds the bootstrap.js <script> element in the DOM
  60
  61   - Replaces any of the defaults (root, version, theme) with values
  62     from data- attributes on the <script> element; available values
  63     are:
  64       * root = <relative or absolute URI>
  65       * version = 0.1 (actually the same jQuery Mobile version)
  66       * theme = default
  67
  68   - Appends a <link rel="stylesheet"...> element to the head to
  69     load the theme's stylesheet
  70
  71   - Uses LAB.js to load the framework JS files; the names of the files are
  72     specified in bootstrap.js
  73
  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
  77     JavaScript.
  78
  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
  82     completed loading.