Hi Tron, thanks for the response,
Yes, I did it this way because I found no other way to do it. But you
think it's ok to have to wrap (this is create a *getValue* method to
call the *TextField* *getValue* method) all *TextField* methods? There
are so many, why I have to create so many dummy methods instead of
focus on the development I have to do?
Isn't it against *Object Oriented* that I cannot inherit from
*TextField* and modify it's structure? I found it is again its fur to
use *getContentElement*() and expect it to be the DOM INPUT, I found
it's overload the *getContentElement* with two responsabilities:
Return the content element and return the INPUT element, than in the
current code are the same element, but someday it can change.
I mean, I don't see right, for example, to add a listener '*change*'
to the element returned by *getContentElement*() why if someday
someones changes the content element? why not add the '*change*'
listener directly where we want to add it, to the INPUT element.
And as I understand, *Object Oriented Programming* is a elegant way to
reuse code, I don't see here to reuse code nor elegant code.
*
*
Here is how my *SearchField* class looks like:
- My code with spaces: ~*145* lines
- Fake inheritace from TextField: ~*170* lines
-------------------------------------------------------------
qx.Class.define("eyeos.ui.form.SearchField",
{
extend : qx.ui.core.Widget,
construct : function(value, icon)
{
this.base(arguments);
this._timer = new qx.event.Timer(0);
this._timer.addListener('interval', this.__fireExecuteEvent, this);
this._setLayout(new qx.ui.layout.HBox);
// Create childs if they doesn't exist
this.getChildControl('input');
this.getChildControl('button');
},
events :
{
/**
* The event is fired when the user press enter key inside the field
*/
'execute': "qx.event.type.Data",
/**
* The event is fired on every keystroke modifying the value of the field.
*/
'change': "qx.event.type.Data",
/**
* The event is fired when the user clicks the remove button and clears
the textfield
*/
'clear': "qx.event.type.Data"
},
properties :
{
appearance: {
refine: true,
init: "searchfield"
},
icon: {
check: "String",
apply: "_applyIcon",
nullable: true,
themeable: true,
event: "changeIcon"
},
showButton: {
check: "Boolean",
themeable: true,
init: true
},
delay: {
check: "Number",
apply: "_applyDelay",
nullable: false,
init: 0
}
},
members :
{
_timer: null,
_updateClearButton: function() {
// If button can be showed and input is empty
if (this.getShowButton() && !!this.getChildControl('input').getValue()) {
this.getChildControl('button').show();
} else {
this.getChildControl('button').exclude();
}
},
_clearField: function() {
this.getChildControl('input').setValue("")
this._updateClearButton();
this.fireDataEvent('clear');
this.__fireExecuteEvent();
},
__fireExecuteEvent: function() {
this._timer.stop();
var value = this.getChildControl('input').getValue();
this.fireDataEvent('change', value);
this.fireDataEvent('execute', value);
},
__inputKeydown: function(e) {
if (e.getKeyIdentifier() === 'Enter') {
this.__fireExecuteEvent();
}
},
__inputChange: function(e) {
this._updateClearButton();
this.fireDataEvent('change', e.getData(), e.getOldData());
this.__scheduleDelayedEvent();
},
__scheduleDelayedEvent: function() {
if (this.getDelay() === 0)
return;
this._timer.restart();
},
// properties
_applyIcon: function(value) {
this.getChildControl('button').setIcon(value);
},
_applyDelay: function(value) {
this._timer.setInterval(value);
},
// overridden
_createChildControlImpl: function(id, hash)
{
var control;
switch(id) {
case "input":
control = new qx.ui.form.TextField;
control.addListener('keydown', this.__inputKeydown, this);
control.addListener('input', this.__inputChange, this);
this._add(control, { flex: 1 });
break;
case "button":
control = new qx.ui.toolbar.Button;
control.addListener('execute', this._clearField, this);
control.exclude();
this._add(control);
}
return control || this.base(arguments, id);
},
/**
* Fake inheritance
*/
// Implement and include same Interfaces and Mixins as TextField to
full compatibility
implement: [ qx.ui.form.IStringForm, qx.ui.form.IForm ],
include: [ qx.ui.form.MForm ]
// Propagate TextField events
__propagateDataEvent: function(event) {
this.fireDataEvent(event.getName(), event.getData(), event.getOldData());
},
__propagateTextFieldEvents: function() {
var input = this.getChildControl('input');
input.addListener('changeInvalidMessage', this.__propagateDataEvent,
this);
input.addListener('changeReadOnly', this.__propagateDataEvent, this);
input.addListener('changeRequired', this.__propagateDataEvent, this);
input.addListener('changeValid', this.__propagateDataEvent, this);
input.addListener('changeValue', this.__propagateDataEvent, this);
}
// TextField wrappers
clearTextSelection: function() {
return this.getChildControl('input').clearTextSelection();
},
getFilter: function() {
return this.getChildControl('input').getFilter();
},
getFocusElement: function() {
return this.getChildControl('input').getFocusElement();
},
getInvalidMessage: function() {
return this.getChildControl('input').getInvalidMessage();
},
getLiveUpdate: function() {
return this.getChildControl('input').getLiveUpdate();
},
getMaxLength: function() {
return this.getChildControl('input').getMaxLength();
},
getPlaceholder: function() {
return this.getChildControl('input').getPlaceholder();
},
clearTextSelection: function() {
return this.getChildControl('input').clearTextSelection();
},
getReadOnly: function() {
return this.getChildControl('input').getReadOnly();
},
getRequired: function() {
return this.getChildControl('input').getRequired();
},
getRequiredInvalidMessage: function() {
return this.getChildControl('input').getRequiredInvalidMessage();
},
getTextAlign: function() {
return this.getChildControl('input').getTextAlign();
},
getTextSelection: function() {
return this.getChildControl('input').getTextSelection();
},
getTextSelectionEnd: function() {
return this.getChildControl('input').getTextSelectionEnd();
},
getTextSelectionLength: function() {
return this.getChildControl('input').getTextSelectionLength();
},
getTextSelectionStart: function() {
return this.getChildControl('input').getTextSelectionStart();
},
getValid: function() {
return this.getChildControl('input').getValid();
},
getValue: function() {
return this.getChildControl('input').getValue();
},
isLiveUpdate: function() {
return this.getChildControl('input').isLiveUpdate();
},
isReadOnly: function() {
return this.getChildControl('input').isReadOnly();
},
isRequired: function() {
return this.getChildControl('input').isRequired();
},
isValid: function() {
return this.getChildControl('input').isValid();
},
resetFilter: function() {
return this.getChildControl('input').resetFilter();
},
resetInvalidMessage: function() {
return this.getChildControl('input').resetInvalidMessage();
},
resetLiveUpdate: function() {
return this.getChildControl('input').resetLiveUpdate();
},
resetMaxLength: function() {
return this.getChildControl('input').resetMaxLength();
},
resetPlaceholder: function() {
return this.getChildControl('input').resetPlaceholder();
},
resetReadOnly: function() {
return this.getChildControl('input').resetReadOnly();
},
resetRequired: function() {
return this.getChildControl('input').resetRequired();
},
resetRequiredInvalidMessage: function() {
return this.getChildControl('input').resetRequiredInvalidMessage();
},
resetTextAlign: function() {
return this.getChildControl('input').resetTextAlign();
},
resetValid: function() {
return this.getChildControl('input').resetValid();
},
resetValue: function() {
return this.getChildControl('input').resetValue();
},
selectAllText: function() {
return this.getChildControl('input').selectAllText();
},
setFilter: function(value) {
return this.getChildControl('input').setFilter(value);
},
setInvalidMessage: function(value) {
return this.getChildControl('input').setInvalidMessage(value);
},
setLiveUpdate: function(value) {
return this.getChildControl('input').setLiveUpdate(value);
},
setMaxLength: function(value) {
return this.getChildControl('input').setMaxLength(value);
},
setPlaceholder: function(value) {
return this.getChildControl('input').setPlaceholder(value);
},
setReadOnly: function(value) {
return this.getChildControl('input').setReadOnly(value);
},
setRequired: function(value) {
return this.getChildControl('input').setRequired(value);
},
setRequiredInvalidMessage: function(value) {
return this.getChildControl('input').setRequiredInvalidMessage(value);
},
setTextAlign: function(value) {
return this.getChildControl('input').setTextAlign(value);
},
setTextSelection: function(value) {
return this.getChildControl('input').setTextSelection(value);
},
setValid: function(value) {
return this.getChildControl('input').setValid(value);
},
setValue: function(value) {
return this.getChildControl('input').setValue(value);
},
toggleLiveUpdate: function() {
return this.getChildControl('input').toggleLiveUpdate();
},
toggleReadOnly: function() {
return this.getChildControl('input').toggleReadOnly();
},
toggleRequired: function() {
return this.getChildControl('input').toggleRequired();
},
toggleValid: function() {
return this.getChildControl('input').toggleValid();
}
}
});
------------------------------------------------------------------------------
All the data continuously generated in your IT infrastructure contains a
definitive record of customers, application performance, security
threats, fraudulent activity and more. Splunk takes this data and makes
sense of it. Business sense. IT sense. Common sense.
http://p.sf.net/sfu/splunk-d2dcopy1
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
