This chapter explains how the system is realized, where the files are located and how the user management (in later days) will be done.
The Webtop itselfThere is a predefined z-index to structurize the application's behaviour - e.g. when maximized or dragged..
Layer | Description | z-index |
---|---|---|
Layer 1 | wallpaper | 00 |
emblem | 01 | |
Layer 2 | desktop | 10 |
icons | 11 | |
dragged icons | 12 | |
desklets | 13 | |
quicklaunch bar | 13 | |
Layer 3 | windows | 20 |
windows (stack and dragged) | 23 | |
Layer 4 | tray_top and tray_bottom | 30 |
menu (in tray_top) | 31 | |
Layer 5 | notification | 100 |
There are four used root directories:
There's a possibility to create Plugins and Extensions for the PHP backend. You are able to enhance your own classes using the jQueryOS and jQueryTPL objects and extending them. They are located directly in the system root directory and will be loaded by the central index.php
A huge problem with jQuery-Desktop is the global configuration, because there are two different kinds of used Backends:
There's a jQueryDesktop function which returns the environment vars stored in cookie data, which is currently:
To get an environment variable directly from the jQueryDesktop, use the following function:
jQueryDesktop.getenv('user');
Each application has the possibility to get included fastly, but - before you go, you've got to provide a configuration file. This file is needed for creating and designing the the windows.
The windows are divided in three parts:Depending on the informations given, the jQueryTPL object will include files (.php) or simply implode them (.html). PHP files should simply return a value. That makes the usage of output buffering pretty easy, have a look at http://php.net/ob_start for further information.
Configuration (config.xml)Here's an example config.xml used with the demo application calc.
<?xml version="1.0" encoding="ISO-8859-1" ?> <network> <short>Calculator</short> <desc>Calculator</desc> <icon>{app_dir}/icon.png</icon> <window> <ajax>true</ajax> <main>{app_dir}/main.html</main> <aside>{app_dir}/aside.html</aside> <style>{app_dir}/style.css</style> <jscript>{app_dir}/jscript.js</jscript> </window> </network>
Variables
Nodes
Stylesheets: Use your app_id (e.g. #app_help for this window).
JavaScripts: Use a $.myapp.myfunc() to differ from other jQuery objects
As you could expect, each node will be parsed to an array via SimpleXML (which is only provided in PHP5). If the ajax node contains true, the whole application is loaded and parsed via jQuery. Each link provided in the main window - containing a href attribute - is replaced with the working values needed for the jQuery Desktop framework.
Example of providing links:The main window returns the following source code:
<a href="link/to/a/file.jpg">myFile</a>
Now the jQueryDesktop JavaScript object catches its contents and replaces them:
<a href="#tasks_myapp" rev="link/to/a/file.jpg">myFile</a>
Also, you are able to provide external links - have a look at the source code of the "My Computer" app.
Make sure to use the #task_id as href attribute, this is needed to provide a bus system for querying towards different windows.