Odoo10参考系列--Mobile JavaScript

本文介绍Odoo 10.0移动应用开发特性,包括访问本地资源如相机、震动等,无需成为专业移动开发者即可实现。文章详细说明了如何使用JavaScript API来利用这些功能。

介绍

在Odoo 10.0中我们发布了一个移动app,允许您访问所有的Odoo apps (即使您自定义了模块)。

应用程序是Odoo Web 和Native Mobile components的组合,换句话说它是一个Odoo Web实例在手机的原生WebView的容器内加载。

通过这个页面文档介绍,你将知道如何访问手机本地组件,如相机、震动、通知、通过Odoo Web(通过JavaScript)的吐司提示。为此, 你不需要成为一个移动开发者,如果你知道Odoo JavaScript API 你可以访问所有可用的移动功能。

警告

这些特征仅在Odoo Enterprise 10.0+ 中有效

它是怎么运行的?

移动应用的内部工作:

当然,它是一个加载在本地Web容器上的Web页面。但是,它集成了这样一种方式,您可以从Web JavaScript访问本地资源。

网页(Odoo Web) 是在每层的顶层, 在二层的是一个位于Odoo Web (JS)和移动本地组件直接的桥接。

当来自JavaScript的任何调用触发它通过桥接传递并且桥接传递它到本地调用去执行该操作。

当本地组件完成其工作时,它再次传递到桥接器,并用JavaScript获取输出。

本机组件所占用的处理时间取决于您从本地资源请求的内容。 像照相机或GPS定位

怎么使用它?

作为Odoo的Web框架,移动api可以通过web_mobile.rpc的对象在任何地方使用

移动rpc 对象提供可用的方法列表(只适用于移动App)

检查方法的可用性并执行它

方法

每一种方法返回jQuery对象与数据返回JSON字典一样

在设备上显示吐司(Toast)

showToast()

参数

  • args (object) -- 要显示的消息文本

吐司提供了对小弹出窗口中操作的简单反馈。 I它只填充消息所需的空间量,当前活动保持可见和交互

mobile.methods.showToast({'message': 'Message sent'});

振动设备

vibrate()

参数

  • args (object) -- 在指定的时间内(毫秒)内不断振动

给定时间的振动移动装置

mobile.methods.vibrate({'duration': 100});

显示操作的Snackbar

showSnackBar()

参数

  • args (object) -- (必须的) 消息在snackbar上显示且操作按钮标签在Snackbar (可选的)上显示

返回

True 如果用户单击操作按钮, False 如果SnackBar在一段时间后自动消失

Snackbars提供关于一个操作的轻量级反馈。他们在手机屏幕底部显示一个简短的信息,在更大的设备上显示左下角。SnackBar出现在屏幕上的所有其他要素之上,同一时间只能显示一个

mobile.methods.showSnackBar({'message': 'Message is deleted', 'btn_text': 'Undo'}).then(function(result){
        if(result){
                // Do undo operation
        }else{
                // Snack Bar dismissed
        }
});

显示通知

showNotification()

参数

  • args (object) -- 通知的标题(第一行),通知的消息内容(第二行),在一个标准通知中

通知是一个消息,可以在应用程序的正常用户界面之外显示给用户。当您告诉系统发出通知时,它首先显示为通知区域中的一个图标。 要查看通知的详细信息,用户打开通知抽屉。通知区域和通知抽屉都是用户可以随时查看的系统控制区域

mobile.showNotification({'title': 'Simple Notification', 'message': 'This is test of simple notification'})

在设备中创建联系人

addContact()

参数

  • args (object) -- 联系细节词典。可能的键(name, mobile, phone, fax, email, website, street, street2, country_id, state_id, city, zip, parent_id, function and image)

创建给定联系明细的设备联系人

var contact = {
        'name': 'Michel Fletcher',
        'mobile': '9999999999',
        'phone': '7954856587',
        'fax': '765898745',
        'email': 'michel.fletcher@agrolait.example.com',
        'website': 'http://www.agrolait.com',
        'street': '69 rue de Namur',
        'street2': false,
        'country_id': [21, 'Belgium'],
        'state_id': false,
        'city': 'Wavre',
        'zip': '1300',
        'parent_id': [8, 'Agrolait'],
        'function': 'Analyst',
        'image': '<<BASE 64 Image Data>>'
}

mobile.methods.addContact(contact);

扫描条形码

scanBarcode()

返回

从任何条形码中扫描code

在设备上,在任何方向条码API实时检测条形码

它读取以下条形码格式:

  • 1D 条形码: EAN-13, EAN-8, UPC-A, UPC-E, Code-39, Code-93, Code-128, ITF, Codabar
  • 2D 条形码: QR Code, Data Matrix, PDF-417, AZTEC
mobile.methods.scanBarcode().then(function(code){
        if(code){
                // Perform operation with code scanned
        }
});

设备中的交换帐户

switchAccount()

用于切换设备帐户

mobile.methods.switchAccount();

 

 

 

ps:有翻译不当之处,欢迎留言指正。

原文地址:https://www.odoo.com/documentation/10.0/reference/mobile.html

<template id="login_navbar" inherit_id="website.layout" name="Login Page Navigation"> <xpath expr="//header" position="before"> <nav class="custom-login-nav" style="background:#000;border-bottom:1px solid #eee;padding:10px 0;position:fixed;top:0;left:0;width:100%;z-index:1099;"> <div style="margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 15px;"> <div> <small> <span style="font-weight:bold;font-size:15px;color:#7c6e7f;text-decoration:none;"> 欢迎访问Odoo亚太地区金牌服务机构·开源智造(OSCG)</span> <span style="" class="text-white"> <b>&nbsp;</b> </span> </small> <a href="tel:400-900-4680" data-original-title="" title="" aria-describedby="tooltip383200"> <small> <b data-original-title="" title="" aria-describedby="tooltip932940"> <i class="fa fa-1x fa-fw fa-phone ml-3 mr-2 text-white" style="" data-original-title="" title="" aria-describedby="tooltip873223" /> <font style="font-size: 12px;color:#fff;">400-900-4680&nbsp;</font> </b> </small> </a> <a href="mailto:sales@oscg.cn" data-original-title="" title="" aria-describedby="tooltip722417"> <small> <i class="fa fa-1x fa-envelope fa-fw ml-3 mr-2 text-o-color-3" style="font-size: 12px;" data-original-title="" title="" aria-describedby="tooltip553776" /> <font style="" class="text-o-color-4" data-original-title="" title="" aria-describedby="tooltip42618"><b>sales@oscg.cn</b>&nbsp;</font> </small> </a> </div> <div style="color:#fff;"> <div class="no_icon_color s_share" data-name="Social Media"> <small class="s_share_title text-muted"> <span style="font-size: 14px;" class="text-o-color-4"> <b>Language/语言</b> </span> <span style="font-size: 14px;"> <b>:</b> </span> <span style="font-size: 11.2px;"> <b> </b> </span> </small> <img src="/website_login_nav/static/src/img/cn.png" style="width:20px;height:14px;vertical-align:middle;margin-right:5px;" /> &nbsp;<font style="font-size: 12px;"> <b><a href="http://www.oscg.cn/" data-original-title="" title="" style="color:#fff;"> 简体中文&nbsp;</a> &nbsp; &nbsp;&nbsp;</b> </font> <img src="/website_login_nav/static/src/img/us.png" style="width:20px;height:14px;vertical-align:middle;margin-right:5px;" /> &nbsp;<span style="display: inline !important; font-size: 12px;"> <b><a href="http://www.oscg.com.hk" data-original-title="" title="" style="color:#fff;" aria-describedby="tooltip75929">English</a>&nbsp; &nbsp; &nbsp;&nbsp;</b> </span> <!-- <img src="/website_login_nav/static/src/img/jp.png" style="width:20px;height:14px;vertical-align:middle;margin-right:5px;" /> &nbsp;<span style="display: inline !important; font-size: 12px;"> <b><a href="http://www.oscg.com.hk" data-original-title="" title="" style="color:#fff;" aria-describedby="tooltip75929">日本語</a>&nbsp; &nbsp; &nbsp;&nbsp;</b> </span> --> <span style="font-size: 0.875rem; display: inline !important;">&nbsp;</span> </div> </div> </div> </nav> </xpath> <!-- 为wrapwrap添加上边距 --> <xpath expr="//div[@id='wrapwrap']" position="attributes"> <attribute name="style">padding-top: 110px;</attribute> </xpath> </template>可以实现在header顶部,但是手机端的会把header遮挡住,应该如何修改才可以变为odoo的定制模块‘
最新发布
08-12
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值