转自: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
    • email
    • 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的更多相关文章

  1. ZetCode PyQt4 tutorial custom widget

    #!/usr/bin/python # -*- coding: utf-8 -*- """ ZetCode PyQt4 tutorial In this example, ...

  2. C# widget

    Invoke(Delegate)的用法: //例如,要实时update窗体.如果在另一个线程中update,那么可以直接update(可以不在新线程中):也可以在Delegate中给出upate,然后 ...

  3. Burning widget

    This is a widget that we can see in Nero, K3B, or other CD/DVD burning software. #!/usr/bin/python # ...

  4. [Flutter] Create a Customer widget

    For example, we want to have to button, looks similar to FloatingActionButton: But in the doc, it sa ...

  5. [转]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 ...

  6. 你所不知道的15个Axure使用技巧

    你有用原型开发工具吗?如果有,那你用的是Axure还是别的? 从以前就喜欢使用Axure,主要是觉得它能清楚的表达设计的思路,还有交互的真实再现,能让看的人一目了然,昨天看了这篇博文,便更加确定Axu ...

  7. MVC模式在UI里的应用

    In a similar way to other parts of a game, user interfaces usually go through several iterations unt ...

  8. 现代DOJO(翻译)

    http://dojotoolkit.org/documentation/tutorials/1.10/modern_dojo/index.html 你可能已经不用doio一段时间了,或者你一直想保持 ...

  9. android中将EditText改成不可编辑的状态

    今天在做项目的时候,要想实现一个将EditText变成不可编辑的状态,通过查找博客,发现一个好方法,对于单独的EditText控件我们可以单独设置 1.首先想到在xml中设置Android:edita ...

随机推荐

  1. POJ 2728 JZYZOJ 1636 分数规划 最小生成树 二分 prim

    http://172.20.6.3/Problem_Show.asp?id=1636 复习了prim,分数规划大概就是把一个求最小值或最大值的分式移项变成一个可二分求解的式子. #include< ...

  2. 【BZOJ-2734】集合选数 状压DP (思路题)

    2734: [HNOI2012]集合选数 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1070  Solved: 623[Submit][Statu ...

  3. redis配置参数简介

    redis配置查看方式: 1.redis的安装目录查看redis.conf 2.登陆redis客户端,使用 config get xx命令. 比如:查看所有的配置: config get * [roo ...

  4. HP-unix如何生成动态库?

    HP-unix系统生成动态库编译的方法? 创建PIC中间文件的编译器选项是+z,创建动态库的链接器标志是-b. 1. cc +z d1.c d2.c /* 编译以".o"为扩展名的 ...

  5. Windows Sysinternals Suite

    Windows Sysinternals Suite 是一套由微软官方免费提供的系统工具集,其中包含了大量超级实的优秀绿色小软件,譬如 Desktops (虚拟桌面).Process Explorer ...

  6. 我弄的一些TASKER配置

    http://tieba.baidu.com/p/2184969007 我弄的一些配置,需要的童鞋们找自己想要的吧,有些配置感觉还是很繁琐,请高手不吝赐教才好,图片太多,就发链接了. ◆保持屏幕开启, ...

  7. IIS发布站点错误收集

    转载:http://www.cnblogs.com/hangwei/p/4249406.html 本文主要收集IIS在发布站点过程中遇到的错误,并提供解决办法.并亲测可行.如果您也在使用IIS发布站点 ...

  8. Known BREAKING CHANGES from NH3.3.3.GA to 4.0.0

    Build 4.0.0.Alpha1 =============================   ** Known BREAKING CHANGES from NH3.3.3.GA to 4.0. ...

  9. 咏南MORMOT中间件免费开源

    咏南MORMOT中间件免费开源 源码放QQ群(92449782)共享文件里面

  10. Workflow:采用坐标变换(移动和旋转)画箭头

    背景 流程设计器的连线部分需要画一个箭头代表连接的方向,下图是期望的效果: 刚开始我准备采用三角函数(sin和cos)来计算三角的坐标,实现的过程真不爽(有兴趣的朋友可以试试),就在完工的时候,突然想 ...