克米亚sap论坛,中国最好的sap论坛,sap系统,sap培训,kemiya,克米亚,sap账号,sap ides,sap mm,sap hana,sap fico,sap pp

 找回密码
 注册
查看: 161|回复: 4

(五)写第一个Fiori应用

[复制链接]
kmy 发表于 2018-12-7 09:39:47 | 显示全部楼层 |阅读模式
               

今天来写第一个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。直接将这句加入到content标签当中即可。注意此处的绑定,并不是直接{model>field}的方式,而是在field前加了/。这就是jsonModel绑定的不同之处。


好了,保存下修改过的文件,刷新已运行的页面。添加的标签出来了!只要修改赋给model的对象,页面的数据就会随之改变了。
大功告成,后续介绍一些简单的页面,敬请期待!
            

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
谢岐快 发表于 2019-1-10 19:04:29 | 显示全部楼层
sap tm
lidazhikemiya 发表于 2019-2-16 13:34:04 | 显示全部楼层
sap ps
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|克米亚sap论坛,sap账号,sap系统,sap ides,sap学习机,sap练习环境 ( 渝ICP备18002525号-5 )

GMT+8, 2019-3-19 04:29

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表