weird behaviour with addChild - actionscript-3

i am trying to add one Box to my application using the following code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
>
<mx:HBox height="100%" width="100%" backgroundColor="red" borderColor="black"/>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.containers.Box;
import mx.events.FlexEvent;
protected function button1_clickHandler():void
{
var box:Box = new Box();
box.setStyle("backgroundColor","blue");
box.height = 100;
box.width = 100;
//box.addChild(new Button());
addChild(box);
trace("children "+numChildren);
}
]]>
</mx:Script>
<mx:Button label="click" click="button1_clickHandler()" x="200" y="200" />
</mx:Application>
this code is work in flexBuilder.but it doesn't work while compiling in command prompt(using mxmlc command).
please suggest me on this issue, because my work is fully depending on command prompt.
thanks in advance
vengatesh s

This totally depends on the compiler you are using. If you are using the Flex 4+ compiler I would suggest you to try using addElement instead of addChild. The same code above just changes to
protected function button1_clickHandler():void
{
var box:Box = new Box();
box.setStyle("backgroundColor","blue");
box.height = 100;
box.width = 100;
/********** ----------- CHANGE----------------------********/
// This is the only change from your code
addElement(box);
/********** ----------- CHANGE----------------------********/
trace("children "+numChildren);
}

Related

LinkButton rendered inside a grid shows a horizontal scroll bar when length of text is big

I am trying to create links inside data grid cells and I am unable to remove the horizontal scroll bar
Here is my example
///////////////////////////////////////////
//GridExample.mxml - Main application
///////////////////////////////////////////
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<mx:Box id="myCustomBox" height="100%" width="100%" initialize="assignData();">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.HierarchicalData;
[Embed("dialog_error.png")]
private var myImage:Class;
public function assignData():void {
var retVal:ArrayCollection = new ArrayCollection();
var hData:HierarchicalData = new HierarchicalData();
var s:String = '[{"Property":"AA","Value":2,"RowIdentifier":"AA"},{"Property":"BB","Value":"Nice looking link","RowIdentifier":"BB"},{"Property":"CC","Value":"sdfgusgdfugadgfuasygdfgauidsguiasgdfugasuidfguiasg","RowIdentifier":"CC"}]';
var pSets:Object = JSON.parse(s);
var propertySets:Array = pSets as Array;
for (var i:int=0;i<propertySets.length;i++)
{
var item:Object = propertySets[i];
var arrayElt:Object = {Property: item["Property"], RowIdentifier: item["RowIdentifier"], Value: item["Value"]};
retVal.addItem(arrayElt);
}
hData.source = retVal;
myGridId.dataProvider = hData;
}
]]>
</fx:Script>
<mx:AdvancedDataGrid id="myGridId"
variableRowHeight="true"
width="100%"
showHeaders="false"
includeInLayout="{myGridId.visible}"
defaultLeafIcon="{null}"
>
<mx:columns >
<mx:AdvancedDataGridColumn dataField="Property" headerText="Property" backgroundColor="#E5EFF5" width="0.4" wordWrap="true" />
<mx:AdvancedDataGridColumn dataField="Value" headerText="Value" backgroundColor="white" width="0.6" itemRenderer="ExampleRenderer"/>
<mx:AdvancedDataGridColumn dataField="RowIdentifier" visible="false"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Box>
</s:WindowedApplication>
///////////////////////////////////////////
//ExampleRenderer.mxml - ItemRenderer used
///////////////////////////////////////////
<?xml version="1.0"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" textAlign="center" creationComplete="renderNow()" >
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.controls.LinkButton;
import mx.controls.Alert;
private function renderNow():void {
var dataObject:Object = super.data;
var rowId:String = dataObject["RowIdentifier"];
var label:LinkButton = new LinkButton();
label.addEventListener(MouseEvent.CLICK, mouseClick);
label.percentWidth = 100;
label.label = dataObject["Value"];
label.setStyle("horizontalScrollPolicy","off");
label.setStyle("textAlign","left");
label.setStyle("paddingLeft",3);
this.addChild(label);
}
override public function set data(value:Object):void
{
super.data = value;
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}
private function mouseClick(e:MouseEvent):void{
Alert.show("Clicked on a link");
}
]]>
</mx:Script>
</mx:Box>
The LinkButton produced nice links that can be clicked and in a web view it looks really good with a nice hover producing an underline (just like a link) etc but when the text is long, the horizontal scroll bar obscures the text itself. How do I get rid of the horizontal scrollbar (I have tried turning horizontalScrollPolicy off and that does not help). I do not mind if the extra text over and beyond the row length is hidden as I am going to add a tooltip anyway to every cell. Any help here is appreciated.
Thank you.
Setting the minWidth to 0 along with the percentWidth=100 fixed it.

How to get all the values of one column and calculate a total

I am making a program where people can create their own food schedule.
I also want to calculate the total amount of calories per food schedule.
So first off people can add items to a list which are saved in an arraycollection:
<s:List includeIn="State2" x="12" y="533" width="428" height="157" dataProvider="{acKoop}"
enabled="true" change="totalcal(event)">
<s:itemRenderer>
<fx:Component>
<mx:Label text="{data.Type} {data.Kcal}" />
</fx:Component>
</s:itemRenderer>
</s:List>
I want a function that retrieves all the values of data.Kcal and then makes a Sum of it.
public function totalcal(event:Event):void{
var price:Number=acKoop[event.columnIndex].Kcal;
total += price;
}
Here the code of link I was send, maybe will be useful:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable]
private var acKoop:ArrayCollection = null;
public function init():void{
var arr:ArrayCollection = new ArrayCollection();
var obj:Object = new Object();
obj.Type = "TYPE1";
obj.Kcal = 10;
arr.addItem(obj);
obj = new Object();
obj.Type = "TYPE2";
obj.Kcal = 50;
arr.addItem(obj);
acKoop = arr;
}
public function totalcal(event:Event):void{
var i:Number = 0;
for each(var obj:Object in ArrayCollection(List(event.currentTarget).dataProvider)){
i = i + obj.Kcal;
}
Alert.show("Total of Kcal = " + i.toString());
}
]]>
</fx:Script>
<s:List dataProvider="{acKoop}"
enabled="true" change="totalcal(event)">
<s:itemRenderer>
<fx:Component>
<mx:Label text="{data.Type} {data.Kcal}" />
</fx:Component>
</s:itemRenderer>
</s:List>
</s:Application>
Basically, on the change event I take the dataprovider information from the event, and calculate the TOTAL with the for each loop. I hope this will be useful.

how to move an object to the center of the stage in flex 4

I have an Object on stage, and on click I would like it to move to the center of the stage.
I know that I am supposed to use:
<s:move />
But I just don't know how!
Here is a sample app that does what you want, you can play around with the properties of the move effect.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:Move id="moveEffect"></s:Move>
</fx:Declarations>
<s:BorderContainer id="box">
</s:BorderContainer>
<fx:Script>
<![CDATA[
import flash.events.MouseEvent;
private function init():void
{
box.setStyle("backgroundColor", "#ff0000");
box.width = 200;
box.height = 200;
box.addEventListener(MouseEvent.CLICK, onClick);
moveEffect.xTo = (width-box.width)/ 2;
moveEffect.yTo = (height-box.height) / 2;
}
private function onClick(e:MouseEvent):void
{
moveEffect.play([box]);
}
]]>
</fx:Script>
</s:Application>
Hope that helps.
instead of using attribute x... i used mouseX and everything worked as expected!

TextFormat working in raw AS3 but not working in Flex

This problem is driving me bananas because it seems to be so simple. I'm trying to apply a text format to a text field created with code and have the formatting remain applied to the textfield if the text changes. The following code works as expected in raw AS3. I've broken down these examples to be as simplistic as possible.
package
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
public class Testing extends Sprite
{
public function Testing()
{
var tf:TextField = new TextField();
addChild(tf);
tf.border = true;
var tfor:TextFormat = new TextFormat();
tfor.align = 'right';
tfor.size = 30;
tf.defaultTextFormat = tfor;
tf.text = 'Testing';
}
}
}
However, similar code in Flex does not behave the same way. The following code results in the text not being formatted correctly.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="_create(event)">
<fx:Script>
<![CDATA[
import mx.core.UITextField;
import mx.events.FlexEvent;
protected function _create(event:FlexEvent):void
{
var tf:UITextField = new UITextField();
ui.addChild(tf);
tf.border = true;
var tfor:TextFormat = new TextFormat();
tfor.align = 'right';
tfor.size = 30;
tf.defaultTextFormat = tfor;
tf.text = 'Testing';
}
]]>
</fx:Script>
<mx:UIComponent id="ui" width="100%" height="100%" />
</s:Application>
I realize that I could just use a Flex component as the text field and stick formatting on it that way, but this code needs to play nicely with previously written code. Thanks for your help in advance.
Below code may help you: - instead of adding it to UIComponent add it to SpriteVisualElement it will work.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="_create(event)">
<fx:Script>
<![CDATA[
import mx.core.UITextField;
import mx.events.FlexEvent;
protected function _create(event:FlexEvent):void
{
var tf:UITextField = new UITextField();
ui.addChild(tf);
tf.border = true;
var tfor:TextFormat = new TextFormat();
tfor.align = 'right';
tfor.size = 30;
tf.defaultTextFormat = tfor;
tf.text = 'Testing';
}
]]>
</fx:Script>
<s:SpriteVisualElement id="ui" width="100%" height="100%" />
</s:Application>

Flex 3: inquiry about printing

I have created a scheduling application that spans upwards of 16 weeks. I would like to be able to print the schedule using Flex. I've created a test application that lists incrementing dates. These dates obviously stretch longer than the width of my computer. I would like for my print function to print the entire width of dates across several pages... currently, it prints just what appears on my screen. Is there a way to accomplish this?
Below is the app i've created. There are some calls to custom functions, but they in no way relate to the issue at hand:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
<mx:Script source="functions/dateFunctions.as" />
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;
[Bindable] public var date:Date = new Date;
public var numDays:Number = 50;
[Bindable] public var datesAC:ArrayCollection = new ArrayCollection;
public function init():void
{
var tempDate:String = new String;
for (var i:int = 0; i < numDays; i++)
{
tempDate = dateToNumText(rightDate(date.getMonth(), date.getDate() + i, date.getFullYear()));
datesAC.addItem(tempDate);
}
}
private function printMe() :void
{
var pj:PrintJob = new PrintJob();
pj.start();
// setTimeout(function() :void { finishPrinting(pj);}, 1);
finishPrinting(pj);
}
private function finishPrinting(pj:PrintJob): void {
pj.addPage(this);
pj.send();
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%">
<mx:Button id="print" label="Start Print" click="printMe()" />
<mx:HorizontalList id="dateList" dataProvider="{datesAC}" width="100%" height="100%" useRollOver="false">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas borderColor="#000000" borderSides="right" borderStyle="solid">
<mx:Text text="{data}" textAlign="center" color="#000000" width="100" />
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:HorizontalList>
</mx:VBox>
</mx:Application>
You would have to break up/paginate content on your own. You can send each such logically broken up page to PrintJob.appPage() API so it becomes a printed paper. At present, what is happening would be that content would be getting clipped.
I guess you should use PrintJob.addPage() to add your dates to print job.