Application using qooxdoo-contrib QxDyGraphs

In that post and I'll show you how to make your first graph using the contrib QxDyGraphs.
I based my work on the following post from Edu. Worth to check it out if you want to use contrib svg instead.

First of all, download the qooxdoo-contrib, in my case and for future use I downloaded the complete svn from sf.net:

svn co https://qooxdoo-contrib.svn.sourceforge.net/svnroot/qooxdoo-contrib/trunk/qooxdoo-contrib qooxdoo-contrib

As a reference, I downloaded everything in /Soft. After issuing the previous command, you'll see a folder containing complete qooxdoo-contrib project, meaning all the contribs available.
Now we are ready to continue enhancing our eyeOS


Now we need to work with the developer version of eyeOS, because we are not using the latest release  of qooxdoo-sdk (the 1.5 when this post was created).

What I found out was that you can create an application based on a framework, and that's what eyeos is, an application from a framework. Maybe that sentence has no much sense at this stage of the blog, thus bear with me.

In the framework devtools/qooxdoo-sdk/framework there's the file config.json and some other files and folders for re-building your eyeos.

To include the QxDyGraphs library your config.json file should look like this, if you already added any other then you just need to check the include and library sections (and I hope you know what I'm talking about).


{
"export": ["build", "debug"],
"include": [
{
"as": "appconf",
"path": "${QOOXDOO_PATH}/tool/data/config/application.json"
},
{
"path": "image.json"
}
],
"jobs": {
"build": {
"compile" : {
"type": "build"
},
"compile-options": {
"paths": {
"file": "../../../eyeos/extern/js/qx.js"
},
"code": {
"locales" : ["de", "en", "es", "fr", "it", "nl", "sv"],
"optimize": ["basecalls", "privates", "strings", "variables"]
}
},
"copy-resources": {
"target": "../../../"
},
"exclude": ["qx.legacy.*", "qx.test.*"],
"include": ["qx.*", "aristo.Aristo", "qxdygraphs.*"],
"library": [
{
"manifest": "Manifest.json"
},
{
"manifest" : "/Soft/qooxdoo-contrib/Aristo/trunk/Manifest.json"
},
{
"manifest" : "/Soft/qooxdoo-contrib/QxDyGraphs/0.1/Manifest.json"
}



],
"settings": {
"qx.application": "eyeos.Application",
"qx.theme": "aristo.Aristo"
},
"variants": {
"qx.debug": ["off"]
}
},

"debug": {
"compile" : {
"type": "build"
},
"compile-options": {
"paths": {
"file": "../../../eyeos/extern/js/qx.js"
},
"code": {
"format": ["on"],
"locales" : ["de", "en", "es", "fr", "it", "nl", "sv"]
}
},
"copy-resources": {
"target": "../../../"
},
"exclude": ["qx.legacy.*", "qx.test.*"],
"include": ["qx.*"],
"library": [
{
"manifest": "Manifest.json"
}
],
"settings": {
"qx.application": "eyeos.Application",
"qx.theme": "aristo.Aristo"
},
"variants": {
"qx.debug": ["on"]
}
}
},
"let": {
"APPLICATION": "qx",
"LOCALES": ["de", "en", "es", "fr", "it", "nl", "sv"],
"QOOXDOO_PATH": ".."
}




}


Next in the same folder where the config.json is issue the command
./generate.py build
And you should see the following output.


============================================================================
INITIALIZING: FRAMEWORK
============================================================================
>>> Configuration: config.json
>>> Resolving config includes...
>>> Jobs: build
>>> Resolving jobs...
>>> Incorporating job defaults...
>>> Resolving macros...
>>> Resolving libs/manifests...

============================================================================
EXECUTING: BUILD
============================================================================
>>> Initializing cache...
>>> Scanning libraries...
- Warning: Excludes may break code ([u'qx.legacy.*', u'qx.test.*'])
- Warning: Skipping unresolvable exclude entry: "qx.legacy.*"
>>> Loaded 1690 private fields
>>> Resolving dependencies
- ..............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
- Sorting 622 classes ..............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
>>> Copying resources...
>>> Generate build version...
- Processing translations for 8 locales
- Package 0: 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
- Generating packages...
- Compiling package #0: 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
- Generating boot script...
>>> Done


If for any reason you face the following warnings,
- Warning: Hint: Unknown global symbol referenced: qx.core.Environment (qxdygraphs.Plot:58)
- Warning: Hint: Unknown global symbol referenced: Dygraph (qxdygraphs.Plot:166)

it simply won't work! It can be an incompatibility between the contrib version and the qooxdoo-sdk from eyeos. I'll post how to fix that too :)

Now we can create our application following the pattern from the first post.
Create the folder eyeos/apps/eyegraph and add the 2 files, info.xml and eyegraph.js.

And for the eyegraph.js add the following code:

function eyegraphs_application(checknum,pid,args){
 var app = new eyeos.application.eyeGraphs(checknum,pid);
 app.drawGUI();
}

qx.Class.define("eyeos.application.eyeGraphs", 
  {extend: eyeos.system.EyeApplication,
   construct: function(checknum,pid){
    arguments.callee.base.call(this,"EyeOs Graphs",checknum,pid);
   },
   members: {
    drawGUI: function(){
     var mainWindow = new eyeos.ui.Window(this, tr("EyeOS Graphs"), 
       'index.php?extern=/images/16x16/apps/accessories-calculator.png');
     mainWindow.setLayout(new qx.ui.layout.HBox(0));
     mainWindow.setAllowMaximize(false);
     mainWindow.open();

     var data = [];
     for (var i=1;i<100;i++){
         data.push([new Date(1000000000+i*3600*1000),Math.random(),Math.sin(i/50)]);
    }
     var options = {
        labels: [ 'Date', 'Random','Sin' ]
     };
     
     var plot = new qxdygraphs.Plot(data,options).set(
           {
      minWidth   : 640,
      minHeight  : 420,
      padding    : 0,
      allowGrowX : true,
      allowGrowY : true
           }); 
     mainWindow.add(plot);
     
    }
   }
   
});

When you login you would see the new application, when press .... tadaaaaa a pretty graph would popup