Responsive web app

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

Responsive web app

Joaquín Fernández
Hello

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.
- 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?

Regards

Joaquin F.

------------------------------------------------------------------------------
Put Bad Developers to Shame
Dominate Development with Jenkins Continuous Integration
Continuously Automate Build, Test & Deployment
Start a new project now. Try Jenkins in the cloud.
http://p.sf.net/sfu/13600_Cloudbees
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web app

MartinWittemann
Administrator
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


------------------------------------------------------------------------------
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
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web app

Joaquín Fernández
In reply to this post by Joaquín Fernández
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
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web app

MartinWittemann
Administrator
Hey,

> 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):
> 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).
You created a layout doing nothing which means you can take pure CSS to control it. With that, you can achieve your goal. :)

> 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.
Thanks, fixed the typo. :)

Regards,
Martin
------------------------------------------------------------------------------
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
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel