Pages

Creating Application Widget in Dojo 2

Dojo 2 is used for Creating Enterprise-grade Web Applications. in the previous post we have seen on how to create a widget in Dojo 2 application.In this post we will be creating a sample application widget which combines all the child widgets together.

We will not be creating a widget here again, i will use the employeeDetails widget, that we have already created.

Now lets create a widget with name App. This widget is the one which contains all the child widgets. This Widget represents the entire application that we are building.
Start by Creating an empty ts file name App ie App.ts. Now open the App.ts file located in the src/widgets directory, in your editor and paste the below dependency imports.


  import { WidgetBase } from '@dojo/widget-core/WidgetBase';
  import { v, w } from '@dojo/widget-core/d';


The first import ie, the WidgetBase class will be used as the base class for our App widget.
WidgetBase works with the WidgetProperties interface to define the properties of the widget that are publicly accessible for the others to utilize. The Second import ie, the v functions is used to render virtual DOM nodes and w is used for widgets . Both v & w generate DNodes, that are the base type of all virtual DOM nodes in Dojo 2.

Since we are trying to import widgets to App widget, we will next import employeeDetails widget that we created in the previous post.

  import EmployeeDetails from './widgets/employeeDetails'


Now, Since we are done with the imports of the dependencies we need. let's create the App widget class.

  export default class App extends WidgetBase {

  }


The App class is extending WidgetBase, which accepts the WidgetProperties interface. Here we have added the export and the default keywords before the class keyword. it is because of the ES6 standard approach for creating modules.

Next, override WidgetBase's render method to generate the application's view. The protected render() method return's a DNode , or an array of DNode's, which are used by the application's projector to render the view. Here the v and w functions generates DNode's.

Next create a simple render method by adding this to the App class,

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


The above method when executed will return a div and generate a div virtual node.
Now, Since we are creating an application widget we need to render the child widgets to our app widget, to do that we should use w function that is designed to render widgets (v is designed to render virual DOM Nodes).to render EmployeeDetails widget with w function, it should be as follows.
w(Banner, {})

Now, update your render method as shown below, to include EmployeeDetails widget as a child node in App Widgets div node.

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


The w function takes two parameters - a widget class (the name of the widget to render) and an object literal (which passes values to the widget). In this case, the EmployeeDetails class is not using WidgetProperties. If you want to send data, the WidgetProperties have 2 properties are optional.Below is the structure of the WidgetProperties, if you want to use it for your widget.

  export interface WidgetProperties {
      key?: string;
      bind?: any;
  }

let's say you have another widget let's say CompanyDetails, to integrate in the App widget, you can do this as follows,

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


That's it for the Application Widget. if you want to add more widgets just import them to App.js file and include the widget class along with the object literal in the respected div node in v function.

Example App.ts file


 import { WidgetBase } from '@dojo/widget-core/WidgetBase';
 import { v, w } from '@dojo/widget-core/d';
 import EmployeeDetails from './employeeDetails';
 import CompanyDetails from './companyDetails';

 export default class App extends WidgetBase {
    protected render() {
        return v('div', [
            w(EmployeeDetails , {}),
            w(CompanyDetails, {})
        ]);
    }
 }



Make App Widget as your root Widget

Now that the App widget contains all the other widgets as child widget's, we should change our main.ts to import App widget.and also make sure to pass App class into the ProjectorMixin function.

Example main.ts file


  import { ProjectorMixin } from '@dojo/widget-core/mixins/Projector';
  import App from './widgets/App';

  const Projector = ProjectorMixin(App);
  const projector = new Projector();

  projector.append();


vinay kumar

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

No comments: