...

Each route defines a View to render when the route is matched. As explained in the PlatformUI technical introduction, this kind of view is called a Main View. As Like any view, it can have an arbitrary number of sub-views.

A View is responsible for generating the User Interface and to handle handling the user input (click, keyboard, drag and drop, etc...). In its lifecycle, a view first receives a set of parameters, then it is rendered and added to DOM.

...

Our basic view will extend the PlatformUI basic view which is available in the ez-view module. As a result, ez-view has to be added in the module requirements.

...

This code creates the Y.eZConf.ListView by extending Y.eZ.View. The newly created view component has a custom render method. As its name suggests, this method is called when the view needs to be rendered. For now, we are directly manipulating the DOM. this.get('container') in a View allows you to retrieve the container DOM node, it's actually a Y.Node instance that is automatically created and added to the page when the View is needed in the application.

At this point, if you open/refresh PlatformUI in your browser, nothing has will have really change changed, because the newly added View is not used anywhere yet.

Using it as a Main View

Now , that we have a View, it's time to change the route configuration added in the previous step so that our custom route uses it. To do that, we'll have to change the application plugin to register the new view as a main view in the application and then to define the custom route with that view. Since , we want to use the new view in the plugin, the ezconf-listview module becomes a dependency of the plugin module. The plugin module declaration becomes:

...

The templates are made available in the application by defining them as modules in yui.yml. The template modules are a bit special though. To be recognized as a template and correctly handled by the application, a template module as has a type property that should be set to template. Also, to get everything ready automatically, the module name should follow a naming convention. The module name should consist of the lowercase View internal name (the first Y.Base.create parameter) where the template is supposed to be used followed by the suffix -ez-template. In our case, the internal name of Y.eZConf.ListView is ezconfListView, so if we want to use a template in this view, the module for this template should be ezconflistview-ez-template. As a result, the module declaration for the template module will be:

...

In yui.yml, we also have to change the ezconf-listview module to now require ez-templatebasedview instead of ez-view so that Y.eZConf.ListView can inherit from Y.eZ.TemplateBasedView instead of Y.eZ.View. Once that in place, the renderic rendering logic can be changed to use the template:

YUI.add('ezconf-listview', function (Y) {
    Y.namespace('eZConf');

    Y.eZConf.ListView = Y.Base.create('ezconfListView', Y.eZ.TemplateBasedView, [], { // Y.eZ.TemplateBasedView now!
        initializer: function () {
            console.log("Hey, I'm the list view");
        },

        render: function () {
            // when extending Y.eZ.TemplateBasedView
            // this.template is the result of the template
            // compilation, it's a function. You can pass an object
            // in parameters and each property will be available in the template
            // as a variable named after the property.
            this.get('container').setHTML(
                this.template({
                    "name": "listView"
                })
            );
            this.get('container').setStyles({
                background: '#fff',
                fontSize: '200%',
            });
            return this;
        },
    });
});

And the last part of the chain is the Handlebars template file itself:

...

...

system:
    default:
        css:
            files:
                - %extending_platformui.css_dir%/views/list.css

After this being is done, a custom view is now used when reaching /ez#/ezconf/list and the UI is now styled with a custom external stylesheet.