|
@@ -0,0 +1,129 @@
|
|
|
|
|
+["建立WebApp"]
|
|
|
|
|
+# 建立WebApp
|
|
|
|
|
+ArOZ Online WebApp 與其他系統所使用的程式非常類似。 他是由HTML5, CSS, Javascript所組成。你可以使用你所熟悉的軟件來撰寫WebApp，大部份的HTML IDE皆支援。
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+以下是部份有用的貼士，或許能幫助到閣下撰寫WebApp
|
|
|
|
|
+
|
|
|
|
|
+- 使用響應式設計，使其同時適用於桌面和流動裝置。
|
|
|
|
|
+- 使用 ao_module 包裝函式。若非必要不要直接呼叫其他函式。
|
|
|
|
|
+- 盡量不要包含其他模組。如有需要請提供圖形使用者介面。
|
|
|
|
|
+- 不應使用數據庫。如有需要應盡量使用使攜式數據庫，例如SQLite而非MySQL。
|
|
|
|
|
+
|
|
|
|
|
+### 流動裝置和 UTF-8
|
|
|
|
|
+ArOZ Online 需要支援所有國家或地區的語言，因此請使用UTF-8編碼格式。
|
|
|
|
|
+另外，為了令介面可於Android或iOS裝置上可以正確縮放，你需要添加元數據於標頭中。
|
|
|
|
|
+
|
|
|
|
|
+```
|
|
|
|
|
+<meta charset="UTF-8">
|
|
|
|
|
+<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
|
|
|
+<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=0.8, maximum-scale=0.8"/>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+*你可以修改 initial-scale 和 maximum-scale 的值以符合你的需求*
|
|
|
|
|
+
|
|
|
|
|
+### 系統樣式
|
|
|
|
|
+ArOZ Online 預設CSS是 TocasUI。你可以於```AOR/script/tocas/tocas.css```中找到。
|
|
|
|
|
+如要引用此css，請輸入以下代碼於```<head>```和```</head>```之間。
|
|
|
|
|
+
|
|
|
|
|
+```
|
|
|
|
|
+<link rel="stylesheet" href="../script/tocas/tocas.css">
|
|
|
|
|
+<script src="../script/tocas/tocas.js"></script>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+## 其他標頭
|
|
|
|
|
+現在假設你己完成你的WebApp開發工作。你可以將他整合至ArOZ Online系統。ArOZ Online提供3種類型的介面來存取WebApp。
|
|
|
|
|
+
|
|
|
|
|
+1. 標準WebView (網格選單)
|
|
|
|
|
+2. 漸進式網絡應用程式 (漸進式網絡應用程式模式)
|
|
|
|
|
+3. 虛擬桌面模式 (虛擬桌面模式)
|
|
|
|
|
+
|
|
|
|
|
+### 標準WebView
|
|
|
|
|
+標準WebView是最基本的顯示模式，基本上就和一般瀏覽一樣，並且沒有ArOZ 附加功能。
|
|
|
|
|
+
|
|
|
|
|
+### 漸進式網絡應用程式
|
|
|
|
|
+漸進式網絡應用程式可以令到用戶在使用WebApp時獲得和原生程式一樣的體驗。
|
|
|
|
|
+根據Google的教學，你需要加入一個json檔案至```<head>```和```</head>```之間以支援漸進式網絡應用程式功能。
|
|
|
|
|
+以下是代碼範例。
|
|
|
|
|
+* 還請注意iOS 未完整支援漸進式網絡應用程式 *
|
|
|
|
|
+
|
|
|
|
|
+```
|
|
|
|
|
+<link rel="manifest" href="manifest.json">
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+```
|
|
|
|
|
+{
|
|
|
|
|
+ "name": "ArOZ Audio",
|
|
|
|
|
+ "short_name": "AudioA",
|
|
|
|
|
+ "icons": [{
|
|
|
|
|
+ "src": "img/pwa/128.png",
|
|
|
|
|
+ "sizes": "128x128",
|
|
|
|
|
+ "type": "image/png"
|
|
|
|
|
+ },{
|
|
|
|
|
+ "src": "img/pwa/192.png",
|
|
|
|
|
+ "sizes": "192x192",
|
|
|
|
|
+ "type": "image/png"
|
|
|
|
|
+ }, {
|
|
|
|
|
+ "src": "img/pwa/256.png",
|
|
|
|
|
+ "sizes": "256x256",
|
|
|
|
|
+ "type": "image/png"
|
|
|
|
|
+ }, {
|
|
|
|
|
+ "src": "img/pwa/512.png",
|
|
|
|
|
+ "sizes": "512x512",
|
|
|
|
|
+ "type": "image/png"
|
|
|
|
|
+ }],
|
|
|
|
|
+ "start_url": "index.php?mode=pwa",
|
|
|
|
|
+ "display": "standalone",
|
|
|
|
|
+ "scope": "./",
|
|
|
|
|
+ "background_color": "#f7f7f7",
|
|
|
|
|
+ "theme_color": "#4286f4"
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+### 虛擬桌面模式
|
|
|
|
|
+Virtual Desktop Mode is one of the features that ArOZ Online Provides for the purpose of making life easier on Cloud base system by making the interface more human friendly.
|
|
|
|
|
+To support Virtual Desktop Mode, you would need to program the following items into your WebApp to make it VDI Mode Friendly.
|
|
|
|
|
+
|
|
|
|
|
+*You can choose not to implement the following items and your WebApp will still launch inside VDI mode as a normal iframe element*.
|
|
|
|
|
+
|
|
|
|
|
+#### Requirement for VDI Mode
|
|
|
|
|
+The basic requirement for VDI Mode is simple. We recommend developers to following the following guideline while developing their WebApps to enable better quality control over VDI supporting WebApps.
|
|
|
|
|
+
|
|
|
|
|
+1. No redirect to Grid Menu (aka No link in the VDI that can allow the module to be redirected to /AOR/index.php)
|
|
|
|
|
+2. Design for Desktop, not Mobile. (Design it so it looks like a Desktop Application)
|
|
|
|
|
+3. Do not try to interference other on-screen WebApps unless necessary. (Do not try to call functions on other iframe if possible)
|
|
|
|
|
+
|
|
|
|
|
+That is it! Follow the guideline above and your webApps will be ready to go!
|
|
|
|
|
+
|
|
|
|
|
+#### Introduction to ao_module wrapper
|
|
|
|
|
+ao_module wrapper is a system API wrapper for the functional bar interface. It includes shortcuts and functions that call to Float Window system, file explorer and more.
|
|
|
|
|
+The ao_module wrapper is located under ```script/ao_module.js```. You can include it with the following header.
|
|
|
|
|
+
|
|
|
|
|
+```
|
|
|
|
|
+<script src="../script/ao_module.js"></script>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+If you want to change the interface if the page is launched under VDI mode, you can call to the wrapper function as follow.
|
|
|
|
|
+
|
|
|
|
|
+```
|
|
|
|
|
+if (ao_module_virtualDesktop){
|
|
|
|
|
+ //Launching in VDI mode. Do something.
|
|
|
|
|
+}else{
|
|
|
|
|
+ //Not launching in VDI mode. Do something else.
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+This function can be used to hide menu bar items that is not suitable for VDI modes.
|
|
|
|
|
+See more about ao_module wrapper in the "API Wrapper - ao_module" page.
|
|
|
|
|
+
|
|
|
|
|
+#### Advanced System APIs
|
|
|
|
|
+You can access advance system API with the following function calls to the wrappers. Advance System APIs includes
|
|
|
|
|
+- Input Method Editor API
|
|
|
|
|
+- File System API
|
|
|
|
|
+- Default System Opener
|
|
|
|
|
+- AO-Codec (UMFilename conversion on Client Side)
|
|
|
|
|
+- FloatWindow Control API
|
|
|
|
|
+- Icon manager and utils
|
|
|
|
|
+
|
your username