Look ma’ Flex doesn’t have to look like flex!

Filed under: Flex — Wrote by Campbell on Wednesday, November 15th, 2006 @ 12:48 am

I have been playing around with flex skining and component building for a couple of nights and just wanted to show where I got to making ftunes,or iTunes in flex. Not that I wouldn't mind a cease and desist from Apple (its in my top 100 things to do in life), but I doubt I will ever bother hooking this up to any mp3 playing capabilities. There are so many on the web already. I have merely been playing with some concepts of component building in flex and skining them, and seeingwho the fit with my workflow. Aparently all the ool kids are doing it. The nicest thing I have played with is the Flex drawing API ( used for the gradient header and footer ). It is really powerful but takes a bit of playing to get right. The sort of thin I guess you would build up a library of classes to help with.

 

All the diferent parts are broken out into extended classes that implent diferent Interfaces etc and then skinned in a central css file. I have sort of found the best way to build components in flex is to create a Class that extends the nessary base classes (or not) and implements certain interfaces,  then create mxml components for easy layout of the controls. Pretty much following the mx packages layout and structure. When/if I ever finish this little play I will update and release the source so people can play and persue thier own cease and desist letters from apple lol. Imagine that. An fTunes interface,made in flex that hooks/hacks into the iTunes store. Ekkk. Then all you have to do is deliver it centrally from the web and provide updatable access for Apollo to use as a desktop application. Oh the cool tricks to come!

The app can resize an acts exactly like iTunes when it does. The header display is a component that can take input to show on progress etc. The lists to the side are resizable and I am just working on nice purdy styling for them for the update.The central display will most likly take compiled components that implement a common interface. Now if only the flash players external interface were a little nicer I could hook this up in .NET really quick and have a nice desktop fTunes. *sigh* oh well might just have to wait for Apollo, or the full release of Janus.

If anyone has some Flex skinning work out there, feel free to contact me! (check the contacts on the upper left). 

14 Comments   -
  • Comment by Josh Tynjala | November 15, 2006 @ 5:31 am

    Looks pretty cool, but I think we need a bigger screenshot to truly bask in the light of your skinning mastery. ;)

  • Comment by ark | November 15, 2006 @ 6:32 am

    That looks *exactly* like a Flex app!

  • Comment by Campbell | November 15, 2006 @ 7:34 am

    Lol no light here Josh, only a dim glow :P Yeah when I have finished I will put up the swf
    Ark: Its exactly like Itunes, for windows, which is pretty much away from the flex look. Unless you think Itunes looks like flex?

  • Comment by Tink | November 15, 2006 @ 10:52 pm

    Any chance of getting hold of the source for it?

  • Comment by Campbell | November 15, 2006 @ 11:22 pm

    Hey Tink! yeah dude, I got alot of hits on this post so I have decided to make it half decent and release the source for people to play/learn from. Ill email you when I do sometime next week. :)

  • Comment by Tink | November 16, 2006 @ 1:55 am

    Thanks for the follow up bud!

  • Comment by sascha/hdrs | November 17, 2006 @ 6:22 pm

    Ok, now it doesn’t look like Flex anymore. But now it looks like OSXl! … Is that an improvement?? ;)

  • Comment by Jeff Knooren | November 17, 2006 @ 9:10 pm

    Is everyone drinking FLEX kool-aid or something? It’s definately nice, but It took days to make that? It seems like if you use the standard FLEX out of the box setup, yes, you can make applications really fast. However, the moment you try to customize it, or do something that there isn’t a pre-built component for, then you really haven’t saved yourself any time. You’ve merely shifted the time you would have spent on browser issues, to skinning.

  • Comment by Campbell | November 17, 2006 @ 9:30 pm

    Hey Jeff, If the Kool-aid is spiked im there. NOT DAYS!!! mucking round at nights trying out the drawing api etc. Just playing. Remember Im kinda trying it out…liken it to the first time I tried to make an html form not like an html form and work in all browsers. Yes Flex isnt for every situation, It solves alot of problems and creates new ones. I prefer to spend time making things pretty instead of hacking javascript and css around to handel all browsers. Thats just me too. Having sorted out how all the diferent controls can be skined and how to use diferent containers/controls to replicate applicaitons I could probably make this in alot less time. I have taken it alot further than this now and its getting quicker to do.

  • Comment by WebIndent | November 20, 2006 @ 6:52 am

    It’s great! I remember…

  • Comment by Braven | December 12, 2006 @ 1:02 am

    Would love to see the source code
    Thanks

  • Comment by Campbell | December 12, 2006 @ 1:07 am

    Hahaha would love to find the time to finish this. Rest assured if I ever do I will. But I always hate releasing half finished stuff.

  • Comment by Rajesh Bhadra | January 12, 2007 @ 12:21 am

    Hey really cool man.Good Work.Keep it up.Waiting for bigger screenshot.And are you gonna release the source code.
    All the best.

Leave your comment

© Flex developer, Campbell Anderson, from New Zealand – xsive blog -