When I create an HGroup and add elements to it, it adds the elements from left to right.
How can I change it to add Elements from right to left?
It sounds like you want to have the same controls and code as in usual MXML but with orientation of elements from right to left. So you need Flex SDK 4.1 and its Layout Mirroring feature. You can refer to the documentation how to use it.
This is the quick sample code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
[Bindable]
private var currentDirection:String = "ltr";
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup change="currentDirection = selectorsGroup.selectedValue.toString()" id="selectorsGroup" />
</fx:Declarations>
<mx:VBox horizontalCenter="0" verticalCenter="0">
<s:HGroup id="controls" layoutDirection="{currentDirection}">
<s:Button label="1" />
<s:Button label="2" />
</s:HGroup>
<s:HGroup id="selectors">
<s:RadioButton group="{selectorsGroup}" label="LTR" selected="true" value="ltr" />
<s:RadioButton group="{selectorsGroup}" label="RTL" value="rtl" />
</s:HGroup>
</mx:VBox>
</s:Application>
Related
I am actually just learning flex, and i am getting confused with some parts. The problem is that the background image i have set in the skin works fine until i add more elements, it then just becomes a white background rather than laying the elements over the top.
I am starting to think im misunderstanding how this works. I don't understand why i need to have <s:Group id="contentGroup" /> for the image to show in the first place...this just seems like a redundant tag?
Here is the main code and the skin:
<?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" width="800" height="523" maxWidth="800" maxHeight="523" initialize="httpService.send()" showStatusBar="false" backgroundColor="white" backgroundAlpha="1">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
public var returnData:ArrayCollection;
protected function httpService_handler(event:ResultEvent):void{
returnData = event.result.people.person;
}
]]>
</fx:Script>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
</fx:Style>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:HTTPService id="httpService" url="" result="httpService_handler(event)" />
</fx:Declarations>
<s:BorderContainer borderVisible="false" mouseDown="nativeWindow.startMove();" skinClass="MainStyle" width="800" height="523" id="container" >
<s:HGroup left="100" top="100" id="newsSlider" width="100" height="100">
<s:Label>
<s:text>Test</s:text>
</s:Label>
</s:HGroup>
</s:BorderContainer>
</s:WindowedApplication>
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.BorderContainer")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="disabled" />
<s:State name="normal" />
</s:states>
<!-- SkinParts
name=contentGroup, type=spark.components.Group, required=false
-->
<s:Group id="contentGroup" width="800" height="523">
<s:BitmapImage id="bg" source="#Embed('/School Catchup/libs/images/App-BG8.png')" scaleMode="stretch" left="0" top="0" right="0" bottom="0" width="800" height="523" />
</s:Group>
</s:Skin>
contentGroup is the only "skinPart" of the SkinnableContainer component, which is the base class for BorderContainer. It's not a required skinpart (the compiler would've thrown you an error otherwise in your previous version where you didn't have the skinpart in your skin).
What is a skinPart?
It's a contract between the host component and its skin. Essentially the host component is instructing the skin (through metadata) that it needs this and this and that element (skin part) in order to function correctly. Some of these elements are absolutely required for the component to function, some are optional.
What is the contentGroup skinpart?
It's the container element to which SkinnableContainer will add its nested elements. As an example:
<s:SkinnableContainer>
<s:Label text="hello"/>
</s:SkinnableContainer>
behind the scenes, the Label instance will be added to the contentGroup skinpart of SkinnableContainer's skin.
So how do I get my example to work?
As you can see from what I explained before, the contentGroup element is just a placeHolder in the skin. If you want to add "chrome" to your custom component, add it outside that Group:
<s:BitmapImage id="bg" source="#Embed('/School Catchup/libs/images/App-BG8.png')" scaleMode="stretch" left="0" top="0" right="0" bottom="0" width="800" height="523" />
<s:Group id="contentGroup" width="800" height="523"/>
This will display the image behind the contentGroup and your Labels will now be added to it without removing the BitmapImage that you declared in there.
This is just a short explanation of the skinning mechanism in the context of your needs. I suggest you do some research on this specific topic to really understand how it works.
I have a case where I'm adding tabNavigator tabs dynamically and I can't figure out how to add HTML styling to some of the words.
I really only need BOLD or UNDERLINE on a few words, but I can't get any HTML formatting to work inside the NavigatorContent tag.
Can anyone help me with this? I have been looking for many hours and found nothing.
Here's what I have so far. (the content is being pulled from an external XML file).
<?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"
width="500" height="600" creationComplete="initApp()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:HTTPService id="chatlist" result="resultHandler(event)"
url="http://localhost/FlexLiveChat/LiveChat2/chat.xml"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
private function initApp():void
{
chatlist.send();
}
private function resultHandler(event:ResultEvent):void
{
var dp:ArrayCollection = event.result.chatsession.chat as ArrayCollection;
for(var i:int = 0; i < dp.length; i++) {
var t:TextField = new TextField( );
t.htmlText = "This field contains <B>HTML!</B>";
var label:Label = new Label();
label.text = dp.getItemAt(i).message;
var context:NavigatorContent = new NavigatorContent();
context.label = dp.getItemAt(i).chatperson;
context.addElement(label);
tn.addChild(context);
}
}
]]>
</fx:Script>
<s:BorderContainer left="10" right="10" top="10" bottom="10" height="100%" borderVisible="false">
<s:VGroup id="mainBG" x="0" y="0" width="100%" height="100%" textAlign="center">
<mx:TabNavigator id="tn" width="100%" height="100%" color="0x323232">
<!-- Define each panel using a VBox container. -->
<s:NavigatorContent label="Home">
<s:Label text="This panel is always available \n\n container panel 1"/>
<mx:Text text="This is a text control."/>
</s:NavigatorContent>
</mx:TabNavigator>
<s:TextArea width="100%" height="62" textAlign="left"/>
<s:Button label="Post Message"/>
</s:VGroup></s:BorderContainer>
</s:WindowedApplication>
You could use a text flow:
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%"
height="100%"
gap="0">
<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.elements.TextFlow;
private const text:String =
"<b>bold text</b><br />" +
"<br />" +
"<u>underlined text</u><br />" +
"<br />" +
"<ul>" +
"<li>list item<br /></li>" +
"<li>list item<br /></li>" +
"<li>list item<br /></li>" +
"</ul>" +
"<a href='http://www.google.com'>a link</a><br />" +
"<br />";
]]>
</fx:Script>
<s:RichEditableText editable="false"
selectable="true"
textFlow="{TextConverter.importToFlow(text, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
buttonMode="true"
width="100%"
height="100%" />
</s:VGroup>
Per your comment, you should abstract the navigator content view in to a component.
Based upon your example:
Your 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"
width="500"
height="600"
creationComplete="initApp()">
<fx:Declarations>
<s:HTTPService id="chatlist"
result="resultHandler(event)"
url="http://localhost/FlexLiveChat/LiveChat2/chat.xml" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
private function initApp():void
{
chatlist.send();
}
private function resultHandler(event:ResultEvent):void
{
var dp:ArrayCollection = event.result.chatsession.chat as ArrayCollection;
for (var i:int = 0; i < dp.length; i++)
{
var htmlNavigatorContent:HtmlNavigatorContent = new HtmlNavigatorContent();
// attach result you want in the html text,
// including other properties.
htmlNavigatorContent.htmlText = "This field contains <B>HTML!</B>";
tn.addChild(htmlNavigatorContent);
}
}
]]>
</fx:Script>
<s:BorderContainer left="10"
right="10"
top="10"
bottom="10"
height="100%"
borderVisible="false">
<s:VGroup id="mainBG"
x="0"
y="0"
width="100%"
height="100%"
textAlign="center">
<mx:TabNavigator id="tn"
width="100%"
height="100%"
color="0x323232">
<!-- Define each panel using a VBox container. -->
<s:NavigatorContent label="Home">
<s:Label text="This panel is always available \n\n container panel 1" />
<mx:Text text="This is a text control." />
</s:NavigatorContent>
</mx:TabNavigator>
<s:TextArea width="100%"
height="62"
textAlign="left" />
<s:Button label="Post Message" />
</s:VGroup>
</s:BorderContainer>
</s:WindowedApplication>
Create a MXML Component named: HtmlNavigatorContent
<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%"
height="100%">
<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.elements.TextFlow;
[Bindable]
public var htmlText:String;
]]>
</fx:Script>
<s:RichEditableText editable="false"
selectable="true"
textFlow="{TextConverter.importToFlow(htmlText, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
buttonMode="true"
width="100%"
height="100%" />
</s:NavigatorContent>
Hello,
I have a list in a component mxml which is as follows:
<s:VGroup>
<s:Label text="TESTING" textDecoration="underline"/>
<s:List id="recouvrementModulesList" itemRenderer="renderers.ListRenderer">
<s:dataProvider>
<s:ArrayList>
<fx:String>Test</fx:String>
<fx:String>Test2</fx:String>
<fx:String>Test3</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:VGroup>
My ListRenderer itemrenderer is as follows:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<fx:Script>
<![CDATA[
]]>
</fx:Script>
<fx:Declarations>
<mx:RadioButtonGroup id="rbg" />
</fx:Declarations>
<s:HGroup horizontalAlign="center" verticalAlign="middle">
<mx:RadioButton id="rb" group="{rbg}" label="{data}"/>
</s:HGroup>
</s:ItemRenderer>
Notice that the radiobutton in the itemrenderer belong to the group "rbg". In this example the List appears with 3 rows (hence 3 radioButtons on each row). However when I selected the radioButtons, each at a time, the selection is allowed to be done for all radioButtons. Logically if it belongs to a group, it should allow only 1 selection, but it is not the case.
Can anyone please help on this issue?
Thanks
Use set data method :
<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:Declarations>
<s:RadioButtonGroup id="rbg"/>
</fx:Declarations>
<s:VGroup>
<s:Label text="TESTING" textDecoration="underline"/>
<s:List id="recouvrementModulesList" >
<s:dataProvider>
<s:ArrayList>
<fx:String>Test</fx:String>
<fx:String>Test2</fx:String>
<fx:String>Test3</fx:String>
</s:ArrayList>
</s:dataProvider>
<s:itemRenderer>
<fx:Component>
<mx:HBox>
<fx:Script>
<![CDATA[
override public function set data( value:Object ) : void
{
super.data = value;
rb.label=data.toString();
rb.group=outerDocument.rbg;
}
]]>
</fx:Script>
<s:RadioButton id="rb" />
</mx:HBox>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:VGroup>
Try adding a name attribute to the radio button definition. Its omission could be causing the buttons to be treated individually and not as a single unit.
I'm currently using flex sdk 4.5 (but it's the same with 4.1) and I have the following problem:
I bind the current state of an ItemRenderer to an external object. This object is injected to the mxml view through Robotlegs injector.
the view has 4 states, everything works fine as long as I don't roll over the item itself. In this case, without any apparent explanation, the currentState switches to defaultstate even if the bound currentState variable hasn't changed is value. To solve this problem (and prove that the bound state value didn't change) I listen the added event of the button which is created when the state switches to default and force the currentState to switch again to the current value.
It works but it's obviously bad, can somebody tell me what's going on? Thank you!
please have a look at the following code:
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:modelviews="it.addme.MVVM.modelviews.*"
width="150" height="100" autoDrawBackground="true"
currentState="{modelView.currentState}"
>
<fx:Script>
<![CDATA[
import it.addme.MVVM.modelviews.AddMeButtonPresenter;
[Inject]
[Bindable]
public var modelView:AddMeButtonPresenter;
override public function set data(value:Object):void
{
panel.title = value.appName;
}
protected function button1_addedHandler(event:Event):void
{//I need this to solve the roll-over problem
currentState = modelView.currentState;
}
]]>
</fx:Script>
<s:states>
<s:State name="default" />
<s:State name="USER_UNKNOWN" />
<s:State name="USER_EXISTS" />
<s:State name="USER_DOESNT_EXIST" />
</s:states>
<s:Panel left="0" top="0" width="150" height="100" id="panel">
<s:Button includeIn="USER_UNKNOWN" label="Checking..." enabled="true" horizontalCenter="0"
verticalCenter="0"/>
<s:Button includeIn="USER_EXISTS" label="Unsubscribe" click="modelView.unsubscribe()"
enabled="true" horizontalCenter="0" verticalCenter="0"/>
<s:Button includeIn="USER_DOESNT_EXIST" label="Subscribe" click="modelView.subscribe()"
enabled="true" horizontalCenter="0" verticalCenter="0"/>
<s:Button includeIn="default" label="..." added="button1_addedHandler(event)"
horizontalCenter="0" includeInLayout="false" verticalCenter="0"/>
</s:Panel>
</s:ItemRenderer>
Take a look at protected function getCurrentRendererState():String of spark.components.supportClasses.ItemRenderer (documentation) and override it properly.
I am using Flash Builder 4 Burrito Preview - builing a Mobile Application. I have a custom component called footer.mxml. That footer has 4 buttons, and one of them has a lable that is bound to cartValue. I am trying to maintain a global variable called cartValue within all views and footer component.
footer.mxml
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="64" chromeColor="#000000" fontSize="10">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<mx:CurrencyFormatter id="currencyFormatter"
currencySymbol="$"
useThousandsSeparator="true"
precision="2" />
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
public var cartValue:int;
]]>
</fx:Script>
<s:HGroup width="100%" contentBackgroundColor="#000000" paddingBottom="0" paddingLeft="0"
paddingRight="0" paddingTop="0">
<s:Button x="0" y="624.5" width="25%" height="64" label="Account" chromeColor="#2259AA"
enabled="true" fontSize="10" fontWeight="bold" icon="#Embed('assets/user.png')"/>
<s:Button x="121" y="624.5" width="25%" height="64" label="Orders" chromeColor="#2259AA"
fontSize="10" icon="#Embed('assets/doc_lines_stright.png')"/>
<s:Button x="241" y="624.5" width="25%" height="64" label="Help" chromeColor="#2259AA"
fontSize="10" icon="#Embed('assets/spechbubble.png')"/>
<s:Button x="360" y="624.5" width="25%" height="64" label="{currencyFormatter.format(cartValue)}" chromeColor="#2259AA"
fontSize="10" icon="#Embed('assets/shop_cart.png')"/>
</s:HGroup>
</s:Group>
RincoTest.mxml
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
backgroundColor="#000000" firstView="views.RincoTestHome"
>
<fx:Style source="RincoTest.css"/>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
public var cartValue:int;
]]>
</fx:Script>
<s:titleContent>
<s:Image left="1" top="3" width="173" height="75" backgroundAlpha="1.0" smooth="true"
source="assets/iphone_large.png"/>
</s:titleContent>
<s:navigationContent>
<mx:Spacer width="10" height="82"/>
</s:navigationContent>
</s:MobileApplication>
And this is how I am implementing it
<components:footer x="1.65" y="614.95" width="100%" height="64" cartValue="{cartValue}"/>
I have tried to bind Application.application.cartValue and
MobileApplication.application.cartValue. Neither of them work.
If there is a better way to maintain a cartValue across the entire application please let me know. This is my first attempt with Flex.
Thanks,
Ernie
Use a static variable in the component.
Reference it as ComponentName.staticVar. Usually, everything that needs to know about the global already knows about (e.g. imports) the component file.
Cheers
Another solution is using a singleton pattern: a single instance that everything references through a static accessor.
The effect is about the same. The only advantage to a static reference to an instance over static properties is that the instance can be part of an inheritance and can fulfill an interface.
I've also had some intermittent problems with binding to static values, but that might have been a previous version, PEBCAK, etc.
Cheers