doc:webui_guide
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
doc:webui_guide [2015/12/27 23:01] – admin | doc:webui_guide [2017/02/04 18:28] (current) – [The Communication Handshake] admin | ||
---|---|---|---|
Line 11: | Line 11: | ||
- | When a browser connects to the root URL (simply means "/" | + | When a browser connects to the root URL (simply means "/" |
==== The Themes, the Libs and the Default ==== | ==== 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 " | 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 a parameter to any URL send to OOBD as '' | + | A new theme is selected by adding a parameter to any URL send to OOBD as '' |
OOBD maps the URLs to the '' | OOBD maps the URLs to the '' | ||
* everything which starts with "/ | * everything which starts with "/ | ||
- | * everything which starts with "/ | + | * everything which starts with "/ |
+ | * To use a fixed theme, use "/ | ||
===== Structure of a script package ===== | ===== Structure of a script package ===== | ||
- | The invidual script application can exist in three different versions: | + | The invidual script application can exist in for different versions: |
- | | + | |
- | | + | |
- | | + | |
- | ==== the .lbc file ==== | + | ==== the .lbc and .pgp file ==== |
- | when a lbc file is choosen, the browser loads the default file, referenced as ''/ | + | when a lbc or .pgp file is choosen, the browser loads the default file, referenced as ''/ |
==== the .epa directory or file ==== | ==== the .epa directory or file ==== | ||
Line 37: | Line 38: | ||
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. | 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 ==== | ==== the manifest file ==== | ||
+ | Such a package can contain a lot of needfull information or data, like screenshots, | ||
+ | |||
+ | This file is formated as JSON string. | ||
+ | |||
+ | { " | ||
+ | |||
+ | The parameters used by OOBD to start a script and to send back a adjacend web page are actual | ||
+ | |||
+ | ^ 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]; | ||
+ | } | ||
+ | </ | ||
+ | ---- | ||
- | The capability of using a web browser as a graphical frontend to OOBD opens a endless field of possibilies of how the interface can look like and how it acts. To not having all these different ways interfearing which each other, these rules should be followed. | ||
===== Folder Structure ===== | ===== Folder Structure ===== | ||
Line 49: | 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 '' |
Line 96: | 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.1451253667.txt.gz · Last modified: 2015/12/27 23:01 by admin