Hello Martin, thanks for your answer.
After two days reading qooxdoo code, i found a similar way to what i
wanted. As i said in my question, i need total control using CSS so i
have decided to create a new layout and container and avoid all
unwanted modifications in style attribute by qooxdoo classes.
This is my idea (sorry but is not ready for playground):
//////////////////////////////////////////////////////////////////////////////////////////
qx.Class.define("infotran.ui.container.Responsive", {
extend : qx.ui.container.Composite,
members : {
__applyCssClass : function (value, oldValue)
{
var _el = this.getContentElement();
_el.removeClass(oldValue);
_el.addClass(value);
},
_computeSizeHint : function ()
{
return {
height : 0,
minHeight : 0,
maxHeight : 0,
width : 0,
minWidth : 0,
maxWidth : 0
};
},
_createContentElement : function ()
{
var _el = new qx.html.Element("div");
_el.addClass(this.getCssClass());
return _el;
},
_getContentHint : function ()
{
return this._computeSizeHint();
},
getInnerSize : function ()
{
return this._computeSizeHint();
},
getInsets : function ()
{
return {
top : 0,
right : 0,
bottom : 0,
left : 0
};
},
getSizeHint : function ()
{
return this._computeSizeHint();
}
},
properties : {
cssClass : {
apply : '__applyCssClass',
check : 'String',
init : 'row'
}
}
});
qx.Class.define("infotran.ui.layout.Responsive", {
extend : qx.ui.layout.Abstract,
members : {
getHeightForWidth : function (width)
{
return null;
},
renderLayout : function (availWidth, availHeight, padding)
{
},
verifyLayoutProperty : qx.core.Environment.select(
"qx.debug",
{
"true" : function (item, name, value)
{
console.log(arguments);
},
"false" : null
}
)
}
});
qx.Class.define("infotran.ui.basic.Cell", {
extend : qx.ui.core.Widget,
construct : function (text)
{
this.base(arguments);
var _el = this.getContentElement();
_el.setValue(text);
_el.setAttribute('style', '');
},
members : {
__applyColumns : function (value, oldValue)
{
var _el = this.getContentElement();
_el.removeClass('cols-' + oldValue);
_el.addClass('cols-' + value);
},
_createContentElement : function ()
{
var _el = new qx.html.Label();
_el.addClass('cols-' + this.getColumns());
return _el;
}
},
properties : {
columns : {
apply : '__applyColumns',
check : 'Integer',
init : 1
}
}
});
qx.Class.define("infotran.Application", {
extend : qx.application.Standalone,
members : {
main : function ()
{
this.base(arguments);
if (qx.core.Environment.get("qx.debug"))
{
qx.log.appender.Native;
}
var _c = new infotran.ui.container.Responsive();
_c.add(new infotran.ui.basic.Cell('Test 1'));
_c.add(new infotran.ui.basic.Cell('Test 2'));
var _root = this.getRoot();
_root._setLayout(new infotran.ui.layout.Responsive());
_root.add(_c);
}
}
});
//////////////////////////////////////////////////////////////////////////////////////////
The above code reduce the time for rendering elements enormously
because no calculations are made and leaves quite clean DOM:
<div qxclass="qx.ui.root.Application" tabindex="1" qxselectable="off">
<div class="row" qxclass="infotran.ui.container.Responsive" qxselectable="off">
<div qxclass="infotran.ui.basic.Cell" qxselectable="off"
class="cols-1" style="">Test 1</div>
<div qxclass="infotran.ui.basic.Cell" qxselectable="off"
class="cols-1" style="">Test 2</div></div>
</div>
The main problem is with qx.ui.core.Widget. The __createContentElement
is private and is messing the DOM applying unnecesary styles
(boxSizing, zIndex, position) so i can't overwrite it and other
methods are adding overflow*, cursor:default, etc.
For now, i am patching qx.html.Element for filtering styles (may be in
next releases of qooxdoo this problematics methods may be overriden):
//////////////////////////////////////////////////////////////////////////////////////////
qx.Mixin.define('infotran.mixin.MElement', {
members : {
setStyle : function (key, value, direct)
{
var _accept = [
// Styles accepted: display, etc..
];
if (_accept.indexOf(key) != -1)
{
this.base(arguments, key, value, direct);
}
},
setStyles : function (map, direct)
{
for (var _style in map)
{
if (map.hasOwnProperty(_style))
{
this.setStyle(_style, map[_style], direct);
}
}
}
}
});
qx.Class.patch(qx.html.Element, infotran.mixin.MElement);
//////////////////////////////////////////////////////////////////////////////////////////
What do you think about this approach? Some ideas? I need the DOM
clean of styles, only need 'class' attribute in elements. Of course,
some inline styles are necessary (i.e. 'display' is necessary for
hide/show elements).
By the way, reading the qooxdoo code i have found that the code in
qx.html.Element.setStyle and qx.html.Element.setStyles are very
similar, so you can refactor it. And i found an error in
qx.ui.layout.HBox example doc: "Here is a little example of how to use
the grid layout.", so instead grid should be HBox. Sorry, but i have
not github account for to pull a request.
Regards
Joaquin F.
> Hey,
> I'll have only one page in my app. The content is dynamic in center
> widget. In small screen, the west part will be put in drop down menu
>
> I need to use form widgets and layouts in my app and i can't see how
> to do responsive using any qooxdoo application class:
>
> - qx.application.Standalone: Use themes and themes are very
> inflexibles with values. Font size, html widths and heights are
> integer numbers, i can't use proportional grids, i can't use SASS, no
> media queries, etc.
> Well, you mean you can?t use it the way you would expect it. The desktop like
> apps can be put into something everyone likes to call responsive. There is a
> media query class [1] which can be used to define break points your app can
> react on meaning e.g. moving the west part of your app into a new container /
> spot or change the font size. Additionally, the root widget features a resize
> event which can also be used to react on dimension changes of the app. The
> width and height are numbers as long as you set them to a specified width.
> But you can also use flex values [2] which leads to a fluid design.
>
> - qx.application.Mobile: Use NavigationPage as main widget but i need
> some similar to qx.ui.layout.Dock.
> - qx.application.Native : No UI widgets.
> - qx.application.Inline : No UI widgets.
> - qx.ui.website Widgets: No form widgets.
>
> I could use qxWeb and basic HTML form elements, but i need qx.ui.form
> widgets existant functionalities.
>
> Which is the best approach for responsive web applications using qooxdoo?
>
> If you need the power of qx.desktop widgets, you have to stick with the first
> mentioned application class. But as described, it is possible to get your app
> responsive. But we also know that this is not a suitable and perfect solution
> so there might be some changes in the future for better responsive support.
>
> Regards,
> Martin
>
> [1] http://demo.qooxdoo.org/current/apiviewer/#qx.bom.MediaQuery
> [2] http://manual.qooxdoo.org/current/pages/desktop/ui_layouting.html#flex
------------------------------------------------------------------------------
Learn Graph Databases - Download FREE O'Reilly Book
"Graph Databases" is the definitive new guide to graph databases and their
applications. Written by three acclaimed leaders in the field,
this first edition is now available. Download your free book today!
http://p.sf.net/sfu/NeoTech
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
