×
Namespaces

Variants
Actions

UI Manager Overview

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: User:Kbwiki (11 Nov 2009)
Last edited: hamishwillee (07 Nov 2011)

In this page we described how the developer can use the WRT Framework UI Manager.

We will have a class Nokia.View, below a draft for this:

Nokia.View = new Class({
initialize: function(options) {
var instance = this;
instance.options = jQuery.extend({ container: this._createContainter() }, options);
this.setContainer(instance.options.container);
this.init(); // call the init() for lifecycle
},
_createContainter: function() {
return Nokia.dom.parseHTML('<div class="nokia-view-container"></div>');
},
setContainer: function(container) {
this._container = jQuery(container);
},
getContainer: function() {
return this._container;
},
render: function(target) {
this._renderUI(target || document.body);
this.renderUI();
this.bindUI();
this.syncUI();
},
show: function() {
this.getContainer().show();
// this calls the show callback
},
hide: function() {
this.getContainer().hide();
// this calls the hide callback
},
_renderUI: function(target) {
Nokia.dom.append(target, this.getContainer());
},
destroy: function() {
// this makes the elements distribution and unbinds
}
});

Take a look on method render. This method will make the content inclusion on the DOM, adding elements and modifying the existed one. This also adds listeners for events. Morever, the manages th Lifecycle in widgets, to have logic and DOM integration in a separated way.


In the Class Nokia.ViewControl we will have the View manipulations:

Nokia.ViewControl = new Class({
initialize: function() {
// this call .show() for the first view (index 0)
},
next: function() {
// this call .show() for the next view in stack
},
prev: function() {
// this call .show() for the previous view in stack
},
show: function(index) {
// this call .show() for the view in index
},
hide: function(index) {
// this call .hide() for the view in index
},
getCurrentView: function() {
// returns the current view
},
getCurrentIndex: function() {
// returns the current view index
},
add: function(view) {
// this adds a view in stack
},
remove: function(view or index) {
// this removes a view in stack
},
size: function() {
// this returns the view stack size
}
});


Here, how this will be used in a Widget:

/*
* Developer Implementation
* - First View
*/

 
var FirstPageView = Nokia.View.extend({
/*
* Lifecycle
*/

init: function() {
console.log("Init for my View");
},
renderUI: function() {
this._cabecalho = Nokia.dom.parseHTML('<div class="nokia-view-cabecalho"></div>');
Nokia.dom.append(this.getContainer(), this._cabecalho);
},
bindUI: function() {
this._cabecalho.click(function() {
console.log('clicked on cabecalho');
});
},
syncUI: function() {
this._cabecalho.css('background', 'blue');
}
});
 
/*
* Developer Implementation
* - Second View
*/

 
var SecondPageView = Nokia.View.extend({
/*
* Lifecycle
*/

renderUI: function() {
this._meioDaPaginaBlah = Nokia.dom.parseHTML('<div class="nokia-view-meio"></div>');
this._linkBack = Nokia.dom.parseHTML('<a href="">Voltar</a>');
Nokia.dom.append(this._meioDaPaginaBlah, this._linkBack);
Nokia.dom.append(this.getContainer(), this._meioDaPaginaBlah);
},
bindUI: function() {
this._meioDaPaginaBlah.click(function() {
console.log('clicou no meio da pagina');
});
this._linkBack.click(function() {
// ViewControlGlobal GLOBAL chamando o back()
console.log( "Current index: ", ViewControlGlobal.getCurrentIndex() );
ViewControlGlobal.prev();
});
},
getEntradasAjax: function(callback) {
// AJAX
},
show: function() {
this.getEntradasAjax(function(entradas) {
// Show entries
});
}
});
 
var viewControll = new Nokia.ViewControl();
 
viewControl.add(
new FirstPageView()
);
 
viewControl.add(
new SecondPageView({
container: '#containerPreCriado',
//callbacks
show: function() {
// call show
},
hide: function() {
// call hide
}
});
);
This page was last modified on 7 November 2011, at 05:18.
30 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×