Eating TabBar, with submenus
Eating TabBar, with submenus
Thought it might be time to do a website of my own just for fun, so I’m working on a Flex 4 website of my own, just to trial out some stuff and get some backend experience as well. I’m linking it here for easy access for myself as well.
Just a Flex fronteneded website hooked to Drupal backend. Was originally hooked to a Grails backend running of Google App Engine, till I found out that low traffic, causes the Grails instance to expire. Thus causing an almost 30 second wait for the instance to comeback up and serve data again, Pity, I really was enjoying groovy and Grails.
You can try out the website, but it is constantly changing!
A while back Ely Greenfield did a session entitled Flex Roadmap, where he demonstrated some of his ideas on MVC architecture for component development. When I first saw the videos, my jaw hit the floor. Using nothing but a series of MXML tags, he skinned styled and changed the look and feel of a simple List component into an accordion and then into a weird quasi menu/drop down thing. Ever since then, i’ve been waiting with baited breath for the next version of flex, but then reading Juan Sanchez blog at scalenine.com I’ve come to realise a big portion of my workload will be done for me.
For me one of the fun parts of working with flex, is building custom components. I love working with the three main functions, createchildren, commitproperties and updatedisplaylist. I get real joy knowing that I’ve made the component as lightweight as possible. However, I know that these new tags are going to make the framework even more optimized, and open up flex to create much more beautiful itemrenderers.
In response to Per Olsens comment about how the Charting components and AdvancedDataGrid is bound to the license of the Flex builder IDE, I actually don’t mind it to much! Just for clarification, I’ve never used the Design view to develop my application, so in all honesty I don’t really need to use flex builder 3 to develop with. I just do because its a pretty awesome IDE. As for the components, I’m quite happy to pay for them (OK my business pays for them) because at the end of the day, I do understand that adobe is a business, and it has to make money some how. They are a bargain for the price, plus you get to look at all the neat source code underneath, and marvel at how well written they are.
So I convinced my boss to buy Flex Builder 3 pro today, and i’m loving it. I’ve already spotted a memory leak, with the profiler! Not that its good news or the fact I can’t find out why the memory leak exists, but its damn nice to know that I can actully see it.
Can’t wait to try out the Advanced datagrid, as we are currently using a pretty nasty implmentation of repeaters and datagrids, which is slowing the hell out of the app.
Fun times ahead!
Couple of days ago, I had to write a custom container that would layout its children in a very specific way (four items in a diamond formation) and I also had to create a skin that would draw some lines connecting each of these items. I started by overriding the updatedisplaylist function, and put some code in to determine positions by the unscaledwidth and unscaledheight. Great!, next I added a sprite to the rawchildren on the container and programmatically drew some lines, Great! Perfect!
Then the spec changes…. They wanted a double border added to the container skin, to give it a nicer look (it also had to be controlled from CSS). So off I went to extend the haloborder skin to add another innerborder. Now, all skins that change the size of the border must also change its borderMetrics function, so that whenever a container uses this new border skin, it can know how much space it can use to draw its child objects.
After running it, I discovered that all the uicomponents were out of alignment to programmatically drawn lines, they all seemed to be slightly offset. Turns out that if you use extend container, all child UIcomponents will automatically take into account the edgemetrics from the chrome, and position themselves accordingly. That’s even after you use UIcomponent(someObj).move(x,y)! thats where viewMetricsAndPadding():EdgeMetrics comes in. This will tell you how much padding you need to save for when the scrollbar or thickend border comes into play. So anytime you are writing a custom component for non standard layout, don’t forget to check how much space you actually have!
Ok, just spent most of the day trying to fix a wierd bug with an itemrenderer and a popups. I have a button which exists only in the state “Expanded” but does not exist in the state “Normal”. When the button is clicked, the popupmanager creates a window and the state of reverts back to “Normal”, removing the button. Here is the kicker, If I click anywhere outside the popup, the focusmanager throw an error, something about a null value.
After some investigation, It turns out that clicking the button, it first gets focus, which is then passed to the popup when it is created. However since the button has then been removed, the focusmanager somehow gets confused when you try to click back on the main application, and refocus back on the old button. I’ve tried writing a small example, but its not happening, so its probably something i’m doing with Currentstate and its sequence.
You probably won’t experience this with any app you write, but it was bugging the hell out of me!
Aral has a new project What the hell is it!!, the suspense is killing me!
The main reason Ive been waiting for Degrafa, is the simple fact I’m not a designer. I’m crap at deciding colours, and even worse at deciding what are nice shapes to use on a website.
With Degrafa, the allure of making pretty shapes in MXML and being able to style it via binding and other such features seems pretty tempting. Whilst playing with stateful skins in flex 3, I’ve made a nice button which has unsymmetrical corners, a radial and liner fill, and some nice transitions between the two. However, it still looks a bit clunky, once again proving that I don’t have a designers bone in my body. I will still keep trying though, because I don’t want my flex app to look as samey as the rest.
I just like to say that the Degrafa team have done an awesome job at making styling and skinning as easy as possible, even though I don’t have the talent to use it, yet!
Damn it! Our app uses a movieclip to skin one of the flex components, and it basically requires a boundingbox to help with positioning and layout, so it can fit into the framework. Stupidly, I was drawing an rectangle with alpha colored border, so it wouldn’t display in the animation (its only there so I can read its X/Y position), and this was causing a small performance lag. When you set an items alpha value to zero, the flash player still has to render it to the screen, and thus waste valuable cycles drawing an item you can’t even see. Realising the error of my ways, the component on startup automatically sets the visible property of the sprite to false, thus the flash player won’t waste time rendering it. I’ve only gained a few FPS extra but its a start!