OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(下)

1 UI5代码结构

上一次我们一起用了20秒的时间完成一个UI5版的Hello World。应用打开后有一个按钮,按钮的文字是Hello World,点击这个按钮之后,按钮会慢慢的消失掉(Fade out)。

那我们这次就来看一看为了实现这么一个简单的功能,OpenUI5框架至少需要提供哪些内容,或者说我们通过这么一个简单的应用来看一下一个最简单的UI5的应用程序的结构。

HTML部分应该不用多说,我们只看和UI5相关的代码,第一部分我们称为Bootstrap,包含以下代码段:

<!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
<script id="sap-ui-bootstrap"
    src="http://localhost:8080/openui5/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-libs="sap.ui.commons"></script>

这是一段嵌入的javascript代码,首先引入了UI5的核心运行时库sap-ui-core.js,接下来代码通过标签设定了两个属性,分别是主题: data-sap-ui-theme ,以及在应用中将会引用到的UI库: data-sap-ui-lib

接下来这一段我们称为Application,我们的应用的主体就在这里了,包含的是如下代码段:

  <!-- 2.) Create a UI5 button and place it onto the page -->
<script>
    // create the button instance
    Var myButton = new sap.ui.commons.Button("btn");

    // set properties, e.g. the text (there is also a shorter way of setting several properties)
    myButton.setText("Hello World!");

    // attach an action to the button‘s "press" event (use jQuery to fade out the button)
    myButton.attachPress(function(){$("#btn").fadeOut()});

    // place the button into the HTML element defined below
    myButton.placeAt("uiArea");

    // an alternative, more jQuery-like notation for the same is:
    /*
    $(function(){
        $("#uiArea").sapui("Button", "btn", {
            text:"Hello World!",
            press:function(){$("#btn").fadeOut();}
        });
     });
     */
 </script>

这段代码也很容易理解,首先创建一个button的对象,然后设置button对象显示的文本为"Hello World!",接着为这个按钮注册一个点击事件——按下去的时候按钮自己会消失,最后把这个按钮放在一个叫做uiArea的地方。 uiArea在哪里呢?接下来看第三段代码。

第三段代码就称之为UI-AREA:

<div id="uiArea"></div>

一个div,并将其id设置为我们之前所用到的uiArea。

简单吗?非常简单,第一部分Bootstrap引入运行环境以及一些常用配置文件,第二部分Application中加入HTML控件以及相应的后台数据和业务逻辑,并将其放入到第三部分UI-AREA中。

最后还是再看一下,有些啰嗦,熟悉UI5开发的可以直接无视,但是对于UI5开的新手来说,掌握了这个基本结构,就清楚了UI5程序的最基本的脉络。

Figure 1: UI5应用的结构

2 UI5 Mobile

UI5中最重要的库是sap.m,目前大多数SAP Fiori的应用都是基于这个库来开发,使用这个库可以让应用在不同的终端、平台之前无缝切换,响应式的设计可以让应用的UI在不同分辨率的设备上呈现出最适合的界面。

2.1 一个简单的例子

下面我们用sap.m库来开发一个典型的移动端网页应用,这个应用由两个页面组成,两个页面可以自由切换,第二页面有一个按钮,点击可以显示当前客户端的设备信息。

直接上代码如下:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

<!DOCTYPE HTML>

<html>

<head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

  <title>Mobile App Example</title>

  <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

  <script id="sap-ui-bootstrap"

          src="http://localhost:8080/openui5/resources/sap-ui-core.js"

          data-sap-ui-libs= "sap.m"

          data-sap-ui-theme= "sap_bluecrystal">

  </script>

  <script>

      // create a mobile App

      var app = new sap.m.App("myApp", {

        initialPage:"page1"});

      var page1 = new sap.m.Page("page1", {

        title: "Initial Page",

        content : new sap.m.Button({

          text : "Go to Page 2",

          press: function() {

            app.to("page2");

          }

        })

      });

      var page2 = new sap.m.Page("page2", {

        title: "Page 2",

        showNavButton: true,

        navButtonPress: function(){

          app.back();        

        }

      });

      var oTextarea = new sap.m.TextArea({

        value : "output area",

        width : "100%",

        rows : 12

      });

      var oButton = new sap.m.Button({

        text: "Click to get Device Information",

        enabled: true,

        press : function() {

          var output = "";

          for (property in sap.ui.Device.system.SYSTEMTYPE) {

            var systemtype = sap.ui.Device.system.SYSTEMTYPE[property];

            output += systemtype + ‘: ‘ + sap.ui.Device.system[systemtype] +‘;\n‘;

          }

          oTextarea.setValue(output);

        }                              

      });

      page2.addContent(oButton);

      page2.addContent(oTextarea);

      app.addPage(page1).addPage(page2); // add both pages to the App

      app.placeAt("content"); // place the App into the HTML document

    </script>

  </head>

  <body class="sapUiBody">

    <div id="content"></div>

  </body>

</html>

  

在tomcat下的webapps/ex1下新建一个文件叫做index2.html,把上面的代码贴入,保存后直接打开浏览器运行:

http://localhost:8080/ex1/index2.html

打开浏览器的开发者工具,以Chrome为例,按F12,选择Device为 Apple iPhone 6,并按F5刷新,你应该可以看到如下界面: 点击Go to Page2,切换到第二个页面,然后点击Click to get Device Information,可以得到当前设备的信息。

Figure 2: UI5 Mobile第一个例子

2.2 用到的控件

以上是一个很简单的例子,从中我们用到了这么几个控件:

2.2.1 sap.m.App

一般而言sap.m.App (以下简称App)是作为UI5移动应用的根节点元素(root element),所以在一个UI5 移动应用的一开始,我们就创建一个App对象,并把这个App置入UI Area中。

我们可以对这个控件做一些定制化,查看这个控件的API Reference,看到它有这么几个属性:

  • homeIcon
  • backgroundColor
  • backgroundImage
  • backgroundRepeat
  • backgroundOpacity

我们随便挑一个属性来看一下怎么用,就设置背景颜色吧,使用 backgroundColor

找到如下代码:

var app = new sap.m.App("myApp", {initialPage:"page1"});

改为:

var app = new sap.m.App("myApp", {
  backgroundColor: "blue",
  initialPage:"page1"});

重新打开应用的url,显示效果如下:

Figure 3: UI5 Mobile第一个例子-修改App背景颜色

好吧,很难看不是吗,所以尽量不要去修改背景、前景之类的,因为我们有指定主题,所以如果你需要定制不同的界面风格,尽量通过定制主题来实现,这个我们在之后会一起来探讨。

2.2.2 sap.m.Page

App是应用的主容器,但是一个应用会有多个页面,每一个页面就是一个Page。对一个Mobile来说,一个应用每次只能显示一个Page到当前屏幕。如果是一个Tablet或者Desktop,可以显示一个作为导航的 Page和一个详细信息的Page,比如典型的Master Detail应用。

在上面的例子中,我们创建了两个Page,并通过App的addPage方法把两个Page都添加到App中,并指定page1作为初始页面。

页面的导航或者说路由如何实现?可以看到UI5中很大程度上封装并简化了导航的操作,通过App的实例对象的to方法和back方法可以方便的在Page之间进行切换,当然前提是你已经把Page添加到App中。如果你想在运行时动态添加页面的话,在添加页面之前是不能通过to方法来导航的。当然了,因为这个例子只有两个页面,所以相对来说页面导航比较简单,如果是一个复杂的应用,页面深度在两层以上,简单的通过App的to和back就无法满足需求了,这就需要用到component和route来实现了,这里先简单的提一下,以后应该会有专题来介绍的。

总的来说,Page是一个移动应用显示屏幕的最基本(Fundamental)容器,屏幕上的其他控件都需要放在Page的content下,或者通过Page的AddContent方法来逐个加入。

2.2.3 sap.m.TextArea

这个不要多介绍了,多行文本框,可以显示多行文本,例子中展示了一个最基本的用法。

2.2.4 sap.m.Button

按钮,也无需多介绍,按钮作为网页中最常见的控件在UI5中有很多种样式和用法,我们这里用的是一个最基本的按钮控件。这里给按钮添加了一个方法,通过sap.ui.Device类让其可以显示当前设备的类型。

3 总结

UI5学习入门系列的第一篇:扫盲与热身到这里就结束了,我们从中了解了UI5的起源、和SAP Fiori的关系,并且做了两个小练习,一个用了UI5通用控件库,另一个用了UI5的移动库,代码本身的功能不重要,最主要的是对UI5的应用有一个直观的感受,大体知道UI5的应用的结构,在后续的文章中我会一一介绍一些重要的控件及其用法,最后我们通过一个综合的练习来结束入门系列,这是我目前的想法。

要说明的是,在以后的系列博文中我们基本上都会使用移动库 sap.m 来进行开发,这也是最符合SAP的Best Practice。

时间: 01-29

OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(下)的相关文章

OPEN(SAP) UI5 学习入门系列之三:MVC (下) - 视图与控制器

继续来学习UI5的MVC模型吧,这次我们来探讨视图与控制器. 1 视图 在MVC中,视图用来定义和渲染UI.在UI5中,视图的类型是可以自定义的,除了以下预定义的四种视图类型之外,你也可以定制自己的视图类型. 预定义的四种视图类型如下: XML view JSON view JS view HTML view 如果你想定义自己的视图类型,可以通过扩展 sap.ui.core.mvc.View 这个基类来实现. 1.1 视图的加载 视图可以通过异步(async)或者同步(sync)的方式加载,默认

OPEN(SAP) UI5 学习入门系列之四:更好的入门系列-官方Walkthrough

好久没有更新了,实在不知道应该写一些什么内容,因为作为入门系列,实际上应该更多的是操作而不是理论,而在UI5 SDK中的EXPLORER里面有着各种控件的用法,所以在这里也没有必要再来一遍,还是看官方的用法更地道. 看一下基于最新的库所推荐的项目结构. 另外,我觉得对于初学者来说是一个非常好的消息,就是UI5版本从1.28更新到1.30以及更高之后,Tutorial系列有了重大更新,之前的Get Started->Tutorials->Application Best Practice现在改为

OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(上)

什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念经常被混淆,而两者也确实有着非常紧密的关系. 用过SAP的同学们都对SAP的传统的界面(SAP GUI)表示"呵呵",其实传统的SAP GUI的界面功能还是很强大的,但是对于一个新用户来说,学会使用这套界面就需要花上一两 周的时间,所以SAP入门的第一步就是学会使用SAP GUI.此外,传统的SAP GUI只能在Windows和Mac上使用,对于移动端用户没有直接的解决方案,WEBGUI的体验也非常不

OPEN(SAP) UI5 学习入门系列之三:MVC (上) - 模型

这次我们来一起学习MVC,这个专题分为两个小节,本次主要是总览以及模型,下一次着重会介绍视图以及控制器,因为控制器其实没有太多可以讲的,所以和视图合并在一块. 1 Model View Controller (MVC)的基本概念 MVC,对于大多数人说,这是一个讲烂了的概念.不过,既然这是一个入门系列,还是要稍微讲一讲. M 代表Model - 模型 一般用来管理数据层,比如绑定后台数据. V 代表View - 视图 一般用来处理展示层,比如具体前端UI的展示. C 代表Controller -

OPEN(SAP) UI5 学习入门系列之二: 最佳实践练习之一

这篇博文难产了很久,原来是打算一周更新一篇的,上周原计划写MVC,但是写了一半,发现带入了太多的细节,不太符合这个入门系列的主题. 当我们学习一个新的技能的时候,如果一开始就面对大量的细节,很容易陷入其中而只见树木不见森林,所以最后我想我们还是先按照开发文档的节奏,一起来做UI5的最佳实践练习.在练习中对常用的一些控件以及API有一个直观的感受,如果需要细节的信息再去查文档. 这个最佳实践练习的子系列又会分为若干篇,但是不会完全按照Tutorial里面的章节来分,因为我希望每一篇都是都是一个完整

oracle学习入门系列之二 数据库基础知识

oracle学习入门系列之二 数据库基础知识 本篇蛤蟆要梳理下那些被淡忘的数据库基础知识,也许根本就没被人记住过.不管是哪种情况,该记住的必须记住,记不住就把他记下来吧. 首先问几个问题如下: 数据库基础知识是什么? 好吧,蛤蟆直接吐后而不亡,看目录开始吧. 本人邮箱:[email protected] 微信公众号:HopToad 欢迎各界交流 1      基本概念 概念就是概念,大伙对这些名词不要死磕,但是对定义一定要理解,理解方能领悟,领悟方能运用自如后创新. 1.1      数据 数据

oracle学习入门系列之一 数据库发展与历史

oracle学习入门系列之一 数据库发展与历史 这个oracle学习入门系列是根据本人工作中的一些笔记.项目进行回忆.整理.一方面是自己知识积累,便于技能提升:另一方面是和小伙伴们共进退互通有无,做一个爱分享的好公民.当然最后也夹杂着自己的一个小心愿,改掉自己重理不重文的臭毛病.想想读书考试的时候,当时如果语文英语多个几分,现在可能就不会落到如此...(咳咳~~),做IT也挺好.那就这样开场白切入吧. 既然学习数据库,就不能不抛几个问题了. 1.        为什么需要数据库,什么是数据库 2

oracle学习入门系列之六 模式

oracle学习入门系列之六 模式 上篇咱们学习记录了ORACLE数据库中的数据库结构.内存结构和进程等,篇幅 蛤蟆感觉偏多了.这次要休整下,每次笔记不宜太多,不然与书籍有何区别.我们要保证的是每次做记录都能所有收获所有提升. 上次中我们从总体上把握了下ORACLE系统结构,这次开始我们将涉及到ORACLE数据库的具体方方面面了.本次就从模式对象入手. 老规矩,先来两个问题: a)        什么事模式 b)       为什么需要 搞清楚这两个问题即可. 本人邮箱:[email prote

oracle学习入门系列之五 内存结构、数据库结构、进程

oracle学习入门系列之五 内存结构.数据库结构.进程 上篇蛤蟆简单描述了oracle公司的数据库产品.其他产品及oracle软件的一些特点.干货虽有但是真心是比较少的,这篇开始就是以干货为主,其中夹杂一些扯淡的事情了.蛤蟆一直也在想如何能生动的通过这干巴巴的文字来描述着世界级的软件,太理论大家都看不下去,太实践又缺乏深度.想想自己上大学那会,老师的讲课,无不枯燥乏味啊,满满的兴趣尽是消耗殆尽.所以不能仿效之,我们得走自己特色的路.以最易懂的形式.比喻等手段描述深奥的计算机知识.走起~ 开篇问