Hi Kent! here are my 4 files: QxProgressBar and QxProgressBarUndetermined
have a look at it and insert your code to it (or insert my code into yours ;-)
if you are ready, give me a feedback OlliP.S. the dispose now works fine (there was a error inside the function) and the "qooxdoo - js - compressor" didn't find any error (in the prevous version he did) Title: qooxdoo demo dev
Simple test of the QxProgressBarUndetermined
Simple test of the QxProgressBar
/* ****************************************************************************
qooxdoo - the new era of web interface development
Version:
$Id: QxSpinner.js,v 1.9.2.23 2005/12/19 12:34:59 wpbasti Exp $ //???Olli???
Copyright:
(C) 2004-2005 by Schlund + Partner AG, Germany
All rights reserved
License:
LGPL 2.1: http://creativecommons.org/licenses/LGPL/2.1/
Internet:
* http://qooxdoo.oss.schlund.de
Authors: //???Olli???
* Oliver Vogel
<o dot vogel at muv dot com>
**************************************************************************** */
/* ****************************************************************************
#package(progressbar) //???Olli???
#require(QxBorderObject)
#require(QxTerminator)
#require(QxTimer)
**************************************************************************** */
// the width of the bar itself (in %) - for better readablility
QxProgressBarUndetermined.BAR_WIDTH = 50;
function QxProgressBarUndetermined()
{
QxCanvasLayout.call(this);
this.setWidth(250);
this.setHeight(22);
this.setBorder(QxBorderObject.presets.inset);
this.setBackgroundColor("white");
this.setTabIndex(-1);
// ***********************************************************************
// Progress-Bar itself
// ***********************************************************************
this._bar = new QxTerminator();
this._bar.set({ left: 0, bottom: 0, top: 0, border : QxBorder.presets.none });
this._bar.setBackgroundColor("lime");
this.add(this._bar);
// ***********************************************************************
// TIMER FOR ANIMATION
// ***********************************************************************
this._timer = new QxTimer(100);
this._timer.addEventListener(QxConst.EVENT_TYPE_INTERVAL, this._oninterval,
this);
// ***********************************************************************
// INITIALIZATION
// ***********************************************************************
this._position = 0;
this._leftToRight = true;
// Hide the Bar
this.clearBar();
};
QxProgressBarUndetermined.extend(QxCanvasLayout, "QxProgressBarUndetermined");
/*
------------------------------------------------------------------------------------
PREFERRED DIMENSIONS
------------------------------------------------------------------------------------
*/
proto._computePreferredInnerWidth = function() { //???Olli???
return 200;
};
proto._computePreferredInnerHeight = function() { //???Olli???
return 20;
};
/*
------------------------------------------------------------------------------------
THE ACTION
------------------------------------------------------------------------------------
*/
proto.startAnimation = function(){
this._timer.start();
};
proto.stopAnimation = function(){
this._timer.stop();
};
proto.clearBar = function(){
// set to a invisible position
this._position = -QxProgressBarUndetermined.BAR_WIDTH; // -x% startPosition +
x% width of bar = 0!!!
this._applyChanges();
// next start of animation is from left to right
this._leftToRight = true;
};
/*
------------------------------------------------------------------------------------
INTERNAL STUFF
------------------------------------------------------------------------------------
*/
proto._applyChanges = function(){
// set position and size of the bar to show the progress
// if the position is outside, set the position to 0 and the width to the
"difference"
if (this._position < 0) // left outside?
{
// set position
this._bar.setLeft(0);
this._bar.setWidth((QxProgressBarUndetermined.BAR_WIDTH -
Math.abs(this._position)) + '%');
QxWidget.flushGlobalQueues();
// ready
return true;
};
if (this._position + QxProgressBarUndetermined.BAR_WIDTH > 100) // right
outside?
{
// set position
this._bar.setLeft(this._position + '%');
this._bar.setWidth((100 - this._position) + '%');
QxWidget.flushGlobalQueues();
// ready
return true;
};
// "normal" case (inside)
// set position
this._bar.setLeft(this._position + '%');
this._bar.setWidth(QxProgressBarUndetermined.BAR_WIDTH + '%');
QxWidget.flushGlobalQueues();
// ready
return true;
};
/*
------------------------------------------------------------------------------------
INTERVAL HANDLING
------------------------------------------------------------------------------------
*/
proto._oninterval = function(e)
{
// handle the direction
if (this._leftToRight)
{
this._position += 2; // new position
if (this._position >= 100) this._leftToRight = false; // change the
direction ?
}
else
{
this._position -= 2; // new position
if (this._position + QxProgressBarUndetermined.BAR_WIDTH <= 0)
this._leftToRight = true; // change the direction ?
}
// Show the changes
this._applyChanges();
};
/*
------------------------------------------------------------------------------------
DISPOSER
------------------------------------------------------------------------------------
*/
proto.dispose = function()
{
if (this.getDisposed()) {
return;
};
if (this._bar)
{
this._bar.dispose();
this._bar = null;
};
if (this._timer)
{
this._timer.dispose();
this._timer = null;
};
return QxCanvasLayout.prototype.dispose.call(this);
};/* ****************************************************************************
qooxdoo - the new era of web interface development
Version:
$Id: QxSpinner.js,v 1.9.2.23 2005/12/19 12:34:59 wpbasti Exp $ //???Olli???
Copyright:
(C) 2004-2005 by Schlund + Partner AG, Germany
All rights reserved
License:
LGPL 2.1: http://creativecommons.org/licenses/LGPL/2.1/
Internet:
* http://qooxdoo.oss.schlund.de
Authors: //???Olli???
* Oliver Vogel
<o dot vogel at muv dot com>
**************************************************************************** */
/* ****************************************************************************
#package(progressbar) //???Olli???
#require(QxBorderObject)
#require(QxTerminator)
#require(QxAtom)
**************************************************************************** */
function QxProgressBar(vMax, vShowPercent)
{
QxCanvasLayout.call(this);
this.setWidth(250);
this.setHeight(22);
this.setBorder(QxBorderObject.presets.inset);
this.setBackgroundColor("white");
this.setTabIndex(-1);
// ***********************************************************************
// Progress-Bar itself
// ***********************************************************************
this._bar = new QxTerminator();
this._bar.set({ left: 0, bottom: 0, top: 0, border : QxBorder.presets.none });
this._bar.setBackgroundColor("lime");
this.add(this._bar);
// ***********************************************************************
// % - Text
// ***********************************************************************
this._percent = new QxAtom();
this._percent.set({ left: 0, bottom: 0, top: 0, right: 0 });
this._percent.setHorizontalChildrenAlign("center");
this._percent.setColor("black");
this.add(this._percent);
// ***********************************************************************
// INITIALIZATION
// ***********************************************************************
if(QxUtil.isValidNumber(vMax)) {
this.setMax(vMax);
};
if(QxUtil.isValidBoolean(vShowPercent)) {
this.setShowPercent(vShowPercent);
};
// Show the actuall settings even if they are not set by parameters
this._applyChanges();
};
QxProgressBar.extend(QxCanvasLayout, "QxProgressBar");
/*
------------------------------------------------------------------------------------
PROPERTIES
------------------------------------------------------------------------------------
*/
/*!
The value of the left position
*/
QxProgressBar.addProperty({ name : "min", type : QxConst.TYPEOF_NUMBER,
defaultValue : 0 });
/*!
The value of the right position
*/
QxProgressBar.addProperty({ name : "max", type : QxConst.TYPEOF_NUMBER,
defaultValue : 100 });
/*!
The amount to increment on each step.
*/
QxProgressBar.addProperty({ name : "stepBy", type : QxConst.TYPEOF_NUMBER,
defaultValue : 1 });
/*!
The current position of the progress.
*/
QxProgressBar.addProperty({ name : "position", type : QxConst.TYPEOF_NUMBER,
defaultValue : 0 });
/*!
Should the % be visible
*/
QxProgressBar.addProperty({ name : "showPercent", type :
QxConst.TYPEOF_BOOLEAN, defaultValue : true });
/*
------------------------------------------------------------------------------------
PREFERRED DIMENSIONS
------------------------------------------------------------------------------------
*/
proto._computePreferredInnerWidth = function() { //???Olli???
return 200;
};
proto._computePreferredInnerHeight = function() { //???Olli???
return 20;
};
/*
------------------------------------------------------------------------------------
GETTER AND SETTER
------------------------------------------------------------------------------------
*/
proto._checkMin = function(newValue, propData){
// min must be < max
if (newValue < this.getMax()) return newValue;
return this.getMin();
};
proto._modifyMin = function(propValue, propOldValue, propData)
{
// position must be >= min
if (this.getPosition() < propValue) this.setPosition(propValue);
// make changes visible
return this._applyChanges();
};
proto._checkMax = function(newValue, propData){
// max must be > min
if (newValue > this.getMin()) return newValue;
return this.getMax();
};
proto._modifyMax = function(propValue, propOldValue, propData)
{
// position must be <= max
if (this.getPosition() > propValue) this.setPosition(propValue);
// make changes visible
return this._applyChanges();
};
proto._checkPosition = function(newValue, propData){
// position must be inside min and max
if (newValue < this.getMin()) return this.getMin();
if (newValue > this.getMax()) return this.getMax();
return newValue;
};
proto._modifyPosition = function(propValue, propOldValue, propData)
{
// make changes visible
return this._applyChanges();
};
proto._modifyShowPercent = function(propValue, propOldValue, propData)
{
// show or hide the Text
this._percent.setDisplay(propValue);
// ready
return true;
};
/*
------------------------------------------------------------------------------------
THE ACTION
------------------------------------------------------------------------------------
*/
proto.stepIt = function(){
this.setPosition(this.getPosition() + this.getStepBy());
};
/*
------------------------------------------------------------------------------------
INTERNAL STUFF
------------------------------------------------------------------------------------
*/
proto._applyChanges = function(){
// calc position in %
var p = this.getPosition() - this.getMin();
var g = this.getMax() - this.getMin();
var percent = (p * 100) / g;
// set width of the bar to show the progress
this._bar.setWidth(percent + '%');
// set the text
this._percent.setLabel(Math.round(percent) + '%');
// show the changes without mousemove or something else
QxWidget.flushGlobalQueues(); //???Olli??? is this realy needed???
// ready
return true;
};
/*
------------------------------------------------------------------------------------
DISPOSER
------------------------------------------------------------------------------------
*/
proto.dispose = function()
{
if (this.getDisposed()) {
return;
};
if (this._bar)
{
this._bar.dispose();
this._bar = null;
};
if (this._percent)
{
this._percent.dispose();
this._percent = null;
};
return QxCanvasLayout.prototype.dispose.call(this);
};
