Seamless configuration and dialog windows.

18Jul08

Lets talk about borders.

A border is typically something to define a region and give some sort of control to that area. In E17 we are luck enough to not only control the border, but also the actual area the program is drawn in. What does that mean? Well, since its a ’swallow’ object it can be manipulated with position and clipping. Here Im going to show you how to make a border blend seamlessly with the dialog window background.

Firstly, make sure the ‘e.swallow.client’ part is not relative to anything but the evas object. Here is what I will use.

      part {
	 name:          "e.swallow.client";
	 type:          SWALLOW;
	 description {
	    state:    "default" 0.0;
	    rel1 {
	       relative: 0.0  0.0;
	       offset:   5    20;
	    }
	    rel2 {
	       relative: 1.0  1.0;
	       offset:   -6   -6;
	    }
	 }
      }

The ‘relative:’ settings here are redundant so you can take it out, but Ill leave it in just so its clear. Notice the rather big Y value for the rel1 position? that means the titlebar is exactly 20 pixels tall. Make a note of these numbers. Lets move on to the dialog background! And here it is.

      part {
	 name:          "base";
	 mouse_events:  0;
	 description {
	    state:    "default" 0.0;
	    rel1.offset:   -5    -20;
	    rel2.offset:   5   5;
	    image {
	       normal: "surface.png";
	       border: 8 8 8 8;
	    }
	    fill {
	       smooth: 0;
	    }
	 }
      }

You might notice the opposites for the offsets. The rel2 values tho are special. Since the bottom right corner is actually classed as -1, the numbers are exactly 5 away from -1.  The border of the image is also crucial to this effect. If one border is different to the other, the pixmap will scale differently and wont match up to the border.

Once the matching areas are finished, compile up the edje and test it out. This technique doesnt have to be applied to all borders, but it certainly makes your dialog boxes standout as a feature against the regular window borders.

On a side note, I have tried this with GTK but it lacks the flexability of Edje and fails at simply drawing a non-tiled pixmap as the background.

And now for some results.

Enjoy!

Toma

Seamless borders demonstration

Filed under: Edje   |  Leave a Comment
Tags: borders, Edje, themes