AS3 Textfield New Line not being Recognized

January 14, 2014

I loaded an xml file into a program which was then used to set string based variables. The text from the xml file was contained between CDATA tags and contained the \n character as shown below:

<![CDATA[Directions:\n1. Choose a patient by clicking on a silhouette.\n\n]]>

The AS3 textfield was not recognizing the new line character when set from the xml file and was just displaying the \n within the Textfield so it appeared in the textfield like this:

Directions:\n1. Choose a patient by clicking on a silhouette.\n\n

Finally found a solution from a post from 2008:

Newline characters not recognized when parsing external xml file

Once I added the code recommended on the site:

myText.replace(/\\n/g, "\n");

The new line was recognized in the textfield.

Reminder /g is a flag to globally replace all the occurrences.

Creating Flex Component View using Flash CS5

September 27, 2012

We created some Flex based component views using Flash CS5 by following the instructions in the Adobe Article Combining animation and ActionScript using Flash Professional CS5 and Flash Builder 4 which we used inside our course player. These View components had text fields which would dynamically resize when the player was resized on the fly(Only for firefox and safari, IE and chrome do not allow resizing). These views also had images which would scale appropriately as well.

Note this led to my series on embedding fonts due to conflict messages with respect to flex based textfield and flash based textfields(This is explained in detail in Part 3 of the series).

Flex Mobile Device Back Button – Approach 3

July 17, 2012

In my previous post, Flex Mobile Device Back Button – Approach 2, I provided a brief overview of using states to dynamically display the appropriate device based “Back” button. I was not happy with this approach because the view ran like a dog. The responsiveness was very slow. At the end of the this post, I realized that the creation complete event would allow us to inject the child component before the view becomes visible to the user.

Despite the discussion in this post Air Mobile Performance Tip Using Flex about not recommending using creation complete event because it causes your view to render slowly, I found that this event actually provided me with the behavior I desired. The action bar “Back” button was injected before the view was made visible and the view rendering was very fast as well.

Approach 3 will copy the method used in the first approach, but will replace the ViewActivate method handler with a CreationComplete method handler.

Continue reading

Flex Mobile Device Back Button – Approach 2

July 17, 2012

In my previous post, Flex Mobile Device Back Button – Approach 1, I provided a brief overview of the ViewActivate approach to the button creation process which dynamically adds the correct “Back” button based on the device where the code was running.

Approach 2 will use states to render the appropriate button on the device.
Continue reading

Flex Mobile Action Bar Back Buttons

July 17, 2012

Brief history of action bars on mobile devices:
1) Apple devices always had a “Back” button on the top action bar defined for their mobile devices.

2) Android devices depended on the hardware based back button to provide this functionality so a software based “Back” button was not included on the action bar.

This button behavior was described in a mobile skinning article on Adobe called Mobile Skinning Part 3.

Continue reading

Skinning the SpinnerList for Flex 4.6 Mobile

May 28, 2012

The SpinnerList component for Flex 4.6 mobile comes with a standard look and feel. When I incorporated this into one of our mobile views, we wanted to personalize it. I started by referencing the following post on the adobe site, Use of a SpinnerList in a mobile application.

Hilite the Currently Selected Item in SpinnerList
One of the desires was to make the currently selected item to appear to be selected. The default behavior of the spinner list is to have the selected item in the center of the component and, by default, is displayed under the selection indicator. We wanted to skin the box around the selected item a light blue to enhance the impression/appearance that it was the selected value. The initially referenced adobe article said to create a custom skin for the SpinnerListContainer.

Continue reading

Flex 4.6 Mobile Resizing TextArea Component to Fit Content – Part 2

May 25, 2012

Now that the view sets the height of the TextArea component after it has been created as discussed in Part 1, what do we need to do when the user rotates the view from portrait to landscape and back again. The TextArea component continues to reuse the number of lines of text from the previous orientation view. We need to force the component to resize itself and then recalculate the number of lines to display so we can reset the height to the appropriate value.

Continue reading