Creating a simple Spark Form in Flex Hero

The following example shows how you can create a simple Form in Flex Hero beta using the s:Form, s:FormItem, and s:FormHeading controls.

The following example(s) require Flash Player 10 and the beta Adobe Flex Hero SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex Hero SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/08/28/creating-a-simple-spark-form-in-flex-hero/ -->
<s:Application name="Spark_Form_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <s:Form defaultButton="{submitBtn}">
        <s:FormHeading label="Spark Form Heading" />
        <s:FormItem label="Username:">
            <s:TextInput id="username" />
        </s:FormItem>
        <s:FormItem label="Password:">
            <s:TextInput id="password1" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem label="Confirm password:">
            <s:TextInput id="password2" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem>
            <s:Button id="resetBtn" label="Reset" />
            <s:Button id="submitBtn" label="Submit" />
        </s:FormItem>
    </s:Form>
 
</s:Application>

View source is enabled in the following example.

[GoogleAdsWide]

This entry is based on a beta version of the Flex Hero SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Hero SDK.

7 thoughts on “Creating a simple Spark Form in Flex Hero

    1. @Maxim Kachurovskiy,

      More or less, but once you get into it, the Spark Form has a lot of cool things that the older MX Form didn’t. Things such as sequence labels, or help text, or validation icons. Plus you can do a stacked Form layout, and there is a pretty deep constraints layout if you want to reorder the elements within the form item. I have examples of setting and styling sequence labels already, and will try to add more examples over the next few days if I get a chance. Definitely some very cool stuff in this new Form. Plus I’ll see what I can post on the new and improved Spark Image control, and the additions to the existing Spark BitmapImage primitive. And I have a few posts planned for the new Spark DataGrid control, but those may wait until the next public nightly Hero build is posted since we’ve made a lot of improvements recently.

      Peter

      1. Thank you! Looking at the old FormItem it’s obvious that most of that 2121 lines is Horizontal/Vertical layout :) Seems that you are replacing all that copy-paste with something nice!

  1. Hello Peter, i would like to turn off the emphasize/accentColor effect of the default button when the focus is inside an input textfield.
    Tried setting emphasize to false, but no luck.
    Is it possible? Any idea how to do that? Are there other methods than the accentColor property to customize it?
    I suppose i could use a form-independent button, but heck, where is the fun in that?!…

Comments are closed.