HTML 5モバイルWebアプリケーション開発——SAP UI 5編(3)

1975 ワード

jquery Web httml 5 SAP sencha

私たちはSAP UI 5の勉強を系統的に始めました.SAP UI 5はMVCのインフラストラクチャモデルを採用している.
indexでhtmlでは、次のようにする必要があります.
①関連SAP UI 5ライブラリファイルの導入
②htmlタグ編集コンポーネントの盛放容器:

③関連するjsコードを作成する(これは後で個別のファイルに入れる)

sap.ui.getCore().attachInit(function () {
new sap.m.Text({
text : "Hello World"
}).placeAt("content");
});

ここではSAP UI 5のcontrolを用いてTextを定義した.Textコンポーネントはsap.mではsap.m.Textの方法で新しいTextを作成します.text属性によってその内容がHello Worldに設定され、これはSencha Touchの動作原理と符号化方式によく似ている.最後にplaceAtメソッドを使用してcontentに配置します.これが最も簡単なHello worldプログラムです.
しかし、SAP UI 5では、一般的なビューではjsコードに直接書くのではなくxmlのファイルが採用されています.これはSencha Touchとは大きな違いです.上記のコードを改造し,xmlファイルを用いて同じビューを表示する.
APPを作成する.view.xmlファイル、コードは次のとおりです.

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Text text="Hello World"/>
</mvc:View>

ここではviewを定義しており、Textタグや中身は後で読み取ることができます.XML言語については今後さらに学習・紹介を行います.
UI 5ではネーミングスペースのメカニズムを用いてビューをロードする.まずネーミングスペースsapを作成します.ui.demo.wt,index.htmlにロードされ、変更後のコードは以下の通りです.

<script
         id="sap-ui-bootstrap"
         src="/resources/sap-ui-core.js"
         data-sap-ui-theme="sap_bluecrystal"
         data-sap-ui-libs="sap.m"
         data-sap-ui-compatVersion="edge"
         data-sap-ui-preload="async"
         data-sap-ui-resourceroots='{
            "sap.ui.demo.wt": "./"
         }' >

最後のセクションでは、このネーミングスペースが導入され、jsコードでビューを参照できます.

sap.ui.getCore().attachInit(function () {
sap.ui.xmlview({
viewName: "sap.ui.demo.wt.view.App"
}).placeAt("content");
});

sapを通ります.ui.xmlviewはxmlファイルを参照し、viewNameはファイルのネーミングスペースとファイル名を持ち込み、xmlビューの参照を完了します.実行効果は以前と同じです.xml内のコードはUI 5によって自動的に必要なコードに編集され、正しく表示されます.

牛客練習試合23:AB C D

【C言語学習ノート】typedefの運用