How to make a custom WIDGET in OpenERP
转自:http://sahotaparamjitsingh.blogspot.com/2012/04/how-to-make-custom-widget-in-openerp.html
Hello PeoplezZ,
Today, here i will show you the method of creating your own custom WIDGET in OpenERP.
First of all, u all must know the structure of the OpenERP module, that is this much things must be there in every module.
<addon name>
+-- __openerp__.py
+-- controllers/
+-- static/
+-- lib/
+-- src/
+-- css/
+-- img/
+-- js/
+-- xml/
+-- test/
+-- test/
First of all,
What is a widget.?
Ans. The example of widget of OpenERP are
-
- Example: widget=”one2many_list”
-
- one2one_list
- one2many_list
- many2one_list
- many2many
- url
- image
- float_time
- reference
- button
- textbox
The above examples are all WIDGETS in OpenERP and other than this u can create your know custom widget also. ---------------------------------------------------------------------------------------------------------------
So, here today i will show u the method that how u can create your own custom widget.
For creating your know custom widget in OpenERP you need this much files and folders in your OpenERP module that are
+-- static/
+-- src/
+-- css/
+-- img/
+-- js/
+-- xml/
In static folder you have to create the following folders that are css, img, js and xml.
for the custom widget u have to create 2 thing i.e. js file and xml file.
In the js folder you have to create your js file i.e. JavaScript file in which u have write the script for creating the custom widget.
Here, I am showing u the example of my custom widget which i had create
for sharing the resource on facebook. I had created a like button of facebook in my widget.
---------------------------------------------------------------------------------------------------------------
resource.js
---------------------------------------------------------------------------------------------------------------
openerp.resource = function (openerp)
{
openerp.web.form.widgets.add('test', 'openerp.resource.Mywidget');
openerp.resource.Mywidget = openerp.web.form.FieldChar.extend(
{
template : "test",
init: function (view, code) {
this._super(view, code);
console.log('loading...');
}
});
}
---------------------------------------------------------------------------------------------------------------
Here, i had shown u my resource.js for creating a custom widget.
In the first line i.e.
- openerp.resource = function (openerp)
In this line openerp is fixed u have to write it bcz u r creating in OpenERP
than resource is your addon_name than function(openerp) in this openerp is the instance it may be anything.
- openerp.web.form.widgets.add('test', 'openerp.resource.Mywidget');
In this line openerp is the instance name which u have passed the function argument, than web.form.widgets.add is the place where u r adding ur custom widget it will be the same and than ('test', 'openerp.resource.Mywidget');
in this 'test' is your custom widget name it may be anything of ur choice, than 'openerp.resource.Mywidget' in this openerp is fixed than resource is your addon_name and than Mywidget is any name that u can give of ur choice.
- openerp.resource.Mywidget = openerp.web.form.FieldChar.extend(
In this line," openerp.resource.Mywidget " this is the same thing which u have written in above line of adding method, than after "openerp.web.form.FieldChar.extend( " in this line openerp.web.form.FieldChar.extend( here I m extending the FIELDCHAR widget into my widget i.e. test.
- {
template : "test",init: function (view, code) {
this._super(view, code);
console.log('loading...');
}
In this line, first i am giving the template name which u have to pass in the xml file. i.e. template : "test"
and than after that init: function and everything are the thing which u have to pass as it is bcz they are the function argument of the fieldchar so u have to pass as it is.
and the last line i.e. console.log('loading...');
console.log is same as the printf statement in C.
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
resource.xml
---------------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="test">
<html>
<body>
<div id="fb-root"></div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="true" data-layout="box_count" data-width="600" data-show-faces="false" data-font="arial"></div>
</body>
</html>
</t>
</templates>
---------------------------------------------------------------------------------------------------------------
After creating the js file u have to create the xml file for that i had shown u the example of it.
In this the main thing is <t t-name="test"> in that t-name="test" in that test is your template name which u have given in the resource.js file, so u have to give it same.
And the thing that i had written in the <body> selection is the facebook api which u can find from the google or anything.
eg.: i had taken it from
http://developers.facebook.com/docs/reference/plugins/like/
So u can take it from here or as u like.
---------------------------------------------------------------------------------------------------------------
And after completing this this.
I main thing that is dont forget to add that file into ur __openerp__.py file.
---------------------------------------------------------------------------------------------------------------
'js': ['static/src/js/resource.js'],
'qweb': ['static/src/xml/resource.xml'],
---------------------------------------------------------------------------------------------------------------
js file u can add simply by 'js': than path
but for adding the xml file u have to write 'qweb': than path
---------------------------------------------------------------------------------------------------------------
Now, after creating your custom widget u can use it into any field as ur wish into ur view.xml file.
<field name= "share" string= "Share it... :" widget= "test" />
Here, I had placed my widget into the share field so at that place the facebook widget will be available.
It will appear like
How to make a custom WIDGET in OpenERP的更多相关文章
- ZetCode PyQt4 tutorial custom widget
#!/usr/bin/python # -*- coding: utf-8 -*- """ ZetCode PyQt4 tutorial In this example, ...
- C# widget
Invoke(Delegate)的用法: //例如,要实时update窗体.如果在另一个线程中update,那么可以直接update(可以不在新线程中):也可以在Delegate中给出upate,然后 ...
- Burning widget
This is a widget that we can see in Nero, K3B, or other CD/DVD burning software. #!/usr/bin/python # ...
- [Flutter] Create a Customer widget
For example, we want to have to button, looks similar to FloatingActionButton: But in the doc, it sa ...
- [转]nopCommerce Widgets and How to Create One
本文转自:https://dzone.com/articles/what-are-nopcommerce-widgets-and-how-to-create-one A widget is a sta ...
- 你所不知道的15个Axure使用技巧
你有用原型开发工具吗?如果有,那你用的是Axure还是别的? 从以前就喜欢使用Axure,主要是觉得它能清楚的表达设计的思路,还有交互的真实再现,能让看的人一目了然,昨天看了这篇博文,便更加确定Axu ...
- MVC模式在UI里的应用
In a similar way to other parts of a game, user interfaces usually go through several iterations unt ...
- 现代DOJO(翻译)
http://dojotoolkit.org/documentation/tutorials/1.10/modern_dojo/index.html 你可能已经不用doio一段时间了,或者你一直想保持 ...
- android中将EditText改成不可编辑的状态
今天在做项目的时候,要想实现一个将EditText变成不可编辑的状态,通过查找博客,发现一个好方法,对于单独的EditText控件我们可以单独设置 1.首先想到在xml中设置Android:edita ...
随机推荐
- 树形DP+(分组背包||二叉树,一般树,森林之间的转换)codevs 1378 选课
codevs 1378 选课 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 学校实行学分制.每门的必修课都有固定的学分 ...
- python开发_tkinter
Tkinter模块("Tk 接口")是Python的标准Tk GUI工具包的接口.Tk和Tkinter可以在大多数的Unix平台下使用, 同样可以应用在Windows和Macint ...
- VK Cup 2016 - Qualification Round 1 (Russian-Speaking Only, for VK Cup teams) D. Running with Obstacles 贪心
D. Running with Obstacles 题目连接: http://www.codeforces.com/contest/637/problem/D Description A sports ...
- Codeforces Round #305 (Div. 1) B. Mike and Feet 单调栈
B. Mike and Feet Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/547/pro ...
- hust 1590 - 方块游戏 数学
1590 - 方块游戏 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/problem/show/1590 D ...
- mysqldump之字符集问题解决
最近导数据的需求真多,年底了大家都要做分析吗?近期使用mysqldump导出的中文出现乱码问题. mysqldump -uroot -ppassword -S /tmp/mysql9991.sock ...
- Java解读内存,优化编程
1.别用new Boolean 在很多场景中Boolean类型是必须的,比如JDBC中boolean类型的set与get都是通过Boolean封装传递的,大部分ORM也是用Boolean来封装bool ...
- 模板方法在Spring事务中的应用
事务对于我们来讲不并陌生,也是在实际应用中一直都在使用.在JDBC中,事务大致的使用结构如下: 开启事务 业务逻辑处理 提交事务 Spring只是对事务进行了扩展和封装使用,现在看看在内部它是如何工作 ...
- 对jQuery的事件绑定的一些思考
jQuery的事件绑定 问题 首先我们看下面的一个非经常见的事件绑定代码: //example $('#dom').click(function(e){ //do something }); $('# ...
- linux文件系统命令(6)---touch和mkdir
一.目的 本文将介绍linux下新建文件或文件夹.删除文件或文件夹命令. touch能够新建文件,mkdir用来新建文件夹.rm用来删除文件或文件夹. 本文将选取ubu ...