[IMP] Improved the code to use css direct from lib on xml by data-role.

bzr revid: jra@tinyerp.com-20110831061816-xqgbt9uo601o5yx1
This commit is contained in:
Jiten (OpenERP)
2011-08-31 11:48:16 +05:30
parent 458dacea36
commit c3922bbe9d
4 changed files with 104 additions and 139 deletions
@@ -20,7 +20,7 @@ openerp.web_mobile.MobileWebClient = openerp.base.Widget.extend({
this.$element.html(QWeb.render("WebClient", {}));
this.session = new openerp.base.Session("oe_errors");
this.crashmanager = new openerp.base.CrashManager(this);
this.login = new openerp.web_mobile.Login(this, "oe_app");
this.login = new openerp.web_mobile.Login(this, "oe_login");
// this.session.on_session_invalid.add(this.login.do_ask_login);
},
start: function() {
@@ -74,7 +74,7 @@ openerp.web_mobile.Login = openerp.base.Widget.extend({
.removeClass("login_invalid")
.addClass("login_valid");
//.hide();
this.homepage = new openerp.web_mobile.HomePage(this, "oe_app");
this.homepage = new openerp.web_mobile.HomePage(this, "oe_home");
this.homepage.start();
},
do_ask_login: function(continuation) {
@@ -97,12 +97,14 @@ openerp.web_mobile.HomePage = openerp.base.Widget.extend({
this.shortcuts = new openerp.web_mobile.Shortcuts(this, "oe_shortcuts");
this.menu = new openerp.web_mobile.Menu(this, "oe_menu", "oe_secondary_menu");
this.options = new openerp.web_mobile.Options(this, "oe_options");
this.footer = new openerp.web_mobile.Footer(this, "oe_footer");
this.header.start();
this.shortcuts.start();
this.menu.start();
this.options.start();
jQuery("#oe_header").find("h1").html('Home');
this.footer.start();
this.$element.find("a").click(this.on_clicked);
$.mobile.changePage($("#oe_home"), "slide", true, true);
}
});
@@ -113,15 +115,16 @@ openerp.web_mobile.Header = openerp.base.Widget.extend({
start: function() {
var self = this;
self.$element.html(QWeb.render("Header", this));
self.$element.find("a").click(this.on_clicked);
}
});
openerp.web_mobile.Footer = openerp.base.Widget.extend({
init: function(session, element_id) {
this._super(session, element_id);
},
on_clicked: function(ev) {
$opt = $(ev.currentTarget);
current_id = $opt.attr('id');
if (current_id == 'home') {
this.homepage = new openerp.web_mobile.HomePage(this, "oe_app");
this.homepage.start();
}
start: function() {
var self = this;
self.$element.html(QWeb.render("Footer", this));
}
});
@@ -140,9 +143,11 @@ openerp.web_mobile.Shortcuts = openerp.base.Widget.extend({
$shortcut = $(ev.currentTarget);
id = $shortcut.data('menu');
res_id = $shortcut.data('res');
jQuery("#oe_header").find("h1").html($shortcut.data('name'));
this.listview = new openerp.web_mobile.ListView(this, "oe_app", res_id);
this.header = new openerp.web_mobile.Header(this, "oe_header");
this.listview = new openerp.web_mobile.ListView(this, "oe_list", res_id);
this.header.start();
this.listview.start();
jQuery("#oe_header").find("h1").html($shortcut.data('name'));
}
});
@@ -169,13 +174,15 @@ openerp.web_mobile.Menu = openerp.base.Widget.extend({
this.children = this.data.data.children[i];
}
}
jQuery("#oe_header").find("h1").html($menu.data('name'));
this.$element
.removeClass("login_valid")
.addClass("secondary_menu");
//.hide();
this.secondary = new openerp.web_mobile.Secondary(this, "oe_app", this.children);
this.header = new openerp.web_mobile.Header(this, "oe_header");
this.secondary = new openerp.web_mobile.Secondary(this, "oe_sec_menu", this.children);
this.header.start();
this.secondary.start();
jQuery("#oe_header").find("h1").html($menu.data('name'));
}
});
@@ -188,6 +195,7 @@ openerp.web_mobile.Secondary = openerp.base.Widget.extend({
var v = { menu : this.data };
this.$element.html(QWeb.render("Menu.secondary", v));
this.$element.add(this.$secondary_menu).find("a").click(this.on_menu_click);
$.mobile.changePage($("#oe_sec_menu"), "slide", true, true);
},
on_menu_click: function(ev, id) {
$menu = $(ev.currentTarget);
@@ -197,22 +205,25 @@ openerp.web_mobile.Secondary = openerp.base.Widget.extend({
this.children = this.data.children[i];
}
}
jQuery("#oe_header").find("h1").html($menu.data('name'));
var child_len = this.children.children.length;
if (child_len > 0) {
this.$element
.removeClass("secondary_menu")
.addClass("content_menu");
//.hide();
this.secondary = new openerp.web_mobile.Secondary(this, "oe_app", this.children);
this.header = new openerp.web_mobile.Header(this, "oe_header");
this.secondary = new openerp.web_mobile.Secondary(this, "oe_sec_menu_new", this.children);
this.header.start();
this.secondary.start();
$.mobile.changePage($("#oe_sec_menu_new"), "slide", true, true);
}
else {
if (id) {
this.listview = new openerp.web_mobile.ListView(this, "oe_app", id);
this.listview = new openerp.web_mobile.ListView(this, "oe_list", id);
this.listview.start();
}
}
jQuery("#oe_header").find("h1").html($menu.data('name'));
}
});
@@ -223,12 +234,6 @@ openerp.web_mobile.Options = openerp.base.Widget.extend({
start: function() {
var self = this;
this.$element.html(QWeb.render("Options", this));
self.$element.find("#logout").click(self.on_logout);
},
on_logout: function(ev) {
this.session.logout();
// this.login = new openerp.web_mobile.Login(this, "oe_app");
// this.login.start();
}
});
@@ -38,7 +38,6 @@ openerp.web_mobile.FormView = openerp.base.Widget.extend({
var notebooks = view_fields[j];
}
}
$("#oe_header").find("h1").html(result.fields_view.arch.attrs.string);
self.$element.html(QWeb.render("FormView", {'get_fields': get_fields, 'notebooks': notebooks || false, 'fields' : fields, 'values' : data }));
self.$element.find('select').change(function(ev){
selection.on_select_option(ev);
@@ -101,6 +100,8 @@ openerp.web_mobile.FormView = openerp.base.Widget.extend({
});
});
});
$.mobile.changePage($("#oe_form"), "slide", true, true);
$("#oe_header").find("h1").html(result.fields_view.arch.attrs.string);
});
},
get_fields: function(view_fields, fields) {
+7 -38
View File
@@ -17,56 +17,25 @@ openerp.web_mobile.ListView = openerp.base.Widget.extend({
var self = this;
if (data.action.length) {
this.action = data.action[0][2];
this.on_search_data('');
this.on_search_data();
}
},
on_search_data: function(request){
if(request){
if(request.term){
var search_val = request.term;
}else{
if(request.which==27 || request.which==13 || request.which==9){
var search_val = '';
}else if(request.which==38 || request.which==40 || request.which==39 || request.which==37){
return;
}else if($("#searchid").val()==""){
var search_val = '';
}else{
return;
}
}
}
else{
var search_val = '';
}
on_search_data: function(ev){
var self = this;
var dataset = new openerp.base.DataSetStatic(this, this.action.res_model, this.action.context);
dataset.domain=[['name','ilike',search_val]];
dataset.name_search(search_val, dataset.domain, 'ilike',false ,function(result){
dataset.name_search('', [], 'ilike',false ,function(result){
self.$element.html(QWeb.render("ListView", {'records' : result}));
self.$element.find("#searchid").focus();
if(request.term){
self.$element.find("#searchid").val(request.term);
}
self.$element.find("#searchid").autocomplete({
source: function(req) { self.on_search_data(req); },
focus: function(e, ui) {
e.preventDefault();
},
html: true,
minLength: 0,
delay: 0
});
self.$element.find("#searchid").keyup(self.on_search_data);
self.$element.find("a#list-id").click(self.on_list_click);
$.mobile.changePage($("#oe_list"), "slide", true, true);
});
},
on_list_click: function(ev) {
$record = $(ev.currentTarget);
var self = this;
id = $record.data('id');
this.formview = new openerp.web_mobile.FormView(this, "oe_app", id, this.action);
this.header = new openerp.web_mobile.Header(this, "oe_header");
this.formview = new openerp.web_mobile.FormView(this, "oe_form", id, this.action);
this.header.start();
this.formview.start();
}
});
+66 -76
View File
@@ -4,10 +4,12 @@
<templates id="template" xml:space="preserve">
<t t-name="WebClient">
<div data-role="page">
<div id="oe_header"></div>
<div id="oe_app"></div>
</div>
<div data-role="page" id="oe_login"></div>
<div data-role="page" id="oe_home"></div>
<div data-role="page" id="oe_sec_menu"></div>
<div data-role="page" id="oe_sec_menu_new"></div>
<div data-role="page" id="oe_list"></div>
<div data-role="page" id="oe_form"></div>
</t>
<t t-name="Login">
@@ -39,29 +41,32 @@
</t>
<t t-name="HomePage">
<div role="main" class="ui-content" data-role="content">
<div id="oe_shortcuts" class="shortcuts"></div>
<div id="oe_menu" class="menu"></div>
<div id="oe_options" class="options"></div>
<div id="oe_header"></div>
<div data-role="content">
<div id="oe_shortcuts"></div>
<div id="oe_menu"></div>
<div id="oe_options"></div>
</div>
<div id="oe_footer"></div>
</t>
<t t-name="Header">
<div role="banner" class="ui-bar-b ui-header" data-role="header" data-theme="b">
<h1 aria-level="1" role="heading" tabindex="0" class="ui-title">OpenERP</h1>
<a id="home" class="ui-btn-right jqm-home ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-b" data-direction="reverse" data-iconpos="notext" data-icon="home" href="#" title="Home" data-theme="b">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Home</span>
<span class="ui-icon ui-icon-home ui-icon-shadow"></span>
</span>
</a>
<div data-role="header" data-theme="b">
<h1>OpenERP</h1>
<a id="home" class="ui-btn-right" data-iconpos="notext" data-icon="home" href="#oe_home" title="Home" data-theme="b"></a>
</div>
</t>
<t t-name="Footer">
<div data-role="footer" data-theme="b">
<h1>Footer</h1>
</div>
</t>
<t t-name="Shortcuts">
<ul data-dividertheme="b" data-theme="c" data-inset="true" data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined">
Shortcuts
Shortcuts
</li>
<li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c" t-foreach="sc" t-as="opt">
<div class="ui-btn-inner ui-li">
@@ -73,7 +78,7 @@
<span class="ui-icon ui-icon-arrow-r"></span>
</div>
</li>
</ul>
</ul>
</t>
<t t-name="Menu">
@@ -95,67 +100,47 @@
</t>
<t t-name="Menu.secondary">
<div role="main" class="ui-content" data-role="content">
<ul data-role="listview" class="ui-listview">
<li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c" t-foreach="menu.children" t-as="menu">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#" class="ui-link-inherit" t-attf-id="menu_#{menu.id}" t-att-data-menu="menu.id" t-att-data-name="menu.name">
<span><t t-esc="menu.name"/></span>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r"></span>
</div>
<div id="oe_header"></div>
<div data-role="header" data-theme="b">
<h1>OpenERP</h1>
<a id="home" class="ui-btn-right" data-iconpos="notext" data-icon="home" href="#" title="Home" data-theme="b"></a>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-theme="c" t-foreach="menu.children" t-as="menu">
<a href="#" t-attf-id="menu_#{menu.id}" t-att-data-menu="menu.id" t-att-data-name="menu.name">
<t t-esc="menu.name"/>
</a>
</li>
</ul>
</div>
</t>
<t t-name="Options">
<ul data-dividertheme="b" data-theme="c" data-inset="true" data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined">
<ul data-dividertheme="b" data-theme="c" data-inset="true" data-role="listview">
<li data-role="list-divider">
Options
</li>
<li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a id="logout" href="#" class="ui-link-inherit">
Logout
</a>
</div>
<span class="ui-icon ui-icon-arrow-r"></span>
</div>
<li data-theme="c">
<a id="logout" href="#oe_login">Logout</a>
</li>
<li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a id="pref" href="#" class="ui-link-inherit">
Preferences
</a>
</div>
<span class="ui-icon ui-icon-arrow-r"></span>
</div>
<li data-theme="c">
<a id="pref" href="#">Preferences</a>
</li>
</ul>
</t>
<t t-name="ListView">
<div role="main" class="ui-content" data-role="content">
<form class="ui-listview-filter ui-bar-c" role="search">
<div id="search-data" class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c">
<input id="searchid" placeholder="Filter items..." data-type="search" class="ui-input-text ui-body-null" autosearch="true" setTimeDefault="700"/>
</div>
</form>
<ul role="listbox" data-role="listview" class="ui-listview">
<li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c" t-foreach="records" t-as="record">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a id="list-id" t-att-data-id="record[0]" href="#" class="ui-link-inherit">
<span><t t-esc="record[1]"/></span>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r"></span>
</div>
<div data-role="header" data-theme="b">
<h1>OpenERP</h1>
<a id="home" class="ui-btn-right" data-iconpos="notext" data-icon="home" href="#oe_home" title="Home" data-theme="b"></a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="d" data-filter="true">
<li data-theme="c" t-foreach="records" t-as="record">
<a id="list-id" t-att-data-id="record[0]" href="#">
<t t-esc="record[1]"/>
</a>
</li>
</ul>
</div>
@@ -242,7 +227,6 @@
</div>
</t>
<t t-if="fields[field.attrs.name].type == 'many2one'">
<div class="ui-select">
<div data-theme="c" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
@@ -270,27 +254,34 @@
</div>
</t>
<t t-if="fields[field.attrs.name].type == 'one2many'">
<div class="info ui-collapsible-contain" data-collapsed="true" data-role="collapsible">
<ul role="listbox" data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li tabindex="0" data-theme="d" role="option" class="ui-btn ui-btn-icon-right ui-li ui-corner-top ui-corner-bottom ui-btn-up-d">
<div class="ui-btn-inner">
<div class="ui-btn-text">
<a href="#" class="ui-link-inherit">
<span><t t-esc="til"/></span>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r"></span>
</div>
</li>
</ul>
<!-- <div class="info ui-collapsible-contain" data-collapsed="true" data-role="collapsible">
<h1 class="ui-collapsible-heading">
<a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-shadow ui-corner-all ui-btn-up-c" href="#" data-theme="c" t-id="page.attrs.string">
<span class="ui-btn-inner ui-corner-all">
<span class="ui-btn-text">
<t t-esc="til"></t>
<!-- <span class="ui-collapsible-heading-status"></span> -->
</span>
<span data-theme="d" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-d">
<span class="ui-btn-inner ui-btn-corner-all ui-corner-all">
<span class="ui-btn-text"></span>
<span class="ui-icon ui-icon-shadow ui-icon-plus"></span>
</span>
<span class="ui-collapsible-heading-status"></span>
</span>
</span>
</a>
<span class="ui-icon ui-icon-arrow-r"></span>
<div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">
<div class="detail"></div>
</div>
</h1>
</div>
</div>-->
</t>
</div>
</t>
@@ -322,5 +313,4 @@
</form>
</div>
</t>
</templates>