I add initial support for checkable field of QxFieldSet. This is standard
de facto for common widgets libraries, such as QT, GTK, Win32 GUI...
Known problems:
- setChecked not call toggle routine to enable/disable childs.
- when toggling, some widgets such as edit/listbox/combobox will not
switch to enabled/disabled state when it placed on HorizontalBoxLayout or
VerticalBoxLayout.
- need code cleanup & optimizations. I novice to QooxDoo.
- checkbox icon switching only visible while clicking on legend label.
--
mouse
--- source/script/widgets/QxFieldSet.js.orig 2005-11-01 17:44:20 +0300
+++ source/script/widgets/QxFieldSet.js 2005-11-01 17:35:36 +0300
@@ -26,10 +26,11 @@
/* ****************************************************************************
#package(form)
+#require(QxInputCheckIcon)
**************************************************************************** */
-function QxFieldSet(vLegend, vIcon)
+function QxFieldSet(vLegend, vIcon, vCheckable, vChecked)
{
QxCanvasLayout.call(this);
@@ -70,19 +70,103 @@
// INIT
// ***********************************************************************
this.setLegend(vLegend);
- this.setIcon(vIcon);
+ this._checkable = false;
+
+ if (isValidBoolean(vCheckable) && vCheckable) {
+ this.setCheckable(vCheckable);
+ if (isValidBoolean(vChecked)) {
+ this.setChecked(vChecked);
+ }
+ } else {
+ this.setIcon(vIcon);
+ }
// ***********************************************************************
// REMAPPING
// ***********************************************************************
this.remapChildrenHandlingTo(this._frame);
+
};
QxFieldSet.extend(QxCanvasLayout, "QxFieldSet");
+/*
+
-------------------------------------------------------------------------------
+ MODIFIER
+
-------------------------------------------------------------------------------
+*/
+
+QxCheckBox.removeProperty({ name : "icon" });
+
+/*!
+ The HTML name of the form element used by the widget
+*/
+QxFieldSet.addProperty({ name : "name", type : QxGlobal.TYPEOF_STRING });
+
+/*!
+ The HTML value of the form element used by the widget
+*/
+QxFieldSet.addProperty({ name : "value", type : QxGlobal.TYPEOF_STRING });
+
+/*!
+ If the widget is checked
+*/
+QxFieldSet.addProperty({ name : "checked", type : QxGlobal.TYPEOF_BOOLEAN,
defaultValue : false, getAlias : "isChecked" });
+
+
+/*
+
-------------------------------------------------------------------------------
+ ICON HANDLING
+
-------------------------------------------------------------------------------
+*/
+
+proto.INPUT_TYPE = "checkbox";
+
+proto._createIcon = function()
+{
+ var i = this._icon = new QxInputCheckIcon;
+
+ i.setType(this.INPUT_TYPE);
+ i.setChecked(this.isChecked());
+ i.setEnabled(this.isEnabled());
+ i.setAnonymous(true);
+};
+
+
+
+
+
+
+/*
+
-------------------------------------------------------------------------------
+ MODIFIER
+
-------------------------------------------------------------------------------
+*/
+
+
+proto._modifyChecked = function(propValue, propOldValue, propData)
+{
+ if (this._icon) {
+ this._icon.setChecked(propValue);
+ var childs = this.getChildren();
+ for (w in childs) {
+ if (typeof childs[w] == "object" && childs[w] != this._legend &&
childs[w] != this._icon) {
+ childs[w].setEnabled(propValue);
+ }
+ }
+ };
+
+ return true;
+};
+
+proto._toggleChecked = function() {
+
+};
+
+
/*
@@ -126,6 +210,103 @@
this._legend.getIcon();
};
+proto.setCheckable = function(vCheckable) {
+ if (vCheckable) {
+ this._createIcon();
+ this._legend.addAtBegin(this._icon);
+ this._checkable = true;
+
+ this._legend.addEventListener(QxGlobal.EVENT_TYPE_CLICK, this._onclick);
+ this._legend.addEventListener(QxGlobal.EVENT_TYPE_KEYDOWN,
this._onkeydown);
+ this._legend.addEventListener(QxGlobal.EVENT_TYPE_KEYUP, this._onkeyup);
+ } else if (this._checkable) {
+ this._checkable = false;
+
+ if (this._icon) {
+ this.remove(this._icon);
+ };
+
+ this._legend.removeEventListener(QxGlobal.EVENT_TYPE_CLICK, this._onclick);
+ this._legend.removeEventListener(QxGlobal.EVENT_TYPE_KEYDOWN,
this._onkeydown);
+ this._legend.removeEventListener(QxGlobal.EVENT_TYPE_KEYUP, this._onkeyup);
+ }
+};
+
+proto.getCheckable = function() {
+ return this._checkable;
+};
+
+/*proto.setChecked = function(vChecked) {
+ this._icon.setChecked(vChecked);
+};
+
+proto.getChecked = proto.isChecked = function() {
+ this._icon.getChecked();
+};*/
+
+
+/*
+------------------------------------------------------------------------------------
+ HANDLER
+------------------------------------------------------------------------------------
+*/
+
+proto._handleIcon = function()
+{
+ //FIXME: not used code?
+ switch(this.getShow())
+ {
+ case QxAtom.SHOW_ICON:
+ case QxAtom.SHOW_BOTH:
+ this._iconIsVisible = true;
+ break;
+
+ default:
+ this._iconIsVisible = false;
+ };
+
+ if (!this._iconIsVisible)
+ {
+ if (this._icon) {
+ this.remove(this._icon);
+ };
+ }
+ else
+ {
+ this._createIcon();
+
+ if (this._icon.getParent() != this) {
+ this._legend.addAtBegin(this._icon);
+ };
+ };
+};
+
+
+
+
+/*
+
-------------------------------------------------------------------------------
+ EVENT-HANDLER
+
-------------------------------------------------------------------------------
+*/
+
+proto._onclick = function(e) {
+ this.getParent().toggleChecked();
+};
+
+proto._onkeydown = function(e)
+{
+ if(e.getKeyCode() == QxKeyEvent.keys.enter && !e.getAltKey()) {
+ this.getParent().toggleChecked();
+ };
+};
+
+proto._onkeyup = function(e)
+{
+ if(e.getKeyCode() == QxKeyEvent.keys.space) {
+ this.getParent().toggleChecked();
+ };
+};
@@ -142,9 +323,15 @@
if (this.getDisposed()) {
return true;
};
-
+
if (this._legend)
{
+ if (this._checkable) {
+ this._legend.removeEventListener(QxGlobal.EVENT_TYPE_CLICK,
this._onclick);
+ this._legend.removeEventListener(QxGlobal.EVENT_TYPE_KEYDOWN,
this._onkeydown);
+ this._legend.removeEventListener(QxGlobal.EVENT_TYPE_KEYUP,
this._onkeyup);
+ }
+
this._legend.dispose();
this._legend = null;
};
