Hello,
I'm new to qooxdoo and try to get include a html/js solution to qx.
How it work:
a timer starts the following process:
1) compute an array of numbers
2) create a div element for each number
3) apply all these computed div's to one parent element
See below the implementation of my try.
Now the Problem:
It works, but too slowly.
Compared to the case when it's implemented without qx
it's about 10..20 times slower.
What may be the reason of that ?
Thanks and greetings,
Torsten
/* ************************************************************************
Copyright:
2009 Pilot Blankenfelde GmbH
2004-2008 1&1 Internet AG, Germany, http://www.1und1.de
License:
LGPL: http://www.gnu.org/licenses/lgpl.html
EPL: http://www.eclipse.org/org/documents/epl-v10.php
See the LICENSE file in the project's top-level directory for details.
Authors:
Torsten Karusseit
* Sebastian Werner (wpbasti)
* Fabian Jakobs (fjakobs)
************************************************************************ */
/* ************************************************************************
#asset(qx/icon/${qx.icontheme}/32/actions/go-home.png)
************************************************************************ */
qx.Class.define("test0.Application",
{
extend : qx.application.Standalone,
members :
{
main: function()
{
this.base(arguments);
var box = new qx.ui.layout.VBox();
box.setSpacing(10);
var container = new qx.ui.container.Composite(box);
container.setPadding(20);
this.getRoot().add(container);
// Example HTML embed
var xx = 0;
var breite_div = 400;
var hoehe_div = 200;
var daten0 = new Array(breite_div);
var daten1 = new Array(breite_div);
var sweep_zaehler = 0;
var gitter_on = false;
var gitter_x = 40;
var gitter_y = 30;
var gitter_farbe = "#d0d0d0";
var gitter_html;
var artefaktschwelle_on = false;
var artefaktschwelle = 0;
var artefaktschwelle_html;
var artefaktschwelle_farbe = "#c0c000";
var embed1 = new qx.ui.embed.Html("");
embed1.setWidth(breite_div);
embed1.setHeight(hoehe_div);
embed1.setDecorator("main");
container.add(embed1);
var button1 = new qx.ui.form.ToggleButton("Gitter");
container.add(button1);
button1.addListener("changeChecked", function(e)
{
gitter_on = e.getData();
}, this);
var button2 = new qx.ui.form.ToggleButton("Artefaktschwelle");
container.add(button2);
button2.addListener("changeChecked", function(e)
{
artefaktschwelle_on = e.getData();
if(artefaktschwelle_on)
macheArtefaktschwelle();
label1.setContent(ArtefaktschwelleText());
}, this);
var button3 = new qx.ui.form.Button("Artefaktschwelle+");
container.add(button3);
button3.addListener("execute", function(e)
{
artefaktschwelle++;
if(artefaktschwelle_on)
macheArtefaktschwelle();
label1.setContent(ArtefaktschwelleText());
}, this);
var button4 = new qx.ui.form.Button("Artefaktschwelle-");
container.add(button4);
button4.addListener("execute", function(e)
{
if(artefaktschwelle > 0)
{
artefaktschwelle--;
if(artefaktschwelle_on)
macheArtefaktschwelle();
}
label1.setContent(ArtefaktschwelleText());
}, this);
var strArtefaktschwelle = "Artefaktschwelle ";
function ArtefaktschwelleText()
{
var text = strArtefaktschwelle;
text += artefaktschwelle.toString();
text += " ";
if(artefaktschwelle_on)
text += "an";
else
text += "aus";
return text;
}
var label1 = new qx.ui.basic.Label(ArtefaktschwelleText()).set({
decorator: "main",
padding: 3,
allowGrowX: true,
textAlign: "center"
});
container.add(label1);
var timer = qx.util.TimerManager.getInstance();
// Start a 5-second recurrent timer.
// Note that the first expiration is after 3 seconds
// (last parameter is 3000) but each subsequent expiration is
// at 5 second intervals.
timer.start(function(userData, timerId)
{
embed1.setHtml(neueDaten());
},5000,this,null,1000);
function macheArtefaktschwelle()
{
artefaktschwelle_html = "";
var hoehe = artefaktschwelle;
if(hoehe)
{
artefaktschwelle_html += '<div
style="position:absolute;left:0px;top:0px;width:'+breite_div+'px;height:'+hoehe+'px;overflow:hidden;background:'+artefaktschwelle_farbe+';"><\/div>';
artefaktschwelle_html += '<div
style="position:absolute;left:0px;top:'+(hoehe_div-hoehe-2)+'px;width:'+breite_div+'px;height:'+hoehe+'px;overflow:hidden;background:'+artefaktschwelle_farbe+';"><\/div>';
}
}
function macheGitter()
{
gitter_html = "";
for(x = 0; x < breite_div; x++)
if(!(x % gitter_x))
// senkrechte Gitterlinien
gitter_html += '<div
style="position:absolute;left:'+x+'px;top:0px;width:1px;height:'+hoehe_div+'px;overflow:hidden;background:'+gitter_farbe+';"><\/div>';
for(y = 0; y < hoehe_div; y++)
if(!(y % gitter_y))
// waagerechte Gitterlinien
gitter_html += '<div
style="position:absolute;left:0px;top:'+y+'px;width:'+breite_div+'px;height:1px;overflow:hidden;background:'+gitter_farbe+';"><\/div>';
}
macheGitter();
function neueDaten()
{
var start_zeit = (new Date()).getTime(); // für Zeitmessung
var html = "";
var y_mitte0 = hoehe_div/3;
var y_mitte1 = 2*hoehe_div/3;
var y_alt0;
var y_alt1;
var oben, hoehe;
if(artefaktschwelle_on)
html += artefaktschwelle_html;
if(gitter_on)
html += gitter_html;
for(x = 0; x < breite_div; x++)
{
daten0[x] = hoehe_div/6 * Math.random();
daten1[x] = hoehe_div/6 * Math.sin(x/15+sweep_zaehler);
y = y_mitte0 + Math.round(daten0[x]);
if(x)
{
oben = y < y_alt0 ? y : y_alt0;
hoehe = y - y_alt0;
}
else
{
oben = y;
hoehe = 1;
}
if(hoehe < 0) hoehe = -hoehe;
if(hoehe == 0) hoehe = 1;
html += '<div
style="position:absolute;left:'+x+'px;top:'+oben+'px;width:1px;height:'+hoehe+'px;overflow:hidden;background:#009f00;"><\/div>';
y_alt0 = y;
y = y_mitte1 + Math.round(daten1[x]);
if(x)
{
oben = y < y_alt1 ? y : y_alt1;
hoehe = y - y_alt1;
}
else
{
oben = y;
hoehe = 1;
}
if(hoehe < 0) hoehe = -hoehe;
if(hoehe == 0) hoehe = 1;
html += '<div
style="position:absolute;left:'+x+'px;top:'+oben+'px;width:1px;height:'+hoehe+'px;overflow:hidden;background:#00009f;"><\/div>';
y_alt1 = y;
}
sweep_zaehler++;
return html;
}
}
}
});
------------------------------------------------------------------------------
Create and Deploy Rich Internet Apps outside the browser with Adobe(R)AIR(TM)
software. With Adobe AIR, Ajax developers can use existing skills and code to
build responsive, highly engaging applications that combine the power of local
resources and data with the reach of the web. Download the Adobe AIR SDK and
Ajax docs to start building applications today-http://p.sf.net/sfu/adobe-com
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
