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)?
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.
Related
In MXML, when I add components to ViewStack and creationPolicy is auto, components are not instantiated until I switch to them. Say, I have the following code:
<mx:ViewStack creationPolicy="auto">
<s:NavigatorContent>
<s:DataGrid id="dg1" width="300"/>
</s:NavigatorContent>
<s:NavigatorContent>
<s:DataGrid id="dg2" width="100"/>
</s:NavigatorContent>
</mx:ViewStack>
How do I replicate this behavior in ActionScript?
The problem is that my DataGrids hold large chunks of data, and thus I don't want them to be created at the same time.
Looks like the ViewStack class has a creationPolicy property on it. Something like this should work
var v:ViewStack = new ViewStack();
v.creationPolicy = "auto";
var t1:NavigatorContent = new NavigatorContent();
t1.addElement(new DataGrid());
v.addElement(t1);
Please try with this one
var v:ViewStack = new ViewStack();
v.creationPolicy = "auto";
var container:SkinnableContainer = new SkinnableContainer();
container.creationPolicy = "none";
var dg:DataGrid = new DataGrid();
container.addElement(dg);
var t1:NavigatorContent = new NavigatorContent();
t1.addElement(container);
v.addElement(t1);
After viewstack_change handler we need to call
container.createDeferredContent() based on which index view you want to see.
For more details Using the createDeferredContent() method
i'm working on flex 3 project. in which i have one tileList in which there are muliple images, every images put in different canvas in tileList. i will give allowmultipleSelection to true. now i need to print all that Images on print button click, which user select from TileList.
please give me proper suggestion, how i will DO.
Thanks,
I got my answer Here, I take Tile instead of TileList and i push all Selected Image into one Array. And in printer.printPage I will Pass that Array and It will work now.
/* MyCustomItemBox */
<mx:HBox id="hb" autoLayout="false">
<mx:Image id="img" source="{imageURL}"/>
</mx:HBox>
/* Print Script */
// Custom Component which will be added in to Tile.
var myCustomBox= new MyCustomItemBox();
thumbView.addChild(myCustomBox);
// On Print Button Click
protected function onPrintPages(event:MouseEvent):void
{
var printer:Printer = new Printer();
var arr:Array = new Array();
for(var i:int = 0;i<10;i++)
{
var bdi:MyCustomItemBox = thumbView.getChildAt(i) as MyCustomItemBox;
var hb:HBox = bdi.getChildByName("hb") as HBox;
arr.push( hb.getChildByName( 'img' ) as UIComponent );
}
if(arr.length > 0)
printer.printPage(arr,null, "showAll");
}
<mx:Tile id="thumbView" autoLayout="false" width="90%" height="90%" />
I have a variable in actionscript. How can I set the label text with the variable value? I have the following code:
public function setObjVal(obj1:InvPrintRRTObj):void
{
obj = obj1;
var date:String = obj.receive_Date;
var yy:String = date.substring(0,3);
var mm:String = date.substring(5,6);
var dd:String = date.substring(8,9);
}
I want to assign the yy value to a spark label. Please help.
The mxml code goes here
s:Label width="35" height="25" textDecoration="none" verticalAlign="middle" text="{yy}"
sorry, i was not able to format this mxml code
Another way to achieve this is to access the label by id.
<s:Label
id="myLabel"
width="35"
height="25"
textDecoration="none"
verticalAlign="middle" />
Then in your function
public function setObjVal(obj1:InvPrintRRTObj):void
{
...
myLabel.text = yy;
}
So, the problem is that the label does not have access to the yy variable, since it is defined in the setObjVal method. There are two ways to fix this:
make the yy variable global, i.e. define it outside of the method so the label component can access it
add an id to the label (e.g. 'myLabel') and add a line to the setObjMethod which updates the label's text, like so:
myLabel.text = yy; //in this case, the label should be accessible to the method
I'm writing a Flex application using Flash Builder 4 and I'm having a bit of trouble with an AS3 object. Essentially, it is a BorderContainer, with a few buttons and images, and programming logic that determines how these interact with eachother and a database.
What I want to be able to do is configure the layout/style of the inner components using MXML and CSS. I can configure the inherited objects, but not ones that I have defined...
For example, in my MXML. I can modify the (inherited) borderstroke variable of myContainer like so;
<IE:MyContainer>
<IE:borderStroke>
<s:LinearGradientStroke weight="10" rotation="270">
<s:GradientEntry color="0xF655E5"/>
<s:GradientEntry color="0x6600CC"/>
</s:LinearGradientStroke>
</IE:borderStroke>
</IE:MyContainer>
However, I can't edit the nextButton variable (which is of type Button) like this;
<IE:MyContainer>
<IE:nextButton width="100" height="30" left="10%" bottom="10%"/>
</IE:MyContainer>
If I try, I get the compile error "Could not resolve to a component implementation".
What do I need to do to make this work?!
Thanks in advance,
Aidan
EDIT:
Here's the main method of MyContainer (actually named InvestigativeEnvironment).
The call to defineTestInvestigativeEnvironment() is what takes care of setting up the objects and action listeners and such. What I want to do is change the layout and appearance of these visual components in MXML (nextButton, prevButton, toolbox, displayArea). I want to be able to set their height, width, background, x, y, horizontalCenter, etc like I can to a button that I add to a container via MXML.
public class InvestigativeEnvironment extends BorderContainer
{
private var toolbox:Toolbox;
private var bodySystem:BodySystem;
public var nextButton:Button;
public var prevButton:Button;
private var displayArea:Group;
private var image:Image;
private var toolDisplayArea:Group;
public function InvestigativeEnvironment()
{
super();
//create 'Next' button and event listener
nextButton = new Button();
nextButton.addEventListener(MouseEvent.CLICK, nextViewAngle);
nextButton.label = "Next";
this.addElement(nextButton);
//create 'Prev' button and event listener
prevButton = new Button();
prevButton.addEventListener(MouseEvent.CLICK, prevViewAngle);
prevButton.label = "Prev";
this.addElement(prevButton);
//define investigative environment by creating models.
defineTestInvestigativeEnvironment();
//Instantiate the Group that contains the model image and tool overlays
displayArea=new Group();
//Instantiate the image that is used to display the model
image = new Image();
image.source=bodySystem.getImage();
image.horizontalCenter=0;
image.verticalCenter=0;
displayArea.addElement(image);
//add toolOverlayContainer to the display area ABOVE the model image
toolDisplayArea = new Group();
toolDisplayArea.verticalCenter=0;
toolDisplayArea.horizontalCenter=0;
displayArea.addElement(toolDisplayArea);
this.addElement(displayArea);
//add toolbox to display
toolbox = new Toolbox(toolDisplayArea);
toolbox.replaceTools(bodySystem.getToolGroup());
this.addElement(toolbox);
}
I can't understand what is your problem with editing button in particular, sorry for that. But I have a lot of notices about your InvestigativeEnvironment which code you've attached.
First, you haven't follow Flex components livecycle (see here or here). So in your code you should add and configure children in createChildren() method.
But anyway you can't use your container to add children both with MXML and from code. If your adding custom components code will be executed first MXML (in your implementation with adding them in constructor it is so) all the MXML tags just remove all your added content (anyway result will be unpredictable). In other case it will be very hard to control instance's order.
I can suggest you to declare your nextButton etc as skin parts and perform their positioning in skin. This way these internal controls will be a part of border and you can add MXML children without any problem. And you can configure them within partAdded() method.
It turns out that I wasn't quite asking the right question. I wanted to edit the components, but specifically the layout and color type attributes of them.
What I need to do is set the id of the components, and then target them using CSS.
For my nextButton, I add the ID like this;
nextButton.id="nextButton";
Then I can lay it out in the MXML file (or external stylesheet) like this;
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace IE "InvestigativeEnvironment.*";
IE|InvestigativeEnvironment s|Button {
chromeColor: #336666;
}
#nextButton {
bottom: 100;
right: 5;
}
</fx:Style>
I have to create several vbox-es in a for each loop.
Now I want to do something like this.
formsArray["vb"+counter] = new VBox;
formsArray["vb"+counter].visible = true;
add labels etc.
I can't get this thing to work. Anybody any idea how to create dynamic variable names for my vbox-es?
Thanks
First off, to use an associative array, you need to use an Object and not an Array (perhaps you already are, then never mind).
You can achieve what you want to do the following way:
var vbox:VBox;
var formsArray:Object = new Object();
var counter:int = 0;
for each(<statement>)
{
vbox = new VBox();
formsArray[("vb" + counter.toString())] = vbox;
counter++;
}
The VBox's visible property is true by default, so no need to explicitly set it.
Answer to additional question in comments:
You don't really need to make use of dynamic references to do what you want to do. You'd be best of creating a custom component for this, extending the VBox class, by creating a new MXML class with VBox as the root tag. Something along these lines:
<mx:VBox ... >
<mx:Button ... click="btnClickHandler()"/>
<mx:Script>
<![CDATA[
// Toggles visibility of the VBox
private function btnClickHandler():void
{
visible = !visible;
}
]]>
</mx:Script>
</mx:VBox>
Then you can just instantiate as many of these custom VBox:es as you need. However, making the VBox invisible will make the contained button invisible as well, making it difficult to click it again. :) You probably want to address that. Anyways, I hope this will point you in the right direction.