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
  • 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