last step. we got a new project, it is a initial project, first of all, we will know the meaning of each folder. as follows:

we need to run this project, before this, we need to install related dependencies.
so npm install. now get the node_modules, then, grunt serve
then the project runs on port 9555.

webapp is default folder, after the folder is expanded, got some files. now
step by step and one by one;
1: XML Views (webapp/view/Main.view.xml)
acturelly,openui5 supports multiple view types (XML HTML Javascript) we choose XML as project. the most readable code and will force us to to separate the view declaration from the controller logic.
OK, the root node of the XML structure is the view. here. we reference the default namespace sap.m where the majority of our UI assets are located, we define an additional sap.ui.core.mvc namespace width alias mvc, where the openui5 views and other Model-View-Controller(mvc) assets are located. (openui5支持多种形式的视图。我们大多都选xml。逻辑分离，一些命名空间， 如sap.m, 主要是UI文件所在)
ok， do something width components;

if you want to add new xml, just like this:
so, we know that
1:view name are capitalized
2:all views are stored in the view folder
3: name of XML view always end with .view.xml

2: Controller (webapp/controller/Main.controller.js)

Look at the code

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";

    return Controller.extend("blog.controller.Main", {
        onInit: function(oEvent){
            console.log("init success");
        }
    });
});

!!!
we noticed that controllerName of View

<mvc:View
        controllerName="blog.controller.Main"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns:mvc="sap.ui.core.mvc"
        displayBlock="true"
        xmlns="sap.m">
    <App>
        <pages>
            <Page title="{i18n>title}" class="sapUiContentPadding">
                <content>
                    <Text text="this is text" />
                    <Button text="this is button"/>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

Blog is your project name when you created. any name is ok. blog is my new project name.
Main is controller name. look at this image

So. view name is same as controller name. Second is controller names always end with .controller.js
this is important, very important.

OK next step. we can bind the event in the views.

<mvc:View
        controllerName="blog.controller.Main"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns:mvc="sap.ui.core.mvc"
        displayBlock="true"
        xmlns="sap.m">
    <App>
        <pages>
            <Page title="{i18n>title}" class="sapUiContentPadding">
                <content>
                    <Text text="this is text" />
                    <Button press=".onPressButton"
                            text="this is button"/>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>


sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";

    return Controller.extend("blog.controller.Main", {
        onInit: function(oEvent){
            console.log("init success");
        },
        onPressButton: function () {
            alert("click event");
        }
    });
});

the button triggers the .onPressButton event handler function when being pressed.

OK. the next step will continue