Re: [qooxdoo-devel] Missing the "decoration" feature in mobile environment

Christopher Zündorf Wed, 14 Nov 2012 07:49:29 -0800

Hi Ralf,

1:


You can overwrite the method createScrollContainer() of your NavigationPage.
Then you are completely free, with scrolling.

// overridden
    _createScrollContainer : function()
    {
      // MapContainer
      var layout = new qx.ui.mobile.layout.VBox().set({
        alignX : "center",
        alignY : "middle"
      });

      var container = new qx.ui.mobile.container.Composite(layout);
      return container;
    },

Another way:

Check out
NavigationPage(Boolean<https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean>
 wrapContentByGroup, 
Abstract<http://demo.qooxdoo.org/devel/apiviewer/#qx.ui.mobile.layout.Abstract> 
layout)

the parameter wrapContentByGroup gives you the possibility to remove the 
padding around your content.

2.

dec.setScaleX(10);
dec.setScaleY(10);

As far as I see, you want to repeat the background of the the borders ,do you?

Have a look at this CSS feature:

http://www.css3.info/preview/border-image/


Greetz Christopher



Am 14.11.2012 um 15:27 schrieb kora:

Hi,

I'm trying to use combinations of HBox & VBox to make a decoration around an
Image/Widget.

I have two problems:

1.Adding a Widget to a HBox & VBox seems to add a gaps on the right / bottom
of the Widget (you can see them because I changed the background color).
 How can I get rid of that gaps ?

2.How can I stretch / clip
the horizontal decoration image in horizontal direction
the vertical decoration image in vertical direction referring the
Image/Widget "width/heigth"  ?

Cheers

Kora

Here is my playground code:

http://demo.qooxdoo.org/current/playground/#%7B%22code%22%3A%22%2520%2520%2520%2520var%2520page%2520%253D%2520new%2520qx.ui.mobile.page.NavigationPage%28%29%253B%250A%2520%2520%2520%2520page.addListener%28%2522initialize%2522%252C%2520function%28%29%257B%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520var%2520dec%253B%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520var%2520topDecoContainerLayout%2520%253D%2520new%2520qx.ui.mobile.layout.HBox%28%29.set%28%257BalignX%253A%2522left%2522%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520var%2520varTopDecoContainer%2520%253D%2520new%2520qx.ui.mobile.container.Composite%28topDecoContainerLayout%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520dec%2520%253D%2520new%2520qx.ui.mobile.basic.Atom%28null%252C%2520%2522qx%252Fdecoration%252FClassic%252Fshadow%252Fshadow-tl.png%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520qx.bom.element.Style.set%28dec.getContainerElement%28%29%252C%2522backgroundColor%2522%252C%2522%25230000F0%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varTopDecoContainer.add%2520%28dec%252C%2520%257Bflex%253A0%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520dec%2520%253D%2520new%2520qx.ui.mobile.basic.Atom%28null%252C%2520%2522qx%252Fdecoration%252FClassic%252Fshadow%252Fshadow-t.png%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520qx.bom.element.Style.set%28dec.getContainerElement%28%29%252C%2522backgroundColor%2522%252C%2522%2523A0A0A0%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varTopDecoContainer.add%2520%28dec%252C%2520%257Bflex%253A1%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520dec%2520%253D%2520new%2520qx.ui.mobile.basic.Atom%28null%252C%2520%2522qx%252Fdecoration%252FClassic%252Fshadow%252Fshadow-tr.png%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520qx.bom.element.Style.set%28dec.getContainerElement%28%29%252C%2522backgroundColor%2522%252C%2522%252300F000%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varTopDecoContainer.add%2520%28dec%252C%2520%257Bflex%253A0%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520var%2520middleDecoContainerLayout%2520%253D%2520new%2520qx.ui.mobile.layout.HBox%28%29.set%28%257BalignX%253A%2522left%2522%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520var%2520varMiddleDecoContainer%2520%253D%2520new%2520qx.ui.mobile.container.Composite%28middleDecoContainerLayout%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520dec%2520%253D%2520new%2520qx.ui.mobile.basic.Atom%28null%252C%2520%2522qx%252Fdecoration%252FClassic%252Fshadow%252Fshadow-l.png%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520qx.bom.element.Style.set%28dec.getContainerElement%28%29%252C%2522backgroundColor%2522%252C%2522%2523EF00A0%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varMiddleDecoContainer.add%2520%28dec%252C%2520%257Bflex%253A0%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520dec%2520%253D%2520new%2520qx.ui.mobile.basic.Atom%28null%252C%2520%2522qx%252Fdecoration%252FClassic%252Fshadow%252Fshadow.png%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varMiddleDecoContainer.add%2520%28dec%252C%2520%257Bflex%253A1%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520dec%2520%253D%2520new%2520qx.ui.mobile.basic.Atom%28null%252C%2520%2522qx%252Fdecoration%252FClassic%252Fshadow%252Fshadow-r.png%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520qx.bom.element.Style.set%28dec.getContainerElement%28%29%252C%2522backgroundColor%2522%252C%2522%2523EF00A0%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varMiddleDecoContainer.add%2520%28dec%252C%2520%257Bflex%253A0%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520var%2520bottomDecoContainerLayout%2520%253D%2520new%2520qx.ui.mobile.layout.HBox%28%29.set%28%257BalignX%253A%2522left%2522%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520var%2520varBottomDecoContainer%2520%253D%2520new%2520qx.ui.mobile.container.Composite%28bottomDecoContainerLayout%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520dec%2520%253D%2520new%2520qx.ui.mobile.basic.Atom%28null%252C%2520%2522qx%252Fdecoration%252FClassic%252Fshadow%252Fshadow-bl.png%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520qx.bom.element.Style.set%28dec.getContainerElement%28%29%252C%2522backgroundColor%2522%252C%2522%252300F000%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varBottomDecoContainer.add%2520%28dec%252C%2520%257Bflex%253A0%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520dec%2520%253D%2520new%2520qx.ui.mobile.basic.Atom%28null%252C%2520%2522qx%252Fdecoration%252FClassic%252Fshadow%252Fshadow-b.png%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520qx.bom.element.Style.set%28dec.getContainerElement%28%29%252C%2522backgroundColor%2522%252C%2522%2523A0A0A0%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varBottomDecoContainer.add%2520%28dec%252C%2520%257Bflex%253A1%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520dec%2520%253D%2520new%2520qx.ui.mobile.basic.Atom%28null%252C%2520%2522qx%252Fdecoration%252FClassic%252Fshadow%252Fshadow-br.png%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520qx.bom.element.Style.set%28dec.getContainerElement%28%29%252C%2522backgroundColor%2522%252C%2522%25230000F0%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varBottomDecoContainer.add%2520%28dec%252C%2520%257Bflex%253A0%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520var%2520verticalImageContainerLayout%2520%253D%2520new%2520qx.ui.mobile.layout.VBox%28%29.set%28%257BalignY%253A%2522top%2522%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520var%2520varImageContainer%2520%253D%2520new%2520qx.ui.mobile.container.Composite%28verticalImageContainerLayout%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520varImageContainer.add%2520%28varTopDecoContainer%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varImageContainer.add%2520%28varMiddleDecoContainer%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varImageContainer.add%2520%28varBottomDecoContainer%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520page.getContent%28%29.add%28varImageContainer%29%253B%250A%2520%2520%2520%2520%257D%252C%2520this%29%253B%2520%2520%2520%2520%250A%2520%2520%2520%2520this.getManager%28%29.addDetail%28page%29%253B%250A%2520%2520%2520%2520page.show%28%29%253B%22%2C%20%22mode%22%3A%22mobile%22%7D<http://demo.qooxdoo.org/current/playground/#%7B%22code%22%3A%22%2520%2520%2520%2520var%2520page%2520%253D%2520new%2520qx.ui.mobile.page.NavigationPage%28%29%253B%250A%2520%2520%2520%2520page.addListener%28%2522initialize%2522%252C%2520function%28%29%257B%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520var%2520dec%253B%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520var%2520topDecoContainerLayout%2520%253D%2520new%2520qx.ui.mobile.layout.HBox%28%29.set%28%257BalignX%253A%2522left%2522%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520var%2520varTopDecoContainer%2520%253D%2520new%2520qx.ui.mobile.container.Composite%28topDecoContainerLayout%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520dec%2520%253D%2520new%2520qx.ui.mobile.basic.Atom%28null%252C%2520%2522qx%252Fdecoration%252FClassic%252Fshadow%252Fshadow-tl.png%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520qx.bom.element.Style.set%28dec.getContainerElement%28%29%252C%2522backgroundColor%2522%252C%2522%25230000F0%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varTopDecoContainer.add%2520%28dec%252C%2520%257Bflex%253A0%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520dec%2520%253D%2520new%2520qx.ui.mobile.basic.Atom%28null%252C%2520%2522qx%252Fdecoration%252FClassic%252Fshadow%252Fshadow-t.png%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520qx.bom.element.Style.set%28dec.getContainerElement%28%29%252C%2522backgroundColor%2522%252C%2522%2523A0A0A0%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varTopDecoContainer.add%2520%28dec%252C%2520%257Bflex%253A1%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520dec%2520%253D%2520new%2520qx.ui.mobile.basic.Atom%28null%252C%2520%2522qx%252Fdecoration%252FClassic%252Fshadow%252Fshadow-tr.png%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520qx.bom.element.Style.set%28dec.getContainerElement%28%29%252C%2522backgroundColor%2522%252C%2522%252300F000%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varTopDecoContainer.add%2520%28dec%252C%2520%257Bflex%253A0%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520var%2520middleDecoContainerLayout%2520%253D%2520new%2520qx.ui.mobile.layout.HBox%28%29.set%28%257BalignX%253A%2522left%2522%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520var%2520varMiddleDecoContainer%2520%253D%2520new%2520qx.ui.mobile.container.Composite%28middleDecoContainerLayout%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520dec%2520%253D%2520new%2520qx.ui.mobile.basic.Atom%28null%252C%2520%2522qx%252Fdecoration%252FClassic%252Fshadow%252Fshadow-l.png%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520qx.bom.element.Style.set%28dec.getContainerElement%28%29%252C%2522backgroundColor%2522%252C%2522%2523EF00A0%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varMiddleDecoContainer.add%2520%28dec%252C%2520%257Bflex%253A0%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520dec%2520%253D%2520new%2520qx.ui.mobile.basic.Atom%28null%252C%2520%2522qx%252Fdecoration%252FClassic%252Fshadow%252Fshadow.png%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varMiddleDecoContainer.add%2520%28dec%252C%2520%257Bflex%253A1%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520dec%2520%253D%2520new%2520qx.ui.mobile.basic.Atom%28null%252C%2520%2522qx%252Fdecoration%252FClassic%252Fshadow%252Fshadow-r.png%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520qx.bom.element.Style.set%28dec.getContainerElement%28%29%252C%2522backgroundColor%2522%252C%2522%2523EF00A0%2522%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520varMiddleDecoContainer.add%2520%28dec%252C%2520%257Bflex%253A0%257D%29%253B%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520var%2520bottomDecoContainerLayout%2520%253D%2520new%2520qx.ui.mobile.layout.HBox%28%>



--
View this message in context: 
http://qooxdoo.678.n2.nabble.com/Missing-the-decoration-feature-in-mobile-environment-tp7581966.html
Sent from the qooxdoo mailing list archive at Nabble.com.

------------------------------------------------------------------------------
Monitor your physical, virtual and cloud infrastructure from a single
web console. Get in-depth insight into apps, servers, databases, vmware,
SAP, cloud infrastructure, etc. Download 30-day Free Trial.
Pricing starts from $795 for 25 servers or applications!
http://p.sf.net/sfu/zoho_dev2dev_nov
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
Monitor your physical, virtual and cloud infrastructure from a single
web console. Get in-depth insight into apps, servers, databases, vmware,
SAP, cloud infrastructure, etc. Download 30-day Free Trial.
Pricing starts from $795 for 25 servers or applications!
http://p.sf.net/sfu/zoho_dev2dev_nov

_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

Re: [qooxdoo-devel] Missing the "decoration" feature in mobile environment

Reply via email to