×
Namespaces

Variants
Actions

Nokia Loader

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: User:Kbwiki (06 Nov 2009)
Last edited: hamishwillee (05 Jul 2012)

1 - Description

More Dynamic: With Loader built into the core, loading files when you need them just got easier and provides an asynchronous loading for your JavaScript and CSS files.

1.1 Use method

The use method allows you to choose the modules that you want loaded into your page. You can pick and choose what you need, you don't have to load everything that was included on the page.

Nokia.use('accordion', function() {
 
// Nokia.Accordion is loaded
 
});


You can pass a function in as the last argument to use. This function will execute after the Nokia instance loads all the modules. This is required if you do not have all dependencies on the page.

The callback method has no arguments passed. In this function you know that all the modules have been loaded and it's ok to use them.

Nokia.use('datepicker', 'accordion', function() {
 
// Nokia.DatePicker is loaded
 
// Nokia.Accordion is loaded
 
});

After loaded, the module is cached. If you invoke the use function asking for any modules already loaded it will be pulled from the cache.

// First time
 
Nokia.use('tooltip', function() {
 
// Loading the Nokia.Tooltip
 
});
 
// Second time, on same page
 
Nokia.use('tooltip', function() {
 
// Nokia.Tooltip is already loaded and cached
 
});

1.2 Use Shorthand

The use method contains a shorthand reference for all modules. It uses the * as the module name. This will load every module that is included on the defaults module mapping.

Nokia.use('*', function() {
 
// All mapped modules are loaded
 
});

1.3 Module List

The modules and its dependencies are mapped on NOKIA_DEFAULTS global variable. You can add modules invoking the Nokia.addModule() function.

Note that when you register a module you can specify the required modules and some another extra configurations like type and getPath function.

Nokia.addModule('myCustomModule', {
 
getPath: function() {
 
return "myCustomModule.js";
 
},
 
type: "javascript",
 
requires: [ 'myCustomModule-css' ]
 
});

Mapping the required "myCustomModule-css". You can map CSS files either.

Nokia.addModule('myCustomModule-css', {
 
getPath: function() {
 
return "/css/myCustomModule.css";
 
},
 
type: "css"
 
});

Here is a partial list of the Nokia default modules and its dependencies.

     window.NOKIA_DEFAULTS = {
 
modules: {
 
/*
* Base
*/

'base': {
getPath: function() { return BLANK; },
requires: ['dom', 'util', 'device', 'animation']
},
'base-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'base.css'; },
type: 'css'
},
 
/*
* Animation
*/

'animation': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'animation.js'; }
},
 
/*
* Device
*/

'device': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'device.js'; }
},
 
/*
* DOM
*/

'dom': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'dom.js'; }
},
 
/*
* Util
*/

'util': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'util.js'; }
},
 
/*
* Widget
*/

'widget': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'widget.js'; },
requires: ['base']
},
 
/*
* Accordion
*/

'accordion': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'accordion.js'; },
requires: ['widget', 'accordion-css']
},
'accordion-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'accordion.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* Busy
*/

'busy': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'busy.js'; },
requires: ['widget', 'busy-css']
},
'busy-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'busy.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* Button
*/

'button': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'button.js'; },
requires: ['widget', 'button-css']
},
'button-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'button.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* Carousel
*/

'carousel': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'carousel.js'; },
requires: ['widget', 'carousel-css']
},
'carousel-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'carousel.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* Checkbox
*/

'checkbox': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'checkbox.js'; },
requires: ['optionbox', 'checkbox-css']
},
'checkbox-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'checkbox.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* CustomizableList
*/

'customizablelist': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'customizablelist.js'; },
requires: ['widget', 'customizablelist-css']
},
'customizablelist-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'customizablelist.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* DatePicker
*/

'datepicker': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'datepicker.js'; },
requires: ['widget', 'datepicker-css']
},
'datepicker-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'datepicker.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* DropDown
*/

'dropdown': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'dropdown.js'; },
requires: ['widget', 'dropdown-css']
},
'dropdown-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'dropdown.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* IconicMenu
*/

'iconicmenu': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'iconicmenu.js'; },
requires: ['widget', 'iconicmenu-css']
},
'iconicmenu-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'iconicmenu.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* ImageDescription
*/

'imagedescription': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'imagedescription.js'; },
requires: ['widget', 'imagedescription-css']
},
'imagedescription-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'imagedescription.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* LightBox
*/

'lightbox': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'lightbox.js'; },
requires: ['widget', 'lightbox-css']
},
'lightbox-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'lightbox.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* MiniView
*/

'miniview': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'miniview.js'; },
requires: ['widget', 'miniview-css']
},
'miniview-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'miniview.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* OptionBox
*/

'optionbox': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'optionbox.js'; },
requires: ['widget']
},
 
/*
* OptionGroup
*/

'optiongroup': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'optiongroup.js'; },
requires: ['widget', 'optiongroup-css']
},
'optiongroup-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'optiongroup.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* OptionsMenu
*/

'optionsmenu': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'optionsmenu.js'; },
requires: ['widget', 'optionsmenu-css']
},
'optionsmenu-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'optionsmenu.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* ProgressBar
*/

'progressbar': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'progressbar.js'; },
requires: ['widget', 'progressbar-css']
},
'progressbar-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'progressbar.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* RadioBox
*/

'radiobox': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'radiobox.js'; },
requires: ['optionbox', 'radiobox-css']
},
'radiobox-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'radiobox.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* Rating
*/

'rating': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'rating.js'; },
requires: ['widget', 'rating-css']
},
'rating-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'rating.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* Scroll
*/

'scroll': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'scroll.js'; },
requires: ['widget', 'scroll-css']
},
'scroll-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'scroll.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* Sortable
*/

'sortable': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'sortable.js'; },
requires: ['widget', 'sortable-css']
},
'sortable-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'sortable.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* Tabs
*/

'tabs': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'tabs.js'; },
requires: ['widget', 'tabs-css']
},
'tabs-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'tabs.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* TextLabel
*/

'textlabel': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'textlabel.js'; },
requires: ['widget', 'textlabel-css']
},
'textlabel-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'textlabel.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* TextLink
*/

'textlink': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'textlink.js'; },
requires: ['widget', 'textlink-css']
},
'textlink-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'textlink.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* ToolTip
*/

'tooltip': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'tooltip.js'; },
requires: ['widget', 'tooltip-css']
},
'tooltip-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'tooltip.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* TransitionList
*/

'transitionlist': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'transitionlist.js'; },
requires: ['widget', 'transitionlist-css']
},
'transitionlist-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'transitionlist.css'; },
type: 'css',
requires: ['base-css']
},
 
/*
* ViewManager
*/

'viewmanager': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'viewmanager.js'; },
requires: ['view']
},
 
/*
* View
*/

'view': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'view.js'; },
requires: ['dom']
}
 
}
 
}
This page was last modified on 5 July 2012, at 06:40.
86 page views in the last 30 days.
×