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>
Related
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>
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>
If you run the following mxml code, you'll see the MyLabel1 is sitting higher than the other labels (e.g. MyLabel2) and other items on the 2nd row.
How to change the code so MyLabel1 sits in-line with MyLabel2, etc?
Note that any changes need to keep the group of MyLabel2, MyLabel3, and MyButton3 to be equally spaced between MyLabel1 (on the left) and MyLabel4 (on the right), as it is now. In other words, this middle group on the 2nd row is NOT centered in the container, but has equal space on it's left and right.
<?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="200" minHeight="300">
<s:VGroup top="10" left="20" right="20">
<s:Group width="100%">
<s:HGroup left="0" top="5" verticalAlign="baseline">
<s:Label text="Some Text Here" />
</s:HGroup>
<s:HGroup right="0" verticalAlign="baseline">
<s:Button label="Button1" width="65"/>
<s:Button label="Button2" width="65"/>
</s:HGroup>
</s:Group>
<s:Spacer height="2"/>
<s:HGroup width="100%" >
<s:HGroup >
<s:Label text="MyLabel1"/>
</s:HGroup>
<s:Spacer width="100%"/>
<s:HGroup verticalAlign="baseline">
<s:Label text="MyLabel2"/>
<s:Label text="MyLabel3"/>
<s:Button label="MyButton3" width="85"/>
</s:HGroup>
<s:Spacer width="100%"/>
<s:HGroup verticalAlign="baseline">
<s:Label text="MyLabel4"/>
<s:TextInput id="myID" />
</s:HGroup>
</s:HGroup>
</s:VGroup>
Try:
set the three hgroup verticalAlign to middle so the item contained are positioned in the middle of the height of the component...
then you need to specify an height for the three hgroup because:
- in the first there is only a label (with a certain height)
- in the others two there are a button and a textinput that has a greater height than the simple label (hgroup 1)
Using a custom height for the group override the height set by the inner components
<s:VGroup top="10" left="20" right="20">
<s:Group width="100%">
<s:HGroup left="0" top="5" verticalAlign="baseline">
<s:Label text="Some Text Here" />
</s:HGroup>
<s:HGroup right="0" verticalAlign="baseline">
<s:Button label="Button1" width="65"/>
<s:Button label="Button2" width="65"/>
</s:HGroup>
</s:Group>
<s:Spacer height="2"/>
<s:HGroup width="100%" >
<s:HGroup verticalAlign="middle" height="25">
<s:Label text="MyLabel1"/>
</s:HGroup>
<s:Spacer width="100%"/>
<s:HGroup verticalAlign="middle" height="25">
<s:Label text="MyLabel2"/>
<s:Label text="MyLabel3"/>
<s:Button label="MyButton3" width="85"/>
</s:HGroup>
<s:Spacer width="100%"/>
<s:HGroup verticalAlign="middle" height="25">
<s:Label text="MyLabel4"/>
<s:TextInput id="myID" />
</s:HGroup>
</s:HGroup>
</s:VGroup>
Just add verticalAlign="baseline" to most outer HGroup.
<?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>
<s:VGroup top="10" left="20" right="20">
<s:Group width="100%">
<s:HGroup left="0" top="5" verticalAlign="baseline">
<s:Label text="Some Text Here" />
</s:HGroup>
<s:HGroup right="0" verticalAlign="baseline">
<s:Button label="Button1" width="65"/>
<s:Button label="Button2" width="65"/>
</s:HGroup>
</s:Group>
<s:Spacer height="2"/>
<s:HGroup width="100%" verticalAlign="baseline" >
<s:HGroup>
<s:Label text="MyLabel1"/>
</s:HGroup>
<s:Spacer width="100%"/>
<s:HGroup verticalAlign="baseline">
<s:Label text="MyLabel2"/>
<s:Label text="MyLabel3"/>
<s:Button label="MyButton3" width="85"/>
</s:HGroup>
<s:Spacer width="100%"/>
<s:HGroup verticalAlign="baseline">
<s:Label text="MyLabel4"/>
<s:TextInput id="myID" />
</s:HGroup>
</s:HGroup>
</s:VGroup>
</s:Application>
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>
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>