[1]: System Structure

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 itself

There 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

Directories

There are four used root directories:

Extensions and Plugins (PHP)

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

[2]: Configuration

A huge problem with jQuery-Desktop is the global configuration, because there are two different kinds of used Backends:

Variables (both PHP and JavaScript)

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');

[3]: Building App(lication)s (PHP,HTML,JS,CSS)

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.