Creating an iPhone interface in Flex 3
Sunday, February 22nd, 2009
As part of my recent design work I have been able to get involved in some Flex development and went on a course to explore it a bit further. I have used Flash for a while but not regualry so jumped at the chance to learn more about what Flex can do.
One of the first observations, especially being a designer and front end developer is it is very, very developer based. I have had to go though quite a learning curve to get my head into the mindset of a developer and learn a lot of action script!
This is the latest design for a our beta site, we went through quite a few iterirtions from user testing, it’s a mix of XHTML/CSS/JQuery and Flex and has been an amazing experience seeing how we could make these technologies work together. One part of the design I did involved the use of an Accordion component overlayed on the map that would hold latest local data. On click of these items it would operate very similiar to the iPhone and the panel would slide left to reveal extended content about that section.
Seeing as this is something I could not find very much documentation about I thought I would provide the code myself and Romain Eude (The ‘G’ Rails/flex developer) built and style it a little differently so it looked just like the iPhone!
Here you can see the results
Open in a new browser window to view source
It uses a really powerful feature of Flex which is states, tie this in with a smooth transition and slide a panel across its y axis and you get the iPhone interface to a tee. With a little advanced styling and the adding of the CanvasButtonAccordionHeader from the Flexlib project written by Doug McCune you get a heavily customizable Accordion with dual states to display extended information.
A lot of thanks has to go to Romain Eude for tidying up my rookie flex code and streamlining this. It could probably be tidied up more but I’ll leave that up to anyone who wants to use this.
You’ll be able to see it in full action on TouchLocal.com in the coming month once all our design changes are complete.
Download Vcard
February 22nd, 2009 at 2:52 pm
Holy crap that’s frickin sweet. You can play with that for ages. Well done!
September 25th, 2009 at 10:11 pm
Just FYI, the view source no longer works. This is really well done though.
October 18th, 2009 at 2:27 am
I’ll check that, just been migrating to a new site design so some bits have gone missing!
November 6th, 2009 at 2:15 pm
Very nice!.
but you not provide the detailed information about the procedure.
TahirAlvi
November 6th, 2009 at 8:40 pm
This covers quite a few different parts of Flex development and it is to much to cover here. I would recommend reading up on the adobe site about states and looking into the custom flex lib to dissect the code above.