HTML5开发移动web应用——SAP UI5篇(6)
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">··<span style="white-space:pre"> </span>在SAP UI5中。使用i18n文件的方式来解析变量。对于以后开发不同的语言包,也有相应不同的i18n文件。 我们先来大体看一下在SAPUI5中。i18n是怎样使用的。</span>
首先我们建立一个文件,文件名称为i18n.properties。
在当中编写例如以下内容:
showHelloButtonText=Say Hello
helloMsg=Hello {0}
这里事实上定义了几个变量或者方法的值。要调用他们,我们首先改动controller内容例如以下:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
"sap/ui/model/json/JSONModel",
"sap/ui/model/resource/ResourceModel"], function (Controller, MessageToast, JSONModel, ResourceModel) {
"use strict";
return Controller.extend("sap.ui.demo.wt.controller.App", {
onInit : function () {
var oData = {
recipient : {
name : "World"
}
};
var oModel = new JSONModel(oData);
this.getView().setModel(oModel);
var i18nModel = new ResourceModel({//引入i18n文件内容。还有一个model
bundleName: "sap.ui.demo.wt.i18n.i18n"//bundleName设定了该model的文件
});
this.getView().setModel(i18nModel, "i18n");//设定视图的i18nmodel为i18nModel
},
onShowHello : function () {
var oBundle = this.getView().getModel("i18n").getResourceBundle();/获取i18nmodel
var sRecipient = this.getView().getModel().getProperty("/recipient/name");
var sMsg = oBundle.getText("helloMsg", [sRecipient]);
MessageToast.show(sMsg);
}
});
});
逻辑没变,但我们注意代码中下面几个部分。要定义引用i18n文件,通过setModel来设定。设定的模型传进第一个參数为i18nModel,表示要设定的是i18n模型。后面传入详细的i18n文件,在上一行中定义了其路径。这些操做都在初始化函数中进行设定。
之后我们新定义了一个onShowHello函数,第一句代码获取了i18n模型。注意最重要的部分,定义了sMsg,setText传入的第一个參数为我们在i18n中定义的helloMsg,当中的{0}就用前面定义的sRecipient所取到的值。最后显示的结果就和我们之前同样了。
同一时候改动视图部分:
<mvc:View
controllerName="sap.ui.demo.wt.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Button
text="{i18n>showHelloButtonText}"
press="onShowHello"/>
<Input
value="{/recipient/name}"
description="Hello {/recipient/name}"
valueLiveUpdate="true"//动态更新
width="60%"/>
</mvc:View>
使用之前定义的showHelloButtonText,取出Say Hello的值显示在button上。
在Inputbutton中我们能够看到。其定义的value值,将用户输入的value传入{/recipient/name}。并在controller中取到该值。这就是使用i18n的大体流程。
HTML5开发移动web应用——SAP UI5篇(6)的更多相关文章
- HTML5开发移动web应用——SAP UI5篇(8)
本次对之前学习的SAP UI5框架知识进行简单小结.以及重点部分知识的梳理. 1.在UI5使用过程中,命名空间的概念非常重要. 2.一般的sap组件引用格式例如以下: sap.ui.define([ ...
- HTML5开发移动web应用——SAP UI5篇(7)
SAPUI5中支持利用Component对组件进行封装.想封装一个组件,Component的基本代码例如以下: sap.ui.define([ "sap/ui/core/UIComponen ...
- HTML5开发移动web应用——SAP UI5篇(9)
之前我们对于app的构建都是基于显示的.如今我们来格式化一下,引入很多其它的SAP UI5组件概念.这使得APP的一个界面更有层次性.更像是一个手机应用的界面,而且更好地使用SAP UI5中提供的功能 ...
- HTML5开发移动web应用——Sencha Touch篇(10)
我们把数据可视化出来,为的就是进行一些针对数据的操作. 这里介绍一下DataView的排序功能和搜索功能. 掌握这两个技能,能够让写出的数据界面内的数据能够依据要求进行排序,能够进行数据的搜索显示灯功 ...
- HTML5开发移动web应用——Sencha Touch篇(7)
Sencha Touch中的Ext.DomHelper组件能够方便的实现对元素的追加或重写操作 演示样例: launch:function(){ function appendDom(){ Ext.D ...
- HTML5开发移动web应用——Sencha Touch篇(8)
DataView是Sencha Touch中最重要的组件,用于数据的可视化.数据可视化的重要性不言而喻,能够讲不论什么数据以形象的方式展示给用户. 眼下,怎样更好地可视化是很多公司或框架都在追求的. ...
- 【翻译】HTML5开发——轻量级Web Database存储库html5sql.js
方式1: html5sql官方网址:http://html5sql.com/ 阅读之前,先看W3C关于WEB Database的一段话: Beware. This specification is n ...
- HTML5开发移动web应用—JQuery Mobile(1)
JQuery Mobile是一个简单易用的web移动app开发框架.使用它就像使用jQuery一样,引入必要的文件就可以. 最基础的jQuery Mobile文件的结构代码例如以下: <body ...
- HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚
导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...
随机推荐
- 使用JQuery MiniUI,json数据构建TreeGrid(树图)
index.html直接上代码. 需要引用MiniUI的boot.js <!DOCTYPE html> <html> <head> <meta charset ...
- 06JavaScript函数
JavaScript函数 3.1系统函数 3.1.1编码函数 功能:将字符串中非文字.数字字符(如&,%,#,^,空格符…)转成相对应的ASCII值. 语法:escape(字符串) 3.1.2 ...
- React开发实时聊天招聘工具 -第四章 Redux
复杂以后 setState 就不太方便了 所以使用Redux来管理 React只负责View. Store.State.Dispatch.Reducer reducer(state,action) { ...
- 诊断:CLSRSC-400: A system reboot is required to continue installing.
Linux7.5安装Grid Infrastructure 12.2.0.1时,在root.sh时会报错 2018/01/30 09:19:28 CLSRSC-330: Adding Clusterw ...
- MongoDB安装与配置启动
1.下载安装包.mongodb-linux-x86_64-rhel62-3.6.3.tgz 2.解压.修改名字. 3.修改配置文件: # mongodb.conf #where to loglogpa ...
- 爬虫项目 之(一) --- urllib 和 正则re
from urllib import request,parse from time import sleep import re # 1.[数据的获取] # 封装一个函数,用于将url转化成一个请求 ...
- js 循环 js创建数组
循环 for (var i = 0; i < myArray.length; i++) { console.log(myArray[i]); }; for (var arr in myArray ...
- (贪心) Vacations 求休息的最少天数
Description Vasya has n days of vacations! So he decided to improve his IT skills and do sport. Vasy ...
- UVa 514 铁轨
题意: #include <bits/stdc++.h> using namespace std; int main() { int n; ]; ; ) { ]) && n ...
- hihoCoder #1162 : 骨牌覆盖问题·三
#1162 : 骨牌覆盖问题·三 Time Limit:10000ms Case Time Limit:1000ms Memory Limit:256MB 描述 前两周里,我们讲解了2xN,3xN骨牌 ...