Grid decorator questions

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

Grid decorator questions

Jean-Noël Rivasseau
Hello,

I am using the grid decorator quite a lot and got the following questions:

* Sometimes I have to use not the whole 8 images of the decorator. For instance I don't want to use the top part. How can I tell Qx not to complain at runtime about missing -tl, -t, and -tr images? Currently I got these warning messages on the console and I really don't like them.

* How can I configure the splitting job (the one that cuts an image in small pieces) to cut with different widths for the left and right for instance? Currently it seems only possible to specify an "uniform" width, which often is not what we want.

Thanks,

Jean-Noel

------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Grid decorator questions

Noggin182
Just a note to the team, this is something we would be interested in as
well. The ability to specify the border width on each edge.

Matt

Jean-Noël Rivasseau wrote:

> Hello,
>
> I am using the grid decorator quite a lot and got the following questions:
>
> * Sometimes I have to use not the whole 8 images of the decorator. For
> instance I don't want to use the top part. How can I tell Qx not to
> complain at runtime about missing -tl, -t, and -tr images? Currently I
> got these warning messages on the console and I really don't like them.
>
> * How can I configure the splitting job (the one that cuts an image in
> small pieces) to cut with different widths for the left and right for
> instance? Currently it seems only possible to specify an "uniform"
> width, which often is not what we want.
>
> Thanks,
>
> Jean-Noel
>
>
> ------------------------------------------------------------------------
>
> ------------------------------------------------------------------------------
> Come build with us! The BlackBerry(R) Developer Conference in SF, CA
> is the only developer event you need to attend this year. Jumpstart your
> developing skills, take BlackBerry mobile applications to market and stay
> ahead of the curve. Join us from November 9 - 12, 2009. Register now!
> http://p.sf.net/sfu/devconference
>
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Grid decorator questions

Daniel Wagner
Administrator
In reply to this post by Jean-Noël Rivasseau
Hi Jean-Noël,

Jean-Noël Rivasseau schrieb:
> Hello,
>
> I am using the grid decorator quite a lot and got the following questions:
>
> * Sometimes I have to use not the whole 8 images of the decorator. For
> instance I don't want to use the top part. How can I tell Qx not to
> complain at runtime about missing -tl, -t, and -tr images? Currently I
> got these warning messages on the console and I really don't like them.

The image names are hard coded in the Grid decorator, so you'll have to
write your own decorator inheriting from qx.ui.decoration.Grid.

>
> * How can I configure the splitting job (the one that cuts an image in
> small pieces) to cut with different widths for the left and right for
> instance? Currently it seems only possible to specify an "uniform"
> width, which often is not what we want.
>

I don't think this is possible, sorry.

> Thanks,
>
> Jean-Noel
>

Regards,
Daniel

>
> ------------------------------------------------------------------------
>
> ------------------------------------------------------------------------------
> Come build with us! The BlackBerry(R) Developer Conference in SF, CA
> is the only developer event you need to attend this year. Jumpstart your
> developing skills, take BlackBerry mobile applications to market and stay
> ahead of the curve. Join us from November 9 - 12, 2009. Register now!
> http://p.sf.net/sfu/devconference
>
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Grid decorator questions

Daniel Wagner
Administrator
Hi again,

I forgot to add: Feel free to open an enhancement bug report for the
clipped image widths.


Regards,
Daniel

------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Grid decorator questions

Thomas Herchenroeder
In reply to this post by Jean-Noël Rivasseau

>
> * How can I configure the splitting job (the one that cuts an image in
> small pieces) to cut with different widths for the left and right for
> instance? Currently it seems only possible to specify an "uniform"
> width, which often is not what we want.
>
Yep. If you want something different, do the splitting by hand using
ImageMagick's  "convert" command. You can look at
tool/pylib/generator/action/ImageClipping.py:ImageClipping.slice() to
see how it's done.

T.

------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Grid decorator questions

Jean-Noël Rivasseau
I opened a bug report for this improvement:

http://bugzilla.qooxdoo.org/show_bug.cgi?id=2962

What worries me more is the fact that the Grid decorator always try to find all images. This is *really* not nice, I got 404 in my apps just because it tries to load a top image when it should not, eg, I dont want the top image to be used.

Is someone willing to write a quick patch to implement the possibility of not using a full grid?

Jean-Noel

On Wed, Oct 21, 2009 at 10:40 AM, thron7 <[hidden email]> wrote:

>
> * How can I configure the splitting job (the one that cuts an image in
> small pieces) to cut with different widths for the left and right for
> instance? Currently it seems only possible to specify an "uniform"
> width, which often is not what we want.
>
Yep. If you want something different, do the splitting by hand using
ImageMagick's  "convert" command. You can look at
tool/pylib/generator/action/ImageClipping.py:ImageClipping.slice() to
see how it's done.

T.

------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Grid decorator questions

Noggin182
Jean-Noël Rivasseau wrote:

> I opened a bug report for this improvement:
>
> http://bugzilla.qooxdoo.org/show_bug.cgi?id=2962
>
> What worries me more is the fact that the Grid decorator always try to
> find all images. This is *really* not nice, I got 404 in my apps just
> because it tries to load a top image when it should not, eg, I dont want
> the top image to be used.
>
> Is someone willing to write a quick patch to implement the possibility
> of not using a full grid?
Attached :)

I'll upload the patch to the report as well.

HTH!
Matt


> Jean-Noel
>


Index: framework/source/class/qx/ui/decoration/Grid.js
===================================================================
--- framework/source/class/qx/ui/decoration/Grid.js (revision 20391)
+++ framework/source/class/qx/ui/decoration/Grid.js (working copy)
@@ -115,6 +115,7 @@
     __markup : null,
     __images : null,
     __edges : null,
+    __parts : null,
 
 
     // overridden
@@ -151,6 +152,7 @@
       var Decoration = qx.bom.element.Decoration;
       var images = this.__images;
       var edges = this.__edges;
+      var parts = (this.__parts = {});
 
       // Create edges and vertical sides
       // Order: tl, t, tr, bl, b, bt, l, c, r
@@ -161,20 +163,36 @@
       // dragging when the cursor is in the text field in Spinners etc.
       html.push('<div style="position:absolute;top:0;left:0;overflow:hidden;font-size:0;line-height:0;">');
 
+      function addPart(part, repeat, style)
+      {
+        if ((style.top    !== 0 || edges.top)    &&
+            (style.left   !== 0 || edges.left)   &&
+            (style.bottom !== 0 || edges.bottom) &&
+            (style.right  !== 0 || edges.right))
+        {
+          parts[part] = html.length - 1;
+          html.push(Decoration.create(images[part], repeat, style));
+        }
+        else
+        {
+          parts[part] = -1;
+        }
+      }
+
       // Top: left, center, right
-      html.push(Decoration.create(images.tl, "no-repeat", { top: 0, left: 0 }));
-      html.push(Decoration.create(images.t, "scale-x", { top: 0, left: edges.left + "px" }));
-      html.push(Decoration.create(images.tr, "no-repeat", { top: 0, right : 0 }));
+      addPart("tl", "no-repeat", { top: 0, left: 0 });
+      addPart("t",  "scale-x",   { top: 0, left: edges.left + "px" });
+      addPart("tr", "no-repeat", { top: 0, right : 0 });
 
       // Bottom: left, center, right
-      html.push(Decoration.create(images.bl, "no-repeat", { bottom: 0, left:0 }));
-      html.push(Decoration.create(images.b, "scale-x", { bottom: 0, left: edges.left + "px" }));
-      html.push(Decoration.create(images.br, "no-repeat", { bottom: 0, right: 0 }));
+      addPart("bl", "no-repeat", { bottom: 0, left:0 });
+      addPart("b",  "scale-x",   { bottom: 0, left: edges.left + "px" });
+      addPart("br", "no-repeat", { bottom: 0, right: 0 });
 
       // Middle: left, center, right
-      html.push(Decoration.create(images.l, "scale-y", { top: edges.top + "px", left: 0 }));
-      html.push(Decoration.create(images.c, "scale", { top: edges.top + "px", left: edges.left + "px" }));
-      html.push(Decoration.create(images.r, "scale-y", { top: edges.top + "px", right: 0 }));
+      addPart("l", "scale-y", { top: edges.top + "px", left: 0 });
+      addPart("c", "scale",   { top: edges.top + "px", left: edges.left + "px" });
+      addPart("r", "scale-y", { top: edges.top + "px", right: 0 });
 
       // Outer frame
       html.push('</div>');
@@ -189,6 +207,7 @@
     {
       // Compute inner sizes
       var edges = this.__edges;
+      var parts = this.__parts;
       var innerWidth = width - edges.left - edges.right;
       var innerHeight = height - edges.top - edges.bottom;
 
@@ -200,14 +219,21 @@
       element.style.width = width + "px";
       element.style.height = height + "px";
 
-      element.childNodes[1].style.width = innerWidth + "px";
-      element.childNodes[4].style.width = innerWidth + "px";
-      element.childNodes[7].style.width = innerWidth + "px";
+      function fixSize(index, fixWidth, fixHeight)
+      {
+        if (index !== -1)
+        {
+          var part = element.childNodes[index];
+          if (fixWidth)  { part.style.width  = innerWidth  + "px"; }
+          if (fixHeight) { part.style.height = innerHeight + "px"; }
+        }
+      }
+      fixSize(parts.t, true,  false);
+      fixSize(parts.b, true,  false);
+      fixSize(parts.c, true,  true);
+      fixSize(parts.l, false, true);
+      fixSize(parts.r, false, true);
 
-      element.childNodes[6].style.height = innerHeight + "px";
-      element.childNodes[7].style.height = innerHeight + "px";
-      element.childNodes[8].style.height = innerHeight + "px";
-
       if (qx.core.Variant.isSet("qx.client", "mshtml"))
       {
         // Internet Explorer as of version 6 or version 7 in quirks mode
@@ -220,31 +246,23 @@
         if (qx.bom.client.Engine.VERSION < 7 ||
           (qx.bom.client.Feature.QUIRKS_MODE && qx.bom.client.Engine.VERSION < 8))
         {
-          if (width%2==1)
+          var marginRight  = width  % 2 ? "-1px" : "0px";
+          var marginBottom = height % 2 ? "-1px" : "0px";
+          
+          function fixMargin(index, fixRight, fixBottom)
           {
-            element.childNodes[2].style.marginRight = "-1px";
-            element.childNodes[5].style.marginRight = "-1px";
-            element.childNodes[8].style.marginRight = "-1px";
+            if (index !== -1)
+            {
+              var part = element.childNodes[index];
+              if (fixRight)  { part.style.marginRight  = marginRight;  }
+              if (fixBottom) { part.style.marginBottom = marginBottom; }
+            }
           }
-          else
-          {
-            element.childNodes[2].style.marginRight = "0px";
-            element.childNodes[5].style.marginRight = "0px";
-            element.childNodes[8].style.marginRight = "0px";
-          }
-
-          if (height%2==1)
-          {
-            element.childNodes[3].style.marginBottom = "-1px";
-            element.childNodes[4].style.marginBottom = "-1px";
-            element.childNodes[5].style.marginBottom = "-1px";
-          }
-          else
-          {
-            element.childNodes[3].style.marginBottom = "0px";
-            element.childNodes[4].style.marginBottom = "0px";
-            element.childNodes[5].style.marginBottom = "0px";
-          }
+          fixMargin(parts.tr, true,  false);
+          fixMargin(parts.r,  true,  false);
+          fixMargin(parts.br, true,  true);
+          fixMargin(parts.bl, false, true);
+          fixMargin(parts.b,  false, true);
         }
       }
     },

------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Grid decorator questions

Fabian Jakobs
Administrator
In reply to this post by Jean-Noël Rivasseau
Hi Jean-Noël,
> * Sometimes I have to use not the whole 8 images of the decorator. For
> instance I don't want to use the top part. How can I tell Qx not to
> complain at runtime about missing -tl, -t, and -tr images? Currently I
> got these warning messages on the console and I really don't like them.
Are you aware of the HBox and VBox decoratros? They are pretty new and
work very similar to the grid decorator but use 3 instead of 9 images.
Maybe they fit some of your needs.
<http://news.qooxdoo.org/the-week-in-qooxdoo-2009-05-15>

Best Fabian


--
Fabian Jakobs
JavaScript Framework Developer

1&1 Internet AG - Web Technologies
Ernst-Frey-Straße 9 · DE-76135 Karlsruhe
Telefon: +49 721 91374-6784
[hidden email]

Amtsgericht Montabaur / HRB 6484
Vorstände: Henning Ahlert, Ralph Dommermuth, Matthias Ehrlich, Thomas Gottschlich, Robert Hoffmann, Markus Huhn, Hans-Henning Kettler, Dr. Oliver Mauss, Jan Oetjen
Aufsichtsratsvorsitzender: Michael Scheeren


------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel