Sparklebear: Creating An Annoying Window Frame With Edje

I decided today to take some time and do something which I’m about to advocate in a presentation: write a fun developer tutorial. Will I succeed? Maybe.

Step 1: Figure out what the hell to write about.
I see lots of tutorials on various programming languages or toolkits, and the examples are almost always boring and a waste of my time. As the E18ReleaseManager, I’ll need to write a tutorial which is the opposite: interesting and a waste of my time.

Step 2: Ensure that the tutorial has no practical application.
If I tell people how to write an IRC client, I’ll get flooded by people testing their clients or asking for help. This has to be a tutorial for something which can’t possibly be used for any purpose other than the one that I plan for.

Step 3: Find an artist.
Tutorials which use custom artwork are always much better than other tutorials. I had the amazing Paul Amesbury at my side for a few minutes today to accomplish exactly this purpose. Beautiful custom artwork: check.

 

Step 4: Explain the tutorial’s purpose.

See the title of this post. I don’t think I really need to go into more detail, do I?

 

Step 5: Write the code.

WordPress doesn’t format code effectively.

Going over the code here is hard since you’ll have to flip back and forth, but I have to waste more time flipping back and forth just to write it so I think it’ll even out.

• I’ve inherited the default border frame group using Edje’s group inheritance mechanism. This gives me a sort of blank slate that I can modify, and it’ll still behave just like the default frame.
• The gorgeous custom artwork replaces the normal, boring frame gradient.
• A new part, stacked above (insert_after) the normal top of the frame, is set as a PROXY, meaning it just renders the exact same thing as its source: in this case, the top of the border. This allows me to use the original geometry of the top of the frame.
• The rest of the part code is just overwriting some geometry from the original group so that the objects will remain relative to the new proxy object at all times.
• There’s really only three important programs here:

1. “in” – sets the coordinates when the mouse enters the frame
2. “out” – resets the frame (using animations!) when the mouse leaves it
3. “anim” – increases the usability of the frame by moving it towards the mouse

• The rest of the programs just block the usability-enhancing program during resize; we don’t want to be TOO helpful!

 

Step 6: Commit to upstream, preferably without testing, to let your readers know that you made an awesome code drop.

I’ve failed part of this since I spent some time explaining the merits of the usability-enhancing frame to my coworkers, and thus did some actual testing. My apologies to all the readers out there.

 

Step 7: Screenshots.

I would have made a movie or a gif, but…I didn’t.

Here’s a shot of this artistic window frame in its natural, focused state:

Another shot while focused, this time we see the frame utilizing its increased mobility to enhance my experience while trying to close the window.

And, lastly, here’s another shot (this time unfocused!) where the frame is helpfully moving aside so that I can click the conveniently located button behind it.

 

 

And there you have it: an unparalleled, step-by-step developer tutorial on how to create beautiful and helpful new window frames for E18 using Edje.

 

Other Items Of Import:

• Systray no longer sometimes shrinks to 0x0 when its contents are cleared
• Appmenus using dbus no longer crash
• Shaped windows now set input rectangles more accurately and effectively

This entry was posted by e-releasemanager.

• May 9, 2013
• Uncategorized
• 5 Comments