This is the scenario:
<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">
<s:HGroup>
<s:Form>
<s:FormItem label="label1">
<s:TextInput/>
</s:FormItem>
<s:FormItem label="label2">
<s:TextInput/>
</s:FormItem>
<s:FormItem label="label3">
<s:TextInput/>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem label="label1">
<s:Label text="soemthing"/>
</s:FormItem>
<s:FormItem label="label2">
<s:Label text="soemthing"/>
</s:FormItem>
<s:FormItem label="label3">
<s:Label text="soemthing"/>
</s:FormItem>
</s:Form>
</s:HGroup>
</s:Application>
And the question is, which would be the right way to align each formItem of the left form with the ones on the right form?
Use TileLayout for your form:
<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">
<s:Form>
<s:layout>
<s:TileLayout requestedColumnCount="2"
verticalAlign="middle" />
</s:layout>
<s:FormItem label="label1">
<s:TextInput />
</s:FormItem>
<s:FormItem label="label1">
<s:Label text="something" />
</s:FormItem>
<s:FormItem label="label2">
<s:TextInput />
</s:FormItem>
<s:FormItem label="label2">
<s:Label text="something" />
</s:FormItem>
<s:FormItem label="label3">
<s:TextInput />
</s:FormItem>
<s:FormItem label="label3">
<s:Label text="something" />
</s:FormItem>
</s:Form>
</s:Application>
Related
I have these labels here and they are not appearing...at all I ran the debugged and they are being populated with text, but they just not appearing, please help.
<mx:VBox
height="1920" width="1080"
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:s="library://ns.adobe.com/flex/spark" xmlns:local="*" show="initModel()"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Grid id="floorPlansListDetail" width="1080" height="1920" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:GridRow id="floorPlansDetailRow" width="1080" height="500" backgroundColor="#691a3a">
<mx:GridItem height="500">
<mx:Label id="Name" text="This is a test." fontSize="48" height="200" color="#FFFFFF" visible="true" />
<mx:Label id="Series" text="This is a test." fontSize="20" color="#FFFFFF" />
<mx:Label id="Price" text="This is a test." fontSize="30" color="#FFFFFF" />
<mx:Label id="ElevationA" text="This is a test." fontSize="20" color="#FFFFFF" />
<mx:Label id="ElevationB" text="This is a test." fontSize="20" color="#FFFFFF" />
<mx:Label id="Beds" text="This is a test." fontSize="20" color="#FFFFFF" />
<mx:Label id="Baths" text="This is a test." fontSize="20" color="#FFFFFF" />
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:VBox>
its sooooo weird, if I put my label outside the grid it works and displays, but not inside the grid.
This code runs just fine for me:
<?xml version="1.0"?>
<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">
<fx:Script><![CDATA[
]]></fx:Script>
<mx:VBox
height="1920" width="1080"
xmlns:s="library://ns.adobe.com/flex/spark"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Grid id="floorPlansListDetail" width="1080" height="1920" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:GridRow id="floorPlansDetailRow" width="1080" height="500" backgroundColor="#691a3a">
<mx:GridItem height="500">
<mx:Label id="Name" text="This is a test." fontSize="48" height="200" color="#FFFFFF" visible="true" />
<mx:Label id="Series" text="This is a test." fontSize="20" color="#FFFFFF" />
<mx:Label id="Price" text="This is a test." fontSize="30" color="#FFFFFF" />
<mx:Label id="ElevationA" text="This is a test." fontSize="20" color="#FFFFFF" />
<mx:Label id="ElevationB" text="This is a test." fontSize="20" color="#FFFFFF" />
<mx:Label id="Beds" text="This is a test." fontSize="20" color="#FFFFFF" />
<mx:Label id="Baths" text="This is a test." fontSize="20" color="#FFFFFF" />
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:VBox>
</s:Application>
Is your mx import same as above?
I have created a application with Background image using skin class. I want to show some images on top of the image in application. Can you please suggest how to do that in flex 4.
Code is here :
BackGroundImageskin:-
<fx:Metadata>
[HostComponent("spark.components.supportClasses.SkinnableComponent")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<s:BitmapImage source="#Embed('Img/asianwoman.jpg')" left="0" right="0" top="0" bottom="0" smooth="true"/>
Main application:-
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Group visible="true">
<mx:Image source="Img/News1.png" visible="true" />
<s:Button label="My Button"/>
</s:Group>
Here New1.png is not displaying and only background image displaying
Use this for your skin (assuming standard web Application):
<s:Skin xmlns:fb="http://ns.adobe.com/flashbuilder/2009" xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Application")]
]]>
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" />
<s:State name="disabledWithControlBar" />
</s:states>
<s:BitmapImage top="0" left="0" bottom="0" right="0" source="#Embed('img.jpg')" smooth="true" />
<s:Group top="0" left="0" bottom="0" right="0">
<s:layout>
<s:VerticalLayout horizontalAlign="justify" gap="0" />
</s:layout>
<!---
#private
Application Control Bar
-->
<s:Group id="topGroup" minHeight="0" minWidth="0" includeIn="normalWithControlBar, disabledWithControlBar">
<!-- layer 0: control bar highlight -->
<s:Rect top="0" left="0" bottom="1" right="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" />
<s:GradientEntry color="0xD8D8D8" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 1: control bar fill -->
<s:Rect top="1" left="1" bottom="2" right="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xEDEDED" />
<s:GradientEntry color="0xCDCDCD" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: control bar divider line -->
<s:Rect height="1" left="0" bottom="0" right="0" alpha="0.55">
<s:fill>
<s:SolidColor color="0x000000" />
</s:fill>
</s:Rect>
<!-- layer 3: control bar -->
<!--- #copy spark.components.Application#controlBarGroup -->
<s:Group id="controlBarGroup" top="1" left="0" bottom="1" right="0" minHeight="0" minWidth="0">
<s:layout>
<s:HorizontalLayout paddingBottom="7" paddingLeft="10" paddingRight="10" paddingTop="7" gap="10" />
</s:layout>
</s:Group>
</s:Group>
<!--- #copy spark.components.SkinnableContainer#contentGroup -->
<s:Group id="contentGroup" width="100%" height="100%" minHeight="0" minWidth="0" />
</s:Group>
</s:Skin>
i have the following code:
<mx:Script>
//I WANT TO ADRESS THE FUNCTION INSIDE MY HBOX FROM HERE
</mx:Script>
<mx:DataGrid id="dg_uploads" x="10" y="10" width="500" height="350" editable="false" variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn headerText="progress" sortable="true" paddingLeft="10">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Script>
<![CDATA[
public function updateProgress(event:CustomEvent):void {
trace(event);
bar.setProgress( event.data.bytesLoaded, event.data.bytesTotal );
}
]]>
</mx:Script>
<mx:VBox>
<mx:ProgressBar id="bar" labelPlacement="top" minimum="0" visible="true" maximum="100" verticalGap="0"
color="0x323232" label="{data.name}" direction="right" mode="manual" fontWeight="bold" trackHeight="10" width="280" bottom="0"/>
<mx:ProgressBar id="subbar" mode="manual" direction="right" labelPlacement="bottom" minimum="0" visible="true" label="{data.status}"
maximum="100" width="280" styleName="subBarStyle"/>
</mx:VBox>
<mx:Image source="images/Clear-Red-Button.png" useHandCursor="true" buttonMode="true" click="outerDocument.deleteItem(event)" />
<mx:Image source="images/Clear-Green-Button.png" useHandCursor="true" buttonMode="true" click="outerDocument.stopUploadProcess(event)" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
How can i adress the function inside the hbox script from outside the hbox script? I want to trigger it when the document starts
<s:TextArea id="txtAddress" x="118" y="31" width="150" height="88" maxChars="100"
tabIndex="2"/>
txtAddress.text="AAAAAAAAAAAA CCCCCCCCCCCCCCCCCCCCCC P OABCDEFGHIJKLMNOPQRSTUVWXYZWSDER-682021";
This actionscript code crashes flash plugin. Some times it will not crash but the text inside the text area will be overwrite twice. The same is happening with every browser I have tested. I think this is flash's bug.
(Please note that if width of the textarea or if the value changes, it will work fine)
Can any one comment on this?
Below is the markup code:
<s:BorderContainer x="2" y="32" height="125" width="565" borderColor="#488AC7"
backgroundColor="#EEF0EE" cornerRadius="2">
<s:TextInput id="txtPhoneNo" x="407" y="3" width="150" maxChars="15" tabIndex="3"/>
<s:Label x="12" y="13" text="Name" fontWeight="normal" />
<s:TextInput x="118" y="3" width="150" id="txtName" maxChars="100" tabIndex="1" />
<s:Label x="12" y="40" text="Address" fontWeight="normal"/>
<s:TextArea id="txtAddress" x="118" y="31" width="150" height="88" maxChars="100"
tabIndex="2"/>
<s:Label x="302" y="13" text="Phone No." fontWeight="normal"/>
<s:Label x="302" y="40" text="Mobile" fontWeight="normal" />
<s:TextInput id="txtMobile" x="407" y="31" width="150" maxChars="15" tabIndex="4"/>
<s:Label x="302" y="70" text="Email" fontWeight="normal" />
<s:TextInput id="txtEmail" x="407" y="60" width="150" maxChars="100" tabIndex="5"/>
<s:Label x="302" y="101" text="ECS Account NO"/>
<s:TextInput id="txtECSAcNo" x="407" y="91" width="150" tabIndex="6"/>
</s:BorderContainer>
This is isolated to your system or implementation.
What you have provided is functional:
<?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="creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function creationCompleteHandler(event:FlexEvent):void
{
txtAddress.text = "AAAAAAAAAAAA CCCCCCCCCCCCCCCCCCCCCC P OABCDEFGHIJKLMNOPQRSTUVWXYZWSDER-682021";
}
]]>
</fx:Script>
<s:TextArea id="txtAddress"
x="118"
y="31"
width="150"
height="88"
maxChars="100"
tabIndex="2" />
</s:Application>
it seems somewhere else, you set the fontsize of the textarea to an invalid value. I had the same problem before, maybe somewhere you just set it to some value like "10px".
I need to add a rollover effect to the disabled state of a Spark button. This way, users can rollover the button and know why the button is disabled.
I think I would have to override ButtonBase's getCurrentSkinState. Is there anyway to test if a mouse cursor is over a disabled button?
Thanks.
Try to use the following:
package
{
import spark.components.Button;
[SkinState("overDisabled")]
public class ButtonWithOverInDisabled extends Button
{
private var _enabledInvalidaationPhase:Boolean = false;
private var _explicitMouseChildren:Boolean = true;
private var _explicitMouseEnabled:Boolean = true;
override public function get enabled():Boolean
{
if (_enabledInvalidaationPhase)
return true;
return super.enabled;
}
override public function set enabled(value:Boolean):void
{
_enabledInvalidaationPhase = true;
super.enabled = value;
super.mouseChildren = _explicitMouseChildren;
super.mouseEnabled = _explicitMouseEnabled;
_enabledInvalidaationPhase = false;
}
override public function set mouseChildren(value:Boolean):void
{
super.mouseChildren = value;
_explicitMouseChildren = value;
}
override public function set mouseEnabled(value:Boolean):void
{
super.mouseEnabled = value;
_explicitMouseEnabled = value;
}
override protected function getCurrentSkinState():String
{
if ((hovered || mouseCaptured) && !enabled)
return "overDisabled";
return super.getCurrentSkinState();
}
}
}
Spark skin may looks like the following:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabledState="0.5">
<fx:Metadata>[HostComponent("ButtonWithOverInDisabled")]</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
/* Define the skin elements that should not be colorized.
For button, the graphics are colorized but the label is not. */
static private const exclusions:Array = ["labelDisplay"];
/**
* #private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* #private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
/**
* #private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
var cr:Number = getStyle("cornerRadius");
if (cornerRadius != cr)
{
cornerRadius = cr;
shadow.radiusX = cornerRadius;
fill.radiusX = cornerRadius;
lowlight.radiusX = cornerRadius;
highlight.radiusX = cornerRadius;
border.radiusX = cornerRadius;
}
if (highlightStroke) highlightStroke.radiusX = cornerRadius;
if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
private var cornerRadius:Number = 2;
]]>
</fx:Script>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" stateGroups="overState" />
<s:State name="down" />
<s:State name="disabled" stateGroups="disabledState" />
<s:State name="overDisabled" stateGroups="overState,disabledState" />
</s:states>
<!-- layer 1: shadow -->
<!--- #private -->
<s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.01"
alpha.down="0" />
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.07"
alpha.down="0.5" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: fill -->
<!--- #private -->
<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
color.overState="0xBBBDBD"
color.down="0xAAAAAA"
alpha="0.85" />
<s:GradientEntry color="0xD8D8D8"
color.overState="0x9FA0A1"
color.down="0x929496"
alpha="0.85" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 3: fill lowlight -->
<!--- #private -->
<s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="270">
<s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
<s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
<s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 4: fill highlight -->
<!--- #private -->
<s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
ratio="0.0"
alpha="0.33"
alpha.overState="0.22"
alpha.down="0.12"/>
<s:GradientEntry color="0xFFFFFF"
ratio="0.48"
alpha="0.33"
alpha.overState="0.22"
alpha.down="0.12" />
<s:GradientEntry color="0xFFFFFF"
ratio="0.48001"
alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 5: highlight stroke (all states except down) -->
<!--- #private -->
<s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" alpha.overState="0.22" />
<s:GradientEntry color="0xD8D8D8" alpha.overState="0.22" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 6: highlight stroke (down state only) -->
<!--- #private -->
<s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!--- #private -->
<s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
<!--- #private -->
<s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000"
alpha="0.5625"
alpha.down="0.6375" />
<s:GradientEntry color="0x000000"
alpha="0.75"
alpha.down="0.85" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 8: text -->
<!--- #copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2">
</s:Label>
</s:SparkSkin>
Hope this helps! :)