Pages

Widgets Creation in Dojo 2 Application

Dojo 2 is powerful and advanced tool for creating applications. It is mainly used for Enterprise-grade Web Application Development. In this tutorial we are going to learn about how to create widgets in Dojo 2. we will be creating a sample employee details widget as shown below.


This posts assumes that you already have the required environment set for creating projects in dojo 2. if not set please refer this post on how to Get started with Dojo 2.

Create a employeeDetails.ts file.

First Create a page with name employeeDetails.ts in your projects widgets directory. Now open employeeDetails.ts file in the editor and follow the below steps.

Copy and Paste the ts code to your employeeDetails.ts file.
employeeDetails.ts

import { WidgetBase } from '@dojo/widget-core/WidgetBase';
import { v} from '@dojo/widget-core/d';
import * as css from './styles/employeeDetails.m.css';


export default class EmployeeDetails extends WidgetBase {
    
 protected render() {
        return v('div',{classes:css.divStyle,styles:{'font-weight':'700'}}, [ 'Employee Details', 
               v('div',{classes:css.childDiv},[
    v('img', {
     classes: css.imgStyle,
     src: 'https://4.bp.blogspot.com/-agAs8bWPElU/Wp_Pz3j2gmI/AAAAAAAAA0M/umABRoJyg8YnNIbpnhz03_B3uMZ2FhtIgCLcBGAs/s320/boy.png' })
               ]),
               v('div',{classes:css.textStyle}, [
                   v('table',{styles:{'margin':'0 auto'}},[
                       v('tr',{},[
                           v('td',{classes:css.td2Style},[
                            'Name :'
                           ]),
                           v('td',{classes:css.td2Style},[
                            v('strong',{classes:css.textDetails}, [ 'K V KUMAR' ])
                           ]) 
                       ]),
                       
                       v('tr',{},[
                            v('td',{classes:css.td2Style},[
                            'Designation  :'
                            ]),
                            v('td',{classes:css.td2Style},[
                                v('strong',{classes:css.textDetails}, [ 'APP DEVELOPER' ])
                            ]) 
                        ]),

                        v('tr',{},[
                            v('td',{classes:css.td2Style},[
                            'Experience  :'
                            ]),
                            v('td',{classes:css.td2Style},[
                                v('strong',{classes:css.textDetails}, [ '3 YEARS' ])
                            ]) 
                        ])
                   ]),

            ])
            ])
 }
}


Create employeeDetails.m.css file

Create a file with name as employeeDetails.m.css, in your projects widgets/styles directory.

Copy and Paste the below give code to your employeeDetails.m.css file.

employeeDetails.m.css

   .divStyle{
    text-align: center;
    color:black;
}

.childDiv{
    margin-top: 40%;
    border-radius: 5px;
    background: #c3c3c3;
}

.imgStyle{
 width:50%;
}

.textStyle{
    font-weight: 700;
    padding: 5px 0 5px 0;
    margin: 5px 0 0 0;
    border-radius: 5px;
    background: rgb(195, 195, 195);
}

.td1Style{
   float:left;
}

.td2Style{
    width:50%;
    text-align: left;
}

.textDetails{
    vertical-align:middle;
}



Above Code Explanation...

Every widget creation in dojo 2 will have the below 2 imports as default.
import { WidgetBase } from '@dojo/widget-core/WidgetBase';
import { v} from '@dojo/widget-core/d';
The WidgetBase class is used as the base class for every widget created. WidgetBase defines the publicly accessible properties of the widget. and the v function is used to render virtual DOM node, which is we will be doing all out html element creation here itself. And now, the third import is the css file that we have just created. Here, we are importing all the classes in employeeDetails.m.css as css. Now, since the imports are over for this example, lets go further below.. after imports every widget in dojo 2 has this class definition
export default class  extends WidgetBase {

}

here the contains your widgets name.
Now, we need to define the render method inside our class we just created.

  protected render() {
    return v('div');
  }

this is the place all our widget is rendered. At present the above method will only generate a div virtual node.
every element created here must be within v function,it simply instructs Dojo 2 to create an HTML element. The v function contains the element name we want to create, an object literal and the the text or the child elements goes within the square brackets. the object literal contains the attributes that we have within an element.
if you wish to add a widget inside a widget ie as a child of the above div node, follow the below steps.

      protected render() {
        return v('div', [
            w(Banner, {})
        ]);
      }


for the above code to work we need to import w from @dojo/widget-core/d.
import { v, w } from '@dojo/widget-core/d';

Now, to see our widget in action, import EmployeeDetails widget to main.js.
import EmployeeDetails from './widgets/employeeDetails';

and modify projector constant as below,
const Projector = ProjectorMixin(EmployeeDetails);

That's it for the widget creation part for this post, refresh your browser tab to see the changes. If you have any doubts regarding the above post please leave a comment below.

vinay kumar

Founder of Gowriter.Blogspot.com, Tech Enthusiast, Normal type of Person with passion toward's work.

No comments: