Standalone Application With Odoo Framework

Hello Everybody, Here I am going to explain how one can develop a standalone application using Odoo web framework, which can communicate to Odoo server(May be you can have your own WSGI Server which handles HTTP and JSON request) and can call controller, application can do request type of HTTP or JSON.

As you are going to develop a standalone application using Odoo web framework so there are some minimum requirements which should be fulfilled, like to develop a standalone application using Odoo framework you should have Qweb Engine available because Odoo framework having dependency with qweb engine(consider default template engine)

Difference between old framework design and New modular framework

Prior to new design of Web framewrok(prior to concept of require and odoo.define, the concept of modular web-client framework), there is only one file needed to use all concepts like class, class extension, include, core widget, support Translations, datetime operation like(string to datetime and datetime to string), Mutex, Model Proxy to directly create an instance of some Odoo Model and call method of it, Session management for making RPC call, Event and EventDispatcherMixin and etc, and more file for template engine that is qweb2.js


 Now WebClient framework is more modular, for each functionality there is separate module(registered module using odoo.define method)


Now to develop a standalone application you needs following JS files, Well I would say modules here, because now in new design everything is modular so each feature defined using odoo.define will be called a JS module which provides some functionality.

boot.js
    The file where the concept of define module and require wrapper method is defined

class.js
    The file where class and related terms like extend, includes, _super are defined.

ajax.js
    This file  defines genericJsonRpc, jsonRpc, jsonpRpc, loadJS, loadCSS, and get_file function, basically this file will be used for generic AJAX call, this file having dependency over time.js, so to support ajax feature you should have time.js atleast, wherever I say this file having dependency on another file means to support that module you need that another file.

time.js
    All datetime operation related stuff resides in this file(like strtodatetime, datetimetostr, datetostr, strtodate etc), this file having dependency over translation.js and utils.js, translation.js is used to translate some static messages defined in this file time.js, and utils.js is used for lpad and rpad functions.

utils.js
    This file having dependency over class.js and translation.js, which we already having right, this file will contain all generic utility functions, lpad, rpad, xml_to_json, json_node_to_xml, xml_to_str, Mutex, DropMisordered, set_cookie, get_cookie and many more.

translation.js
    The file having dependency over qweb(It is default requirement of the framework to have a qweb template engine, object of qweb is created in boot.js itself while generating module services of odoo).
This translation.js having TranslationDatabase, where all translation are stored, one call is done by translation.js to fetch all translations from the server and the call is to controller and controller is: /web/webclient/translations.

mixin.js
    This module contains all mixin related stuff, like EventDispatcherMixin, PropertiesMixin, ParentedMixin are defined over here.

EventDispatcherMixin: to on event(Bind event), trigger event(to trigger binded event), off(to detach event), destroy.


session.js
    This module is specifically created to maintain client session object, through this object all RPC methods are called, this having core rpc method, it also having load_modules logic, its having some core methods like user_has_group, load_qweb, etc methods, basically this module is specifically to maintain session over client.

rigistry.js
    This module provides generically developed Registry class which stores details, like it is used for widget registry, it is also used for view registry, its having some generic methods like add, get, any, contains, extend etc


widget.js
    The module depends on web.core and web.sesssion, the module is meant for core widget development, here core Odoo Widget is developed which going to base class of all Odoo widgets, Its having all logic related widget rendering, like when widget should be rendered, how start method of widget will be called(start method will be called once widget is inserted into DOM, appendTo, prependTo, insertAfter, insertBefore), also this base widget maintains event hash, you can write event = {'eventType elementSelector', 'BoundedFunction', ...}
Here core is used for qweb and mixins(Well we can directly require mixin and qweb)


core.js
    As the name suggest, module having some reference of core functionalities
, like Bus(Reference of EventDispatcherMixin because Bus object is created by extending EventDispatcherMixin), bus which is instance of Bus object, Class which is instance of web.Class, _t and _lt for translation, view_registry, form_widget_registry, form_tag_registry, form_custom_registry, list_widget_registry, search_widgets_registry, search_filters_registry etc

This core module basically returns instance/reference of some core classes defined in framework like Class, Bus, qweb etc.



Now We learn How old web framework and new web framework differs in implementation we can proceed, how to develop standalone application.

Develop Standalone Application

To develop standalone application using Odoo framework you either need openerpframwork.js if you are implementing your application using old style else above listed JS module files and qweb2.js where qweb engine is defined.

Once you having this files you can proceed to develop your application using Odoo web framework which will provide you Core Widget, Session management, Inheritance feature, Class concept, _super feature, include mechanism where you can include you code in some JS object(keep old functionality but include your logic in that method or completely rewrite method), Odoo framework provides powerfull templating i.e. qweb template, rpc method to interact with your Odoo server(or your own Server if it can handle request sent through Odoo web framework), jsonRpc method to do jsonRpc call to server and lot more features.

So you can create your large standalone app with Odoo framework with more readable code and OOP concepts in Javascript, with Odoo framework your code can maintainable as your app is going to be developed with some standard like creation of widget, maintaining of session etc.

Development of application depends on you, how your application will be designed and all etc stuff will depend on you but let me give you small example where I developed chrome extension which adapts Odoo framework and uses standard qweb template for creating/designing screens.

As it is standalone application and its a chrome extension so its having one manifest file and manifest file will define which is landing page when extension is started, following link will give brief introduction about how to create any chrome extension.

https://developer.chrome.com/extensions/getstarted

Now say for example in my manifest.json I defined that my landing page is index.html

"browser_action": {
        "default_icon": "static/src/img/logo.png",
        "default_popup": "index.html"
    },

So I am telling chrome to open index.html file when my extension logo is clicked, now this index.html file will imports all JS files needed i.e. all JS files qweb2.js, boot.js, class.js, time.js, ajax.js, utils.js, translation.js, session.js, core.js, widget.js, registry.js and your other JS files where you defined your widget, screens and one JS(yourApplicationName.js) file which will have anonymous function which will be called on document ready.

This yourApplicationName.js file which will instantiate Your core widget which is developed using Odoo Framework by extending web.Widget.

Something like: 

Your Core widget may look like:

function odoo_chrome_core_widget(website_forum_chrome) {

odoo.define('my_app.core', function (require) {

    var Widget = require('web.Widget');

    my_app_chrome.my_app_core_widget = Widget.extend({

        init: function() {

             //Initialization stuff

        },

        start: function() {

             //Start method stuff, may have some event binding and etc stuff

        },

        //Some other methods, may be create some other widgets and instantiate    here in this core widget

    });

};

yourApplicationName.js may look like:

my_app_chrome = _.clone(openerp);
(function() {
    'use strict';

    odoo_chrome_core_widget(website_forum_chrome); //Import widget.js

    odoo_chrome_core_widget.App = (function() {
        function App($element) {
            this.initialize($element);
        };

        App.prototype.initialize = function($element) {

            this.my_core_widget = new my_app_chrome.my_app_core_widget(null, {});
           this.my_core_widget.appendTo($element);

        };

    })();

    jQuery(document).ready(function() {
        var app = new  odoo_chrome_core_widget.App($(".YourElementClass"));
    });

})();

Let me explain above code, here we defined one anonymous function which will be triggered when this JS file is loaded, this will create one App prototype and define document.ready function, now when our DOM is ready this ready function will create instance of odoo_chrome_core_widget with Element(Class Selector) defined in index.html where we want to push core widget, this odoo_chrome_core_widget.App will create an instance of our core widget i.e. my_app_chrome.my_app_core_widget which developed using Odoo framework(by extending web.Widget), see coreWidget.js code.

So this way whole application can be designed where one anonymous function will starts the initialization and then we will have control over our core widget, and rest of the things will be rendered through our widget, our core widget will have template to render and logic to handle some events, our core widget may create some other widgets and those widget may pushed to the DOM.

Feel free to raise your queries in comment box, your inputs are welcomed and will enrich me to improve this blog.

Fish Shell

Install fish shell using apt-get

Or you can install through debian or source code

Once you installed the fish shell you can configure it according to your needs.

Basic configuration for git is given below:


Configuration
User configurations for fish are located at ~/.config/fish/config.fish. Adding commands or functions to the file will execute/define them when opening a terminal, similar to .bashrc.

Web interface

The fish prompt and terminal colors can be set with the interactive web interface:

fish_config

Selected settings are written to your personal configuration file. You can also view defined functions and your history.

Prompt

If you would like fish to display the branch and dirty status when you are in a git directory, you can add the following to your ~/.config/fish/config.fish:

 

# fish git prompt
set __fish_git_prompt_showdirtystate 'yes'
set __fish_git_prompt_showstashstate 'yes'
set __fish_git_prompt_showupstream 'yes'
set __fish_git_prompt_color_branch yellow

# Status Chars
set __fish_git_prompt_char_dirtystate '⚡'
set __fish_git_prompt_char_stagedstate '→'
set __fish_git_prompt_char_stashstate '↩'
set __fish_git_prompt_char_upstream_ahead '↑'
set __fish_git_prompt_char_upstream_behind '↓'
 
function fish_prompt
        set last_status $status
        set_color $fish_color_cwd
        printf '%s' (prompt_pwd)
        set_color normal
        printf '%s ' (__fish_git_prompt)
       set_color normal
end

 

Command completion

fish can generate autocompletions from man pages. Completions are written to ~/.config/fish/generated_completions/ and can be generated by calling:

fish_update_completions

You can also define your own completions in ~/.config/fish/completions/. See /usr/share/fish/completions/ for a few examples.

Context-aware completions for Arch Linux-specific commands like pacman, pacman-key, makepkg, cower, pbget, pacmatic are built into fish, since the policy of the fish development is to include all the existent completions in the upstream tarball. The memory management is clever enough to avoid any negative impact on resources.

Good link to know about fish:

https://wiki.archlinux.org/index.php/Fish

Object Oriented JavaScript

Javascript is prototype based language, no doubt JavaScript supports OOP concepts but not the way other languages support, other languages like Python, Java, C# has concept OOP by means of Class, before we go to deep how Javascript supports OOP concepts lets check what are the difference between object oriented based programming and prototype based programming and what are the basic features of Object oriented language.

Object-oriented programming

 Object-oriented programming (OOP) is a programming paradigm that uses abstraction to create models based on the real world. OOP uses several techniques from previously established paradigms, including modularity, polymorphism, and encapsulation. Today, many popular programming languages (such as Python, Java, JavaScript, C#, C++, PHP, Ruby and Objective-C) support OOP.

OOP envisions software as a collection of cooperating objects rather than a collection of functions or simply a list of commands (as is the traditional view). In OOP, each object can receive messages, process data, and send messages to other objects. Each object can be viewed as an independent little machine with a distinct role or responsibility.

OOP promotes greater flexibility and maintainability in programming, and is widely popular in large-scale software engineering. Because OOP strongly emphasizes modularity, object-oriented code is simpler to develop and easier to understand later on. Object-oriented code promotes more direct analysis, coding, and understanding of complex situations and procedures than less modular programming methods.

Concepts of OOP

Namespace

A container which lets developers bundle all functionality under a unique, application-specific name.

Class

Defines the object's characteristics. A class is a template definition of an object's properties and methods.

Object

An instance of a class.

Property

An object characteristic, such as color.

Method

An object capability, such as walk. It is a subroutine or function associated with a class.

Constructor

A method called at the moment an object is instantiated. It usually has the same name as the class containing it.

Inheritance

A class can inherit characteristics from another class.

Encapsulation

A method of bundling the data and methods that use the data.

Abstraction

The conjunction of an object's complex inheritance, methods, and properties must adequately reflect a reality model.

Polymorphism

Poly means "many" and morphism means "forms". Different classes might define the same method or property.

 

Prototype-based programming

Prototype-based programming is an OOP model that doesn't use classes, but rather accomplishes behavior reuse (equivalent to inheritance in class-based languages) by decorating (or expanding upon) existing prototype objects. (Also called classless, prototype-oriented, or instance-based programming.)

The original (and most canonical) example of a prototype-based language is Self developed by David Ungar and Randall Smith. However, the class-less programming style grows increasingly popular lately, and has been adopted for programming languages such as JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (when using the Viewer framework to manipulate Morphic components), and several others.
Let's have a look each one of this and how JavaScript support each one of this.

JavaScript object oriented programming

Namespace

A namespace is a container which allows developers to bundle up functionality under a unique, application-specific name. In JavaScript a namespace is just another object containing methods, properties, and objects.

var odoo = window.odoo = {};


The idea behind creating a namespace in JavaScript is simple: create one global object, and all variables, methods, and functions become properties of that object. Use of namespaces also reduces the chance of name conflicts in an application, since each application's objects are properties of an application-defined global object.

We can also create sub-namespaces:

odoo.session = {}

Standard built-in objects

JavaScript has several objects included in its core, for example, there are objects like Math, Object, Array, and String. The example below shows how to use the Math object to get a random number by using its random() method.

console.log(Math.random());

Custom objects

The class

JavaScript is a prototype-based language and contains no class statement, such as is found in C++ or Java. This is sometimes confusing for programmers accustomed to languages with a class statement. Instead, JavaScript uses functions as classes. Defining a class is as easy as defining a function. In the example below we define a new class called Person.

var Session = function () {};

The object (class instance)

To create a new instance of an object obj we use the statement new obj, assigning the result (which is of type obj) to a variable to access it later.
In the example above we define a class named Session. In the example below we create two instances (session1 and session2).

var session1 = new Session();
var session2 = new Session();

The constructor

The constructor is called at the moment of instantiation (the moment when the object instance is created). The constructor is a method of the class. In JavaScript the function serves as the constructor of the object, therefore there is no need to explicitly define a constructor method. Every action declared in the class gets executed at the time of instantiation.

The constructor is used to set the object's properties or to call methods to prepare the object for use. Adding class methods and their definitions occurs using a different syntax described later in this article.
In the example below, the constructor of the class Session logs a message when a Session is instantiated.

function Session(origin, use_cors) { 

    //Assigning values through constructor 

    this.init = function (origin, use_cors) {

        this.origin = origin;   

        this.use_cors = use_cors;

    }  

    //functions 

    this.authenticate = function(user, password) { 

        return user +" Has authentication on " + this.origin; 

    } 

    this.init(origin, use_cors); 

} 

//Creating session instance 

var session = new Session("http://localhost:8069", true); 

alert(session.authenticate('admin', 'password')); 

The property (object attribute)

Properties are variables contained in the class; every instance of the object has those properties. Properties are set in the constructor (function) of the class so that they are created on each instance.

The keyword this, which refers to the current object, lets you work with properties from within the class. Accessing (reading or writing) a property outside of the class is done with the syntax: InstanceName.Property, just like in C++, Java, and several other languages. (Inside the class the syntax this.Property is used to get or set the property's value.)

In the example below, we define the userName property for the Session class at instantiation:

var Session = function (userName) {
    this.userName = userName;
    console.log('Session instantiated');  

 };

var session = new Sesion('Alice');

// Show the firstName properties of the objects
console.log('session's username is ' + session.userName); // logs "session's username is Alice"

The methods

Methods are functions (and defined like functions), but otherwise follow the same logic as properties. Calling a method is similar to accessing a property, but you add () at the end of the method name, possibly with arguments. To define a method, assign a function to a named property of the class's prototype property. Later, you can call the method on the object by the same name as you assigned the function to.

In the example below, we define and use the method welcomeMessage() for the Session class.

var Session = function (userName, firstName) { 

    this.userName = userName; 

    this.firstName = firstName;
};

Session.prototype.welcomeMessage = function() {
  console.log("Hello, This is" + this.firstName + ", Welcoming you to learn Javascript");
};

var session = new Session('mohammed', "Mohammed Shekha");

// call the Session welcomeMessage method.
session.welcomeMessage(); // logs "Hello, This is Mohammed Shekha, Welcoming you to learn Javascript"

Inheritance

Inheritance is a way to create a class as a specialized version of one or more classes (JavaScript only supports single inheritance). The specialized class is commonly called the child, and the other class is commonly called the parent. In JavaScript you do this by assigning an instance of the parent class to the child class, and then specializing it. In modern browsers you can also use Object.create to implement inheritance.

Note: JavaScript does not detect the child class prototype.constructor (see Object.prototype), so we must state that manually. See the question "Why is it necessary to set the prototype constructor?" on Stackoverflow.

In the example below, we define the class CharWidget as a child class of Widget. Then we redefine the render() method and add the get_value() method.

// Define the Widget constructor
var Widget = function(node, name) { 

    this.name = name; 

    this.node = node;
};

// Add a couple of methods to Widget.prototype
Widget.prototype.walk = function(){
  console.log("I am walking!");
};

Widget.prototype.render = function(){
    console.log("Hello, I'm " + this.name);

    $('body').append(this.node);
};

// Define the CharWidget constructor
function CharWidget(node, name) {
  // Call the parent constructor, making sure (using Function#call)
  // that "this" is set correctly during the call
  Widget.call(node, name);

  // Initialize our Student-specific properties
  this.subject = subject;
};

// Create a CharWidget.prototype object that inherits from Widget.prototype.
// Note: A common error here is to use "new Widget()" to create the
// CharWidget.prototype. That's incorrect for several reasons, not least 
// that we don't have anything to give Widget for the "name" 
// argument. The correct place to call Widget is above, where we call 
// it from CharWidget.
CharWidget.prototype = Object.create(Widget.prototype); // See note below

// Set the "constructor" property to refer to CharWidget
CharWidget.prototype.constructor = CharWidget;

// Replace the "render" method
Student.prototype.render = function(){ 

    $(this.node).val(this.name); 

    $('body').append(this.node); 
};

// Add a "format" method
Student.prototype.get_value = function(){
  console.log("Value of node is ", $(this.node).val());
};

// Example usage:
var char_widget = new CharWidget("<input type='text' name='test'></input>", "Hello World");
char_widget.render();   // "This will add input box into body and add value Hello World"
char_widget.walk();       // "I am walking!"
char_widget.get_value(); // "Hello World!"

// Check that instanceof works correctly
console.log(char_widget instanceof Widget);  // true 
console.log(char_widget instanceof CharWidget); // true

 

Encapsulation

In the previous example, Student does not need to know how the Person class's walk() method is implemented, but still can use that method; the Student class doesn't need to explicitly define that method unless we want to change it. This is called encapsulation, by which every class packages data and methods into a single unit.

Information hiding is a common feature in other languages often as private and protected methods/properties. Even though you could simulate something like this on JavaScript, this is not a requirement to do Object Oriented programming.

Before going on to Encapsulation and Abstraction first we need to know what Data Hiding is and how can we achieve it in JavaScript. Date hiding is protecting the data form accessing it outside the scope. For example, In Session class we have User ID properties which should be protected. Let's see how to do it.  

function Session(uid){

    //this is private variable 

    var uid = uid;

    //public properties and functions

    return{ 

        timezone: "Asia/Calcutta", 

        language: "en-US", 

        getUid: function(){

            return uid;

        }

    } 

}

var session = new Session(); 
//this will get undefined 
//because it is private to Session
console.log(session.uid); 
//Will get uid value we using session's method to access its property
//funtion to get private data 
console.log(session.getUid());

Abstraction

Abstraction is a mechanism that allows you to model the current part of the working problem, either by inheritance (specialization) or composition. JavaScript achieves specialization by inheritance, and composition by letting class instances be the values of other objects' attributes.

The JavaScript Function class inherits from the Object class (this demonstrates specialization of the model) and the Function.prototype property is an instance of Object (this demonstrates composition).

var foo = function () {};

// logs "foo is a Function: true"
console.log('foo is a Function: ' + (foo instanceof Function));

// logs "foo.prototype is an Object: true"
console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));

Polymorphism

Just as all methods and properties are defined inside the prototype property, different classes can define methods with the same name; methods are scoped to the class in which they're defined, unless the two classes hold a parent-child relation (i.e. one inherits from the other in a chain of inheritance).

Person.prototype.getInfo = function(){
 return "I am " + this.age + " years old " +
    "and weighs " + this.weight +" kilo.";
};

function Employee(age,weight,salary){
 this.age = age;
 this.weight = weight;
 this.salary = salary;
}
Employee.prototype = new Person();

Employee.prototype.getInfo = function(){
 return "I am " + this.age + " years old " +
    "and weighs " + this.weight +" kilo " +
    "and earns " + this.salary + " dollar.";  
};

var person = new Person(50,90);
var employee = new Employee(43,80,50000);

console.log(person.getInfo());
console.log(employee.getInfo());   

For detail go through: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

Your inputs are welcomed to improve this post.

Grunt

What is grunt ?

 Grunt is a task-based command line build tool for JavaScript projects. Here's the idea: when working on a JavaScript project, there are a bunch of things you'll want to do regularly.

To check more details you can go through: http://gruntjs.com/
Getting started: http://gruntjs.com/getting-started


To install grunt just run the command sudo npm install -g grunt
Assuming you have nodejs and npm is installed.

for Grunt's command line interface, you need to install grunt-cli
npm install -g grunt-cli

This will put the grunt command in your system path, allowing it to be run from any directory.
Note that installing grunt-cli does not install the Grunt task runner! The job of the Grunt CLI is simple: run the version of Grunt which has been installed next to a Gruntfile. This allows multiple versions of Grunt to be installed on the same machine simultaneously.

Preparing a new Grunt project

A typical setup will involve adding two files to your project: package.json and the Gruntfile.
package.json: This file is used by npm to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as devDependencies in this file.
Gruntfile: This file is named Gruntfile.js or Gruntfile.coffee and is used to configure or define tasks and load Grunt plugins. When this documentation mentions a Gruntfile it is talking about a file, which is either a Gruntfile.js or a Gruntfile.coffee.

package.json
To create package.json file you just need to run the command npm init
This will prompt you with some questions (https://docs.npmjs.com/cli/init) provide the details and that's it.

As I specified that this file will contain development dependency of grunt and gruntPlugins, to install grunt plugin and also register it in package.json

npm install <module> --save-dev

For Example: npm install jquery --save-dev

npm install grunt --save-dev

npm install grunt-contrib-jshint --save-dev

npm install grunt-contrib-sass --save-dev

npm install grunt-contrib-watch --save-dev

This will install jquery inside node_modules  folder and will add dependecy in package.json

The Gruntfile

The Gruntfile.js or Gruntfile.coffee file is a valid JavaScript or CoffeeScript file that belongs in the root directory of your project, next to the package.json file, and should be committed with your project source.
A Gruntfile is comprised of the following parts:

• The "wrapper" function
• Project and task configuration
• Loading Grunt plugins and tasks
• Custom tasks

An example Gruntfile

In the following Gruntfile, project metadata is imported into the Grunt config from the project's package.json file and the grunt-contrib-uglify plugin's uglify task is configured to minify a source file and generate a banner comment dynamically using that metadata. When grunt is run on the command line, the uglify task will be run by default.
Say for example I am having all my static files(js, css inside staitc -> src directory)

module.exports = function(grunt) {

    grunt.initConfig({
        jshint: {
            src: ['static/src/**/*.js', 'static/test/**/*.js'],
            options: {
                sub: true, //[] instead of .
                evil: true, //eval
                laxbreak: true, //unsafe line breaks
            },
        },
        sass: {
            dev: {
                options: {
                    style: "expanded",
                },
                files: {
                    "static/src/css/base.css": "static/src/css/base.sass",
                }
            }
        },
        watch: {
            sass: {
                files: ["static/src/css/base.sass"],
                tasks: ['sass']
            },
        }
    });

    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('gen', ["sass"]);
    grunt.registerTask('watcher', ["gen", "watch"]);
    grunt.registerTask('test', []);

    grunt.registerTask('default', ['jshint']);

};

The wrapper function

module.exports = function(grunt) {
  // Do grunt-related things in here
};

Every Gruntfile (and gruntplugin) uses this basic format, and all of your Grunt code must be specified inside above function.

Project and Task Configuration

Most Grunt tasks rely on configuration data defined in an object passed to the grunt.initConfig method.
In this example, we uses jshint plugin of grunt and providing paths of JS files

Loading Grunt plugins and tasks

Many commonly used tasks like concatenation, minification and linting are available as grunt plugins. As long as a plugin is specified in package.json as a dependency, and has been installed via npm install, it may be enabled inside your Gruntfile with a simple command:

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-jshint');

Custom tasks

You can configure Grunt to run one or more tasks by default by defining a default task. In the following example, running grunt at the command line without specifying a task will run the 'jshint' task. This is functionally the same as explicitly running grunt jshint or even grunt default. Any number of tasks (with or without arguments) may be specified in the array.

 grunt.registerTask('default', ['jshint']);

If your project requires tasks not provided by a Grunt plugin, you may define custom tasks right inside the Gruntfile. For example, this Gruntfile defines a completely custom default task that doesn't even utilize task configuration:

module.exports = function(grunt) {

  // A very basic default task.
  grunt.registerTask('default', 'Log some stuff.', function() {
    grunt.log.write('Logging some stuff...').ok();
  });

};

Custom project-specific tasks don't need to be defined in the Gruntfile; they may be defined in external .js files and loaded via the grunt.loadTasks method.


 After all this configuration, creation of project, adding package.json and Gruntfile.js, defining initConfig and grunt plugin and tasks you just need to run grunt command
The output expected:
$ grunt
Running "jshint:src" (jshint) task
>> 1 file lint free.

Done, without errors.

To run specific task, you can also run grunt command with argument,
$ grunt test

Where test is registered task in grunt.

Bower

What is bower ?

A very good explaining video about what is bower is here: https://egghead.io/lessons/bower-introduction-and-setup.

bower is a package manager to install JS packages, it also maintains dependency graph.

To install bower itself:

sudo apt-get install nodejs

sudo apt-get install npm

sudo npm install -g  bower

To install packages through bower: bower install jquery

to make your own bower.json: just load all packages at your end and just run bower init

This will ask some prompt, go through and that's it, your bower.json is prepared.

You can register your package on github through

bower register give_package_name 'your repository on github'

Odoo Web framework RequireJS style

Odoo Require Concept

Odoo web framework come up with new concept of module loading which is almost inherited from RequireJS.

Let me describe how modules are loaded, how dependencies are calculated ?

Everything else is similar in web framework but now It is more modular, each and every component is reusable by just fetching/calling it using require(Its a wrapper to load the object)

Previously modules where loaded using namespace(same name given as module name to JS namespace)

First of all note that now onwards global object openerp is replaced with odoo.

Now onwards if you want to create any module or any widget you can simply define it using odoo.define, lets have example of both style old style as well as new style.

Old Style: openerp.my_module = function(openerp) {

openerp.web.my_widget1 = openerp.web.wdiget.extend({

//your widget stuff here

popup = new openerp.web.FormPopup(...);

});

openerp.web.my_widget2 = openerp.web.wdiget.extend({

//your widget stuff here

});

});

New Style: odoo.define('openerp.my_module', function(require) {

popup = require('form_popup') //Where form_popup is separately defined in another file

web = require('odoo_web');

web.my_widget2 = openerp.web.wdiget.extend({

//your widget stuff here

});

});

No doubt in both cases we can have re-usability but in later one we can maintain small files for small features and can use that small feature in another file by requiring it, code is more readable and simpler.

Note that, new style you need to define files in proper order because one feature might depends on another and due to dependency issue you module might not be loaded.

Lets have a look how it works in background ?

we having one main file boot.js, boot.js file having anonymous function and it is in closure style which is called when file is loaded in DOM, the responsibility of boot.js is to load module, this file is the file which generates the concept of require method and dependency.

It creates global odoo object which having define method, now note that all other files will have define function called where second parameter will be callback function, whenever each file is loaded, each file will call define method of odoo, now define method of odoo global object checks for the arguments and second argument will have function in which there will be other require calls.

Define method checks for the require calls using Regular Expression, after gathering all require calls it fetches those objects from services object

Service object is a object which is module's/object's pool.

Say for example if I define one of my widget:

odoo.define('form.digital_signature', function() {....});

Then form.digital_signature is going to register in service pool

If there is dependency missing then its not going to load that module, if everything is fine, if it finds all dependent module are already loaded in service object pool then it calls function which is second parameter in define and also add that module/feature with name given as a first argument in service pool, if one tries to register service with same name twice then it will raise error that service with same name is already registered.

There are some core methods in boot.js, which you should go through:

define -> Finds require call, generates dependency list, creates wrapper of require

process_jobs -> loads module and add that module in module/object service and factories pool

init -> initializes webclient

So with this we can simply create small features and us it by calling it another file using require('feature_name')

All your generated module will generally return reference of your object like example given below:

odoo.define('web.ajax', function (require) {

"use strict";

var time = require('web.time');

var Dialog = require('web.dialog');

time.date_to_utc...

var my_dialog = new Dialog(....)

});

where web.dialog is:

odoo.define('web.Dialog', function (require) {

"use strict";

var Dialog = Widget.extend({

//your dialog stuff

});

return Dialog;

});

So here web.dialog returns reference of Dialog and we can then use new Dialog after calling var Dialog require('web.dialog');

Hope this will help, feel free to raise your query by comments.