[IMP]merge with main branch of view editor.

bzr revid: vme@tinyerp.com-20111025112548-eakr7fio6diovn2m

5 files changed, 649 insertions, 447 deletions

diff --git a/addons/web_mobile/static/src/js/chrome_mobile.js b/addons/web_mobile/static/src/js/chrome_mobile.js
index b52b4642b67..99b9651fa7b 100644
--- a/addons/web_mobile/static/src/js/chrome_mobile.js
+++ b/addons/web_mobile/static/src/js/chrome_mobile.js
@@ -12,11 +12,14 @@ openerp.web_mobile.mobilewebclient = function(element_id) {
 };
 
 openerp.web_mobile.MobileWebClient = openerp.web.Widget.extend({
+
+    template: "WebClient",
+
     init: function(element_id) {
         this._super(null, element_id);
-        QWeb.add_template("xml/web_mobile.xml");
+        openerp.web.qweb.add_template("xml/web_mobile.xml");
         var params = {};
-        this.$element.html(QWeb.render("WebClient", {}));
+        this.$element.html(this.render());
         this.session = new openerp.web.Session("oe_errors");
         this.crashmanager =  new openerp.web.CrashManager(this);
         this.login = new openerp.web_mobile.Login(this, "oe_login");
@@ -29,13 +32,26 @@ openerp.web_mobile.MobileWebClient = openerp.web.Widget.extend({
 });
 
 openerp.web_mobile.Login =  openerp.web.Widget.extend({
+
+    template: "Login",
+
     start: function() {
+        this.has_local_storage = typeof(localStorage) != 'undefined';
+        this.remember_creditentials = true;
+        this.selected_login = null;
+        this.selected_password = null;
+        if (this.has_local_storage && this.remember_creditentials) {
+            this.selected_login = localStorage.getItem('last_login_login_success');
+            this.selected_password = localStorage.getItem('last_password_login_success');
+        }
         var self = this;
         jQuery("#oe_header").children().remove();
         this.rpc("/web/database/get_list", {}, function(result) {
-            var selection = new openerp.web_mobile.Selection();
             self.db_list = result.db_list;
-            self.$element.html(QWeb.render("Login", self));
+            self.$element.html(self.render(self));
+            if(self.session.db!=""){
+                self.$element.find("#database").val(self.session.db);
+            }
             self.$element.find("#login_btn").click(self.on_login);
             $.mobile.initializePage();
         });
@@ -49,11 +65,21 @@ openerp.web_mobile.Login =  openerp.web.Widget.extend({
         var db = $e.find("div select[name=database]").val();
         var login = $e.find("div input[name=login]").val();
         var password = $e.find("div input[name=password]").val();
-
         //$e.hide();
         // Should hide then call callback
         this.session.session_login(db, login, password, function() {
             if(self.session.session_is_valid()) {
+                if (self.has_local_storage) {
+                    if(self.remember_creditentials) {
+                        localStorage.setItem('last_db_login_success', db);
+                        localStorage.setItem('last_login_login_success', login);
+                        localStorage.setItem('last_password_login_success', password);
+                    } else {
+                        localStorage.setItem('last_db_login_success', '');
+                        localStorage.setItem('last_login_login_success', '');
+                        localStorage.setItem('last_password_login_success', '');
+                    }
+                }
                 self.on_login_valid();
             } else {
                 self.on_login_invalid();
@@ -71,9 +97,12 @@ openerp.web_mobile.Login =  openerp.web.Widget.extend({
             .removeClass("login_invalid")
             .addClass("login_valid");
             //.hide();
-
-        this.menu = new openerp.web_mobile.Menu(this, "oe_menu", "oe_secondary_menu");
-        this.menu.start();
+        if(!$('#oe_menu').html().length){
+            this.menu = new openerp.web_mobile.Menu(this, "oe_menu", "oe_secondary_menu");
+            this.menu.start();
+        }else{
+            $.mobile.changePage("#oe_menu", "slide", false, true);
+        }
     },
     do_ask_login: function(continuation) {
         this.on_login_invalid();
@@ -86,59 +115,80 @@ openerp.web_mobile.Login =  openerp.web.Widget.extend({
 });
 
 openerp.web_mobile.Header =  openerp.web.Widget.extend({
+
+    template: "Header",
+
     init: function(session, element_id) {
         this._super(session, element_id);
     },
     start: function() {
-        var self = this;
-        self.$element.html(QWeb.render("Header", this));
+        this.$element.html(this.render(this));
     }
 });
 
 openerp.web_mobile.Footer =  openerp.web.Widget.extend({
+
+    template: "Footer",
+
     init: function(session, element_id) {
         this._super(session, element_id);
     },
     start: function() {
-        var self = this;
-        self.$element.html(QWeb.render("Footer", this));
+        this.$element.html(this.render(this));
     }
 });
 
 openerp.web_mobile.Shortcuts =  openerp.web.Widget.extend({
+
+    template: "Shortcuts",
+
     init: function(session, element_id) {
         this._super(session, element_id);
     },
     start: function() {
         var self = this;
         this.rpc('/web/session/sc_list',{} ,function(res){
-            self.$element.html(QWeb.render("Shortcuts", {'sc' : res}))
+            self.$element.html(self.render({'sc' : res}))
+            self.$element.find("[data-role=header]").find('h1').html('Favourite');
+            self.$element.find("[data-role=header]").find('#home').click(function(){
+                $.mobile.changePage("#oe_menu", "slide", false, true);
+            });
             self.$element.find('#content').find("a").click(self.on_clicked);
-            self.$element.find("#footer").find('#preference').click(function(){
+            self.$element.find("[data-role=footer]").find('#preference').click(function(){
                 if(!$('#oe_options').html().length){
                     this.options = new openerp.web_mobile.Options(self, "oe_options");
                     this.options.start();
-                }
-                else{
-                    self.$element.find("#footer").find('#preference').attr('href','#oe_options');
+                }else{
+                    $.mobile.changePage("#oe_options", "slide", false, true);
                 }
             });
-            $.mobile.changePage($("#oe_shortcuts"), "slide", true, true);
+            $.mobile.changePage("#oe_shortcuts", "slide", false, true);
         });
     },
     on_clicked: function(ev) {
+        var self = this;
+        ev.preventDefault();
+        ev.stopPropagation();
         $shortcut = $(ev.currentTarget);
         id = $shortcut.data('menu');
         res_id = $shortcut.data('res');
-//        this.header = new openerp.web_mobile.Header(this, "oe_header");
-        this.listview = new openerp.web_mobile.ListView(this, res_id);
-//        this.header.start();
-        this.listview.appendTo($("#oe_list"));
+        if(!$('[id^="oe_list_'+res_id+'"]').html()){
+            $('<div id="oe_list_'+res_id+'" data-role="page" data-url="oe_list_'+res_id+'"> </div>').appendTo('#moe');
+            this.listview = new openerp.web_mobile.ListView(self, "oe_list_"+res_id, res_id);
+            this.listview.start();
+        }else{
+            $.mobile.changePage('#oe_list_'+res_id, "slide", false, true);
+        }
+        ev.preventDefault();
+        ev.stopPropagation();
         jQuery("#oe_header").find("h1").html($shortcut.data('name'));
     }
 });
 
 openerp.web_mobile.Menu =  openerp.web.Widget.extend({
+
+    template: "Menu",
+
     init: function(session, element_id, secondary_menu_id) {
         this._super(session, element_id);
         this.secondary_menu_id = secondary_menu_id;
@@ -151,32 +201,37 @@ openerp.web_mobile.Menu =  openerp.web.Widget.extend({
     on_loaded: function(data) {
         var self = this;
         this.data = data;
-        this.$element.html(QWeb.render("Menu", this.data));
-
-        this.$element.find("#footer").find('#shrotcuts').click(function(){
+        this.header = new openerp.web_mobile.Header(this, "oe_header");
+        this.header.start();
+        this.footer = new openerp.web_mobile.Footer(this, "oe_footer");
+        this.footer.start();
+        this.$element.html(this.render(this.data));
+        this.$element.find("[data-role=header]").find('h1').html('Applications');
+        this.$element.find("[data-role=header]").find('#home').hide();
+        this.$element.find("[data-role=footer]").find('#shrotcuts').click(function(){
             if(!$('#oe_shortcuts').html().length){
                 this.shortcuts = new openerp.web_mobile.Shortcuts(self, "oe_shortcuts");
                 this.shortcuts.start();
-            }
-            else{
-                self.$element.find("#footer").find('#shrotcuts').attr('href','#oe_shortcuts');
+            }else{
+                $.mobile.changePage($("#oe_shortcuts"), "slide", false, true);
             }
         });
-        this.$element.find("#footer").find('#preference').click(function(){
+        this.$element.find("[data-role=footer]").find('#preference').click(function(){
             if(!$('#oe_options').html().length){
                 this.options = new openerp.web_mobile.Options(self, "oe_options");
                 this.options.start();
-            }
-            else{
-                self.$element.find("#footer").find('#preference').attr('href','#oe_options');
+            }else{
+                $.mobile.changePage("#oe_options", "slide", false, true);
             }
         });
         this.$element.add(this.$secondary_menu).find("#content").find('a').click(this.on_menu_click);
-        $.mobile.changePage($("#oe_menu"), "slide", true, true);
+        $.mobile.changePage("#oe_menu", "slide", false, true);
     },
     on_menu_click: function(ev, id) {
         var $menu = $(ev.currentTarget);
         id = $menu.data('menu');
+        ev.preventDefault();
+        ev.stopPropagation();
         for (var i = 0; i < this.data.data.children.length; i++) {
             if (this.data.data.children[i].id == id) {
                 this.children = this.data.data.children[i];
@@ -185,102 +240,114 @@ openerp.web_mobile.Menu =  openerp.web.Widget.extend({
         this.$element
             .removeClass("login_valid")
             .addClass("secondary_menu");
-            //.hide();
-    if(!$('#oe_sec_menu').html().length){
-            this.secondary = new openerp.web_mobile.Secondary(this, "oe_sec_menu", this.children);
-                   this.secondary.start();
-         }else{
-            this.$element.find("#content").find('a').attr('href','#oe_sec_menu');
-         }
-        /*if(!$('#oe_sec_menu').html().length){
-            this.secondary = new openerp.web_mobile.Secondary(this, "oe_sec_menu", this.children);
+        if(!$('[id^="oe_sec_menu_'+id+'"]').html()){
+            $('<div id="oe_sec_menu_'+id+'" data-role="page" data-url="oe_sec_menu_'+id+'"> </div>').appendTo('#moe');
+            this.secondary = new openerp.web_mobile.Secondary(this, "oe_sec_menu_"+id, this.children);
             this.secondary.start();
         }else{
-          //  self.$element.find("#content").find('a').attr('href','#oe_sec_menu');
-            this.$element.add(this.$secondary_menu).find("#content").find('a').attr('href','#oe_sec_menu');
-        }*/
-
+            $.mobile.changePage('#oe_sec_menu_'+id, "slide", false, true);
+        }
     }
 });
+
 openerp.web_mobile.Secondary =  openerp.web.Widget.extend({
+
+    template: "Menu.secondary",
+
     init: function(session, element_id, secondary_menu_id) {
         this._super(session, element_id);
         this.data = secondary_menu_id;
     },
     start: function(ev, id) {
         var self = this;
-       // console.log(this.data,this.$element.html().length);
-
-     /*   if(this.$element.html().length){
-                self.$element.find('[data-role="listview"]').remove();
-
-                _.each(self.data.children,function(i){
-                    var newul = '<ul data-dividertheme="b" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-theme="c" data-inset="true" data-role="listview"><li data-role="list-divider">'+
-                    i.name+'</li></ul>';  // Create New List Item
-                    self.$element.find('#content').append(newul);
-                    //console.log('in for loop',i.children);
-                });
-                console.log('saaasasaaa',self.$element.find('#content'),self.data);
-                //self.$element.find('[data-role="listview"]').listview('refresh');
-            }else{*/
-
         var v = { menu : this.data };
-        this.$element.html(QWeb.render("Menu.secondary", v));
-        this.$element.find("#header").find("h1").html(this.data.name);
+        this.$element.html(this.render(v));
+        this.$element.find("[data-role=header]").find("h1").html(this.data.name);
         this.$element.add(this.$secondary_menu).find('#content').find("a").click(this.on_menu_click);
-        this.$element.find("#footer").find('#shrotcuts').click(function(){
+        this.$element.find("[data-role=footer]").find('#shrotcuts').click(function(){
             if(!$('#oe_shortcuts').html().length){
                 this.shortcuts = new openerp.web_mobile.Shortcuts(self, "oe_shortcuts");
                 this.shortcuts.start();
-            }
-            else{
-                self.$element.find("#footer").find('#shrotcuts').attr('href','#oe_shortcuts');
+            }else{
+                $.mobile.changePage("#oe_shortcuts", "slide", false, true);
             }
         });
-        this.$element.find("#footer").find('#preference').click(function(){
+        this.$element.find("[data-role=footer]").find('#preference').click(function(){
             if(!$('#oe_options').html().length){
                 this.options = new openerp.web_mobile.Options(self, "oe_options");
                 this.options.start();
+            }else{
+                $.mobile.changePage("#oe_options", "slide", false, true);
             }
-            else{
-                self.$element.find("#footer").find('#preference').attr('href','#oe_options');
-            }
         });
-        $.mobile.changePage($("#oe_sec_menu"), "slide", true, true);
+        this.$element.find("[data-role=header]").find('#home').click(function(){
+            $.mobile.changePage("#oe_menu", "slide", false, true);
+        });
+        $.mobile.changePage("#"+this.element_id, "slide", false, true);
     },
     on_menu_click: function(ev, id) {
-        var $menu = $(ev.currentTarget);
+        $menu = $(ev.currentTarget);
         id = $menu.data('menu');
-        if (id) {
-            this.listview = new openerp.web_mobile.ListView(this, id);
-            this.listview.appendTo("#oe_list");
+        name = $menu.data('name');
+        ev.preventDefault();
+        ev.stopPropagation();
+        var child_len = 0;
+        for (var i = 0; i < this.data.children.length; i++) {
+            for (var j=0; j < this.data.children[i].children.length; j++) {
+                if (this.data.children[i].children[j].id == id) {
+                    this.children = this.data.children[i].children[j];
+                    child_len = this.children.children.length;
+                }
+            }
+        }
+        if (child_len > 0) {
+            this.$element
+            .addClass("secondary_menu");
+            if(!$('[id^="oe_sec_menu_'+id+'"]').html()){
+                $('<div id="oe_sec_menu_'+id+'" data-role="page" data-url="oe_sec_menu_'+id+'"> </div>').appendTo('#moe');
+                this.secondary = new openerp.web_mobile.Secondary(this, "oe_sec_menu_"+id, this.children);
+                this.secondary.start();
+            }else{
+                $.mobile.changePage('#oe_sec_menu_'+id, "slide", false, true);
+            }
+        }else {
+            if(!$('[id^="oe_list_'+id+'"]').html()){
+                $('<div id="oe_list_'+id+'" data-role="page" data-url="oe_list_'+id+'"> </div>').appendTo('#moe');
+                this.listview = new openerp.web_mobile.ListView(this, "oe_list_"+id, id);
+                this.listview.start();
+            }else{
+                $.mobile.changePage('#oe_list_'+id, "slide", false, true);
+            }
         }
         jQuery("#oe_header").find("h1").html($menu.data('name'));
     }
 });
 
 openerp.web_mobile.Options =  openerp.web.Widget.extend({
+
+    template: "Options",
+
     start: function() {
         var self = this;
-        this.$element.html(QWeb.render("Options", this));
-        this.$element.find("#footer").find('#shrotcuts').click(function(){
+        this.$element.html(this.render(this));
+        this.$element.find("[data-role=header]").find('h1').html('Preference');
+        this.$element.find("[data-role=footer]").find('#shrotcuts').click(function(){
             if(!$('#oe_shortcuts').html().length){
                 this.shortcuts = new openerp.web_mobile.Shortcuts(self, "oe_shortcuts");
                 this.shortcuts.start();
+            }else{
+                $.mobile.changePage("#oe_shortcuts", "slide", false, true);
             }
-            else{
-                self.$element.find("#footer").find('#shrotcuts').attr('href','#oe_shortcuts');
-            }
         });
-        $.mobile.changePage($("#oe_options"), "slide", true, true);
+        this.$element.find("[data-role=header]").find('#home').click(function(){
+            $.mobile.changePage("#oe_menu", "slide", false, true);
+        });
+        this.$element.find("[data-role=content]").find('a').click(function(){
+            $('#oe_login').empty();
+            window.location.replace('/mobile');
+        });
+        $.mobile.changePage("#oe_options", "slide", false, true);
     }
 });
 
-openerp.web_mobile.Selection = openerp.web.Widget.extend({
-    on_select_option: function(ev){
-        ev.preventDefault();
-        var $this = ev.currentTarget;
-        $($this).prev().find(".ui-btn-text").html($($this).find("option:selected").text());
-    }
-});
 };
diff --git a/addons/web_mobile/static/src/js/form_mobile.js b/addons/web_mobile/static/src/js/form_mobile.js
index 3dc777a2bd6..1cb1dfb494e 100644
--- a/addons/web_mobile/static/src/js/form_mobile.js
+++ b/addons/web_mobile/static/src/js/form_mobile.js
@@ -5,126 +5,247 @@
 openerp.web_mobile.form_mobile = function (openerp) {
 
 openerp.web_mobile.FormView = openerp.web.Widget.extend({
-    init: function(session, element_id, list_id, action) {
+
+    template: 'FormView',
+
+    init: function(session, element_id, list_id, action, head_title, resmodel, viewid) {
         this._super(session, element_id);
         this.list_id = list_id;
         this.action = action;
-        this.content_expanded_class = "ui-collapsible-content ui-collapsible-content-expanded";
-        this.content_collapsed_class = "ui-collapsible-content ui-collapsible-content-collapsed";
-        this.expanded_class = "ui-collapsible-content-expanded";
-        this.collapsed_class = "ui-collapsible-content-collapsed";
-        this.plus_class = "ui-icon-plus";
-        this.minus_class = "ui-icon-minus";
+        this.head_title = head_title;
+        this.resmodel = resmodel;
+        this.viewid = viewid;
     },
     start: function() {
         var self = this;
         var id = this.list_id;
-        var model = this.action.res_model;
-        var view_id = this.action.views[1][0];
-        this.dataset = new openerp.web.DataSetSearch(this, this.action.res_model, null, null);
+        var model = this.action.res_model || this.resmodel;
+        if(this.action){
+            var view_id = this.action.views[1][0];
+        }else{
+            var view_id = this.viewid;
+        }
+        this.dataset = new openerp.web.DataSetSearch(this, model, null, null);
         var context = new openerp.web.CompoundContext(this.dataset.get_context());
         this.dataset.read_slice([],{}, function (result) {
             for (var i = 0; i < result.length; i++) {
                 if (result[i].id == id) {
-                    var data = result[i];
+                    self.datarecord = result[i];
+                }
+            }
+            self.rpc("/web/view/load", {"model": model, "view_id": view_id, "view_type": "form", context: context}, self.on_loaded)
+        });
+    },
+    on_loaded: function(result) {
+        var self = this;
+        var fields = result.fields;
+        var view_fields = result.arch.children;
+        var get_fields = this.get_fields(view_fields);
+        for (var j = 0; j < view_fields.length; j++) {
+            if (view_fields[j].tag == 'notebook') {
+                var notebooks = view_fields[j];
+            }
+        }
+        self.$element.html(self.render({'get_fields': get_fields, 'notebooks': notebooks || false, 'fields' : fields, 'values' : self.datarecord ,'temp_flag':'1'}));
+        self.formatdata(get_fields, fields, result, self.datarecord,self.element_id,'element');
+        self.$element.find("[data-role=header]").find('h1').html(self.head_title);
+        self.$element.find("[data-role=header]").find('#home').click(function(){
+            $.mobile.changePage("#oe_menu", "slide", false, true);
+        });
+        self.$element.find("[data-role=footer]").find('#shrotcuts').click(function(){
+            if(!$('#oe_shortcuts').html().length){
+                this.shortcuts = new openerp.web_mobile.Shortcuts(self, "oe_shortcuts");
+                this.shortcuts.start();
+            }else{
+                $.mobile.changePage("#oe_shortcuts", "slide", false, true);
+            }
+        });
+        self.$element.find("[data-role=footer]").find('#preference').click(function(){
+            if(!$('#oe_options').html().length){
+                this.options = new openerp.web_mobile.Options(self, "oe_options");
+                this.options.start();
+            }else{
+                $.mobile.changePage("#oe_options", "slide", false, true);
+            }
+        });
+        self.$element.find('#formbutton').click(function(){
+            var head = $(this).prev().find('select').find("option:selected").text();
+            var selected_id = $(this).prev().find('select').val();
+            var select_model = $(this).prev().find('select').attr('for');
+            if(selected_id!="false"){
+                if(!$('[id^="oe_form_'+selected_id+select_model+'"]').html()){
+                    $('<div id="oe_form_'+selected_id+select_model+'" data-role="page" data-url="oe_form_'+selected_id+select_model+'"> </div>').appendTo('#moe');
+                        this.formview = new openerp.web_mobile.FormView(self, "oe_form_"+selected_id+select_model, selected_id, '', head, select_model, false);
+                        this.formview.start();
+                }else{
+                    $.mobile.changePage('#oe_form_'+selected_id+select_model, "slide", false, true);
                 }
             }
-            self.rpc("/web/view/load", {"model": model, "view_id": view_id, "view_type": "form", context: context}, function (result) {
-                var fields = result.fields;
-                var view_fields = result.arch.children;
-                var get_fields = self.get_fields(view_fields);
-                var selection = new openerp.web_mobile.Selection();
-                for (var j = 0; j < view_fields.length; j++) {
-                    if (view_fields[j].tag == 'notebook') {
-                        var notebooks = view_fields[j];
+        });
+        self.$element.find('[data-role=collapsible-set]').find('[data-role=collapsible]').each(function(i){
+            for (var k = 0; k < notebooks.children.length; k++) {
+                if (notebooks.children[k].attrs.string == $(this).attr('id')) {
+                    get_fields = self.get_fields(notebooks.children[k].children);
+                    for (var i = 0; i < get_fields.length; i++) {
+                        if (fields[get_fields[i].attrs.name].type == 'one2many'){
+                            self.relational_fields = get_fields[i].attrs.name;
+                            if(fields[get_fields[i].attrs.name].views.form){
+                                var get_fields_test = self.get_fields(fields[get_fields[i].attrs.name].views.form.arch.children);
+                                var fields_test = fields[get_fields[i].attrs.name]['views'].form.fields;
+                                var notebook=fields[get_fields[i].attrs.name].views.form.arch;
+                            }
+                        }
                     }
                 }
-                self.$element.html(QWeb.render("FormView", {'get_fields': get_fields, 'notebooks': notebooks || false, 'fields' : fields, 'values' : data }));
+                if(notebook){
+                    $(this).find('div#page_content').html(self.render({'get_fields': get_fields,'fields' : result.fields, 'values' : self.datarecord,'til': notebook.attrs.string }));
+                }else{
+                    $(this).find('div#page_content').html(self.render({'get_fields': get_fields,'fields' : result.fields, 'values' : self.datarecord}));
+                }
+                self.formatdata(get_fields, fields, result, self.datarecord,'page_content','element');
 
-                    self.$element.find("#header").find('h1').html(self.action.name);
-                    self.$element.find('select').change(function(ev){
-                        selection.on_select_option(ev);
-                    });
-                    self.$element.find('a').click(function(){
-                        for (var k = 0; k < notebooks.children.length; k++) {
-                            var text = $(this).find('.ui-btn-text').text();
-                            var next = $(this).next();
-                            var span = $(this).find('span .ui-icon');
-                            if (notebooks.children[k].attrs.string == $.trim(text)) {
-                                get_fields = self.get_fields(notebooks.children[k].children);
-                                $(this).parents().find('form').find('div').each( function() {
-                                    var prev = $(this).prev();
-                                    var trim_class = $.trim($(this).attr('class'));
-                                    if (trim_class == self.content_expanded_class || trim_class == self.content_collapsed_class) {
-                                        prev.removeClass('ui-btn-active');
-                                        if ($.trim(prev.find('.ui-btn-text').text()) != notebooks.children[k].attrs.string) {
-                                            self.expanded($(this),prev.find('span .ui-icon'));
-                                        }
+                $(this).find('div#page_content').find('#formbutton').click(function(){
+                    var head = $(this).prev().find('select').find("option:selected").text();
+                    var selected_id = $(this).prev().find('select').val();
+                    var select_model = $(this).prev().find('select').attr('for');
+                    if(selected_id!="false"){
+                        if(!$('[id^="oe_form_'+selected_id+select_model+'"]').html()){
+                            $('<div id="oe_form_'+selected_id+select_model+'" data-role="page" data-url="oe_form_'+selected_id+select_model+'"> </div>').appendTo('#moe');
+                            this.formview = new openerp.web_mobile.FormView(self, "oe_form_"+selected_id+select_model, selected_id, '', head, select_model, false);
+                            this.formview.start();
+                        }else{
+                            $.mobile.changePage('#oe_form_'+selected_id+select_model, "slide", false, true);
+                        }
+                    }
+                });
+            }
+        });
+        self.$element.find('[data-role=collapsible-set]').find('[data-role=collapsible]').find('div#page_content').find('[data-role=content]').find('ul').find('li').click(function(ev){
+            ev.preventDefault();
+            ev.stopPropagation();
+            var latid,lastid;
+            $(this).parents().each(function(){
+                latid = $(this).attr('id');
+                self.$element.find('[data-role=collapsible-set]').find('[data-role=collapsible]').each(function(){
+                    if(latid==$(this).attr('id')){
+                        lastid = $(this).attr('id');
+                    }
+                });
+            });
+            var relational = $(this).attr('for');
+            if(result.fields[relational]){
+                var head = $.trim($(this).text());
+                var dataset = new openerp.web.DataSetStatic(self, result.fields[relational].relation, result.fields[relational].context);
+                dataset.domain=[['id', 'in', self.datarecord[relational]]];
+                dataset.name_search('', dataset.domain, 'in',false ,function(res){
+                    for(var i=0;i<res.length;i++){
+                        var splited_data = res[i][1].split(',');
+                        res[i][1] = splited_data[0];
+                    }
+                    if(!$('[id^="oe_list_'+relational+'_'+self.element_id+'"]').html()){
+                        $('<div id="oe_list_'+relational+'_'+self.element_id+'" data-role="page" data-url="oe_list_'+relational+'_'+self.element_id+'"> </div>').appendTo('#moe');
+                        $('[id^="oe_list_'+relational+'_'+self.element_id+'"]').html(openerp.web.qweb.render("ListView", {'records' : res}));
+                        $('[id^="oe_list_'+relational+'_'+self.element_id+'"]').find("[data-role=header]").find('h1').html(head);
+                        $('[id^="oe_list_'+relational+'_'+self.element_id+'"]').find("[data-role=header]").find('#home').click(function(){
+                            $.mobile.changePage("#oe_menu", "slide", false, true);
+                        });
+                        $('[id^="oe_list_'+relational+'_'+self.element_id+'"]').find("[data-role=footer]").find('#shrotcuts').click(function(){
+                            if(!$('#oe_shortcuts').html().length){
+                                this.shortcuts = new openerp.web_mobile.Shortcuts(self, "oe_shortcuts");
+                                this.shortcuts.start();
+                            }else{
+                                $.mobile.changePage("#oe_shortcuts", "slide", false, true);
+                            }
+                        });
+                        $('[id^="oe_list_'+relational+'_'+self.element_id+'"]').find("[data-role=footer]").find('#preference').click(function(){
+                            if(!$('#oe_options').html().length){
+                                this.options = new openerp.web_mobile.Options(self, "oe_options");
+                                this.options.start();
+                            }else{
+                                $.mobile.changePage("#oe_options", "slide", false, true);
+                            }
+                        });
+                        $('[id^="oe_list_'+relational+'_'+self.element_id+'"]').find("a#list-id").click(function(ev){
+                            ev.preventDefault();
+                            ev.stopPropagation();
+                            var head_title = $(this).text();
+                            var listid = $(ev.currentTarget).data('id');
+                            dataset = new openerp.web.DataSetSearch(self, dataset.model, null, null);
+                            dataset.read_slice([],{}, function (result_relational) {
+                                for (var i = 0; i < result_relational.length; i++) {
+                                    if (result_relational[i].id == listid) {
+                                        var data_relational = result_relational[i];
                                     }
-                                });
-                                if (next.hasClass(self.content_collapsed_class)) {
-                                    self.collapsed(next,span);
                                 }
-                                else if (next.hasClass(self.content_expanded_class)) {
-                                    self.expanded(next,span);
-                                }
-                                if (!next.find('.detail').html().length) {
-                                    for (var i = 0; i < get_fields.length; i++) {
-                                        if (fields[get_fields[i].attrs.name].type == 'one2many'){
-                                            if(fields[get_fields[i].attrs.name].views.form){
-	                                            var get_fields_test = self.get_fields(fields[get_fields[i].attrs.name].views.form.arch.children);
-	                                            var fields_test = fields[get_fields[i].attrs.name]['views'].form.fields;
-	                                            var notebook=fields[get_fields[i].attrs.name].views.form.arch;
+                                if(!$('[id^="oe_form_'+listid+result.fields[relational].relation+'"]').html()){
+                                    $('<div id="oe_form_'+listid+result.fields[relational].relation+'" data-role="page" data-url="oe_form_'+listid+result.fields[relational].relation+'"> </div>').appendTo('#moe');
+                                    for (var k = 0; k < notebooks.children.length; k++) {
+                                        if (notebooks.children[k].attrs.string == lastid) {
+                                            get_fields = self.get_fields(notebooks.children[k].children);
+                                            for (var i = 0; i < get_fields.length; i++) {
+                                                if (fields[get_fields[i].attrs.name].type == 'one2many'){
+                                                    self.relational_fields = get_fields[i].attrs.name;
+                                                    if(fields[get_fields[i].attrs.name].views.form){
+                                                        var get_fields_test = self.get_fields(fields[get_fields[i].attrs.name].views.form.arch.children);
+                                                        var fields_test = fields[get_fields[i].attrs.name]['views'].form.fields;
+                                                        var notebook=fields[get_fields[i].attrs.name].views.form.arch;
+                                                    }
+                                                }
                                             }
-                                            var relational = get_fields[i].attrs.name;
                                         }
                                     }
-                                    if(notebook){
-                                        next.find('.detail').append(QWeb.render("FormView", {'get_fields': get_fields,'fields' : result.fields, 'values' : data,'til': notebook.attrs.string }));
-                                    }else{
-                                        next.find('.detail').append(QWeb.render("FormView", {'get_fields': get_fields,'fields' : result.fields, 'values' : data }));
-                                    }
-                                }
-
-                                //$.mobile.changePage($("#oe_form"), "slide", true, true);
-                                /*next.find('.detail').find('li').click(function(){
-                                    if(data[relational]){
-                                        var dataset = new openerp.web.DataSetStatic(self, result.fields[relational].relation, result.fields[relational].context);
-                                        dataset.domain=[['id', 'in', data[relational]]];
-                                        dataset.name_search('', dataset.domain, 'in',false ,function(res){
-                                            for(var i=0;i<res.length;i++){
-                                                var splited_data = res[i][1].split(',');
-                                                res[i][1] = splited_data[0];
+                                    $('[id^="oe_form_'+listid+result.fields[relational].relation+'"]').html(self.render({'get_fields': get_fields_test, 'notebooks': false, 'fields' : fields_test, 'values' : data_relational, 'temp_flag':'1' }));
+                                    $('[id^="oe_form_'+listid+result.fields[relational].relation+'"]').find("[data-role=header]").find('h1').html(head_title);
+                                    $('[id^="oe_form_'+listid+result.fields[relational].relation+'"]').find("[data-role=header]").find('#home').click(function(){
+                                        $.mobile.changePage("#oe_menu", "slide", false, true);
+                                    });
+                                    $('[id^="oe_form_'+listid+result.fields[relational].relation+'"]').find("[data-role=footer]").find('#shrotcuts').click(function(){
+                                        if(!$('#oe_shortcuts').html().length){
+                                            this.shortcuts = new openerp.web_mobile.Shortcuts(self, "oe_shortcuts");
+                                            this.shortcuts.start();
+                                        }else{
+                                            $.mobile.changePage("#oe_shortcuts", "slide", false, true);
+                                        }
+                                    });
+                                    $('[id^="oe_form_'+listid+result.fields[relational].relation+'"]').find("[data-role=footer]").find('#preference').click(function(){
+                                        if(!$('#oe_options').html().length){
+                                            this.options = new openerp.web_mobile.Options(self, "oe_options");
+                                            this.options.start();
+                                        }else{
+                                            $.mobile.changePage("#oe_options", "slide", false, true);
+                                        }
+                                    });
+                                    $('[id^="oe_form_'+listid+result.fields[relational].relation+'"]').find('#formbutton').click(function(){
+                                        var head = $(this).prev().find('select').find("option:selected").text();
+                                        var selected_id = $(this).prev().find('select').val();
+                                        var select_model = $(this).prev().find('select').attr('for');
+                                        if(selected_id!="false"){
+                                            if(!$('[id^="oe_form_'+selected_id+select_model+'"]').html()){
+                                                $('<div id="oe_form_'+selected_id+select_model+'" data-role="page" data-url="oe_form_'+selected_id+select_model+'"> </div>').appendTo('#moe');
+                                                this.formview = new openerp.web_mobile.FormView(self, "oe_form_"+selected_id+select_model, selected_id, '', head, select_model, false);
+                                                this.formview.start();
+                                            }else{
+                                                $.mobile.changePage('#oe_form_'+selected_id+select_model, "slide", false, true);
                                             }
-                                            self.$element.html(QWeb.render("ListView", {'records' : res}));
-                                            self.$element.find("#searchid").focus();
-                                            self.$element.find("a#list-id").click(function(ev){
-                                                dataset = new openerp.web.DataSetSearch(self, dataset.model, null, null);
-                                                dataset.read_slice([],{}, function (result_relational) {
-                                                for (var i = 0; i < result_relational.length; i++) {
-                                                    if (result_relational[i].id == $(ev.currentTarget).data('id')) {
-                                                        var data_relational = result_relational[i];
-                                                    }
-                                                }
-                                                self.$element.html(QWeb.render("FormView", {'get_fields': get_fields_test, 'notebooks': false, 'fields' : fields_test, 'values' : data_relational }));
-                                                self.$element.find('select').change(function(ev){
-                                                    selection.on_select_option(ev);
-                                                });
-                                                });
-                                            });
-                                        });
-                                    }
-                                });*/
-                            }
-                        }
-                        self.$element.find('select').change(function(ev){
-                            selection.on_select_option(ev);
+                                        }
+                                    });
+                                    self.formatdata(get_fields_test, fields_test, result, data_relational,'oe_form_'+listid+result.fields[relational].relation,'element');
+                                    $.mobile.changePage('#oe_form_'+listid+result.fields[relational].relation, "slide", false, true);
+                                    self.formatdata('', '', '', '','oe_form_'+listid+result.fields[relational].relation,'slider');
+                                }else{
+                                    $.mobile.changePage('#oe_form_'+listid+result.fields[relational].relation, "slide", false, true);
+                                }
+                            });
                         });
-                    });
+                        $.mobile.changePage("#oe_list_"+relational+"_"+self.element_id, "slide", false, true);
+                    }else{
+                        $.mobile.changePage("#oe_list_"+relational+"_"+self.element_id, "slide", false, true);
+                    }
                 });
-                $.mobile.changePage($("#oe_form"), "slide", true, true);
-                //$("#oe_header").find("h1").html(result.arch.attrs.string);
+            }
         });
+        $.mobile.changePage("#"+self.element_id, "slide", false, true);
+        self.formatdata('', '', '', '',self.element_id,'slider');
     },
     get_fields: function(view_fields, fields) {
         this.fields = fields || [];
@@ -138,17 +259,46 @@ openerp.web_mobile.FormView = openerp.web.Widget.extend({
         }
         return this.fields;
     },
-    collapsed: function(next,span) {
-        span.removeClass(this.plus_class);
-        span.addClass(this.minus_class);
-        next.removeClass(this.collapsed_class);
-        next.addClass(this.expanded_class);
-    },
-    expanded: function(next,span) {
-        span.removeClass(this.minus_class);
-        span.addClass(this.plus_class);
-        next.removeClass(this.expanded_class);
-        next.addClass(this.collapsed_class);
+    formatdata: function(getfields, fields, result, data, id, flag){
+        if(flag == "element") {
+            for(var i = 0; i < getfields.length; i++) {
+                if (getfields[i].attrs.widget == "progressbar") {
+                    $("#progress").progressbar({value: data[getfields[i].attrs.name]})
+                }
+                $('[id^="'+id+'"]').find('input').each(function() {
+                    // Set Date and Datetime field for main form
+                    if($(this).attr('id') == getfields[i].attrs.name) {
+                        if(fields[getfields[i].attrs.name].type == "date") {
+                            $("#"+getfields[i].attrs.name).datepicker();
+                        }else if(fields[getfields[i].attrs.name].type == "datetime" || fields[getfields[i].attrs.name].type == "time") {
+                            $("#"+getfields[i].attrs.name).datetimepicker();
+                        }
+                        // Temp: Set as disabled
+                        $("#"+getfields[i].attrs.name).attr('disabled', 'true');
+                        if(result.fields[getfields[i].attrs.name]){
+                            var dateresult = openerp.web.format_value(data[getfields[i].attrs.name], {"widget": result.fields[getfields[i].attrs.name].type});
+                            $(this).val(dateresult);
+                        }
+                    }
+                });
+                // Temp: Selection set as disabled
+                $('[id^="'+id+'"]').find('select').each(function() {
+                    $(this).find('option').attr('disabled', 'true')
+                });
+            }
+        }
+        if(flag == "slider") {
+            $('[id^="'+id+'"]').find('#slider').each(function() {
+                $(this).slider({ disabled: "true" });
+            });
+            $('[id^="'+id+'"]').find('.ui-selectmenu').each(function(){
+                $(this).click(function() {
+                    $(this).css('top', '-9999px');
+                    $(this).css('left', '-9999px');
+                });
+            });
+        }
     }
 });
+
 };
diff --git a/addons/web_mobile/static/src/js/list_mobile.js b/addons/web_mobile/static/src/js/list_mobile.js
index 1d4e0d72ca2..ec6de48e941 100644
--- a/addons/web_mobile/static/src/js/list_mobile.js
+++ b/addons/web_mobile/static/src/js/list_mobile.js
@@ -5,13 +5,15 @@
 openerp.web_mobile.list_mobile = function (openerp) {
 
 openerp.web_mobile.ListView = openerp.web.Widget.extend({
+
+    template: 'ListView',
+
     init: function(session, element_id, list_id) {
         this._super(session, element_id);
         this.list_id = list_id;
     },
     start: function() {
-        this.rpc('/web/menu/action', {'menu_id': this.list_id},
-                    this.on_menu_action_loaded);
+        this.rpc('/web/menu/action', {'menu_id': this.list_id}, this.on_menu_action_loaded);
     },
     on_menu_action_loaded: function(data) {
         var self = this;
@@ -23,48 +25,46 @@ openerp.web_mobile.ListView = openerp.web.Widget.extend({
     on_search_data: function(ev){
         var self = this;
         var dataset = new openerp.web.DataSetStatic(this, this.action.res_model, this.action.context);
-        dataset.name_search('', [], 'ilike',false ,function(result){
-            if(self.$element.html().length){
-                self.$element.find('[data-role="listview"]').find('li').remove();
-                for(var i=0;i<result.length;i++){
-                    var newli = '<li><a id="list-id" data-id='+ result[i][0] +' href="#">' + result[i][1] + '</a></li>';  // Create New List Item
-                    self.$element.find('[data-role="listview"]').append(newli);
-                }
-                self.$element.find('[data-role="listview"]').listview('refresh');
-            }else{
-            self.$element.html(QWeb.render("ListView", {'records' : result}));
-            self.$element.find("#header").find('h1').html(self.action.name);
-            self.$element.find("#footer").find('#shortcuts').click(function(){
-                if(!$('#oe_shortcuts').html().length){
-                    this.shortcut = new openerp.web_mobile.Options(self, "oe_shortcuts");
-                    this.options.start();
-                }
-                else{
-                    self.$element.find("#footer").find('#shrotcuts').attr('href','#oe_shortcuts');
+        dataset.name_search('', this.action.domain, 'ilike', false, function(result){
+            self.$element.html(self.render({'records' : result}));
+            self.$element.find("[data-role=header]").find('h1').html(self.action.name);
+            self.$element.find("[data-role=header]").find('#home').click(function(){
+                $.mobile.changePage("#oe_menu", "slide", false, true);
+            });
+            self.$element.find("[data-role=footer]").find('#shrotcuts').click(function(){
+                if (!$('#oe_shortcuts').html().length) {
+                    this.shortcuts = new openerp.web_mobile.Shortcuts(self, "oe_shortcuts");
+                    this.shortcuts.start();
+                }else{
+                    $.mobile.changePage("#oe_shortcuts", "slide", false, true);
                 }
             });
-            self.$element.find("#footer").find('#preference').click(function(){
+            self.$element.find("[data-role=footer]").find('#preference').click(function(){
                 if(!$('#oe_options').html().length){
                     this.options = new openerp.web_mobile.Options(self, "oe_options");
                     this.options.start();
-                }
-                else{
-                    self.$element.find("#footer").find('#preference').attr('href','#oe_options');
+                }else{
+                    $.mobile.changePage("#oe_options", "slide", false, true);
                 }
             });
-            }
             self.$element.find("a#list-id").click(self.on_list_click);
-            $.mobile.changePage($("#oe_list"), "slide", true, true);
+            $.mobile.changePage("#"+self.element_id, "slide", false, true);
         });
     },
     on_list_click: function(ev) {
         var $record = $(ev.currentTarget);
         var self = this;
+        ev.preventDefault();
+        ev.stopPropagation();
         id = $record.data('id');
-//        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();
+        head_title = $.trim($record.text());
+        if(!$('[id^="oe_form_'+id+this.action.res_model+'"]').html()){
+            $('<div id="oe_form_'+id+this.action.res_model+'" data-role="page" data-url="oe_form_'+id+this.action.res_model+'"> </div>').appendTo('#moe');
+            this.formview = new openerp.web_mobile.FormView(this, "oe_form_"+id+this.action.res_model, id, this.action, head_title, '' ,'');
+            this.formview.start();
+        }else{
+            $.mobile.changePage('#oe_form_'+id+this.action.res_model, "slide", false, true);
+        }
     }
  });
 };
diff --git a/addons/web_mobile/static/src/web_mobile.html b/addons/web_mobile/static/src/web_mobile.html
index 9a17ff49dbb..2afa79dcb5e 100755
--- a/addons/web_mobile/static/src/web_mobile.html
+++ b/addons/web_mobile/static/src/web_mobile.html
@@ -3,7 +3,8 @@
 <head>

     <meta charset="utf-8" />

     <title>OpenERP Web Mobile</title>

-

+
+    <link rel="stylesheet"  href="/web_mobile/static/lib/jquery_mobile/css/jquery-ui-1.8.9.custom.css"/>
     <link rel="stylesheet"  href="/web_mobile/static/lib/jquery_mobile/css/jquery.mobile-1.0a4.1.css"/>

     <link rel="stylesheet" href="/web_mobile/static/src/css/web_mobile.css"/>

 

@@ -12,14 +13,23 @@
     <script type="text/javascript" src="/web/static/lib/jquery.ba-bbq/jquery.ba-bbq.js"></script>

     <script type="text/javascript" src="/web/static/lib/underscore/underscore.js"></script>

     <script type="text/javascript" src="/web/static/lib/underscore/underscore.string.js"></script>

-    <script type="text/javascript" src="/web_mobile/static/lib/jquery_mobile/js/jquery.mobile-1.0a4.1.js"></script>

+    <script type="text/javascript" src="/web_mobile/static/lib/jquery_mobile/js/jquery.mobile-1.0a4.1.js"></script>
+
+    <script type="text/javascript" src="/web/static/lib/datejs/globalization/en-US.js"></script>
+    <script type="text/javascript" src="/web/static/lib/datejs/core.js"></script>
+    <script type="text/javascript" src="/web/static/lib/datejs/extras.js"></script>
+    <script type="text/javascript" src="/web/static/lib/datejs/parser.js"></script>
+    <script type="text/javascript" src="/web/static/lib/datejs/sugarpak.js"></script>
+    <script type="text/javascript" src="/web/static/lib/datejs/time.js"></script>
+    <script type="text/javascript" src="/web/static/lib/jquery.ui/js/jquery-ui-timepicker-addon.js"></script>

 

     <script type="text/javascript" src="/web/static/lib/qweb/qweb2.js"></script>

     <script type="text/javascript" src="/web/static/src/js/boot.js"></script>

     <script type="text/javascript" src="/web/static/src/js/core.js"></script>

     <script type="text/javascript" src="/web/static/src/js/chrome.js"></script>

     <script type="text/javascript" src="/web/static/src/js/data.js"></script>

-    <script type="text/javascript" src="/web/static/src/js/formats.js"></script>

+    <script type="text/javascript" src="/web/static/src/js/formats.js"></script>
+    <script type="text/javascript" src="/web/static/src/js/dates.js"></script>

 

     <script type="text/javascript" src="/web_mobile/static/src/js/web_mobile.js"></script>

     <script type="text/javascript" src="/web_mobile/static/src/js/chrome_mobile.js"></script>

@@ -29,7 +39,6 @@
     <script type="text/javascript">

         var QWeb;

         $(function() {

-            QWeb = window.QWeb || new QWeb2.Engine();

             var oe = openerp.init();

             openerp.web_mobile(oe);

             oe.web_mobile.mobilewebclient("moe");

diff --git a/addons/web_mobile/static/src/xml/web_mobile.xml b/addons/web_mobile/static/src/xml/web_mobile.xml
index 75d30af55b1..775ac90c66c 100644
--- a/addons/web_mobile/static/src/xml/web_mobile.xml
+++ b/addons/web_mobile/static/src/xml/web_mobile.xml
@@ -5,17 +5,15 @@
 
 <t t-name="WebClient">
     <div data-role="page" id="oe_login"></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>
+    <div id="oe_header" />
+    <div id="oe_footer" />
     <div data-role="page" id="oe_shortcuts"></div>
     <div data-role="page" id="oe_menu"></div>
     <div data-role="page" id="oe_options"></div>
 </t>
 
 <t t-name="Login">
-     <div data-role="header" data-theme="b">
+     <div data-role="header" data-theme="b" data-position="fixed">
         <h1>OpenERP</h1>
     </div>
     <div data-role="content">
@@ -30,9 +28,9 @@
                     </t>
                 </select>
                 <label for="login">Login:</label>
-                <input type="text" id="login" name="login" value=""/><br/>
+                <input type="text" id="login" name="login" t-att-value="selected_login || ''" />
                 <label for="password">Password:</label>
-                <input type="password" id="password" name="password" value=""/><br/>
+                <input type="password" id="password" name="password" t-att-value="selected_password || ''" />
                 <a id="login_btn" data-theme="c" href="#" data-role="button">Login</a>
                 <div class="login_error_message ui-btn-inner ui-btn-corner-all">
                     <span class="ui-btn-text">Bad username or password</span>
@@ -40,26 +38,31 @@
              </div>
         </fieldset>
     </div>
+    <div data-role="footer" data-theme="b" data-position="fixed">
+        <h1>Powered by openerp.com</h1>
+    </div>
 </t>
 
 <t t-name="Header">
     <div data-role="header" data-theme="b" data-position="fixed">
-        <h1>OpenERP</h1>
+        <h1></h1>
         <a id="home" class="ui-btn-right" data-iconpos="notext" data-icon="home" href="#" title="Home" data-theme="b"></a>
     </div>
 </t>
 
 <t t-name="Footer">
     <div data-role="footer" data-theme="b" data-position="fixed">
-        <h1></h1>
+        <div data-role="navbar">
+            <ul>
+                <li><a id="shrotcuts" href="#" title="Favourite" data-theme="b" data-icon="star" >Favourite</a></li>
+                <li><a id="preference" href="#" title="Preference" data-theme="b" data-icon="gear">Preference</a></li>
+            </ul>
+        </div>
     </div>
 </t>
 
 <t t-name="Shortcuts">
-    <div id="header" data-role="header" data-theme="b" data-position="fixed">
-        <h1>Favourite</h1>
-        <a id="application" class="ui-btn-right" data-iconpos="notext" data-icon="home" href="#oe_menu" title="Home" data-theme="b"></a>
-    </div>
+    <t t-call="Header" />
     <div id="content" data-role="content">
         <ul data-role="listview" data-inset="true">
             <li data-theme="c" t-foreach="sc" t-as="opt">
@@ -69,15 +72,11 @@
             </li>
        </ul>
    </div>
-   <div id="footer" data-role="footer" data-theme="b" data-position="fixed">
-        <a id="shrotcuts" href="#" title="Favourite" data-theme="b">Favourite</a>
-        <a id="preference" class="ui-btn-right" href="#" title="Preference" data-theme="b">Preference</a>
-    </div>
+   <t t-call="Footer" />
 </t>
+
 <t t-name="Menu">
-     <div data-role="header" data-theme="b" data-position="fixed">
-        <h1>Applications</h1>
-    </div>
+    <t t-call="Header" />
     <div id="content" data-role="content">
         <ul data-role="listview" data-inset="true">
             <li data-theme="c" t-foreach="data.children" t-as="menu">
@@ -87,61 +86,51 @@
             </li>
         </ul>
     </div>
-    <div id="footer" data-role="footer" data-theme="b" data-position="fixed">
-        <a id="shrotcuts" href="#" title="Favourite" data-theme="b">Favourite</a>
-        <a id="preference" href="#" title="Preference" data-theme="b">Preference</a>
-    </div>
+    <t t-call="Footer" />
 </t>
 
 <t t-name="Menu.secondary">
-    <div id="header" data-role="header" data-theme="b" data-position="fixed">
-        <h1></h1>
-        <a id="application" class="ui-btn-right" data-iconpos="notext" data-icon="home" href="#oe_menu" title="Home" data-theme="b"></a>
-    </div>
+    <t t-call="Header" />
     <div id="content" data-role="content">
         <t t-foreach="menu.children" t-as="menu1" >
             <ul data-dividertheme="b" data-theme="c" data-inset="true" data-role="listview">
                 <li data-role="list-divider">
-                    <t t-esc="menu1.name"/>
+                    <t t-if="(menu1.children.length)">
+                        <t t-esc="menu1.name"/>
+                    </t>
+                    <t t-if="!(menu1.children.length)">
+                        <a href="#" t-attf-id="menu_#{menu1.id}" t-att-data-menu="menu1.id" t-att-data-name="menu1.name">
+                            <t t-esc="menu1.name"/>
+                        </a>
+                    </t>
                 </li>
                 <t t-if="menu1.children.length">
                     <li data-theme="c" t-foreach="menu1.children" t-as="childmenu" >
                         <a href="#" t-attf-id="menu_#{childmenu.id}" t-att-data-menu="childmenu.id" t-att-data-name="childmenu.name">
-                          <t t-esc="childmenu.name" />
+                            <t t-esc="childmenu.name" />
                         </a>
                     </li>
                 </t>
             </ul>
         </t>
     </div>
-     <div id="footer" data-role="footer" data-theme="b" data-position="fixed">
-        <a id="shrotcuts" href="#" title="Favourite" data-theme="b">Favourite</a>
-        <a id="preference" href="#" title="Preference" data-theme="b">Preference</a>
-    </div>
+     <t t-call="Footer" />
 </t>
+
 <t t-name="Options">
-    <div id="header" data-role="header" data-theme="b" data-position="fixed">
-        <h1>Options</h1>
-        <a id="application" class="ui-btn-right" data-iconpos="notext" data-icon="home" href="#oe_menu" title="Home" data-theme="b"></a>
-    </div>
+    <t t-call="Header" />
     <div data-role="content">
         <ul data-dividertheme="b" data-theme="c" data-inset="true" data-role="listview">
             <li data-theme="c">
-                <a id="logout" href="#oe_login">Logout</a>
+                <a id="logout">Logout</a>
             </li>
         </ul>
     </div>
-    <div id="footer" data-role="footer" data-theme="b" data-position="fixed">
-        <a id="shrotcuts" href="#" title="Favourite" data-theme="b">Favourite</a>
-        <a id="preference" href="#" title="Preference" data-theme="b">Preference</a>
-    </div>
+    <t t-call="Footer" />
 </t>
 
 <t t-name="ListView">
-    <div id="header" data-role="header" data-theme="b" data-position="fixed">
-        <h1></h1>
-        <a id="application" class="ui-btn-right" data-iconpos="notext" data-icon="home" href="#oe_menu" title="Home" data-theme="b"></a>
-    </div>
+    <t t-call="Header" />
     <div id="content" 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">
@@ -151,202 +140,189 @@
             </li>
         </ul>
     </div>
-     <div id="footer" data-role="footer" data-theme="b" data-position="fixed">
-        <a id="shrotcuts" href="#" title="Favourite" data-theme="b">Favourite</a>
-        <a id="preference" href="#" title="Preference" data-theme="b">Preference</a>
-    </div>
+    <t t-call="Footer" />
 </t>
 
 <t t-name="FormView">
-    <div role="main" data-role="content">
+    <t t-if="temp_flag">
+        <t t-call="Header" />
+    </t>
+    <div data-role="content">
+
         <form>
             <t t-foreach="get_fields" t-as="field">
-            <div data-role="fieldcontain">
-                <t t-if="fields[field.attrs.name].type!='one2many' and fields[field.attrs.name].type!='many2many'" >
-                <label class="ui-input-text">
-                    <span>
-                        <t t-if="!(field.attrs.string)" t-esc="fields[field.attrs.name].string"></t>
-                        <t t-if="field.attrs.string" t-esc="field.attrs.string"></t>
-                    </span>:
-                </label>
-                </t>
-                <t t-if="fields[field.attrs.name].type == 'char'">
-                    <t t-if="values[field.attrs.name]">
-                        <input class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" type="text" t-att-value="values[field.attrs.name]"/><br/>
-                    </t>
-                    <t t-if="!(values[field.attrs.name])">
-                        <input class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" type="text" value=""/><br/>
-                    </t>
-                </t>
-                <t t-if="fields[field.attrs.name].type == 'boolean'">
-                    <t t-if="values[field.attrs.name]">
-                        <input type="checkbox" checked="yes"/><br/>
-                    </t>
-                    <t t-if="!(values[field.attrs.name])">
-                        <input type="checkbox"/><br/>
+                <div data-role="fieldcontain">
+                    <t t-if="fields[field.attrs.name].type == 'char'">
+                        <label for="">
+                            <t t-if="!(field.attrs.string)" t-esc="fields[field.attrs.name].string"></t>
+                            <t t-if="field.attrs.string" t-esc="field.attrs.string"></t>:
+                        </label>
+                        <t t-if="values[field.attrs.name]">
+                            <input type="text" t-att-id="field.attrs.name" readonly="true" t-att-value="values[field.attrs.name]"/>
+                        </t>
+                        <t t-if="!(values[field.attrs.name])">
+                            <input type="text" value="" readonly="true" t-att-id="field.attrs.name"/>
+                        </t>
+                        <t t-if="(field.attrs.name == 'email' or field.attrs.name == 'email_from') and values[field.attrs.name]">
+                            <a t-att-href="'mailto:'+values[field.attrs.name]"><img src="/web/static/src/img/icons/terp-mail-message-new.png" /></a>
+                        </t>
+                        <t t-if="field.attrs.name == 'website' and values[field.attrs.name]">
+                            <a t-att-href="values[field.attrs.name]"><img src="/web/static/src/img/icons/gtk-ok.png" title="Open this resource"/></a>
+                        </t>
                     </t>
-                </t>
-                <t t-if="fields[field.attrs.name].type == 'text'">
-                    <textarea style="width:100%;" rows="8" name="textarea" id="textarea"></textarea><br/>
-                </t>
-                <t t-if="fields[field.attrs.name].type == 'float'">
-                    <t t-if="values[field.attrs.name]">
-                        <input class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" type="text" t-att-value="values[field.attrs.name]"/><br/>
+                    <t t-if="fields[field.attrs.name].type == 'text' or fields[field.attrs.name].type == 'text_wiki'">
+                        <label for="">
+                            <t t-if="!(field.attrs.string)" t-esc="fields[field.attrs.name].string"></t>
+                            <t t-if="field.attrs.string" t-esc="field.attrs.string"></t>:
+                        </label>
+                        <textarea name="" id="" readonly="true"></textarea>
                     </t>
-                    <t t-if="!(values[field.attrs.name])">
-                        <input class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" type="text" value=""/><br/>
+                    <t t-if="fields[field.attrs.name].type == 'integer'">
+                        <label for="">
+                            <t t-if="!(field.attrs.string)" t-esc="fields[field.attrs.name].string"></t>
+                            <t t-if="field.attrs.string" t-esc="field.attrs.string"></t>:
+                        </label>
+                        <t t-if="values[field.attrs.name]">
+                            <input t-att-id="field.attrs.name" type="text" t-att-value="values[field.attrs.name]" readonly="true"/>
+                        </t>
+                        <t t-if="!values[field.attrs.name]" readonly="true">
+                            <input t-att-id="field.attrs.name" type="text" value=""/>
+                         </t>
                     </t>
-                </t>
-                <t t-if="fields[field.attrs.name].type == 'date'">
-                    <t t-if="values[field.attrs.name]">
-                        <input class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" type="text" t-att-value="values[field.attrs.name]"/><br/>
+                    <t t-if="fields[field.attrs.name].type == 'float_time'">
+                        <label for="">
+                            <t t-if="!(field.attrs.string)" t-esc="fields[field.attrs.name].string"></t>
+                            <t t-if="field.attrs.string" t-esc="field.attrs.string"></t>:
+                        </label>
+                        <t t-if="values[field.attrs.name]">
+                            <input t-att-id="field.attrs.name" type="text" t-att-value="values[field.attrs.name]" readonly="true"/>
+                        </t>
+                        <t t-if="!values[field.attrs.name]" readonly="true">
+                            <input t-att-id="field.attrs.name" type="text" value=""/>
+                         </t>
                     </t>
-                    <t t-if="!(values[field.attrs.name])">
-                        <input class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" type="text" value=""/><br/>
+                    <t t-if="fields[field.attrs.name].type == 'float'">
+                        <label for="">
+                            <t t-if="!(field.attrs.string)" t-esc="fields[field.attrs.name].string"></t>
+                            <t t-if="field.attrs.string" t-esc="field.attrs.string"></t>:
+                        </label>
+                        <t t-if="values[field.attrs.name] and field.attrs.name=='progress_rate'">
+                            <div id="progress" value="" title="Percent of tasks closed according to total of tasks to do..."></div>
+                        </t>
+                        <t t-if="!(values[field.attrs.name]) and field.attrs.name=='progress_rate'">
+                            <div id="progress" value="" title="Percent of tasks closed according to total of tasks to do..."></div>
+                        </t>
+                         <t t-if="values[field.attrs.name] and field.attrs.name!='progress_rate'">
+                            <input t-att-id="field.attrs.name" type="text" t-att-value="values[field.attrs.name]" readonly="true"/>
+                        </t>
+                        <t t-if="!values[field.attrs.name] and field.attrs.name!='progress_rate'" readonly="true">
+                            <input t-att-id="field.attrs.name" type="text" value=""/>
+                         </t>
                     </t>
-                </t>
-                <t t-if="fields[field.attrs.name].type == 'datetime'">
-                    <t t-if="values[field.attrs.name]">
-                        <input class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" type="text" t-att-value="values[field.attrs.name]"/><br/>
+                    <t t-if="fields[field.attrs.name].type == 'date'">
+                        <label t-att-for="field.attrs.name">
+                            <t t-if="!(field.attrs.string)" t-esc="fields[field.attrs.name].string"></t>
+                            <t t-if="field.attrs.string" t-esc="field.attrs.string"></t>:
+                        </label>
+                        <t t-if="values[field.attrs.name]">
+                            <input t-att-id="field.attrs.name" readonly="true" type="text" data-role="datebox" t-att-value="values[field.attrs.name]"/>
+                        </t>
+                        <t t-if="!(values[field.attrs.name])">
+                            <input t-att-id="field.attrs.name" readonly="true" type="text" value=""/>
+                        </t>
                     </t>
-                    <t t-if="!(values[field.attrs.name])">
-                        <input class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" type="text" value=""/><br/>
+                    <t t-if="fields[field.attrs.name].type == 'datetime' or fields[field.attrs.name].type == 'time'">
+                        <label t-att-for="field.attrs.name">
+                            <t t-if="!(field.attrs.string)" t-esc="fields[field.attrs.name].string"></t>
+                            <t t-if="field.attrs.string" t-esc="field.attrs.string"></t>:
+                        </label>
+                        <t t-if="values[field.attrs.name]">
+                            <input t-att-id="field.attrs.name" readonly="true" type="text" t-att-value="values[field.attrs.name]"/>
+                        </t>
+                        <t t-if="!(values[field.attrs.name])">
+                            <input t-att-id="field.attrs.name" readonly="true" type="text" value=""/>
+                        </t>
                     </t>
-                </t>
-                <t t-if="fields[field.attrs.name].type == 'selection'">
-                    <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">
-                                <span class="ui-btn-text">
-                                    <t t-if="values[field.attrs.name]">
-                                        <t t-foreach="fields[field.attrs.name].selection" t-as="opt">
-                                            <t t-if="opt[0] == (values[field.attrs.name])">
-                                                <t t-esc="opt[1]"/>
-                                            </t>
-                                        </t>
-                                    </t>
-                                </span>
-                                <span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
-                            </span>
-
-                            <select t-att-id="'selection_'+fields[field.attrs.name].string">
-                                <t t-foreach="fields[field.attrs.name].selection" t-as="opt">
-                                    <option t-att-value="opt[0]"><t t-esc="opt[1]"/></option>
+                    <t t-if="fields[field.attrs.name].type == 'boolean'">
+                        <div data-role="fieldcontain">
+                            <label for="slider"><t t-esc="fields[field.attrs.name].string" /> :</label>
+                            <select name="slider" id="slider" data-role="slider">
+                                <t t-if="values[field.attrs.name]">
+                                    <option value="on" selected="true">On</option>
+                                    <option value="off">Off</option>
+                                </t>
+                                <t t-if="!values[field.attrs.name]">
+                                    <option value="on">On</option>
+                                    <option value="off" selected="true">Off</option>
                                 </t>
                             </select>
                         </div>
-                    </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">
-                                <span class="ui-btn-text">
-                                    <t t-if="values[field.attrs.name]">
-                                        <t t-esc="values[field.attrs.name][1]"/>
+                    </t>
+                    <t t-if="fields[field.attrs.name].type == 'selection'">
+                        <label t-att-for="field.attrs.name" class="select">
+                            <t t-if="!(field.attrs.string)" t-esc="fields[field.attrs.name].string"></t>
+                            <t t-if="field.attrs.string" t-esc="field.attrs.string"></t>:
+                        </label>
+                        <select t-att-id="field.attrs.name" data-native-menu="false">
+                            <t t-foreach="fields[field.attrs.name].selection" t-as="opt">
+                                <option t-att-value="opt[0]"><t t-esc="opt[1]"/></option>
+                            </t>
+                        </select>
+                    </t>
+                    <t t-if="fields[field.attrs.name].type == 'many2one'">
+                        <label for="" class="select">
+                            <t t-if="!(field.attrs.string)" t-esc="fields[field.attrs.name].string"></t>
+                            <t t-if="field.attrs.string" t-esc="field.attrs.string"></t>:
+                        </label>
+                        <select id="" data-native-menu="false" t-att-for="fields[field.attrs.name].relation">
+                            <t t-if="fields[field.attrs.name].selection">
+                                <t t-foreach="fields[field.attrs.name].selection" t-as="opt">
+                                    <t t-if="values[field.attrs.name]==opt[0]">
+                                        <option t-att-value="opt[0]" selected="true" ><t t-esc="opt[1]"/></option>
                                     </t>
-                                 </span>
-                                <span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
-                            </span>
-
-                            <select t-att-id="'selection_'+fields[field.attrs.name].string">
-                                <t t-if="fields[field.attrs.name].selection">
-                                    <t t-foreach="fields[field.attrs.name].selection" t-as="opt">
-                                        <t t-if="values[field.attrs.name]==opt[0]">
-                                            <option t-att-value="opt[0]" selected="true" ><t t-esc="opt[1]"/></option>
-                                        </t>
-                                        <t t-if="values[field.attrs.name]!=opt[0]">
-                                            <option t-att-value="opt[0]" ><t t-esc="opt[1]"/></option>
-                                        </t>
+                                    <t t-if="values[field.attrs.name]!=opt[0]">
+                                        <option t-att-value="opt[0]" ><t t-esc="opt[1]"/></option>
                                     </t>
                                 </t>
-                            </select>
-                        </div>
-                    </div>
-                </t>
-                <t t-if="fields[field.attrs.name].type == 'one2many'">
-                    <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>
-                            </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>-->
-                </t>
-            </div>
+                            </t>
+                        </select>
+                        <t t-if="fields[field.attrs.name].selection">
+                            <a id="formbutton" href="#" title="Form View"><img src="/web/static/src/img/icons/gtk-index.png" /></a>
+                        </t>
+                    </t>
+                    <t t-if="fields[field.attrs.name].type == 'one2many'">
+                        <ul data-role="listview" data-inset="true" data-theme="d">
+                            <li data-theme="c" t-att-for="field.attrs.name">
+                                <a href="">
+                                    <t t-esc="til"/>
+                                </a>
+                             </li>
+                         </ul>
+                     </t>
+                </div>
             </t>
             <t t-if="notebooks">
-                <t t-foreach="notebooks.children" t-as="page">
-                    <t t-if="page.attrs.invisible">
-                    <div style="display:none;" 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="page.attrs.string"></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>
-                                </span>
-                            </a>
-                            <div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">
-                                <div class="detail"></div>
+                <div data-role="collapsible-set">
+                    <t t-foreach="notebooks.children" t-as="page">
+                        <t t-if="page.attrs.invisible">
+                            <div style="display:none;" data-collapsed="true" data-role="collapsible" t-att-id="page.attrs.string">
+                                <h3><t t-esc="page.attrs.string"></t></h3>
+                                <div id="page_content" />
                             </div>
-                        </h1>
-                    </div>
-                    </t>
-                    <t t-if="!page.attrs.invisible">
-                    <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="page.attrs.string"></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>
-                                </span>
-                            </a>
-                            <div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">
-                                <div class="detail"></div>
+                        </t>
+                        <t t-if="!page.attrs.invisible">
+                            <div data-collapsed="true" data-role="collapsible" t-att-id="page.attrs.string">
+                                <h3><t t-esc="page.attrs.string"></t></h3>
+                                <div id="page_content" />
                             </div>
-                        </h1>
-                    </div>
+                        </t>
                     </t>
-                </t>
+                </div>
             </t>
         </form>
     </div>
+    <t t-if="temp_flag">
+        <t t-call="Footer" />
+    </t>
 </t>
 </templates>