odoo13学习16Web客户端开发YongL

如果您在管理异步操作方面有问题，请参考以下文档:

正如您在第10章后端视图中看到的，有不同种类的视图，如表单、列表、看板等。在这个内容中，我们将创建一个全新的视图。这个视图将显示作者列表以及他们的书籍。

对于这个内容，我们将使用上一个内容中的my_library模块。请注意，视图是非常复杂的结构，每个现有视图都有不同的目的和实现。此内容的目的是让您了解MVC模式视图以及如何创建简单视图。在这个内容中，我们将创建一个名为m2m_group的视图，其目的是在组中显示记录。为了将记录划分为不同的组，视图将使用many2many字段数据。在my_library模块中，我们有author_ids字段。在这里，我们将根据作者对图书进行分组，并以卡片的形式显示它们。

此外，我们将在控制面板中添加一个新按钮。在这个按钮的帮助下，您将能够添加这本书的新记录。我们还将在作者卡片上添加一个按钮，以便我们可以将用户重定向到另一个视图。

按照以下步骤添加一个新的视图m2m_group:

1.在ir.ui.view中添加一个新的视图类型:(\models\ir_ui_view.py)

#-*-coding:utf-8-*-fromodooimportfields,modelsclassView(models.Model):_inherit='ir.ui.view'type=fields.Selection(selection_add=[('m2m_group','M2mGroup')])2.在ir.actions.act_window.view中添加一个新的视图模式:(\models\ir_action_act_window.py)

#-*-coding:utf-8-*-fromodooimportfields,modelsclassActWindowView(models.Model):_inherit='ir.actions.act_window.view'view_mode=fields.Selection(selection_add=[('m2m_group','M2mgroup')])3.通过继承基模型添加新方法(\models\model.py)。这个方法将从JavaScript模型中调用(详见步骤4):

#-*-coding:utf-8-*-fromcollectionsimportdefaultdictfromdatetimeimportdatetimefromdateutil.relativedeltaimportrelativedeltafromodooimportapi,fields,modelsclassBase(models.AbstractModel):_inherit='base'@api.modeldefget_m2m_group_data(self,domain,m2m_field):records=self.search(domain)result_dict={}forrecordinrecords:form2m_recordinrecord[m2m_field]:ifm2m_record.idnotinresult_dict:result_dict[m2m_record.id]={'name':m2m_record.display_name,'children':[],'model':m2m_record._name}result_dict[m2m_record.id]['children'].append({'name':record.display_name,'id':record.id,})returnresult_dict4.添加新文件/static/src/js/m2m_group_model.js，并添加以下内容:

odoo.define('m2m_group.Model',function(require){'usestrict';varAbstractModel=require('web.AbstractModel');varM2mGroupModel=AbstractModel.extend({__get:function(){returnthis.data;},__load:function(params){this.modelName=params.modelName;this.domain=params.domain;this.m2m_field=params.m2m_field;returnthis._fetchData();},__reload:function(handle,params){if('domain'inparams){this.domain=params.domain;}returnthis._fetchData();},_fetchData:function(){varself=this;returnthis._rpc({model:this.modelName,method:'get_m2m_group_data',kwargs:{domain:this.domain,m2m_field:this.m2m_field}}).then(function(result){self.data=result;});},});returnM2mGroupModel;});5.添加一个新文件/static/src/js/m2m_group_controller.js，添加如下内容:

odoo.define('m2m_group.Controller',function(require){'usestrict';varAbstractController=require('web.AbstractController');varcore=require('web.core');varqweb=core.qweb;varM2mGroupController=AbstractController.extend({custom_events:_.extend({},AbstractController.prototype.custom_events,{'btn_clicked':'_onBtnClicked',}),renderButtons:function($node){if($node){this.$buttons=$(qweb.render('ViewM2mGroup.buttons'));this.$buttons.appendTo($node);this.$buttons.on('click','button',this._onAddButtonClick.bind(this));}},_onBtnClicked:function(ev){this.do_action({type:'ir.actions.act_window',name:this.title,res_model:this.modelName,views:[[false,'list'],[false,'form']],domain:ev.data.domain,});},_onAddButtonClick:function(ev){this.do_action({type:'ir.actions.act_window',name:this.title,res_model:this.modelName,views:[[false,'form']],target:'new'});},});returnM2mGroupController;});6.添加一个新文件/static/src/js/m2m_group_renderer.js，并添加以下内容:

odoo.define('m2m_group.Renderer',function(require){'usestrict';varAbstractRenderer=require('web.AbstractRenderer');varcore=require('web.core');varqweb=core.qweb;varM2mGroupRenderer=AbstractRenderer.extend({events:_.extend({},AbstractRenderer.prototype.events,{'click.o_primay_button':'_onClickButton',}),_render:function(){varself=this;this.$el.empty();this.$el.append(qweb.render('ViewM2mGroup',{'groups':this.state,}));returnthis._super.apply(this,arguments);},_onClickButton:function(ev){ev.preventDefault();vartarget=$(ev.currentTarget);vargroup_id=target.data('group');varchildren_ids=_.map(this.state[group_id].children,function(group_id){returngroup_id.id;});this.trigger_up('btn_clicked',{'domain':[['id','in',children_ids]]});}});returnM2mGroupRenderer;});7.添加一个新文件/static/src/js/m2m_group_view.js，并添加以下内容:

odoo.define('m2m_group.View',function(require){'usestrict';varAbstractView=require('web.AbstractView');varview_registry=require('web.view_registry');varM2mGroupController=require('m2m_group.Controller');varM2mGroupModel=require('m2m_group.Model');varM2mGroupRenderer=require('m2m_group.Renderer');varM2mGroupView=AbstractView.extend({display_name:'Author',icon:'fa-id-card-o',config:_.extend({},AbstractView.prototype.config,{Model:M2mGroupModel,Controller:M2mGroupController,Renderer:M2mGroupRenderer,}),viewType:'m2m_group',searchMenuTypes:['filter','favorite'],accesskey:"a",init:function(viewInfo,params){this._super.apply(this,arguments);varattrs=this.arch.attrs;if(!attrs.m2m_field){thrownewError('M2mviewhasnotdefined"m2m_field"attribute.');}//ModelParametersthis.loadParams.m2m_field=attrs.m2m_field;},});view_registry.add('m2m_group',M2mGroupView);returnM2mGroupView;});8.将视图的QWeb模板添加到/static/src/xml/qweb_template.xml文件中:

LibraryBookAuthorlibrary.book11.在bookaction中添加m2m_group:

LibraryBookslibrary.bookformtree,m2m_group,form更新my_library模块以打开图书视图，然后从视图切换器打开我们刚刚添加的新视图。这看起来如下:

Odoo视图非常容易使用，非常灵活。然而，通常情况下，简单和灵活的东西背后的实现是复杂的。这与OdooJavaScript视图是相同的情况:它们很容易使用，但是实现起来很复杂。它由许多组件组成，比如model、renderer、controller、view、QWeb模板等等。在下一节中，我们已经为视图添加了所有必需的组件，并且还为library.book模型使用了一个新视图。如果您不想手动添加所有内容，可以从本书GitHub存储库中的示例文件中获取一个模块。

在步骤1和步骤2中，我们在ir.ui.view和ir.actions.act_window.view中注册了一个新的视图类型，称为m2m_group。

在步骤3中，我们在基础(base)中添加了get_m2m_group_data方法。在基础中添加此方法将使该方法在每个模型中可用。这个方法将通过从JavaScript视图的RPC调用来调用。视图将传递两个参数—domain和m2m_field。在域参数中，域的值将是由搜索视图域和操作域组合生成的域。m2m_field是我们要根据它对记录进行分组的字段名。这个字段将在视图定义中设置。

在接下来的几个步骤中，我们添加了形成视图所需的JavaScript文件。一个OdooJavaScript视图由view、model、renderer和controller组成。在Odoo代码库中，view这个词具有历史意义，所以model,view,controller(MVC)变成了model,renderer,controller(MRC)。通常，视图设置model、renderer和controller，并设置MVC层次结构，使其看起来类似于以下内容:

让我们看看Model、Renderer、Controller和View的角色。Model、Renderer、Controller和View的抽象版本拥有形成视图所需的所有基本内容。因此，在我们的示例中，我们已经通过继承创建了model、renderer、controller和view。

下面是一个关于创建视图的不同部分的深入解释:

Model:Model的作用是保存视图的状态。它向服务器发送一个获取数据的RPC请求，然后将数据传递给控制器controller和呈现器renderer。然后重写load_和reload方法。当视图被初始化时，它调用load()方法来获取数据，当搜索条件改变时，视图需要一个新的状态，然后调用reload()方法。在我们的例子中，我们有创建公共_fetchData()方法来对数据进行RPC调用。注意，我们使用了步骤3中添加的get_m2m_group_data方法。控制器将调用get()方法以获取模型的状态。

Controller:Controller的角色是管理Model和Renderer之间的协调。当Renderer中出现action时，它将该信息传递给controller并执行action相应的行动。有时，它也会调用模型中的一些方法。除此之外，它还管理控制面板中的按钮。在我们的示例中，我们添加了一个按钮来添加新记录。为此，我们必须重写AbstractController的renderButtons()方法。我们还注册了custom_events，以便当单击作者卡中的一个按钮时，renderer将触发事件到controller，使其执行action。

Renderer:Renderer的作用是管理视图的DOM元素。每个视图都可以以不同的方式呈现数据。在呈现器中，您可以在一个状态变量中获得模型的状态。它调用render()方法的呈现。在我们的示例中，我们呈现了ViewM2mGroupQWeb模板的当前状态，以显示我们的视图。我们还映射了JavaScript事件来执行用户操作。在这个配制中，我们为的卡片按钮绑定了click事件。单击authorcard按钮后，它将向控制器触发btn_clicked事件，并为该作者打开图书列表。

注意:events和custom_events是不同的。Events是正常的JavaScript事件，而custom_events事件是来自OdooJavaScript框架。自定义事件可以通过trigger_up方法调用。

View:Renderer的作用是获取构建视图所需的所有基本东西，比如一组fields、一个context、一个Viewarch和一些其他参数。之后，视图将初始化controlle_r、renderer和model三元组。它将在MVC层次结构中设置它们。通常，它设置model、view和controller中需要的参数。在我们的示例中，我们希望m2m_field名称在模型中获得适当的分组数据，因此我们在其中设置了模型参数。同样，可以使用this.controllerParams和this.rendererParams来设置contr_oller和render_er中的参数

在第8步中，我们为视图和控制面板按钮添加了一个QWeb模板。要了解更多关于QWeb模板的信息，请参考本章中的使用客户端QWeb模板内容。

Odoo视图有大量的方法用于不同的目的;我们在本节中讨论了最重要的一个。如果你想了解更多关于视图的信息，你可以通过/addons/web/static/src/js/views/目录进一步了解它们。这个目录还包括抽象model、controller、renderer和view的代码。

在步骤9中，我们在资源中添加了JavaScript文件。最后，在最后两个步骤中，我们为book.library模型添加了一个视图定义。在步骤10中，我们为视图使用了标记，并且我们还传递了m2m_field属性作为选项。它将被传递给模型以从服务器获取数据

如果不想引入新的视图类型，而只想修改视图中的一些内容，则可以在视图上使用js_class。例如，如果我们想要一个类似于我们创建的看板视图的视图，那么我们可以扩展它如下:

varCustomRenderer=KanbanRenderer.extend({...});varCustomRendererModel=KanbanModel.extend({...});varCustomRendererController=KanbanController.extend({...});varCustomDashboardView=KanbanView.extend({config:_.extend({},KanbanView.prototype.config,{Model:CustomDashboardModel,Renderer:CustomDashboardRenderer,Controller:CustomDashboardController,}),});varviewRegistry=require('web.view_registry');viewRegistry.add('my_custom_view',CustomDashboardView);然后我们可以使用js_class的看板视图(注意，服务器仍然认为这是一个看板视图):

.........调试客户端代码为了调试服务器端代码，本书包含了一个完整的章节，即第8章，调试。对于客户端部分，您将在本内容中入门。

此内容实际上并不依赖于特定的代码，但如果您希望能够准确地重现所发生的事情，请获取上一个内容的代码。

使调试客户端脚本变得困难的是web客户端严重依赖于jQuery的异步事件。由于断点会使执行暂停，因此在调试时很有可能不会发生由计时问题引起的错误。我们稍后会讨论一些策略:

1.对于客户端调试，您需要使用资产激活调试模式。如果你不知道如何激活调试模式的资产，激活Odoo开发工具的秘诀从第1章，安装Odoo开发环境。

2.在你感兴趣的JavaScript函数中，调用debugger:

debugger;

console.log(“I'minfunctionXcurrent”);

4.如果你想在模板渲染过程中调试，可以从QWeb调用调试器:

;

所有这些都依赖于浏览器提供适当的调试功能。虽然所有主流浏览器都能做到这一点，但出于演示目的，我们在这里只讨论Chromium。要使用调试工具，请点击右上方的菜单按钮，选择更多工具|开发工具:

当调试器打开时，你应该看到类似下面的截图:

在这里，您可以在单独的选项卡中访问许多不同的工具。在前面的屏幕截图中，当前活动的选项卡是JavaScript调试器，我们在第31行中通过单击行号设置断点。每次我们的小部件获取用户列表时，执行应该在这一行停止，调试器将允许您检查变量或更改它们的值。在右边的观察列表中，您还可以调用函数来测试它们的效果，而不必连续地保存脚本文件并重新加载页面。

当您打开开发人员工具时，我们前面描述的调试器语句将具有相同的行为。然后，执行将停止，浏览器将切换到Sources选项卡，打开有问题的文件，并突出显示调试器语句所在的行。

前面的两种日志记录可能会在Console选项卡中结束。无论如何，这是出现问题时您应该检查的第一个选项卡，因为如果一些JavaScript代码由于语法错误或类似的基本问题而根本没有加载，您将在那里看到一条错误消息，解释发生了什么。

使用Elements选项卡检查浏览器当前显示的页面的DOM表示。当您熟悉现有小部件生成的HTML代码时，这将是很有帮助的，而且它还允许您处理类和CSS属性。这是测试布局变化的一个很好的资源。

在开发一个大型应用程序之后，向最终用户解释软件流是至关重要的。Odoo框架包括一个内置的tourmanager。有了这个tourmanager，您可以指导最终用户学习特定的流程。在这个内容中，我们将创建一个旅行，这样我们就可以在图书馆中创建一本书。

我们将使用上一个菜谱中的my_library模块。漫游只显示在没有演示数据的数据库中，因此如果您使用的数据库有演示数据，请为内容创建一个没有演示数据的新数据库。

要向图书馆添加游览，请遵循以下步骤:

1.添加一个新的/static/src/js/my_library_tour.js文件，代码如下:

odoo.define('my_library.tour',function(require){"usestrict";varcore=require('web.core');vartour=require('web_tour.tour');var_t=core._t;tour.register('library_tour',{url:"/web",rainbowManMessage:_t("Congrats,youhavelistedabook."),sequence:5,},[tour.stepUtils.showAppsMenuItem(),{trigger:'.o_app[data-menu-xmlid="my_library.library_base_menu"]',content:_t('ManagebooksandauthorsinLibraryapp.'),position:'right'},{trigger:'.o_list_button_add',content:_t("Let'screatenewbook."),position:'bottom'},{trigger:'input[name="name"]',extra_trigger:'.o_form_editable',content:_t('Setthebooktitle'),position:'right',},{trigger:'.o_form_button_save',content:_t('Savethisbookrecord'),position:'bottom',}]);});2.在后端资产中添加tourJavaScript文件:

更新模块和打开Odoo后端。此时，您将看到旅程，如下面的截图所示:

tour管理器在web.tour_tour名称空间下可用。在第一步中，我们导入了web.tour_tour。然后，我们可以使用register()函数添加一个新的tour。我们使用library_tour名称注册了游览，并传递了该游览将在其上运行的URL。

下一个参数是这些游览步骤的列表。一个巡回步骤需要三个值。触发器用于选择应该在其上显示tour的元素。这是一个JavaScript选择器。我们使用菜单的外部XMLID，因为它在DOM中可用。

第一步，tour_STEPS.SHOW_APPS_MENU_ITEM是主菜单指南中预定义的步骤。下一个键是内容，当用户将鼠标悬停在tour拖放上时将显示该内容。我们使用_t()函数是因为我们希望翻译字符串，而position键用于决定tourdrop的位置。可能的值包括top、right、left或bottom。

导览改善了用户的入职体验，并管理了集成测试。当您在内部以测试模式运行Odoo时，它也会运行漫游，如果漫游没有完成，则会导致测试用例失败。

Odoov10介绍了Odoo移动应用。它提供了一些小的实用程序来执行移动操作，如震动手机，显示吐司信息，扫描二维码，等等。

我们将使用前一个库中的my_library模块。当我们从移动应用程序中更改颜色字段的值时，我们将向您展示吐司。

警告:Odoo手机应用程序只支持企业版，所以如果你没有企业版，你就不能测试它。

按照以下步骤在Odoo手机应用程序中显示toast:

1.在field_widget.js中导入web_mobile.rpc:

varmobile=require('web_mobile.core');

2.修改clickPill方法，当用户从移动设备改变颜色时显示吐司:

clickPill:function(ev){var$target=$(ev.currentTarget);vardata=$target.data();this._setValue(data.val.toString());if(mobile.methods.showToast){mobile.methods.showToast({'message':'Colorchanged'});}}

更新模块，在手机app中打开library.book模型的表单视图，改变颜色后会看到toast，如下图所示: