学习小记

1. Introduction

This document is an introduction to the application development in eyeOS 2.0. It

is required to know PHP and Javascript to read this document.

1.1. What is eyeOS

From a technical point of view, eyeOS (http://www.eyeos.org) is a platform for

web applications, created with the idea to make easier the development of these

applications.

Nowadays there are many web related technologies such as PHP, XHTML,

CSS, Javascript, and it is required to know a lot of languages and understand a big

number of concepts to create web applications. Furthermore, each web browser

interprets this code in a different way and each version and PHP configuration behaves

slightly different from the rest.

EyeOS seeks to satisfy these problems and some others derived from the web

development, offering to the programmers a homogenous platform for their web

applications, using only PHP and Javascript delegating to the system the resources

management, the communication with the browser, the security, etc…

You must note that eyeOS uses qooxdoo (http://qooxdoo.org) as a graphic

library to create its graphic interfaces.

1.2. Basic structure of eyeOS

The platform is created over a client-server architecture, where eyeOS is the

server and the client usually is a web browser.

1.3. EyeOS directory structure

It is important to know how eyeOS is organized to be able to develop

applications. In eyeOS everything has a specific place to be located.

The eyeOS directory tree can be summarized as seen below:

eyeos/apps: Directory where the applications are located.

eyeos/extern: Files visible from outside, as CSS style sheets, images, etc…

eyeos/extras: Extra files.

eyeos/system: System directory, it contains services, libraries, the kernel and

global configurations.

eyeos/users: Users directory with all their documents and configuration files.

eyeos/workgroups: It contains the files referred to the user groups.

Client Server

EyeOS 2.0 Developer Manual 3

1.4. General configuration of eyeOS

One of the most important files that defines the operation of eyeOS is the

settings.php file, which is located on the eyeOS root, along with the index.php file. In

this file constants are defined and later used in all the eyeOS code. For example:

define(‘SQL_USERNAME’, ‘root’);

which defines the username for the database connection.

2. How an application works

2.1. Preparing the environment

All the projects must be developed in an adequate environment. If, for example

we are developing an application for GNU/Linux, it is better to use a GNU/Linux

environment, otherwise the task would become quite bothersome task. Let’s see which

requirements our environment should have:

• Subversion Client: we will need it to download the latest eyeOS code.

• Servidor Apache 2: the only server officially supported.

• PHP 5.2: the required version since eyeOS 2.0 and above.

• PHP Editor: any suitable text editor is valid.

Furthermore you must have activated the following PHP modules: curl, gd,

mbstring, mcrypt, mysql, mysqli, sqlite, pdo, pdo_mysql, pdo_sqlite, suport shared

memory (recommended), Json support activated (recommended).

We also recommend the use of Mozilla Firefox on its version 3.5. Moreover we

suggest the use of the Firebug extension that makes the application development

easier.

2.2. Application structure

An important aspect to know is the structure of an application. The directory tree

must be as shown below:

eyeos/apps/ Directory that contains the code of

each application

eyeos/apps/applicationname/ Main directory of the application

eyeos/apps/applicationname/applicationname.js GUI code of the application

eyeos/apps/applicationname/applicationname.php Code that receives the messages

generated on the GUI and emits the

results.

eyeos/apps/applicationname/info.xml XML that contains the information of

the application, it is not mandatory but

its existence is highly recommended.

eyeos/apps/applicationname/extern/ Contains the files of the application

that must be accessible from the

browser, such as the images, the

EyeOS 2.0 Developer Manual 4

css…

2.3. Initializing and ending of an application

When an application is initiated, the system takes care of loading the javascript

code contained in the file applicationname.js. If we want certain code to be executed

when the application starts or we want to load additional javascript code, we must

define the “_run” function on the applicationname.php file and insert the initialization

code on it.

When we close the application the system takes care of free the resources but

offers us the possibility of executing additional code. To do this, we must define the

function “close” in the file applicationname.php.

2.4. Messages

So, in a common way, an application contains two files: applicationname.php

and applicationname.js (besides info.xml). The javascript file is executed by the

browser when the application is initiated. This is the responsible of operating with the

graphic interface of the application and manages all its events.

To interact with the server, the javascript code use de call eyeos.callMessage

which send an asynchronous message and that have as parameters the name of the

message, all the specific parameters and the callback function that will be executed

when the response is returned.

These messages are received by the file applicationname.php which is

located on the server side. This file has a function for each possible message. Let’s

see this on an example:

We can see a snippet of js code that sends the message bellow:

eyeos.callMessage(checknum, ‘whatDayIs’, ['en'], function (rPars) {

alert(‘Today is ‘+rPars);

});

This code, on being executed by the browser would send a message whose

name is “whatDayIs” and that send by parameter an array with a string. On returning

from the message, the specified function would be executed that, in this case, would

tell us what day of the week is in a dialog. We must note that the variable rPars on the

callback function contains the results emitted on the return of the message.

As we have said, this message is received on the server side by a php file. This

file is the responsible of returning the corresponding response:

public static function whatDayIs($params) {

$daysEn = array(“Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”,

“Friday”, “Saturday”);

if($params[0]==”en”){

return $daysEn[date(w)];

}

}

As we can see, it describes the behavior of the function that has by name the

name of the message, and returns what day of the week we are.

EyeOS 2.0 Developer Manual 5

2.5. Complete example

Now that we know how the files are and how the functions affect the behavior of

an application it is the time to see an example:

demo.js

function demo_application(checknum, pid, args) {

//Initializes the application object

var app = new eyeos.system.EyeApplication(“demo”, checknum, pid);

//Create the window, put a layout on it and show it

var mainWindow = new eyeos.ui.Window(app, “Demo Application”);

mainWindow.setLayout(new qx.ui.layout.HBox());

mainWindow.set({

‘minWidth’: 100,

‘minHeight’: 100

});

mainWindow.open();

//Create the layout where the button will be placed and put it on the window

var mainLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox());

mainWindow.add(mainLayout);

//Create the button and put it into the layout

var boto = new qx.ui.form.Button(“Quin dia és?”);

mainLayout.add(boto);

//Add a listener to the button that will be executed when its clicked

boto.addListener(“execute”, function(e) {

//Send the message

eyeos.callMessage(checknum, ‘quinDiaEs’, ['ca'], function (rPars) {

//Function that will be executed when you return from the message

alert(‘Avui és ‘+rPars);

});

});

};

demo.php

<?php

abstract class demoApplication extends EyeosApplicationExecutable {

public static function __run(AppExecutionContext $context, MMapResponse

$response)

{

//This code is executed when the application is initiated

}

//Function that is executed when the message whatDayIs is received

public static function whatDayIs($params) {

$daysEn = array(“Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”,

“Friday”, “Saturday”)

if($params[0]==”en”){

return $daysEn[date(w)];

}

}

public static function close($params){

//This code is executed when the application is closed

}

}

?>