ActionBar in pure Actionscript

Question

I have this MXML that I would like to express as actionscript:

<s:titleContent>
    <s:Label text="Title" fontWeight="bold" fontSize="20" height="20" verticalAlign="top" />
    <s:Label text=".com" fontSize="12" height="17" verticalAlign="bottom" />
</s:titleContent>

I've tried this with no success:

var chrome:ActionBar = new ActionBar();
chromeTitle.text = "Title";

chrome.setStyle("fontSize", 20);
chrome.title = "Title";
chrome.title = chromeTitle;

How can I add css styled text to the action bar (multiple labels)? Also is it possible to make other views inherit this action bar so that I dont't have to duplicate code (all vies would have common elements)?

score 4 · Accepted Answer · answered Mar 08 '13 at 15:31

4

This syntax:

<s:titleContent>
 ...
</s:titleContent>

Means that you are setting the titleContent property on the component that this resides under. You can tell the difference between properties and new class instances from the case. Class names always start with an uppercase; whereas property names start with a lowercase. You didn't specify which class this is a property on; but since you're dealing with mobile I assume it is a view. the titleContent property is an array.

So; you must do this:

// create the first label and set properties
var tempLabel :Label = new Label();
tempLabel.text = 'Title';
tempLabel.setStyle('fontWeight','bold');
tempLabel.setStyle('fontSize',20);
tempLabel.height = 20;
tempLabel.setStyle('verticalAlign','top');

// add label to titleContent array
this.titleContent.push(tempLabel);

// create next label
tempLabel :Label = new Label();
tempLabel.text = '.com';
tempLabel.setStyle('fontSize',12);
tempLabel.height = 17;
tempLabel.setStyle('verticalAlign','bottom');

// add second label to titleContent array
this.titleContent.push(tempLabel);

That is the proper way to convert the MXML code you provided into ActionScript. Since your own code tried to create a new ActionBar() I'm not sure what you if this is really what you wanted.

answered Mar 08 '13 at 15:31

JeffryHouser

39,401
4
38
59

First part is very informative, thanks, but the code gives me an error: TypeError: Error #1009: Cannot access a property or method of a null object reference. at views::HomeView/created()[C:\Users\Dominic\Adobe Flash Builder 4.6\Main App Mobile\src\views\HomeView.mxml:44] | Line 44 is: this.titleContent.push(tempLabel); and yes tempLabel is properly defined in my code. – DominicM Mar 08 '13 at 17:51
2

@DominicM Since titleContent is initially null, you just need to assign an empty Array to it... so do `titleContent=[];` before you do the code above. – Sunil D. Mar 08 '13 at 19:23
How would I go about adding identical labels to other views in the app? Or am I left with copy & pasting? – DominicM Mar 08 '13 at 21:13
Copy and paste would work; but a maintenance nightmare. I'd look to encapsulate. Create the two labels as a separate component which you can then add to the titleContent array with a few lines of code. Isolate that component's creation out into a static method or as some type of Singleton and you could get the individual view code down to a single line. – JeffryHouser Mar 08 '13 at 21:49
2

@DominicM Also, I believe the action bar's content can be specified in several parts of the app: ViewNavigatorApplication (a global place) ViewNavigator (also somewhat of a global place), and the View (specific to one or more views). You could put this same code into classes that extend any of those three things. – Sunil D. Mar 08 '13 at 22:03
1

@Flextras code worked fully, you even aligned the labels for me :) Thanks! – DominicM Mar 08 '13 at 22:22

ActionBar in pure Actionscript

1 Answers1