(五)写第一个Fiori应用

今天来写第一个Fiori应用。

先创建项目，名称First_Fiori_Demo。默认view选xml，名字App。（这些之前都说过了）项目结构参考上一篇，运行起来。看title。

首先来修改一下Title。

直接修改page标签的title属性，保存，刷新已运行的页面。

很简单就能设置title，但是实际项目中一般不会这样做。将view中的title恢复到原来的样子title="{i18n>title}"， 保存，刷新已运行的页面，页面又变回来了。

因为Title多是固定的，页面初始化后就确定了，不会随着页面数据变化而改变，所以把title一般都放到i18n文件。类似的这种不经常变化的标签文字，比如按钮文字，输入框的提示文字和placeholder等都会放到i18n文件中进行多语言处理。在目录下找到i18n文件打开，能看到三个默认的标签文字

把title更改为 title=First Fiori Demo，保存。页面的title由TitleFirst Fiori Demo了。保存，刷新已运行的页面，title变成First Fiori Demo。

现在看一下这个文字是怎么变化过来的。首先，页面上的数据都由和页面相关联的model提供。当从服务取回来数据，必须要经过sapui5封装成jsonmodel才能绑定到页面上取。封装过程后续会说，暂时知道这个事就行。来看一下webapp目录下的manifest.json 文件（就是一个比较长的json文件），61行的位置，是关于当前项目model的配置。

可以看到，此处声明了一个i18n model，model里的数据就是i18n文件下的内容了。"bundleName": "First_Fiori_Demo.i18n.i18n" 这句指定了路径是i18n文件夹下的i18n文件。此处可忽略，新建项目的时候系统默认配置好了，知道i18n model是从这里来的就可以了。

然后就是要把model里的东西绑定到页面上了。打开view文件，可以看到这里model绑定的方式很简单。title="{i18n>title}"，表示把i18n model下的title的值赋给page的title属性。i18n的绑定方式略微特殊，这是由于i18n是ResourceModel，而开发中多用的是jsonmodel。后面将会看到绑定的不同之处。

下面自己来弄个json model试试。给页面加一个label，并让label显示自定义的文字。走起！

打开App.controller文件，是这个样子滴。

添加下图代码。

解释下图中的代码，onInit方法，controller被加载后就会执行此方法中的代码。比如进入页面需要自动获取初始化数据，那就可以把获取初始化数据的代码放到这个方法里。我想加载页面之后就能看到想要的文字，所有代码就放到这个方法里，controller加载就执行。

onInit方法中一共三行，第一行，声明了一个叫labelModel的jsonModel。

第二行，给这个model设置一个对象{text: "Hello my first Fiori app"}，注意，给jsonModel设置数据对象用setData方法。

第三行，将这个model绑定到页面上。先获取到页面元素，this.getView().byId("test_label") 和JavaScript中document.getElementById等价。

再来给view添加一个label。直接将这句<Label id="test_label" text="{label>/text}"></Label>加入到content标签当中即可。注意此处的绑定，并不是直接{model>field}的方式，而是在field前加了/。这就是jsonModel绑定的不同之处。

好了，保存下修改过的文件，刷新已运行的页面。添加的标签出来了！只要修改赋给model的对象，页面的数据就会随之改变了。

大功告成，后续介绍一些简单的页面，敬请期待！