I have a combobox where the textAlign defaults to center. I tried setting it to texAlign="left", but the text is still centered.
<s:HGroup width="100%" height="90%" textAlign="left">
<s:VGroup width="45%" height="100%" textAlign="left">
<s:Label width="100%" fontSize="12" text="Company Name:" textAlign="left"
verticalAlign="middle"/>
<s:TextInput id="companyNameForm" width="100%"/>
<s:Label width="100%" fontSize="12" text="Industry:" textAlign="left"/>
<s:ComboBox id="companyIndustryForm" x="0" width="100%"
creationComplete="LoadIndustList(event)" labelField="IndustryEn"
selectedIndex="1"/>
<s:Label width="100%" fontSize="12" text="Contact Person:" textAlign="left"/>
<s:TextInput id="companyContactPersonForm" width="100%"/>
<s:Label width="100%" fontSize="12" text="Contact Phone:" textAlign="left"/>
<s:TextInput id="companyContactPhoneForm" width="100%"/>
<s:Label width="100%" fontSize="12" text="Created By:" textAlign="left"/>
<s:TextInput id="companyCreatedByForm" width="100%"/>
<s:Label width="100%" fontSize="12" text="Created Date" textAlign="left"/>
<s:TextInput id="companyCreatedDateForm" width="100%"/>
</s:VGroup>
Related
I am having a tabbednavigation application and inside one of the tabs I have 2 states "planner" and "Login". I want the Login state to be first, and after they logged in it will change to the planner state.
The thing is when it is in the login State I don7t want the tab bar to be visible, and when it changes to the Planner state it should become visible. I am trying to use the If clause but I can't get it to work.
Anyone an idea?
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:ns1="*"
currentState="Login" preinitialize="view2_creationCompleteHandler(event)" title="Planner">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function view2_creationCompleteHandler(event:FlexEvent):void
{
if (this.currentState == "Login") {
// TODO Auto-generated method stub
this.tabBarVisible = false;
}
else {
this.tabBarVisible = true;
}
}
]]>
</fx:Script>
<s:states>
<s:State name="planner"/>
<s:State name="Login"/>
</s:states>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:BorderContainer includeIn="Login" width="320" height="364" >
</s:BorderContainer>
<s:HGroup includeIn="planner" y="10" width="320" height="46" horizontalAlign="center"
textAlign="center">
<ns1:Lbtn width="34" height="35"/>
<ns1:weekdisplay height="35"/>
<ns1:Rbtn width="34" height="35"/>
</s:HGroup>
<s:VGroup includeIn="planner" y="55" width="100%" gap="-1" paddingBottom="0" paddingLeft="0"
paddingRight="0" paddingTop="0">
<s:BorderContainer x="0" y="319" width="100%" height="45" backgroundColor="#E6E6E6"
borderStyle="inset" borderWeight="1">
<s:Label width="70" height="45" text="Mon" textAlign="center" verticalAlign="middle"/>
<s:Label x="70" width="250" height="45" text="Click to add dish" textAlign="center"
verticalAlign="middle"/>
</s:BorderContainer>
<s:BorderContainer x="0" y="319" width="100%" height="45" borderStyle="inset" borderWeight="1" >
<s:Label width="70" height="45" text="Tue" textAlign="center" verticalAlign="middle"/>
<s:Label x="70" width="250" height="45" text="Click to add dish " textAlign="center"
verticalAlign="middle"/>
</s:BorderContainer>
<s:BorderContainer x="0" y="319" width="100%" height="45" backgroundColor="#E6E6E6"
borderStyle="inset" borderWeight="1">
<s:Label width="70" height="45" text="Wed" textAlign="center" verticalAlign="middle"/>
<s:Label x="70" width="250" height="45" text="Click to add dish" textAlign="center"
verticalAlign="middle"/>
</s:BorderContainer>
<s:BorderContainer x="0" y="319" width="100%" height="45" borderStyle="inset" borderWeight="1" >
<s:Label width="70" height="45" text="Thu" textAlign="center" verticalAlign="middle"/>
<s:Label x="70" width="250" height="45" text="Click to add dish" textAlign="center"
verticalAlign="middle"/>
</s:BorderContainer>
<s:BorderContainer x="0" y="319" width="100%" height="45" backgroundColor="#E6E6E6"
borderStyle="inset" borderWeight="1">
<s:Label width="70" height="45" text="Fri" textAlign="center" verticalAlign="middle"/>
<s:Label width="250" height="45" text="Click to add dish" textAlign="center"
x="70" verticalAlign="middle"/>
</s:BorderContainer>
<s:BorderContainer x="0" y="319" width="100%" height="45" borderStyle="inset" borderWeight="1" >
<s:Label width="70" height="45" text="Sat" textAlign="center" verticalAlign="middle"/>
<s:Label x="70" width="250" height="45" text="Click to add dish" textAlign="center"
verticalAlign="middle"/>
</s:BorderContainer>
<s:BorderContainer x="0" y="319" width="100%" height="45" backgroundColor="#E6E6E6"
borderStyle="inset" borderWeight="1">
<s:Label width="70" height="45" text="Sun" textAlign="center" verticalAlign="middle"/>
<s:Label x="70" width="250" height="45" text="Click to add dish" textAlign="center"
verticalAlign="middle"/>
</s:BorderContainer>
</s:VGroup>
<s:TextInput id="LoginName" includeIn="Login" y="192" left="15" right="15" text="Email address"/>
<s:TextInput id="LoginPassword" includeIn="Login" y="247" left="15" right="15" text="Password"/>
<s:Button id="LoginLogin" includeIn="Login" y="306" right="15" width="100" height="30"
label="Login" click="this.currentState="planner""/>
<s:Button id="LoginCreate" includeIn="Login" y="306" left="15" width="100" height="30"
label="Create"/>
<s:Label includeIn="Login" x="166" y="39" width="113" height="101" fontSize="30"
text="Menu
Planner"/>
</s:View>
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
currentState="login" tabBarVisible="{currentState!='login'}">
<s:actionContent>
<s:Button includeIn="login" label="login" click="currentState='planner'"/>
</s:actionContent>
<s:states>
<s:State name="login"/>
<s:State name="planner"/>
</s:states>
</s:View>
In my application I'm using a canvas and repeater inside HBox it is Dynamic,..now I want to keep a horizontal scrollbar for the same, I may display more than 50 canvas addresses inside that Hbox and repeater.
Here is my code:
<mx:HBox id="addrBox" x="42" y="161" width="1000%" styleName="ContextPanel" resizeEffect="resize" horizontalGap="5" height="0" paddingLeft="15">
<mx:Repeater id="rpt" maxWidth="1000" dataProvider="{ customerAddress }" >
<mx:Canvas height="243" width="283" id="addressCanv" cornerRadius="0" styleName="ContextPanel">
<mx:Label id="seq" text="{rpt.currentIndex+1 }" x="99" y="0"/>
<mx:TextInput id="address1" maxChars="50" change="address1_changeHandler(event)" text="{ rpt.currentItem.addressOne}" x="99" y="60"/>
<mx:TextInput id="address2" maxChars="50" change="address2_changeHandler(event)" text="{ rpt.currentItem.addressTwo}" x="99" y="90"/>
<mx:TextInput id="address3" maxChars="50" change="address3_changeHandler(event)" text="{ rpt.currentItem.addressThree}" x="99" y="120"/>
<mx:TextInput id="postalCd" restrict="[0-9]" maxChars="6" change="postalCd_changeHandler(event)" text="{ rpt.currentItem.postalCode}" x="99" y="150" width="167"/>
<mx:ComboBox id="cntryCdCmb" prompt="Select" change="cntryCdCmb_changeHandler(event)" selectedIndex="{ StaticDataHolder.countryList.getItemIndex(ASUtil.getValue(StaticDataHolder.countryList,rpt.currentItem.countryCode))}" dataProvider="{ StaticDataHolder.countryList }" x="99" y="180" width="167"/>
<mx:CheckBox id="primaryFlag" label="isPrimary" selected="{ (rpt.currentItem.primaryFlag == 0)?true:false }" change="primaryFlag_changeHandler(event)" x="19" y="210"/>
<mx:Label x="10" y="0" text="Seq No"/>
<mx:Label x="10" y="62" text="Address 1"/>
<mx:Label x="10" y="92" text="Address 2"/>
<mx:Label x="10" y="122" text="Address 3"/>
<mx:Label x="10" y="152" text="Postal Code"/>
<mx:Label x="10" y="182" text="Country Code"/>
<mx:Label x="10" y="29" text="Address Type"/>
<mx:ComboBox x="99" y="29" width="167" prompt="Select" change="addTypeCmb_changeHandler(event)" id="addTypeCmb" selectedIndex="{ StaticDataHolder.addressTypes.getItemIndex(ASUtil.getValue(StaticDataHolder.addressTypes,rpt.currentItem.addressType))}" dataProvider="{ StaticDataHolder.addressTypes }"></mx:ComboBox>
<mx:Label x="235" y="210" text="{ rpt.currentItem.primaryFlag}"/>
<mx:Image id="delAddr" x="258" y="3" height="21" width="17" source="images/delete2.png" maintainAspectRatio="true" click="delAddr_clickHandler(event)"/>
</mx:Canvas>
</mx:Repeater>
</mx:HBox>
Kindly give some idea for getting horizontal scroll bar for the Repeater.
Add one more attribute to your HBox that is horizontalScrollPolicy
<mx:HBox id="addrBox" x="42" y="161" width="100%" styleName="ContextPanel"
resizeEffect="resize" horizontalGap="5" height="0" paddingLeft="15" horizontalScrollPolicy="on">
You can set the values on, off and auto. By using auto
HScrollBar will be visible if contents does not fit in the given space.
<mx:HBox id="addrBox" x="42" y="161" width="100%" styleName="ContextPanel"
resizeEffect="resize" horizontalGap="5" height="0" paddingLeft="15" horizontalScrollPolicy="auto">
horizontalScrollPolicy auto gives the best result if it reduces from 50.
I'm having the hardest time finding a way to simply add rounded tabs to a TabNavigator control.
I have seen examples which seem to be really simple but they don't seem to work in Flex 4.5. Here is some sample code:
<?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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style source="style.css"/>
<mx:TabNavigator x="93" y="90" width="571" height="293" tabStyleName="tabstyle">
<s:NavigatorContent width="100%" height="100%" label="Tab 1">
</s:NavigatorContent>
</mx:TabNavigator>
</s:Application>
and the css:
/* CSS file */
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
.tabstyle
{
corner-radius: 10;
}
I have also tried cornerRadius: 10;
Any ideas why this does not work? Any easy to follow solution (I'm a beginner).
Thanks.
You could create a skin for your app/tab navigator, use the 'create copy of' option in Flash Builder, and in the Rect section, set the radiusX, radiusY values. Then use that skin for the component
This is the best and easiest workaround I know for this problem. It seems Adobe never solved this bug.
<s:VGroup width="100%" height="100%" gap="0" >
<s:Group width="100%">
<s:TabBar left="4" dataProvider="{tabNav}" cornerRadius="4" />
</s:Group>
<s:BorderContainer width="100%" height="100%" cornerRadius="4">
<mx:ViewStack id="tabNav" paddingBottom="10" width="100%" height="100%" >
<s:NavigatorContent label="Form" width="100%" height="100%">
...
</s:NavigatorContent>
<mx:Canvas id="treeNode" label="TreeNodeComponent" width="100%" height="100%">
...
</mx:Canvas>
<mx:Canvas id="melding" label="Melding" width="100%" height="100%" visible="{authorisation.moduleHasUserAutorization('melding')}" includeInLayout="{melding.visible}">
...
</mx:Canvas>
</mx:ViewStack>
</s:BorderContainer>
</s:VGroup>
It's the equivalent of this but with rounded corners in the tabs (and body):
<mx:TabNavigator id="tabNav" paddingBottom="10" width="100%" height="100%" >
<s:NavigatorContent label="Form" width="100%" height="100%">
...
</s:NavigatorContent>
<mx:Canvas id="treeNode" label="TreeNodeComponent" width="100%" height="100%">
...
</mx:Canvas>
<mx:Canvas id="melding" label="Melding" width="100%" height="100%" visible="{authorisation.moduleHasUserAutorization('melding')}" includeInLayout="{melding.visible}">
...
</mx:Canvas>
</mx:TabNavigator>
Try this!
<mx:TabNavigator id="tabNavigator" tabOffset="20" cornerRadius="10" height="100%" width="100%">
This is the sample code you can copy and run
<s:NavigatorContent id="search" label="Search" width="100%" height="100%" fontWeight="bold"
>
<s:layout>
<s:VerticalLayout horizontalAlign="center"
paddingTop="5" paddingLeft="5"
paddingRight="5" paddingBottom="5" />
</s:layout>
<s:Label text="Search Panel" />
<s:HGroup >
<s:TextInput id="Searchtxt" width="200" />
<mx:Button label="search" click="Searchtxt.text=''" />
</s:HGroup>
</s:NavigatorContent>
<s:NavigatorContent id="custInfo" label="Customer Info" backgroundColor="0xDCDCDC"
width="100%" height="100%" fontWeight="bold" >
<s:layout>
<s:VerticalLayout horizontalAlign="center"
paddingTop="5" paddingLeft="5"
paddingRight="5" paddingBottom="5" />
</s:layout>
<s:Label text="Customer Info" />
<s:HGroup>
<s:Label text="Email Address"/>
<s:TextInput id="email" width="200"/>
<s:Button label="Submit" click="email.text='';" />
</s:HGroup>
</s:NavigatorContent>
<s:NavigatorContent id="accountInfo" label="Account Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
<s:layout>
<s:VerticalLayout horizontalAlign="center"
paddingTop="5" paddingLeft="5"
paddingRight="5" paddingBottom="5" />
</s:layout>
<s:Label text="Account Info" />
<s:HGroup>
<s:Button label="Purchases" />
<s:Button label="Sales" />
<s:Button label="Reports" />
</s:HGroup>
</s:NavigatorContent>
</mx:ViewStack>
Is there a way to align an image to the rightmost of HGroup, which is setted to 100% width ?
here is my code, but it aligning the image "imageZoom" just after the object before it :
<s:VGroup id="masterVGroup" width="100%">
<s:HGroup id="masterHGroup" gap="3" width="100%" verticalAlign="middle">
<s:SpriteVisualElement id="colorBox" width="12" height="6""/>
<s:Label id="labelDisplay" text="delete"/>
<s:Image id="imageZoom"
right="2"
horizontalAlign="right"
source="{iconZOOM}"/>
</s:HGroup>
</s:VGroup>
<s:VGroup id="masterVGroup" width="100%">
<s:HGroup id="masterHGroup" gap="3" width="100%" verticalAlign="middle" horizontalAlign="right">
<s:SpriteVisualElement id="colorBox" width="12" height="6""/>
<s:Label id="labelDisplay" text="delete"/>
<s:Image id="imageZoom"
right="2"
horizontalAlign="right"
source="{iconZOOM}"/>
</s:HGroup>
</s:VGroup>
I think it should work :)
In a case you want to have SpriteVisualElement and Label instances on the same places you can use spacer:
<s:VGroup id="masterVGroup" width="100%">
<s:HGroup id="masterHGroup" gap="3" width="100%" verticalAlign="middle">
<s:SpriteVisualElement id="colorBox" width="12" height="6""/>
<s:Label id="labelDisplay" text="delete"/>
<mx:Spacer width="100%"/>
<s:Image id="imageZoom"
right="2"
horizontalAlign="right"
source="{iconZOOM}"/>
</s:HGroup>
</s:VGroup>
No matter what value I put in the horizontalCenter property of the "Browse" button, it just follows the horizontalAlign property of the VGroup. Why is that ?
Thanks
<s:Group width="100%" height="100%" left="0" right="0" top="0" bottom="0">
<s:Panel id="mainPanel" title="File uploader" width="75%" height="75%" horizontalCenter="0" verticalCenter="0">
<s:controlBarContent> <s:Label text="foo"/> </s:controlBarContent>
<mx:HDividedBox width="100%" height="100%">
<s:VGroup width="25%" height="100%" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10">
<s:TextArea width="100%" height="100%" />
<s:Button label="Browse" horizontalCenter="30"/>
</s:VGroup>
<s:TextArea width="100%" height="100%" />
</mx:HDividedBox>
</s:Panel>
</s:Group>
The VGroup in Flex 4 uses spark.layouts.VerticalLayout which doesn't take into account horizontalCenter/verticalCenter :/. I don't like that myself.
But since your VGroup's child TextArea is 100% width/height, you can use the VerticalLayout/VGroup horizontalAlign property: horizontalAlign="center". That works:
<s:Group width="100%" height="100%" left="0" right="0" top="0" bottom="0">
<s:Panel id="mainPanel" title="File uploader" width="75%" height="75%" horizontalCenter="0" verticalCenter="0">
<s:controlBarContent>
<s:Label text="foo"/>
</s:controlBarContent>
<mx:HDividedBox width="100%" height="100%">
<s:VGroup width="25%" height="100%" paddingLeft="10" horizontalAlign="center" paddingRight="10" paddingTop="10" paddingBottom="10">
<s:TextArea width="100%" height="100%" />
<s:Button label="Browse" horizontalCenter="30"/>
</s:VGroup>
<s:TextArea width="100%" height="100%" />
</mx:HDividedBox>
</s:Panel>
</s:Group>