March 2009

In flex,  You could skin components programmatically using Degrafa. And I have been doing just that eversince I got a new job here in Makati – trying to skin flex components using the Declarative Graphic Framework.

 I discovered degrafa from googling on ways to skin flex components.

I got a lot of results of course and I started on using (I mean trying to use) graphical skins (the easiest since I knew CSS)

Then I learned programmatic skinning (BUT I DON’T KNOW ACTION SCRIPT!!!) So i turned back to graphical skinning. The thing is that, I keep exporting png files from Inkscape, and keep redrawing them so I tried to google ways on using SVG for skinning instead

and I got Flex”i”MMI which mentioned degrafa.. 

(Ok, enough about that)

I get started on skinning components and I had fun (still having) . So I suggested my co-worker that I’d be using this library instead of learning actionscript drawing tool. Since I understand xml and I know Inkscape.

All in all everything is quite alright until I get to skin a checkbox, which until now, I did not learn how to do. Thanks to Mr. Patrick Hansen for sharing his code and showing me how to do it..

Now I’ll try it and let’s see if it goes alright. 

I’ll have to try too if this works drawing icons on button controls.. 😀


I’ve been using degrafa for a while but can’t quite grasp how to fully utilize the RadielGradientFill.

Here’s what i want to achieve:


It’s an elliptical gradient on a elliptical path. The center of a gradient is slightly off the horizontal x-axis and the radius of the circular gradient is bigger than that of the path.

Usually I create my vector graphics using Inkscape and then used   the generated SVG in xml format (you could do this by clicking the  xml icon – inkscape-xml-icon-toolbar)  in my degrafa objects.

Oh I know how to define simple radial gradients in degrafa but i could only produce circular gradients and i cant even change the x and y axis coordinates of the center.

I was quite frustrated because i dont know how to use the properties of the radial gradient fill to achieve the desired result. So I applied brute force, that is try – and – see method by defining one parameter and see how it affects the gradient to no avail.

Every once in a while I stop and search google for answers using vague keywords like: Degrafa RadialGradientFill  cx (coz the docs says you use this to offset the x-axis of your radial gradient).

And then finally i decided i have to see the code itself so that I could analyze where it happens, and what part of the code decides on how to draw the gradient.

So after downloading the degrafa source code, I saw on

com/degrafa/ on line 174 (under the function

 override public function begin(graphics:Graphics, rc:Rectangle))

The culprit was you have to define  the cx, cy and radius of the fill rather than just the cx and cy.

Like this one:

< RadialGradientFill cx="{rx*1.10}" cy="{ry}" radiusX="{rx*1.11}" radiusY="{ry*1.44}">

where rx=this.width/2 and ry = this.height/2

I thought (radius) should have a default value. (I found out that this is not the case.. 😀 )

See! I’m learning!

Most of the times, I cannot find a direct solution/instructions/guide to simple things such as this one. For example should have pointed out (specially for beginners like me) that cx and cy attributes do not make sense without defining the radius first.

I know, i know.. for most this maybe an obvious thing. But who knows, someone like me might have been stuck on this same problem too.. 😛



loving degrafa more and more

Since the mid-sem of 2007 when I decided I won’t continue my MS Physics Degree, (not that I’ve advanced on that course since it was just my first sem.) I became part of the world of Information Technology, specifically on developing web-based applications. 

It’s not much, at the first few weeks on my new world, I studied the basics of web developing then went on actually making applications, studying business systems and how to put them in an (if  else conditions) – like situations, I’ve put up thousands (an exagaration of course) of table definitions having simple to complex relationship of insufferable number of foreign keys. To designing how the UI (gui – pronounced as goowee by mike)  will look like, predicting what stupidity a user might do on a form and to the era of web2.0 – the rich internet application.

From a hopeful (scholar) and researcher, studying the sintering parameters on which a bulk sample of YBCO may or may not lose its ability to superconduct, I became a web developer.

I know, there’s a lot of people like me who pursued a job unrelated to their finished course.. And there’s a lot of people too who keep asking me, why I landed this job.

It’s a mere timing, I guess(and lack of right judgement, stupidity and a bit naivety), a possible career in electronics was offered to me (that would actually bring me to Japan, if you know me, I really wanted to go to that country) right after I was accepted at a humble IT company in UP, so I declined it. After that, I continually declining succeeding offers related to semiconductor industry (both in failure analysis and research & development). Maybe because I was just plain stupid or I feel that UP is still the place I want to be, so I stayed there learning Java – (which used to be ‘only’ a flavor of coffee to me.), SQL, PHP, CSS, and a bit of Javascript.

In all honesty, I enjoy learning. The reason I did not stay much in MS is that, I found myself complaining over and over again about the lack of change in my study habits (and lack of money too!) that I felt that (actually spending my own money for my studies) is not worth it. Besides that I am not that good in Physics. See, in physics you could almost classify people there into two categories: the geniuses (damn them!) and the patient – hardworking ones. And I fall on the second category.  

So I decided to put my ‘hard-working’ attitude on somewhere else since producing research output as fast as what my boyfriend can do is like drinking one whole glass of milk without pooping. 

I am loving my current work now and I feel like I’m in  doing something I like and what I have to (like earning money for real).  

Physics shaped me to become an empowered individual who knows, who can and who does. Working on the other hand, helped me get intact with reality. Become financially independent and responsible and mature enough to deal with a variety of individuals who may or may not think the same way as I do, unlike when you are in a small institute, you (most of the time) have the same wave-lengths same culture almost similar personalities.

Well. i could probably say, I’ve grown up. 😀

(thouhg my height is still 4’11). I am proud that I’ve learned and still learning.

I have a history of learning how to round – up corners using CSS to Javascript.  But I’m not saying I’m an expert to any of these fields (namely CSS and Javascript). It just happens that my previous job has provided me enough space and opportunity to learn some techniques and skills on these area. (Thanx to Sir Troy for that)

Ive gone from using tables plus external images (atleast four) to generate a container with round corners. (a primitive way i think). This was the time where tables are the mainstream for layouting your page.

Then come the tableless layout using div. It was a remarkable alternative from layouting webpages. Using tables are messy (code-wise) and ugly. Div’s are seamless and with CSS positioning and all that, div is the way to go for layout.

I adapted how layouts their template by superimposing atleast three divs on top of each other and positioning these div’s in such a way that any of them can take the left, center, and right part of a rounded rectangle as a background image.

Soon, since I always look for better alternatives, I discovered nifty corners  and my quest for rounded corners finally ended. 😀

I love the library of nifty corners. Easy, light and direct.

I never had a problem with it until I have to make a site with background gradients and rounded corners and I opted not to use the (sliding doors of css by on my tabs. Simply because I am in no mood to reconsider all the prerequisites of a sliding doors of css  (the background images for the left and the sliding door side).

I looked for js libs that could create the bg gradient for me. But found nothing that suits my taste. So after an hour of searching and trying, I gave up and went back to images. Surely, a single background gradient from an external image will not be that hard to load compared to the (3 images from rockettheme’s style).

And then i tried if i could use nifty corners to round up the top of my div, and a single image file (gradient) as bg image for that div and voila! It worked…

I have yet to see if i could mimic the sliding doors though. 😀

it’s my task for the coming night. 😀

Since starting inkscape, I have this problem with gradient paths. It does not move along with the object.

here’s a link to a post that helped  me find the trick.