正文

open(sap)ui5学习入门系列之一：扫盲与热身（下）

前端客  前端客  2022-08-21  771

关键词：

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库来开发一个典型的移动端网页应用，这个应用由两个页面组成，两个页面可以自由切换，第二页面有一个按钮，点击可以显示当前客户端的设备信息。

直接上代码如下：

<!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。

gradle学习系列之一——gradle快速入门

Gradle学习系列之一——Gradle快速入门这是一个关于Gradle的学习系列，其中包含以下文章：Gradle快速入门创建Task的多种方法读懂Gradle语法增量式构建自定义Property使用javaPlugin依赖管理构建多个Project自定义Task类型自定义Plugin 　... 查看详情

java学习——入门扫盲篇

概要近期这几天開始进入java的学习，接触到了好多不是非常了解的概念，像JDK、JRE、JVM、GC等等这些，放到这里来进行下扫盲。 java java是一种面向对象程序设计语言和java平台的总称，即java包含java语言和java... 查看详情

ui5-学习篇-1-开发工具及环境搭建(代码片段)

最近研究SAP-UI5好几个月了，将相关学习经历及问题点做个记录。1.先了解学习资料相关站点　　SAP官网：https://www.sap.com/china/index.html　　SAP开发工具：https://tools.hana.ondemand.com/#sapui5　　UI5 Documentation：https://openui5.hana.ondemand.co... 查看详情

大数据学习系列之一-----hadoop环境搭建(单机)

一、环境选择1，服务器选择阿里云服务器:入门型(按量付费)操作系统:linuxCentOS6.8Cpu：1核内存：1G硬盘:40Gip:39.108.77.2502，配置选择JDK:1.8（jdk-8u144-linux-x64.tar.gz）Hadoop:2.8.2(hadoop-2.8.2.tar.gz)3，下载地址官网地址:JDK：http://www.oracle.com/te... 查看详情

老猿学5g扫盲贴：3gpp规范文档命名规则及同系列文档阅读指南

...栏：使用PyQt开发图形界面Python应用专栏：PyQt入门学习老猿Python博文目录老猿学5G博文目录在学习5G规范过程中，有些内容把握不定的时候，有时候需要阅读规范文档，但当打开3GPP网站关于发布版本的文档目录... 查看详情

前端算法入门：刷算法题常用的js基础扫盲

参考技术A此篇属于前端算法入门系列的第一篇，主要介绍常用的数组方法、字符串方法、遍历方法、高阶函数、正则表达式以及相关数学知识。在尾部追加，类似于压栈，原数组会变。在尾部弹出，类似于出栈，原数组会变。... 查看详情

abp架构学习系列

ABP实践学习系列ABPZero本地化语言的初始化和扩展ABPZero导航菜单之角色权限 ABPZero示例项目问题总结 ABP后台服务之作业调度Quartz.NET ABP架构学习系列ABP架构学习系列一整体项目结构及目录ABP架构学习系列二：ABP中配置... 查看详情

ui5-文档-2-开发环境

...维护条件。根据您的用例，您可以选择以下开发环境之一。SAPWebIDE:https://sapui5.hana.ondemand.com/#/topi 查看详情

使用cocos2d的从零基础开始你的游戏生涯(系列之一基础简单objective-c入门)

...手机游戏，对游戏的开发深深的入迷了，于是在学习Cocos2d一段时间后，做了几个小Game，把自己对游戏的开发总结出一个系列的教程，希望对有想学习Cocos2d的朋友们有所帮助。本人菜鸟，教程简单的给大家... 查看详情

进收藏夹吃灰系列——java基础快速扫盲(代码片段)

...需要用的时候再翻出来。（手动狗头）本文主要包括Java入门的一些知识，包括JDK环境安装，常用语法以及面向对象编程等。【目录结构】目录Java基础1，Java语言的特点2，配置开发环境3，经典HelloWorld3.1命令行运行Java程序3.2使用I... 查看详情

开发解惑系列之一:如何判断当前学习到什么程度，需要适可而止吗，好痛苦

最近发现很多年轻小伙伴想知道如何看待自己对学习一门新技术的学习程度和对技术的掌握程度，学一门新的技术的时候：如何判断当前学习到什么程度了，是入门，熟悉，精通？如何判断我当前这个节点... 查看详情

报表与打印学习总目录

以前写了一些关于报表的和打印类的文章，包括一些转载的，这里做下总结一、RDLC系列RDLC系列之一简介和入门RDLC系列之二子报表RDLC系列之三图片显示RDLC系列之四常见错误RDLC系列之五初试XAMLRDLC系列之六打印纸张的大小（未解... 查看详情

从零开始系列-caffe从入门到精通之一环境搭建

先介绍下电脑软硬件情况吧：处理器：Intel?Core?i5-2450MCPU@2.50GHz×4内存：4G操作系统：UbuntuKylin(优麒麟)16.04LTS64位下面就是详细的安装过程（使用CPU，不使用GPU）：点击这里查看原文。第一步：sudoapt-getinstalllibprotobuf-devlibleveldb-... 查看详情

SAP UI5 + Yarn = 不运行

】SAPUI5+Yarn=不运行【英文标题】：SAPUI5+Yarn=doesnotrun【发布时间】：2020-02-2108:15:27【问题描述】：信息：NPM也有同样的问题我想创建一个UI5项目，但UI5应该使用NPM或Yarn导入。我从演练第12步下载了示例：https://sapui5.hana.ondemand.com/#/... 查看详情

css学习之一——css基础入门

一、css写法内联：在dom标签上的style属性中直接书写。外联：在css文件中书写，通过link引入。页内：在style标签中书写。二、选择器1.分类标签/元素选择器：body{};p{};类选择器：.style1{};.style2{}id选择器：#id1{};#id2{}通配符选择器：*... 查看详情

opencv学习-入门系列汇总

reference：OpenCV学习之路（附加资料分享）opencv学习-环境配置与搭建opencv学习-图像对象的创建与赋值opencv学习-读取图像、创建窗口、显示图像、色彩空间转换、保存图像openCV学习-获取图像的尺寸和通道数opencv学习-图... 查看详情

supermapiobject入门开发系列之一组件式gis开发平台介绍

本文是一位好友“炀炀”授权给我来发表的，介绍都是他的研究成果，在此，非常感谢。平台介绍：SuperMapiObjectsJava/.NET是面向GIS应用系统开发者的组件式GIS开发平台，具有强大的地理数据管理、编辑、显示、分析等功能，... 查看详情

jmeter入门到放弃--扫盲

JMeter 优点：不用安装，能跨平台（不一定，得要JDK），方便小巧（见仁见智，还有更小巧的性能工具，一个小插曲哈哈哈），那么有些朋友会问，这么好的工具和LR对比，哪个更好。jmeter和LR对比，我个人还是觉得LR... 查看详情