Mobile ItemRenderer in ActionScript (Part 1) - AsFusion If you are starting to do mobile development and are used to create all your ItemRenderers in MXML, you may notice that the small devices like phones and tablets do not perform as well as the desktop does and you need to start looking closely to different ways to optimize you app. One of the ways to optimize your mobile app is to create your ItemRenderers in ActionScript. Narciso Jaramillo wrote a good article for Devnet with great tips for mobile development and one of the items was exactly that, to keep your ItemRenderers in pure ActionScript. Narciso mentions the Flex Framework comes with two ItemRenderers one is LabelItemRenderer that extends UIComponent and the other is IconItemRenderer that extends LabelItemRenderer. Those classes are great, but sometimes you have a different use case that needs a different set of classes. So in my examples I will not use those renderers. Basic Example Let's start with the most simple renderer, a TextField that displays some text. Application Styles
Flex Mobile Development: skinning the ActionBar component One of the important pieces of the Flex framework for mobile development is the ActionBar class. This class lets you create an application title bar with three distinct areas. Starting from left to right you can have a navigation area, a title area, and an actions area. Why would you want to use this component? Here are two screen shots of the Facebook application running on Android and iOS that illustrates this idea: Using the ActionBar component Using the ActionBar component is quite easy. If you want to add them inside of a View here is how you do it: This code produces the following ActionBar: If you want to set it globally then the method differe slightly depending on what Application root tag you chose when creating the project (ViewNavigatorApplication or TabbedViewNavigatorApplication). And for TabbedViewNavigatorApplication you’d add one for each tab you have in your application. And here is how this code looks like at runtime: Understanding how the ActionBar component works
Important Considerations When Building Single Page Web Apps Single page web applications - or SPAs, as they are commonly referred to - are quickly becoming the de facto standard for web app development. The fact that a major part of the app runs inside a single web page makes it very interesting and appealing, and the accelerated growth of browser capabilities pushes us closer to the day, when all apps run entirely in the browser. Technically, most web pages already are SPAs; it's the complexity of a page that differentiates a web page from a web app. In my opinion, a page becomes an app when you incorporate workflows, CRUD operations, and state management around certain tasks. Let's start with this common understanding, and dive into some of the more important things that should be considered when building SPAs. There are numerous points to consider before building a new app; to make matters worse, the expansive web development landscape can be intimidating at the outset. I will expand on each of the points above in the following sections.
Tutorial: Styling the ActionBar The ActionBar appears at the top of your application when you use ViewNavigatorApplication or TabbedViewNavigatorApplication in your project. It’s a skin part in the ViewNavigator that updates as Views are pushed and popped. Since it’s built into the default ViewNavigatorSkin, you don’t normally create it on your own in MXML. Because it’s built in, styling the ActionBar a little less obvious. chromeColor ActionBar supports the chromeColor style introduced with Spark in Flex 4. titleAlign By default, the ActionBar title is left aligned. defaultButtonAppearance By default, the ActionBar uses flat-styled button skins for Buttons inside the navigationContent or actionContent of the application or view. The ActionBar has two built-in button styles that are controlled by the defaultButtonAppearance style. Using defaultButtonAppearance=”beveled” is a shortcut for setting several different style values besides the Button skinClass values. Advanced CSS Selectors Next Steps
Flash Pro & CreateJS Following that is the handleComplete method. This remains almost identical to what was published, except that now it removes the Platypus instance that was on stage. We’ve also enabled touch interactions on our stage, so this game can be played on an iOS device. Quick Tip: In a more complex project, you’d likely get rid of the exportRoot , and add elements to the stage directly. This removes a layer from your display list, which makes elements easier to reference and performs a tiny bit better. Another important change we’ve made is to change the Ticker listener from stage to our tick function. Quick Tip: I’m keeping things simple here, but generally you should create a class that encapsulates your logic and register a method on it with Ticker, instead of polluting the global (window) scope. Adding game logic The tick function is called 20 times per second, and is the heartbeat of the game. Finally, and very critically, we call stage.update(). Handling interaction