Why is TextFormat not working on my TextArea? - actionscript-3

I am trying to generate bold text on a text area once its clicked. What am I doing wrong?
HelloWorld.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="800" height="800">
<mx:Script source="HelloWorldAS.as" />
<mx:VBox width="70%" height="70%" label="Container">
<mx:TextArea id="lblTest" verticalScrollPolicy="off" focusThickness="0" borderThickness="0" borderStyle="none" editable="true" fontFamily="Arial" fontSize="14" width="100%" height="100%" click="areaClick()"/>
</mx:VBox>
</mx:Application>
HelloWorldAS.as
// ActionScript file
import flash.text.TextField;
import flash.text.TextFormat;
public function areaClick() : void{
lblTest.text = "Hello world!";
var format:TextFormat = new TextFormat();
format.bold=true;
lblTest.setStyle("textFormat", format);
lblTest.validateNow();
}

Unfortunately there is no textFormat style for TextArea. Use fontWeight as bold as below:
lblTest.setStyle("fontWeight", "bold");

You can read the official adobe documentation here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/TextFormat.html, the most interesting part for you is:
Use the TextField.defaultTextFormat property to apply formatting
BEFORE you add text to the TextField, and the setTextFormat() method
to add formatting AFTER you add text to the TextField.
So if you want the text "hello world" to be bold, you must apply the TextFormat as follows:
lblText.setTextFormat(format);

Related

Dynamically generated MXML data doesn't get rendered

So I have a requirement to display dynamically generated data in the view.
For this, my idea was to create a mxml file and then use it as an object. Fill the data in the ibject and then use addChild to display it. But even after adding all the data. The dynamically generated mxml file doesn't gets displayed.
Code
BuyTogetherGrid.MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="80" height="60" xmlns:image="org.commodity.detail.image.*">
<mx:HBox>
<image:ImageBox id="buyTogetherImg"></image:ImageBox>
<mx:VBox id="textInfo">
<mx:Box id="commonNameBox">
<mx:Label id="commonName">
</mx:Label>
</mx:Box>
<mx:Box id="commonPriceBox">
<mx:Label id="commonPrice">
</mx:Label>
</mx:Box>
</mx:VBox>
</mx:HBox>
<mx:Script>
<![CDATA[
public function createGrid():void{
this.buyTogetherImg = new ImageBox();
this.commonName = new Label();
this.commonPrice = new Label();
}
]]>
</mx:Script>
</mx:Box>
This is my MXMl File. My idea was to create an object of this mxml object. Add data to buyTogetherImg, CommonName, CommonPrice and then use addChild
Part where I set the data
<mx:HBox id="buyTogetherBox" width="100%" borderColor="black">
</mx:HBox>
The upper HBox is the container where I will keep all my generated object
var buyTogetherBox : BuyTogetherGrid = new BuyTogetherGrid();
buyTogetherBox.createGrid();
for each(var item:cmListItem in commod.items){
if(item.dataFormat == 2){
buyTogetherBox.buyTogetherImg.imgData = item.value as ImageData;
} else if(item.dataFormat == 0){
buyTogetherBox.commonName.text = item.value.toString();
} else if(item.dataFormat == 3){
buyTogetherBox.commonPrice.text = StringUtil.numToStrPrice(item.value as Number);
}
}
this.buyTogetherBox.addChild(buyTogetherBox);
}
The code check some conditions and add the data. However the buyTogetherBox is not visible. But if I try something like
this.buyTogetherBox.addChild(buyTogetherBox.buyTogetherImg);
then i can see the image in the H:Box.
I am pretty new to Flex. so may be I would have missed something
You are leaving the statically created instances of the label and image control unused and creating new instances instead. Basically, the entire createGrid() function is unnecessary. You already have the controls created in MXML. Just use them with creating new instances.
var grid:BuyTogetherGrid = new BuyTogetherGrid();
grid.addEventListener(FlexEvent.CREATION_COMPLETE, this.grid_creationCompleteHandler);
Elsewhere in the same class...
private function grid_creationCompleteHandler(event:FlexEvent):void
{
// Set your properties here
}
As Pranav said it takes some time to create MXML components and if you try to assess them immediately you will get a null pointer exception because they don't exist yet. A quick and dirty solution is to make public variables in your BuyTogetherGrid.MXML and then bind the text properties to these variables, like
<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="80" height="60" xmlns:image="org.commodity.detail.image.*">
<fx:Script>
<![CDATA[
[Bindable] public var imageData:ImageData;
[Bindable] public var name:String;
[Bindable] public var price:String;
]]>
</fx:Script>
<mx:HBox>
<image:ImageBox id="buyTogetherImg" imgData={imageData}/>
<mx:VBox id="textInfo">
<mx:Box id="commonNameBox">
<mx:Label id="commonName" text="{name}">
</mx:Label>
</mx:Box>
<mx:Box id="commonPriceBox">
<mx:Label id="commonPrice" text="{price}">
</mx:Label>
</mx:Box>
</mx:VBox>
and then you do
buyTogetherBox.imageData = yourImageData;
buyTogetherBox.name = "Your Name";
buyTogetherBox.imageData = "Your price";
and yes, remove the unnecessary createGrid() method

Custom external itemRenderer is receiving null objects from dataProvider

I have a custom external itemRenderer which I use to display items in a mx:List. The dataProvider is an Array that contains 4 attributes per element. It seems as if the itemRenderer is, in fact, getting the Array because it displays 4 items(the amount of items in the Array) but the items are displayed as "[object Object]".
Here is my itemRenderer...
<mx:Metadata>
[Event(type="classes.events.RemoveEntryEvent", name="removeProject")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import classes.events.RemoveEntryEvent;
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.events.FlexEvent;
override public function set data (value:Object):void{
super.data = value;
//Alert.show(value.toString());
}
public function button_clickHandler():void {
var alertListener:Function = function(closeEvent:CloseEvent):void{
if (closeEvent.detail == Alert.YES){
//dispatchEvent(new RemoveEntryEvent(RemoveEntryEvent.REMOVE_PROJECT, true, false, data));
}
}
var myAlert:Alert = Alert.show("Are you sure you want to remove yourself from this project?",
"Remove Project",
(Alert.YES | Alert.CANCEL),
null, alertListener);
myAlert;
}
private function text_clickHandler():void{
Alert.show("inside text_clickHandler()");
}
]]>
</mx:Script>
<!-- The mx:Text should display a hand maybe when rolledOver: !buttonMode, -->
<mx:Text id="text" width="85%" text="{data}" fontThickness="5" click="text_clickHandler()"/>
<mx:Button id="removeButton" label="Remove" fontSize="9" width="63" verticalCenter="0" fontWeight="normal" x="329"
height="17" click="button_clickHandler()"></mx:Button>
</mx:Canvas>
When I step through the set data function, the 'value:Object' is null! But again, it is displaying the correct amount of items.
Here is my mxml code in which my mx:List is contained...
<mx:TitleWindow y="10" width="550" height="342" layout="absolute" title="LIST OF PROJECTS" cornerRadius="4" id="listOfProjects_panel" horizontalCenter="0">
<mx:List alternatingItemColors="{altColors}" x="65.5" y="30" width="399" height="232" backgroundColor="#F8F8F8" fontSize="12" dataProvider="{xmlSimpleArray}"
id="list_of_projects_master" initialize="listInitializer()" useRollOver="false" selectable="false">
</mx:List>
<mx:Button y="270" label="Refresh List" width="130" x="334.5" id="auth_btn_master0" fontWeight="normal"/>
<mx:Label x="65.5" y="10" text="Click To Select A Project:" fontWeight="bold"/>
</mx:TitleWindow>
Here is the initializer in my mx:Script...
private function listInitializer():void{
//list_of_projects_master.dataProvider = xmlSimpleArray;
list_of_projects_master.itemRenderer = new ClassFactory(ProjectListRenderer);
list_of_projects_master.addEventListener(RemoveEntryEvent.REMOVE_PROJECT, updateXML);
}
If anymore information is needed to assess the issue, please let me know
change the below line in itemrenderer
<mx:Text id="text" width="85%" text="{data}" fontThickness="5" click="text_clickHandler()"/>
shoul be like
<mx:Text id="text" width="85%" text="{data.labelfieldname}" fontThickness="5" click="text_clickHandler()"/>
hope this helps.

drag image from TileList and drop on Canvas in Flex 3

i'm working on a Flex project where i will have to use the drag & drop functionality.
i have a TileList filled with images as items, and a Canvas. i used the tilelist's "dragEnabled" and "dragMoveEnabled" properties to make the images (items) dragable,but can't make the canvas a dropable area.
i'm new to flex by the way, so please make it simple.
and thank you
Drag and drop capabilities can be manually added to any non-list based control. Take a look at:
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7cfc.html#WS2db454920e96a9e51e63e3d11c0bf69084-7d03
If you are still struggling after trying to implement the above, post some code and I will be happy to help more.
i ended up making this code!
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
//Import classes####################################################################
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.events.DragEvent;
import flash.events.MouseEvent;
// IMAGES ###########################################################################
[Bindable]
[Embed(source="assets/images/thumb/1.jpg")]
public var photo1:Class;
[Bindable]
[Embed(source="assets/images/thumb/2.jpg")]
public var photo2:Class;
// FUNCTIONS ###########################################################################
import mx.core.DragSource;
import mx.managers.DragManager;
import mx.events.DragEvent;
import mx.controls.Alert;
private function dragEnterHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("items")){
DragManager.acceptDragDrop(Canvas(event.currentTarget));
}
}
private function dragDropHandler(event:DragEvent):void {
}
]]>
</mx:Script>
<!-- ######## CONTROLS ############################################################ -->
<!-- canvas -->
<mx:Canvas dragDrop="{dragDropHandler(event)}" dragEnter="{dragEnterHandler(event)}" x="395" y="10" width="436" height="486" backgroundColor="#FFFFFF">
</mx:Canvas>
<!-- tile list -->
<mx:TileList x="0" y="10" height="100%" width="154" columnCount="1" id="tl" maxColumns="1" dragEnabled="true" dragMoveEnabled="false" allowMultipleSelection="false" >
<mx:dataProvider>
<mx:Array>
<mx:Object label="photo 1" icon="{photo1}" data="photo" />
<mx:Object label="photo 2" icon="{photo2}" data="photo" />
</mx:Array>
</mx:dataProvider>
</mx:TileList>
</mx:Application>
the canvas now accepts my drag, but when i drop the image on to it, the image just disappears. i know i have to create a function to handle the DragDrop event but i don't really know how to get the dragSource image.
any help .. i'll be grateful

How we can change the Font Size and Font Family of a DataGrid dynamically?

I have a Flex Screen MyData.mxml which has a table of values using a DataGrid. All the styles of the DataGrid are included in a default.css file that is part of a Flex Library Project. This will be converted in an swc file and used in the Flex project where i use MyData.mxml.
In MyData screen, we have an option to change the Font size of the DataGrid. We have a RadioButtonGroup where the user can choose from two option buttons:
Normal Font (Verdana, 12)
Small Font (Verdana, 11)
When the user chooses the 'Normal Font' button, all the data in the DataGrid should be set to Verdana 12 and when the user choose the Small Font option button, all the data in the DataGrid should be set to Verdana 11.
How can I achieve this?
I suppose the following code can solve your problem:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="vertical" verticalAlign="middle" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public static const NORMAL_STYLE:String = "normal";
public static const SMALL_STYLE:String = "small";
protected function styleGroup_changeHandler(event:Event):void
{
var fontFamily:String = "Verdana";
var fontSize:int;
switch (styleGroup.selectedValue)
{
case NORMAL_STYLE:
fontSize = 12;
break;
case SMALL_STYLE:
fontSize = 11;
break;
}
dataGrid.setStyle("fontFamily", fontFamily);
dataGrid.setStyle("fontSize", fontSize);
}
]]>
</mx:Script>
<mx:ArrayCollection id="dataGridData">
<mx:source>
<mx:Array>
<mx:Object first="First1" second="Second1" />
<mx:Object first="First2" second="Second2" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:DataGrid dataProvider="{dataGridData}" height="200" id="dataGrid">
<mx:columns>
<mx:DataGridColumn dataField="first" headerText="First" />
<mx:DataGridColumn dataField="second" headerText="Second" />
</mx:columns>
</mx:DataGrid>
<mx:RadioButtonGroup change="styleGroup_changeHandler(event)" id="styleGroup" />
<mx:RadioButton group="{styleGroup}" label="Normal" value="{NORMAL_STYLE}" />
<mx:RadioButton group="{styleGroup}" label="Small" value="{SMALL_STYLE}" />
</mx:Application>

Using image while creating custom components in flex

For my AIR based application I am trying to create a custom component based on canvas which has an image (as shown below).
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="100" cornerRadius="5" borderStyle="solid" borderThickness="2" dropShadowEnabled="true" borderColor="#EDEDE8" dropShadowColor="#dddddd" shadowDistance="5" shadowDirection="center">
<mx:Script>
<![CDATA[
public var path:String = "";
]]>
</mx:Script>
<mx:Image id="tileImage" maintainAspectRatio="false" buttonMode="true" useHandCursor="true" source="{path}" width="100%" x="0" height="100%" y="0"/>
<mx:Canvas left="3" top="3" bottom="3" right="3" borderStyle="solid" cornerRadius="5" borderThickness="1" borderColor="#EDEDE8" alpha="0.75">
</mx:Canvas>
I am binding the source of the image with the public variable path. And when I am trying to place this component in my main mxml file like below and provide the 'path' to it, I am unable to see any image loading in the custom component. It remains blank.
var component:MyCustComponent = new MyCustComponent();
component.path = 'path/to/image.jpg';
addChild(component);
As a work around, I am trying to add an creationComplete listener to the canvas in my custom component and used to give titleImage.source = this.path . This made it work correctly but it doesn't help me if I have to keep changing the image or when the path of the image fetched using some async call. So, I would like to know if there's any alternative to fix this problem.
Thanks!!
Looks like you are just missing the bindable metatag for path. for your path declaration try:
[Bindable]
public var path:String;