doc:webui_guide
Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
doc:webui_guide [2015/07/12 18:44] – created admin | doc:webui_guide [2017/02/04 18:28] (current) – [The Communication Handshake] admin | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== OOBD Web UI Design | + | ====== OOBD Web UI Design |
+ | This guideline describes, what you need to know to create a package containing lua scipts and webpages ready to run in OOBD | ||
- | The capability | + | ===== The Basics ===== |
+ | |||
+ | The webUI of OOBD consists of three elements: | ||
+ | * A HTTP server | ||
+ | * A directory, where the scipts are stored in | ||
+ | * An optional, but highly recommended directory, which serves as common pool for all these javascript libraries, which are likely to be used for the script webpages. | ||
+ | |||
+ | |||
+ | When a browser | ||
+ | |||
+ | ==== The Themes, the Libs and the Default ==== | ||
+ | In the OOBD settings a library folder can be configured. In there all global web files can be stored. It contains two folders: libs and theme (more details see below). The theme folder can contain subfolders, one for each theme. It also contains a folder named " | ||
+ | |||
+ | A new theme is selected by adding | ||
+ | |||
+ | OOBD maps the URLs to the '' | ||
+ | * everything which starts with "/ | ||
+ | * everything which starts with "/ | ||
+ | * To use a fixed theme, use "/ | ||
+ | |||
+ | |||
+ | ===== Structure | ||
+ | |||
+ | The invidual script application can exist in for different versions: | ||
+ | - as well known compiled lua file with the extension .lbc or .pgp | ||
+ | - as directory with the suffix .epa | ||
+ | - as package file, also with the suffix .epa | ||
+ | |||
+ | ==== the .lbc and .pgp file ==== | ||
+ | when a lbc or .pgp file is choosen, the browser loads the default file, referenced as ''/ | ||
+ | |||
+ | ==== the .epa directory or file ==== | ||
+ | Both directory and file are equal regarding their content, but while the directory is mainly for the development work, the package file is for the final distribution, | ||
+ | |||
+ | As soon as such an epa package is selected, it acts as root directory for all following page calls, just except the a.m. directory mapping. | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ==== the manifest file ==== | ||
+ | Such a package | ||
+ | |||
+ | This file is formated as JSON string. | ||
+ | |||
+ | { " | ||
+ | |||
+ | The parameters used by OOBD to start a script | ||
+ | |||
+ | ^ Parameter | ||
+ | | script | ||
+ | | startpage | ||
+ | |||
+ | where the '' | ||
+ | |||
+ | As this manifest file can also be loaded as '' | ||
+ | |||
+ | |||
+ | ==== " | ||
+ | |||
+ | Whenever the root page ("/" | ||
+ | |||
+ | This changes as soon as a packet is adressed not by it's filename, but by his id (which is, in fact, the base64 encoded format of the filename). When this happens, that package becomes the new virtual root directory of the webserver until the pure root page ("/" | ||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | ===== The Communication Handshake ===== | ||
+ | |||
+ | The diagram below illustrates the handshake between browser and OOBD (only god knows what happens to the renderer...) | ||
+ | |||
+ | |||
+ | It shows the fundamental principle: | ||
+ | - the browser loads **one** single html page. | ||
+ | - this page opens a websocket to OOBD | ||
+ | - this websocket triggers the execution of a **single** script | ||
+ | - Every action needs to happen within this single page, as changing to another page means the loss of the websocket connection, which terminates the script execution | ||
+ | |||
+ | |||
+ | < | ||
+ | digraph G { | ||
+ | rankdir=TB; | ||
+ | |||
+ | |||
+ | subgraph cluster_0 { | ||
+ | style=filled; | ||
+ | color=lightgrey; | ||
+ | node [style=filled, | ||
+ | label = " | ||
+ | |||
+ | b1[fontsize=11, | ||
+ | b2[fontsize=11, | ||
+ | |||
+ | b3[fontsize=11, | ||
+ | |||
+ | |||
+ | b4[fontsize=11, | ||
+ | b5[fontsize=11, | ||
+ | b6[fontsize=11, | ||
+ | b7[fontsize=11, | ||
+ | b8[fontsize=11, | ||
+ | |||
+ | |||
+ | b2 -> b3 ; | ||
+ | b4 -> b5 -> b6 -> b7 -> b8; | ||
+ | |||
+ | } | ||
+ | |||
+ | subgraph cluster_1 { | ||
+ | node [style=filled]; | ||
+ | label = " | ||
+ | color=green | ||
+ | |||
+ | o1[fontsize=11, | ||
+ | |||
+ | o2[fontsize=11, | ||
+ | o3[fontsize=11, | ||
+ | o4[fontsize=11, | ||
+ | o5[fontsize=11, | ||
+ | o6[fontsize=11, | ||
+ | o7[fontsize=11, | ||
+ | o8[fontsize=11, | ||
+ | |||
+ | o2 -> o3; | ||
+ | o3 -> o4 -> o5 -> o6 -> o7 ->o8 ; | ||
+ | |||
+ | } | ||
+ | start -> b1; | ||
+ | |||
+ | |||
+ | b1 -> o1 -> b2; | ||
+ | b3 -> o2 ; | ||
+ | |||
+ | o4 -> b4 ; | ||
+ | b5 -> o5 ; | ||
+ | |||
+ | b8 -> o8 ; | ||
+ | |||
+ | o8 -> end | ||
+ | |||
+ | start [shape=Mdiamond]; | ||
+ | end [shape=Msquare]; | ||
+ | |||
+ | |||
+ | } | ||
+ | </ | ||
+ | ---- | ||
Line 9: | Line 157: | ||
< | < | ||
- | +(webroot) | + | +(The Library Directory, configured in OOBD) |
- | | +---lib | + | +---libs |
- | | | | + | | |
- | | | | + | | |
- | | | +--- the lib files | + | | +--- the lib files |
- | | +---theme | + | +---theme |
- | | +---name | + | |
- | | | +---version | + | |
- | | | + | |
- | | | + | |
- | +---yourapp | + | | |
- | +---MANIFEST | + | |
- | +---secret | + | +---default |
+ | +--- the default theme files | ||
+ | |||
+ | +(The Library Directory, configured in OOBD) | ||
+ | +---yourapp.lbc (a normal lbc file) | ||
+ | | | ||
+ | +---yourapp.epa (zipped directory) | ||
+ | | ||
+ | +---yourapp.epa | ||
+ | | ||
+---yourcontent | +---yourcontent | ||
+ | +---secret (PGP protected data, not implemented yet) | ||
+ | +---yoursecretcontent | ||
</ | </ | ||
+ | ---- | ||
===== The meaning of the folder structure ===== | ===== The meaning of the folder structure ===== | ||
- | OOBD web sites will be distributed as container files. To not generate overhead by packing the common content in each single container, the folders are packed separately | + | OOBD web applications |
- | === lib ==== | + | ==== libs ==== |
The todays webkits like jQuery, Dojo etc. consist of huge numbers of files. To not have them packed multiple time in each container, they are stored separately. | The todays webkits like jQuery, Dojo etc. consist of huge numbers of files. To not have them packed multiple time in each container, they are stored separately. | ||
The '' | The '' | ||
- | The lib content should be 1:1 to the original without any own modifications and tweaks | + | The libs content should be 1:1 to the original without any own modifications and tweaks |
- | === theme ==== | + | ==== theme ==== |
Modern HML designs allow a common look & feel, controlled by css, a common set of icons etc. By using themes you can easy design and maintaing a lot of app designs without updating them all individually. | Modern HML designs allow a common look & feel, controlled by css, a common set of icons etc. By using themes you can easy design and maintaing a lot of app designs without updating them all individually. | ||
- | The '' | + | The '' |
The theme content should be 1:1 to the original without any own modifications and tweaks | The theme content should be 1:1 to the original without any own modifications and tweaks | ||
- | The '' | + | The '' |
- | === yourapp ==== | + | ==== yourapp ==== |
in here you store everything, which is unique to your app, means not a common theme or a webkit library | in here you store everything, which is unique to your app, means not a common theme or a webkit library | ||
- | === secret ==== | + | ==== secret ==== |
Afer building it, your app container will need to contain at least some content which is public readable, like it's full name, description, | Afer building it, your app container will need to contain at least some content which is public readable, like it's full name, description, | ||
Line 56: | Line 215: | ||
- | |||
- | ===== How to use generated tables in WebUI ===== | ||
- | |||
- | OOBD supplies tools to automatic translate diagnostic specifications into OOBD syntax. It would be quite anouing when these imports would have a fixed design and view. To avoid these, the process shall be as follows: | ||
- | * the translation shall only transfer the data which is mandatory to supply the web elements. The output shall be pure xml, containing a xlst style sheet directive in it's header. | ||
- | * the xslt style sheet shall just contain the logical layout and support logic (like some javascript magic), but no design elements. For the design, the xslt file shall reference to an theme instead. Using '' | ||
- | |||
- | |||
- | |||
- | ===== Theme Structure ===== | ||
- | |||
- | FIXME to be defined :-) | ||
- | |||
- | ===== The MANIFEST ===== | ||
- | |||
- | FIXME to be defined :-) |
doc/webui_guide.txt · Last modified: 2017/02/04 18:28 by admin