OpenUI5 (SAPUI5) js框架簡(jiǎn)單介紹

相關(guān)資料

官方網(wǎng)站：http://sap.github.io/openui5/

依賴包：https://openui5.hana.ondemand.com/downloads/openui5-runtime-1.16.8-SNAPSHOT.zip

開(kāi)發(fā)SDK包：https://openui5.hana.ondemand.com/downloads/openui5-sdk-1.16.8-SNAPSHOT.zip

插件地址：https://tools.hana.ondemand.com/juno/

基本介紹

什么是SAPUI5(OpenUI5)

      SAPUI5又名OpenUI5，是SAP旗下的一個(gè)js前端框架，現(xiàn)在統(tǒng)一叫OpenUI5，因此以下的文檔內(nèi)容也將用OpenUI5統(tǒng)一為該框架名稱。

OpenUI5在Eclipse上的開(kāi)發(fā)

SAP推薦在eclipse上進(jìn)行OpenUI5的開(kāi)發(fā)，所以也直接提供了eclipse插件進(jìn)行相關(guān)支持。在開(kāi)發(fā)過(guò)程中可以首選eclipse作為開(kāi)發(fā)工具。

框架的搭建

      OpenUI5的搭建和其他的js框架類似，沒(méi)有太大的區(qū)別，具體可以參考官方的Demo。在此要注意的是，OpenUI5的設(shè)計(jì)模式是MV*，而且OpenUI5已經(jīng)自己做好了MV*了，所以十分方便。

(備注：【MV*】這里可以說(shuō)MVC也可以說(shuō)MVP這看個(gè)人理解，不需要過(guò)多糾結(jié))

OpenUI5的MV*結(jié)構(gòu)有點(diǎn)特殊，他是通過(guò)文件名稱進(jìn)行定義的，這不僅使文件的命名強(qiáng)制性的規(guī)范了，而且也弱化了文件的目錄結(jié)構(gòu)，讓整個(gè)項(xiàng)目一目了然。

具體如下：

OpenUI5在項(xiàng)目開(kāi)始時(shí)引用框架js是需要注意的，因?yàn)樗_定了你需要什么樣的框架包的支持。

<script  id="sap-ui-bootstrap"  src="resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal"  data-sap-ui-libs="sap.ui.commons">
</script>

上面的這段代碼是官方要求的引入框架js的結(jié)構(gòu)代碼，但是我們必須了解其中的每個(gè)參數(shù)的意思，因?yàn)樗麑?duì)項(xiàng)目將要加載什么文件，至關(guān)重要。

id="sap-ui-bootstrap"---指定了頁(yè)面ui的類型

src="resources/sap-ui-core.js"---指定了核心框架包的位置

data-sap-ui-theme="sap_bluecrystal" ---頁(yè)面主題樣式定義

data-sap-ui-libs="sap.ui.commons"---指定核心包下的內(nèi)容塊，為什么這樣說(shuō)呢，因?yàn)閟ap倡導(dǎo)的是一套代碼支持所有平臺(tái)，所有他的包也被分為了PC端的sap.ui和移動(dòng)端的sap.m。這是對(duì)需要的組件包的支持而指定的，這里一般引入基本核心包就夠了，但是如果需要其他的OpenUI5包支持，則用逗號(hào)隔開(kāi)一一添加，在添加過(guò)程中最好按照包的層級(jí)添加(雖然在開(kāi)發(fā)中沒(méi)有太大的影響)。

   那么從上面的寫(xiě)法中我們就能看出來(lái)，我們加載的只是基本的sap.ui.commons下的內(nèi)容，所以如果我們用到了如sap.ui.table下的就找不到了。(具體的看包目錄就懂了)