Fabio Biondi Blog » Blog Archive » Optimizing MXML code in Flash Catalyst “Panini”

Optimizing MXML code in Flash Catalyst “Panini” - Part 7:
TextInput Component

14 February 2011 No Comment

In this chapter we will create the TextInput field of the ActionBar so the user can type text.

You need to read previous chapters in order to understand this article.

First remove the static label “Search in the blog” of the BlogView component imported from Illustrator.
Open the BlogView component, select the object using the Select tool and press DELETE from the keyboard.

-
NOTE: TEXT OBJECTS IN FLASH CATALYST
If in the Illustrator Import settings you set the Text property to “Keep Editable“(see Chapter 001) the text fields are automatically converted to Spark RichText components whose contents can be edited directly in Catalyst and later in Flex.

<s:RichText fontFamily="Arial" fontSize="18" text="Search in the blog..." />

However, this component does not allow the inclusion of content by the user and will be removed.
Instead we will create a special TextInput component using the white rectangle in the layout.

<s:TextInput text="Type a word..."/>

-

After removing the static label, select the white rectangle from BlogView component and convert it in TextInput giving the component name BlogInputText.

When you select any part of the artboard, in this case the TextInput just created, you can define the properties from the Propertiespanel.
Change the Text property (currently empty) to set the default text displayed by the input field.

The change will be immediately visible in the workspace

However, the default text font is too small and we will then enlarge it.
To change the size and position of the text field you need to edit the BlogInputText component (right click on the component > Edit component)

Select the text field within the component BlogInputText using the Select tool.

Change the font size from the Properties panel using the Size property and change the other options you need.

Manually center the text field using the Select tool

Compiling the project (CTRL + ENTER) users can now write inside the TextInput of the BlogList state.

THE GENERATED MXML CODE

The component BlogView.mxml now contains an instance of the Spark TextInput component, which will use the new BlogInputText skin.

[…]
<s:TextInput x="100" y="12" enabled="true" 
			 skinClass="components.BlogInputText"
			 text="Type a word..."/>
[…]

Here is the skin mxml code - BlogInputText.mxml - used by the TextInput component.
Note that inside a new RichEditableText instance has been createad, instead of the RichText component previously used.

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
		xmlns:d="http://ns.adobe.com/fxg/2008/dt"
		fc:resizable="false">
	<fx:Metadata>[HostComponent("spark.components.TextInput")]</fx:Metadata>
	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
		<s:State name="normalWithPrompt"/>
		<s:State name="disabledWithPrompt"/>
	</s:states>
	<s:Rect d:userLabel="TextBg" x="0.5" y="0.5" width="312" height="45">
		<s:fill>
			<s:SolidColor color="#F2F2F2"/>
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke caps="none" joints="miter" miterLimit="10" color="#333333"/>
		</s:stroke>
	</s:Rect>
 
 
	<s:RichEditableText id="textDisplay" x="5" y="5" width="303" heightInLines="1"
						x.normal="6" y.normal="13" fontSize.normal="22"
						tabStops.normal="S0 S50 S100 S150 S200 S250 S300" fontFamily="Arial"/>
</s:Skin>