Flex Mobile App in browser – issues with Spark TextInput/TextArea

I recently worked on a Flex mobile project where the mobile app was required to sit on browser as well.

There is no official way of converting the flex mobile project into a flex web application right from within the Flash Builder. I used this post to get the ball rolling http://www.riagora.com/2011/08/flex-mobile-in-the-browser/ I managed to get my mobile app working on browser but..

As I navigated away from the home screen I started getting run-time errors for StageText. I immediately noticed that I had spark TextInput and TextArea on the view. I took them out and everything was fine again. Changed them to mx for a minute and it was fine with that too but it just won’t like me using spark TextInput and TextArea. Since I had changed the theme to be mobile theme for this app (one of the required steps of the initial setup), I thought that might be forcing the spark TextInput/TextArea instances to use StageText. I changed the skins for TextInput and TextArea to use spark skins rather than the default (mobile in this case) and it worked fine.

<s:TextInput skinClass="spark.skins.spark.TextInputSkin"/>
<s:TextArea skinClass="spark.skins.spark.TextAreaSkin"/>

As you can see in the video I keep getting compiler errors which I got rid of by cleaning the project a couple of times but I wasn’t sure what was the cause. I used Flex 4.6 SDK with AIR 3.3.

Simple Parsley Store

I have made a little flex application using the Parsley framework.

See it in action

Optimised List ItemRenderer using the following:
- replaced Image with BitmapImage
- used ContentCache
- used opaqueBackground and cacheAsBitmap=”true” on ItemRenderer

Just passed Flex 4 ACE Exam

I just passed Flex 4 ACE exam. Scored 81%. Unfortunately, the score is not as good as I hoped but I still get a good feeling for crossing a very long overdue to-do!

Here is the breakdown for the score I received.

SECTION NAME: PERCENT CORRECT:
Creating a UI Interface 70%
Flex system architecture and design 90%
Programming flex applications with Actionscript 91%
Interacting with data sources and servers 62%
Using Flex in Adobe AIR 100%

I used Attest 3 and Adobe documentation to prepare for the exam.

You want to read the documentation thoroughly (and memorise quite a lot of it as well), which I think is the biggest advantage of taking this exam as it only makes you a better developer as a result.

If you haven’t done it already, go, do it! It’s quite a good challenge to take and it’s fun.

All the best!

Colour is a very critical thing!

I was going through a rough patch earlier this week and my coding life wasn’t as colourful!

Then I remembered watching an interesting webinar by @probertson. He had an interesting looking screen! At the end of the webinar someone asked him how did he customise the look of his Flash Builder. He said he got that theme from http://www.eclipsecolorthemes.org/.

I had never customised my Flash Builder before thinking these things don’t make any difference. I went to this website and most themes there got me really interested.

All I can say is if you have never done this before then I would recommend.

You guessed it, it doesn’t take a genius to work out how to get this up and running and make coding more fun. There is absolutely no need for a dedicated blog post for this but I am going to do it to anyway just to show my excitement!

Open up your Flash Builder > Help > Eclipse Marketplace…

In the dialog box, search for Eclipse Color Theme

Click Install.

It will take a moment..be patient..it’s worth the wait. When done just click Finish. Now restart your Flash Builder.

Go to Flash Builder > Preferences…

Under General > Appearance > Color Theme

Now choose the one that you like and Apply, OK.

Restart your Flash Builder now.

Enjoy :-)

Flex Mobile Project for iOS in Flash Builder 4.5

Unbelievable!

I had a nice little flex mobile app I built for Android with all the Spark goodness in and later it was required to put on iPhone. That was exactly what I was waiting for since Flash Builder 4.5 release.

But.. no joy! I cannot believe there is no support straight out of the box for creating Flex Mobile Project for iOS right now. It wasn’t in the FB 4.5 pre-release but I was hoping that Adobe will definitely get that feature in in the release. It was a long wait after all! Obviously, I appreciate all the other features in FB 4.5 though. I just hope now that Flex Mobile Project for iOS feature in FB 4.5 update becomes available soon.

For now though, this link should help.

http://labs.almerblank.com/2011/03/using-ant-to-compile-a-flex-mobile-project-for-ios/

My FOTB 2010 Schedule

FOTB 2010 is approaching fast so I have now planned my own schedule.

Day 0 – Workshop

Mobile Development with Flash
With Julian Dolce

Day 1 – Monday

09.00 Keynote
10:15 Grant Skinner, ADHD FTW, LOL!!!
11.30 Rich Shupe, Meet LoaderMax
13.30 Lee Brimelow, Developing for the Mobile Web
14:45 Karsten Schmidt, Polymorphism, open source & generative design
16:00 Robert Hodgin, Practice makes perfect, so what are you practicing?
20:00 Stefan Sagmeister, Design and Happiness

Day 2 – Tuesday

09:00 The Elevator Pitch
10:15 Mike Chambers, High Performance Mobile Content with Flash
11:30 Joa Ebert, 1 1 7 11 21
13:30 Florian Schmitt, Business in the front – arty in the back.
14:45 Veronique Brossier, Adobe AIR for mobile development
16:00 Nando Costa, The Other Side
20:00 Brendan Dawes, Makers of Things

Day 3 – Wednesday

09:00 6 of the Best – 10 Mins Each
10:15 Mark Doherty, AIR 2.5 for Android
11:30 Doug McCune, Data Visualization Will Change Your Life
13:30 Doug Winnie, Child’s Play: Live Wireframes with Flash Catalyst CS5
14:45 Laura Jordan-Bambach, Digital Mythbusters
16:00 Jared Tarbell, The Computational Artifact

See you there.

Paras

Standardising Flash Video

If you’ve read my earlier post then the next question is how to actually use OSMF?

Here is what I think I will do from now on. If I need a sophisticated custom video player then I will use Strobe Media Playback (SMP) and if I need just a quick video player with all the standard functionality(‘right out the box’) then I will use Flash Media Playback (FMP).

Strobe Media Playback (SMP)

You need a reliable video player that has been built already but you would like it to look and behave how you want then you want to add the OSMF.swc to your project and go through this guide and just a couple of lines of code and you have got the video player you wanted! How cool is that!

Project is hosted here.

Flash Media Playback (FMP)

Flash Media Playback is exactly the same as Strobe Media Playback but it is hosted by Adobe. Say you have a video file hosted somewhere and you want to put that up on your blog or website quickly without investing any time at all then you can use FMP Configurator and grab the HTML code from there and stick it on your blog or website. Job done!

Final thought: I don’t think I will be wasting my time anymore building the flash video players from scratch. I am first going to look at both the options above (SMP and FMP) and I am confident that they will sort me out in most cases.

Open Source Media Framework

Better late than never!

This has been on my to-do list for a long time now.

OSMF. Open Source Media Framework is the standard media player framework from Adobe for monetizing video on the web.

OSMF is a free, ActionScript toolkit for video player development.

This project is intended to facilitate the development and sharing of open standards and best practices for video player applications built on the Adobe Flash Platform.

Top features and benefits of OSMF

  • Open source and open standards
  • Flash Media Server family integration
  • Compatibility with existing workflows
  • Streamlined standard functionality
  • Inclusion of the latest Flash Platform features
  • Pluggable, extensible architecture
  • Robust quality of service (QoS)
  • CDN integration
  • Advertising and reporting
  • Rich visual experiences

Go check it out: http://www.opensourcemediaframework.com/

Developer’s Guide: http://help.adobe.com/en_US/OSMF/1.0/Dev/index.html

Let us standardise Flash video!

Adobe Flex 4 certification has been released

Adobe Certified Experts (ACEs) set themselves apart from other IT professionals. They consistently demonstrate expertise with Adobe products and platforms, and add value to colleagues, managers, and their own careers.

The Flex 4 ACE Exam is based upon the most critical job activities that a Flex developer performs. The skills and knowledge certified by this examination represent a professional level of expertise for a certified individual.

Here is the link with the details. http://www.adobe.com/devnet/flex/articles/flex_certification.html

Number of questions have gone up from 50 to 59. The passing score remains same as before – 67% minimum to pass the exam.

This is quite a challenge!

There are undoubtedly different ways of preparing for the exam but in my view going through the langref from back to front and reading the actual classes (.as files) from the sdk is the best way.

One more thing gets added in my long list of To-Dos!

Paras

FlexPMD is a great code auditor

We all have read best practices docs/tips for writing good quality AS3/Flex code to make our applications perform better as well as understandable for other developers. I personally think its great and we all should follow best practices but usually developers have a lot on their plates to remember all the best practices at all the times. It is really easy to miss some out from time to time.

FlexPMD is a great tool, a very powerful code auditor in my view. Find out more.

It does not modify your code it just reads your code, your code will still sit where it sits right now unaffected; it takes literally 5 – 10 minutes to start seeing reports for the code that you’ve already written for your as3/flex projects. The report just tells you which files have got the bad code in it. Ultimately, you will decide whether you want to replace that bad code with the best possible code or not! But it is good that you at least know that what code is considered bad. It helps.

It’s never too late. If you haven’t yet tried it for yourself then go check it out now. For step-by-step installation for FlexPMD Eclipse plugin click here.

Thanks Adobe for such a great tool!

Paras