openui5 SAPUI5 元件 專案搭建

2022-02-09 10:44:00 字數 4546 閱讀 6500

openui5官網:目前文件沒有中文版的,因此都是英語。

1

doctype html

>

2<

html

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

6<

title

>openui5

title

>78

<

script 9id

="sap-ui-bootstrap"

10src

="./resources/sap-ui-core.js"

11data-sap-ui-theme

="sap_belize"

12data-sap-ui-resourceroots

=''

15data-sap-ui-oninit

="module:sap/ui/core/componentsupport"

16data-sap-ui-compatversion

="edge"

17data-sap-ui-async

="true"

18data-sap-ui-frameoptions

="trusted"

>

19script

>

20<

script

>

21sap.ui.getcore().attachinit(

function

() 34

})35

}).placeat(

'content');

36})

37});

38script

>

3940

head

>

4142

<

body

>

43<

div

id='content'

>

div>

44body

>

4546

html

>

在這段**中,除了引入opeui元件外,還對目錄路徑進行了重新命名,也就是data-sap-ui-resourceroots,我指定了當前目錄為根路徑,方便以後引入元件使用。sap.ui.getcore().attachinit是在元件載入完成後會自動呼叫,並執行該函式下的**函式。如果不在這個函式下面建立元件,而是直接使用元件,會報錯說找不到元件,這時候加個定時器延時三秒執行就能找到了,這說明元件庫是非同步載入的,而attachinit是官網提供的方法,從官網demo中也可以找到。在這裡我建立乙個page元件,然後在page中直接建立了componentcontainer元件,設定了id和高度,然後呼叫placeat把元件新增進div中。其實這裡的page元件完全可以省略掉,就建立componentcontainer也沒問題。

到了這裡,專案也一樣跑不起來,這時候我們啟動本地服務開啟專案下的index.html會發現控制台有一大堆報錯:

很明顯,和官網demo比起來,我們專案顯的有些簡單了,只有乙個資源資料夾和html檔案,根據錯誤資訊看出,我們還差幾個檔案,現在我們把提示不存在的那幾個檔案在專案中建起來,於是目錄就變成了這樣:

這是時候重新整理頁面,仍然報錯:

剛才我們建立了乙個component的js檔案,這個檔案是每次啟動專案肯定會執行的,這個檔案是用於繼承openui5的uicomponent元件的,然後在component檔案下,呼叫父元件的initialize方法去初始化路由。所以component需要繼承uicomponent,在component中增加如下**:

1

sap.ui.define([

2 'sap/ui/core/uicomponent' //

引入openui5的uicomponent元件3],

4function

(uicomponent) ,

11//

該函式可以在元件初始化時自動呼叫

12 init: function

() 18

});19 });

加上之後,再次重新整理頁面,控制台繼續報錯:

提示缺少乙個manifest.json檔案,在上面有提到過路由,而路由的定義,就和這個缺少的檔案有關,所以這檔案極為重要,裡面包含了很多配置資訊,官網的demo中,manifest.json有些配置我們搭建簡單專案根本用不上,所以我對它的檔案進行了簡化,現在在專案根目錄下建立manifest.json檔案:

1,11

12 "routing": ,

2021 "routes": [

2227

],28

29 "targets": 34}

35}36}

37 }

在這個配置檔案中,我只保留了必須要的配置,

rootview:在該物件下指定專案的入口檢視

config:指定使用元件路由,視**件型別,是否非同步載入,檢視id。

routes:指定路由路徑,這裡設定為空,就相當於根目錄。路由名字和路由對應的目標檔案。

targets:這裡面指定路由目標檔案,我這裡指定了name,是因為routes下面的那個target屬性為name,這裡需要對應,否則找不到。

在這裡面還有個疑惑,在上面的rootview中,viewname屬性我們指定為test.home.view.home,這裡可看成是test/home/view/home,test就是在index.html檔案中自己設定根目錄路徑。專案執行順序會先到rootview裡面找到這些配置,這裡我們指定了這麼乙個路徑,那我們就需要在專案中增加乙個對應的檔案,否則會出問題。建立乙個home目錄:

因為這個元件是以mvc模式為主,所以建立的檔案也是根據mvc模式來的,但我這裡只建了vc而沒有m,因為目前只是簡單搭建專案,暫時不需要m,所以我給省略了。在view和controller下分別有home.view.xml檔案和home.controller.js檔案,這兩個檔案都不能夠為空,所以我們分別在兩個檔案中增加簡單的**讓專案執行起來:

home.controller.js

1

sap.ui.define([

2 "sap/ui/core/mvc/controller", //引入元件的controller控制器

3 ], function

(controller)

11});

1213 });

home.view.xml

1

<

mvc:view

2controllername

="test.home.controller.home"

3xmlns

="sap.m"

4xmlns:mvc

="sap.ui.core.mvc"

>

5<

id>

6<

text

text

='這裡是home頁面的text標籤'

>

text

>

7>

8mvc:view

>

然後我們再次重新整理頁面執行:

可以看到這句話是我們在xml中text標籤的那句話。控制台也沒有任何報錯,到這裡乙個簡單的openui5專案就算是搭建成功了。前面有提到openui5是以mvc模式為主,因此需要對mvc模式有一定的了解。

這個專案執行順序,專案啟動後進入到根目錄的index.html檔案,然後執行根目錄下的component.js檔案,在這個檔案中初始化路由,而路由的定義就是在manifest.json下的rootview中指定路徑的,然後會在manifest.json中找到routing,初始化相關配置,在通過routes找到對應的路由頁面進行渲染。執行過程大致如此。

OpenUI5 SAPUI5 js框架簡單介紹

官方 依賴包 開發sdk包 什麼是sapui5 openui5 sapui5 又名openui5,是sap旗下的乙個js前端框架,現在統一叫openui5,因此以下的文件內容也將用openui5統一為該框架名稱。openui5 在eclipse上的開發 sap推薦在eclipse上進行openui5...

OpenUI5 SAPUI5 js框架簡單介紹

相關資料 官方 依賴包 開發sdk包 什麼是sapui5 openui5 sapui5又名openui5,是sap旗下的乙個js前端框架,現在統一叫openui5,因此以下的文件內容也將用openui5統一為該框架名稱。openui5在eclipse上的開發 openui5的搭建和其他的js框架類似...

PyQt5元件讀取引數方法

1.qlineedit qlineedit.text 輸出str型別 2.qcheckbox qcheckbox.checkstate 狀態 選定 int qcheckbox.checkstate 2 未選定 int qcheckbox.checkstate 0 3.qcombobox qcombo...