Hi list, Hi Dietrich, searching for a file upload button I tryed to implement this solution. But with qooxdoo-0.6.5 I get the follwing error: TypeError - qx.sys has no properties at .../UploadForm.js:33
Really, there is no qx.sys.Client. I'm new to QOOXDOO, pleas could you or someone help to make this working out? Many thanx. Torsten Wesolek Dietrich Streifert wrote: > > Hi Frederic, > > I don't know if this widget will make its way into official qooxdoo. The > classes are not widely tested but they work for me. > > And yes, if someone wants to adopt them to qooxdoo ore asks me if I want > to do this the answer is yes and yes. > > I've attached a zip archive containing all four files again and changed > the extension to zi_ so you have to change it back to zip. > > I hope it finds its way to you now. > > frederic schrieb: >> Hello Dietrich, >> Thanks for this widget ! I use Nabble forum to read the mailinglist >> (http://www.nabble.com/Experimental-file-upload-implementation-tf2630085.html) >> and the test file Upload_1.html was not included in the forum. >> Please, could you send the source code of Upload_1.html in an email to >> the >> mailinglist ? >> Is it planned to include your widget natively in Qooxdoo soon or this >> widget >> will stay as an third-party ? >> >> cheers, >> frederic >> >> >> >> Dietrich Streifert wrote: >> >>> Hello List! >>> >>> I created a file upload widget built of three classes >>> >>> UploadForm: creates a form tag of and a hidden iframe which is the >>> target for the form submission >>> UploadButton: highly inspired from David Gerlich which creates a >>> qx.ui.form.button which overlays an input tag of type file and allows a >>> file selection button which is a normal qooxdoo button. >>> UploadFile: combines a readonly textfield which holds the selected >>> filepath and a uploadbutton in a horizontal layout widget. >>> >>> UploadForm: fires a sending and completed event while UploadFile fires a >>> changeValue event on file selection. There is a setParameter method >>> which creates hidden input tags as childs of the form tag. >>> >>> I'm using this for a single file upload manager who automatically starts >>> uploading after file selection. This is done by attaching an >>> eventlistener of type changeValue to UploadFile which then calls >>> UploadForm.send(). >>> >>> The three classes and a testfile is attached to this mail. >>> >>> Please copy all the files to the qooxdoo/frontend/demo/source/html/test >>> directory. >>> >>> You have to provide the url to your upload cgi script in the testfile >>> Upload_1.html >>> >>> One known Problem is that the form tag which is created by UploadForm is >>> not well stylable so there are some browser independant height and top >>> position placement problems. >>> >>> -- >>> Mit freundlichen Grüßen >>> Dietrich Streifert >>> Visionet GmbH >>> >>> >>> >>> >>> >>> qooxdoo » Demo >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> Experimental UploadForm and UploadFile Implementation. >>> The class UploadForm creates a hidden iframe which is used >>> as a target for the form submit. >>> An event of type qx.constant.Event.SENDING is fired after submit. >>> On completion (iframe completed loading) a >>> qx.constant.Event.COMPLETED >>> event is fired. >>> Upload form implements the methods getIframeTextContent, >>> getIframeHtmlContent >>> and getIframeXmlContent to get the content of the iframe >>> UploadFile fires a "changeValue" event after the selection thruogh >>> the >>> OS fileselector is >>> completed >>> Multiple UploadFile instances are possible. The text field is >>> readonly >>> >>> >>> >>> >>> >>> /* >>> ************************************************************************ >>> >>> qooxdoo - the new era of web development >>> >>> http://qooxdoo.org >>> >>> Copyright: >>> 2004-2006 by 1&1 Internet AG, Germany, http://www.1and1.org >>> >>> License: >>> LGPL 2.1: http://www.gnu.org/licenses/lgpl.html >>> >>> Authors: >>> * David Gerlich (dgerlich) >>> * Dietrich Streifert (dietrich) >>> >>> ************************************************************************ >>> */ >>> >>> /* >>> ************************************************************************ >>> >>> #module(ui_io) >>> >>> ************************************************************************ >>> */ >>> >>> qx.OO.defineClass("qx.visionet.ui.io.UploadButton", >>> qx.ui.layout.CanvasLayout, >>> function(vName, vText, vIcon, vIconWidth, vIconHeight, vFlash) >>> { >>> qx.ui.layout.CanvasLayout.call(this); >>> this.set({height:"auto",width:"auto",overflow:"hidden"}); >>> >>> if(vName) { >>> this.setName(vName); >>> } >>> >>> this._button = new qx.ui.form.Button(vText, vIcon, vIconHeight, >>> vFlash); >>> this.add(this._button); >>> >>> this._value = ''; >>> >>> this.addEventListener(qx.constant.Event.MOUSEOVER, this._onmouseover); >>> this.addEventListener(qx.constant.Event.MOUSEOUT, this._onmouseout); >>> this.addEventListener(qx.constant.Event.MOUSEDOWN, this._onmousedown); >>> this.addEventListener(qx.constant.Event.MOUSEUP, this._onmouseup); >>> >>> this.addEventListener(qx.constant.Event.APPEAR, >>> this._createInputFileTag); >>> }); >>> >>> >>> /* >>> --------------------------------------------------------------------------- >>> PROPERTIES >>> --------------------------------------------------------------------------- >>> */ >>> >>> qx.OO.addProperty({ name : "name", type : qx.constant.Type.STRING, >>> defaultValue : qx.constant.Core.EMPTY }); >>> qx.OO.addProperty({ name : "value", type : qx.constant.Type.STRING, >>> defaultValue : qx.constant.Core.EMPTY }); >>> >>> >>> /* >>> --------------------------------------------------------------------------- >>> MODIFIERS >>> --------------------------------------------------------------------------- >>> */ >>> >>> qx.Proto._modifyValue = function(propValue, propOldValue, propData) { >>> if(this._valueInputOnChange) { >>> delete this._valueInputOnChange; >>> } >>> else { >>> if (!propValue || propValue == '') { >>> if (qx.sys.Client.getInstance().isMshtml()) { >>> this._createInputFileTag(); >>> } >>> else { >>> this._input.value = ''; >>> } >>> } >>> else { >>> throw new error("Unable to set value to non null or non empty!"); >>> } >>> } >>> >>> return true; >>> }; >>> >>> >>> qx.Proto._modifyName = function(propValue, propOldValue, propData) { >>> if(this._input) { >>> this._input.name = propValue; >>> } >>> return true; >>> }; >>> >>> >>> qx.Proto._modifyElement = function(propValue, propOldValue, propData) { >>> if (propValue) { >>> try { >>> var element = this.getElement(); >>> this.setStyleProperty(qx.ui.core.Widget.TAB_PROPERTY_MOZUSERFOCUS, >>> qx.ui.core.Widget.TAB_VALUE_IGNORE); >>> >>> this.setStyleProperty("cursor","pointer"); >>> >>> >>> this.setStyleProperty("cursor","hand"); >>> >>> >>> this.setStyleProperty("left","0px"); >>> >>> >>> >>> } >>> catch (ex) { >>> this.error("error: ", ex); >>> } >>> } >>> >>> qx.ui.form.Button.prototype._modifyElement.call(this, propValue, >>> propOldValue, propData); >>> >>> return true; >>> }; >>> >>> >>> >>> /* >>> --------------------------------------------------------------------------- >>> EVENT-HANDLER >>> --------------------------------------------------------------------------- >>> */ >>> >>> qx.Proto._onmouseover = function(e) { >>> this._button.addState(qx.ui.core.Widget.STATE_OVER); >>> return this._button._onmouseover.call(this, e); >>> }; >>> >>> >>> qx.Proto._onmouseup = function(e) { >>> return qx.ui.form.Button.prototype._onmouseup.call(this, e); >>> }; >>> >>> >>> qx.Proto._onmousedown = function(e) { >>> return qx.ui.form.Button.prototype._onmousedown.call(this, e); >>> }; >>> >>> >>> qx.Proto._onmouseout = function(e) { >>> this._button.removeState(qx.ui.core.Widget.STATE_OVER); >>> return qx.ui.form.Button.prototype._onmouseout.call(this, e); >>> }; >>> >>> >>> qx.Proto._createInputFileTag = function(e) { >>> if(this._input) { >>> this._input.name += "_tmp_"; >>> this._input.parentNode.removeChild(this._input); >>> this._input = null; >>> } >>> >>> var input = this._input = document.createElement("input"); >>> input.type = "file"; >>> input.name = this.getName(); >>> input.style.position = "absolute"; >>> input.style.left = "-860px"; >>> input.style.height = "27px"; >>> input.style.fontSize = "60px"; >>> input.style.clip = "rect(auto, " + 860 + >>> this._button.getWidthValue() + >>> "px, auto, 860px)"; >>> input.style.zIndex = "100"; >>> input.style.cursor = "hand"; >>> input.style.cursor = "pointer"; >>> input.style.filter = "alpha(opacity=0)"; >>> input.style.opacity = "0"; >>> input.style.MozOutlinestyle = "none"; >>> input.style.hidefocus = "true"; >>> >>> var _this = this; >>> input.onchange = function(e) { return _this._onchange(e); }; >>> >>> this.getElement().appendChild(input); >>> }; >>> >>> >>> qx.Proto._onchange = function(e) { >>> this._valueInputOnChange = true; >>> this.setValue(this._input.value); >>> }; >>> >>> >>> /* >>> --------------------------------------------------------------------------- >>> DISPOSER >>> --------------------------------------------------------------------------- >>> */ >>> >>> qx.Proto.dispose = function() >>> { >>> if (this.getDisposed()) { >>> return; >>> } >>> >>> this.removeEventListener(qx.constant.Event.MOUSEOVER, >>> this._onmouseover); >>> this.removeEventListener(qx.constant.Event.MOUSEOUT, >>> this._onmouseout); >>> this.removeEventListener(qx.constant.Event.MOUSEDOWN, >>> this._onmousedown); >>> this.removeEventListener(qx.constant.Event.MOUSEUP, this._onmouseup); >>> this.removeEventListener(qx.constant.Event.APPEAR, >>> this._createInputFileTag); >>> >>> if(this._input) { >>> this._input.parentNode.removeChild(this._input); >>> this._input.onchange = null; >>> this._input = null; >>> } >>> >>> this._button.dispose(); >>> this._button = null; >>> >>> qx.ui.layout.CanvasLayout.prototype.dispose.call(this); >>> }; >>> >>> >>> /* >>> ************************************************************************ >>> >>> qooxdoo - the new era of web development >>> >>> http://qooxdoo.org >>> >>> Copyright: >>> 2004-2006 by 1&1 Internet AG, Germany, http://www.1and1.org >>> >>> License: >>> LGPL 2.1: http://www.gnu.org/licenses/lgpl.html >>> >>> Authors: >>> * David Gerlich (dgerlich) >>> * Dietrich Streifert (dietrich) >>> >>> **************** > > -- > Mit freundlichen Grüßen > Dietrich Streifert > Visionet GmbH > > > > ------------------------------------------------------------------------- > Take Surveys. Earn Cash. Influence the Future of IT > Join SourceForge.net's Techsay panel and you'll get the chance to share > your > opinions on IT & business topics through brief surveys - and earn cash > http://www.techsay.com/default.php?page=join.php&p=sourceforge&CID=DEVDEV > _______________________________________________ > qooxdoo-devel mailing list > [email protected] > https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel > > -- View this message in context: http://www.nabble.com/Experimental-file-upload-implementation-tf2630085.html#a9328198 Sent from the qooxdoo-devel mailing list archive at Nabble.com. ------------------------------------------------------------------------- Take Surveys. Earn Cash. Influence the Future of IT Join SourceForge.net's Techsay panel and you'll get the chance to share your opinions on IT & business topics through brief surveys-and earn cash http://www.techsay.com/default.php?page=join.php&p=sourceforge&CID=DEVDEV _______________________________________________ qooxdoo-devel mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
