Give us a call 203-379-0773
Check out our new training course on AngularJS for Flex Developers

Flex Mobile ToggleSwitch Extension - 8/10/2012 - Episode 146 - Flextras Friday Lunch

I'm a bit late posting this, but this is a demo of my Apache Flex donation to the mobile ToggleSwitch component.

Flextras Friday Lunch is a short demo followed by open Q&A that occur the first and third Friday of every month at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Why does a TextInput appear above my Popup in Flex 4.6?

This question came in from someone who was using our Flex Mobile DropDownList. I was writing up the issue for our product manual, but decided to blog it too.

The problem was that, in Flex 4.6, when opening the DropDownList's drop down text fields would display on top of them. After some research I was able to discover the problem.

The default skin for a TextInput in Flex 4.6 uses the StyleableStageText. StageText is always drawn above the Flash Display List, which is why the drop down's popup appears to be under it. To quote the Adobe docs on StageText:

Native text input fields cannot be clipped by other Flex content and are rendered in a layer above the Stage. Because of this limitation, components that use StageText-based skin classes will always appear to be on top of other Flex components. Flex popups and drop-downs will also be obscured by any visible native text fields. Finally, native text fields' relative z-order cannot be controlled by the application.

There are two possible solutions for this. The first is to architect your mobile application so that popups never display above a TextInput. This may be tough if you're building for multiple devices with different screen sizes.

The second is to use the Flex 4.5 skin class for your TextInputs:

<textInput skinClass="spark.skins.mobile.TextInputSkin" />

The Flex 4.5 Skin Class does not use StageText under the hood, so will not exhibit the problem of the TextField positioning itself above any of your popups.

Mobile Square Button Skin - 9/16/2011 - Episode 115 - Flextras Friday Lunch

This time I demo the Square Button Skin we created as part of our Mobile Component set. We talk a little about games, game development, and Jeffry's entry into the Sony and Adobe AIR App Challenge.

Flextras Friday Lunch is a short demo followed by open Q&A that occur the first and third Friday of every month at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Contact

Flex Mobile DropDownList Demonstration - 9/9/2011 - Episode 114 - Flextras Friday Lunch

This time I demo our Mobile DropDownList. Surprisingly this is the shortest presentation ever, with no questions from the audience.

Flextras Friday Lunch is a short demo followed by open Q&A that occur the first and third Friday of every month at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Contact

Flextras Mobile Flex DropDownList Updated + New Mobile Flex Components

Over the weekend, we uploaded new builds of our Mobile Flex Component Set.

You can read our from our release notes, but here are the important highlights:

The RadioButtonRenderer and the Square Button Skin are available as free components, so you can use them without purchasing a license. You can find them as part of the developer edition SWC.

All updates are free for existing customers of our mobile component set. You can sign into your account to download the new version.

Using the TabbedViewNavigatorApplication

Most of work I've done building Flex Mobile Applications has been on creating and optimizing components. I've learned a lot, and have hopefully imparted that knowledge in a few of my past blog posts.

But, I wanted to get a good understanding for some of the application architecture option provided for architecting Mobile apps with Flex. In the previous Flextras Friday Lunch episode, I covered the TabbedViewNavigatorApplication class. This post is my followup, providing similar content in a prose form.

Creating a Mobile App With Flash Builder

When creating a Mobile App with Flash Builder, you are given three application templates to use to create your application:

These are the three templates:

  • Blank: This uses the Application tag that you would use for non mobile apps. It is a very vanilla setup; and I've used this for most of the Flextras samples for simplicity.
  • View Based Application: Allows you to create an application based on views. There is no built in navigation for a view based application, so you are required to add your own, most likely using navigation in the ActionBar.
  • Tab Based Application: Used to create a tab based application. The tabs will be created at the bottom of the screen and help you easily switch between different views of the app.

When creating a view based application, Flash Builder will create a single initial view. Tab Based Applications allow you to specify as many views as you want as part of the wizard.

The Main Application File

In my test app, I created two separate views; named Tab1View and Tab2View. Not very creative naming, I know. The main application file ended up like this:

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                                 xmlns:s="library://ns.adobe.com/flex/spark">

<s:ViewNavigator label="DropDownList" width="100%" height="100%" firstView="views.Tab1View"/>
<s:ViewNavigator label="AutoComplete" width="100%" height="100%" firstView="views.Tab2View"/>
</s:TabbedViewNavigatorApplication>

The main application tag is a TabbedViewNavigatorApplication class. It has two children, each one a ViewNavigator. Each child represents a single tab in the app and references the related view created automatically by the wizard.

When creating a view or tab based mobile app, you don't usually put direct code in the main Application file, but rather offload it that code into a view.

Populating The Views

Two views were created by our application. I decided to use the Flextras mobile components as samples:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="DropDownList"
xmlns:flextras="http://www.flextras.com/mxml">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var dataProvider : ArrayCollection = new ArrayCollection([
                {label:'Alabama',data:1},
                {label:'Alaska',data:2},
                
            ]);
        ]]>

    </fx:Script>
    <flextras:DropDownList id="ddl1" y="10" width="100%" dataProvider="{this.dataProvider}"/>    
</s:View>

The first view, displays the Flextras Mobile DropDownList, and the second displays our mobile AutoComplete:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="DropDownList"
xmlns:flextras="http://www.flextras.com/mxml">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var dataProvider : ArrayCollection = new ArrayCollection([
                {label:'Alabama',data:1},
                {label:'Alaska',data:2},
                
            ]);
        ]]>

    </fx:Script>
    <flextras:AutoCompleteComboBoxMobile id="accb" y="10" width="100%" dataProvider="{this.dataProvider}"/>
</s:View>

The view class is the class which defines the view of a mobile application. The same class is used for both tab based applications and view based applications. It is a SkinnableContainer, so you can use MXML to lay out the children.

The Final Sample

It is often tricky to know what sort of code and samples to display when writing about mobile development. In this case, I'll just show you a screenshot of the finished app running in an emulator:

The tabs are on the bottom. There is a header up top; which is the ActionBar. The view's content is in the center. Clicking on the tabs will switch between views.

Did I mention that you can download developer editions of our mobile components to test them out with your own code and your own application? We'd love to see the sort of apps you want to build.

Flextras Mobile DropDownList available

I'm very pleased to announce that the first version of the Flextras Flex Mobile Component Set is available. This component set includes:

  • Mobile Flex AutoComplete
  • Mobile Flex DropDownList

Free developer editions are available, as always, so you can test them out before you buy. Be sure to check out the release notes, the ASDocs, and our full manual.

We've also put together some web based samples for you to experiment with sans a mobile device.

Anyone who purchases will get free updates as we add more components to the set, so be sure to tell us what we should add to it. We have our own ideas; but if you want to move your idea to the top of the list; you'll need to tell us.

Flex Mobile DropDownList - 6/10/2011 - Episode 102 - Flextras Friday Lunch

Today I spoke about our Mobile Optimized Flex DropDownList.

For the time being we will not be editing down the audio; but you can still watch the video here. If is a problem, be sure to let us know.

Flextras Friday Lunch is a short demo followed by open Q&A that occur the first and third Friday of every month at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Contact