Create Widgets and Templates in Odoo-10

Widget:

Widget is different or alternate representation to display a screen, fields and attributes in odoo.
Widget allows to change view using different rendering templates and also allows to design as you want.

Example:

widget_name.js

odoo.define(module.model_name', function(require) {
    "use strict";
    var Widget = require('web.Widget');
    var core = require('web.core');
    var Model = require('web.Model');

    var QWeb = core.qweb;
    var _t = core._t;

    // here we are getting the value in an array.
    var widget_name = Widget.extend({
    //render your template
        "template" : "template_name",


    //initialize
    init : function () {
    var self = this;
           this._super(parent);
        //initialize values to variables
    }


//Binding Events
        events : {
            'click .class_ex' : 'method1',
            'click .class_ex1' : 'method2',
        },

        start : function() {

            var self = this;
            this._super(parent);

//your functionality code and logic
        },



//creating functions
            method1:function(){
                //do something when click event fire on class_ex
            },
            method2:function(){
                //do something when click event fire on class_ex
            },
            });
            return widget_name;
});
You need to add this .js & .css files in odoo like this.

assets_backend.xml

<odoo>
    <data>
        <template id="assets_backend" inherit_id="web.assets_backend">
            <xpath expr="script[last()]" position="after">
           <script type="text/javascript" src="/module/static/src/js/widget_name.js">
</script>
           <link href="/module/static/src/css/home.css" rel="stylesheet"></link>
            </xpath>
        </template>
    </data>
</odoo>
Design Widget Template:

Create XML and add xml:space="preserve" as argument in template tag.
t-name is name of your template that is defined in .js file and the same name is used as widget name in XML while you use it.
tmpl.xml

<?xml version="1.0"?>
<templates id="template" xml:space="preserve">
     <t t-name="template_name">
        <div class=”myclass”>
            //design your template here 
        <div class=”class_ex”>
            //body
        </div>
            <div class=”class_ex1”>
                //body
            </div>
        </div>
    </t>
</templates> 
NOTE: No need to write odoo tag in tmpl.xml file.

It is important to have the template name to be the same, as given in your in .js (widget_name.js) file.
How to use a widget

Use widget by action or object button.

Shown below we add template_name to action_registry, so now we can use this name to execute using XML.

Example:

<record id="template_id" model="ir.actions.client">
    <field name="name">template name</field>
    <field name="tag">template_name</field>
    <field name="target">new</field>
</record>  
Set your "template name" in HERE
You can also write some events on your button, fields and then make a function that handles event and execute function that renders your template. Return this id (template_id) as a result when object button clicked.
You can use your widget like this also.

<field name="mobile" widget="template_name" />