["Making the WebApp"]

Making the WebApp

ArOZ Online WebApps are similar to those used in other systems. It is made out of HTML5, CSS and Javascript. You can program the WebApps with tools that you have already familarized and program with your own fashion.

Here are a few tips for you while designing an ArOZ Online friendly WebApp.

Design with responsive, it need to fit on both mobile and desktop devices.
Use ao_module wrapper. Do not call directly to ArOZ System Script unless it is necessary.
Try not to depends on other module if possible. If a certain package is required, provide a GUI for the installation process.
Try not to use database and use file system if possible. If database is required, use portable database software like SQLite instead of non-portable one like MySQL.

Mobile Interface and UTF-8

ArOZ Online System needs to support languages from all over the world. Hence, all WebApps should be written in UTF-8 if possible. Moreover, to fit Mobile Interfaces on Andriod or iOS devices, some extra meta data should be added to the header as well.

<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"/>

You might want to change the initial-scale and maximum-scale value from the setting above.

Style Matching

ArOZ Online System default css is based on TocasUI. You can find the source of the css file at AOR/script/tocas/tocas.css. To include it inside your module, put the following line in the header section.

<link rel="stylesheet" href="../script/tocas/tocas.css">
<script src="../script/tocas/tocas.js"></script>

Additional Headers

Now, assume you have finished your WebApp module, you can now intergrate it to the ArOZ Online System. ArOZ Online System provide three kinds of interfaces for user to access the services on top of the host device.

Standard WebView (Grid Menu)
Progressive Web Apps (PWA Mode)
Virtual Desktop Mode (VDI Mode)

Standard WebView

The Standard WebView is the basic viewing method of ArOZ Online System. WebApp Modules are accessed through normal web browser. In this mode, WebApps are viewed just like a normal webpage with no ArOZ Online System additional features.

Progressive Web Apps

Progressive Web Apps are user experiences that have the reach of the web. Mobile users can add ArOZ Online Modules to their devices' local app menu just like a normal app. According to the guideline from Google, you can include a json file in the head section of your WebApp to support PWA mode. Here is an exmaple of that file.

<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

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.

No redirect to Grid Menu (aka No link in the VDI that can allow the module to be redirected to /AOR/index.php)
Design for Desktop, not Mobile. (Design it so it looks like a Desktop Application)
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

3.md 5.4 KB Историја Датотека