I have a MXML compoenent that is launched as a popup:
<s:TitleWindow>
[...]
<s:BorderContainer>
<s:HGroup>
two s:Button OK and Cancel
</s:HGroup>
</s:BorderContainer>
<custom:box>
</s:TitleWindow>
custom:box looks like this
<s:BorderContainer>
<s:Image source="{Util.getImage('error.icon')}" />
<s:Image source="{Util.getImage('close.icon')}" />
<s:VGroup id="messageContainer" />
</s:BorderContainer>
What I need is to add the close icon to the tab navigation and focus.
I've tried with implements="mx.managers.IFocusManagerComponent" to the custom:box as an attempt to change the focus on focusHandler(). I only get focus on the custom:box at most.
Also I've tried to set buttonMode="true" and focusEnabled="true" on the close image.
Any ideas would be much appreciated.
Thanks!
Related
I know I have done this before but every time I work with scrollers and group it doesn't work for me and kills my 2 days.
<s:Scroller width="100%" height="100%" horizontalScrollPolicy="auto" verticalScrollPolicy="auto">
<s:Group clipAndEnableScrolling="true">...... ..... </s:Group></s:Scroller>
This is what I have. I have components inside my group with is more than enough to bring scrollers even on a big monitor. But I am not getting any scrollbars.
Kindly tell me what is that I am doing wrong here. because everytime I fix it and I struggle for the next time.
Thanks.
Try with this
Your scroller parent container need to set non-percentage height/width.
<s:BorderContainer width="120" height="100" backgroundColor="#FFFFFF">
<s:Scroller width="100%" height="100%">
<s:Group>
<s:layout>
<s:VerticalLayout horizontalAlign="justify"
clipAndEnableScrolling="true" />
</s:layout>
<s:Button label="button (1)" />
<s:Button label="button (2)" />
<s:Button label="button (3)" />
<s:Button label="button (4)" />
<s:Button label="button (5)" />
<s:Button label="button (6)" />
</s:Group>
</s:Scroller>
</s:BorderContainer>
Thank you for all your responses. After setting the minHeight it now works. I am able to achieve the scrollbars as expected (make it look like browser's scroll bar). Below is the code snippet
<s:Scroller width="100%" maxHeight="{this.height}">
<s:VGroup width="100%" minHeight="1000" height="100%" paddingLeft="40" paddingRight="40" paddingTop="0" >
..</s:VGroup></s:Scroller>
Kindly let me know if there is a better approach.
The Same code given by "Raja Jaganathan" itself will work with small modification on scroll parent height and width
Capabilities.screenResolutionX, Capabilities.screenResolutionY will give you the browser width and height respectively.
Here's the deal:
I have an image and a button on my mobile app's homeview.
I apply an animation to the image by pressing the button. That works great.
PROBLEM:
I want to add a view transition that pushes to the next view after the animation completes.
CODE:
AS:
protected function nextView()
{
navigator.pushView(View2);
}
MXML:
<s:Button id="Button" click="anim.play()"/> //anim.play() is in
//the declarations tag and is working as expected.
<s:Image id="img" source="#Embed('assets/image.png')"/>
I've Tried:
-Adding nextView() to the click method after the animation call
-Using effectEnd="nextView()" in Button properties
Thank you for any help and insight you can provide.
effectEnd appears to work for me:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<s:Move id="myEffect" xBy="100" target="{btn}" effectEnd="navigator.pushView(NextView)" />
</fx:Declarations>
<s:ViewNavigator id="navigator" width="100%" height="100%"/>
<s:Button id="btn" label="play" click="myEffect.play()" />
</s:Application>
Im very new to Adobe Flex/Actionscript and am trying to create a person search application. So far I have my results showing as a horizontal list, but Id like to include an image above each name as my wonderful paint skills show:
/* listOfPeople is a list of arrays with a["name"] a["sex"] a["dob"] and
a["image"] which is just a URI to the image */
<s:List width="100%" height="100%" id="results" dataProvider="{listOfPeople}" change="clickPerson(event)">
<s:itemRenderer>
<fx:Component>
<s:MobileIconItemRenderer
iconField="{data.image}"
iconHeight="100" iconWidth="100"
label="{data.name} - {data.sex}"
messageField="dob"/>
</fx:Component>
</s:itemRenderer>
<s:layout>
<s:HorizontalLayout paddingBottom="100" gap="6" paddingTop="100" paddingLeft="0"
paddingRight="0"
requestedColumnCount="-1"
variableColumnWidth="true"
verticalAlign="bottom"
/>
</s:layout>
</s:List>
Any ideas? The iconField doesn't seem to show at all... even when using the full path with correct backslashes
Cheers
Phil
EDIT:
The image displays fine on the PersonDetails screen, when the person is clicked upon:
<s:HGroup verticalAlign="middle" gap="12" paddingTop="10" paddingLeft="10">
<s:Image source="{data.image}" height="170" width="170"/>
<s:VGroup>
<s:Label text="{data.name}"/>
<s:Label text="{data.dOB}"/>
<s:Label text="{data.sex}"/>
<s:Label text="{data.birthplace}"/>
<s:Label text="{data.colour} {data.ethnicity}"/>
<s:Label text="{data.height}"/>
</s:VGroup>
</s:HGroup>
I think MobileIconItemRenderer displays all elements in a horizontal layout. If you want to display an image on top of the text, you have to create your own renderer or extends MobileIconItemRender and change the way it layouts its elements
In flex UI, my <mx:list> can not be shown completely because of other component shelterring (for example: the refresh button shelter part of it ). How can I make the <mx:list> in front of all other UI component.
This is my code:
<s:HGroup verticalAlign="middle">
<s:Label text="Choose Log File"/>
<mx:ComboBox id ="logFileChooseCombo" dataProvider="{fileNameList}" width="150" color="0x000000"
close="changeLogFilesHandler(event);"/>
<mx:Spacer width="320" />
<s:Label text="Filter or HighLight:" />
<mx:ComboBox id ="filterChooseCombo" dataProvider="{filterOrHighlight}" width="150" color="0x000000"/>
<s:VGroup height="25">
<s:TextInput id="logContentInput" change="filterLogContent()"
enabled="true"
focusIn="clearMyTextInput()"
text="Filter/HightLight"
width="250" height="26"/>
**<mx:List id="searchMsgList"** x="65" y="35" width="200" height="200" fontSize="12"
change="itemChangEvent(event);" />
</s:VGroup>
</s:HGroup>
</mx:Canvas>
<s:HGroup verticalAlign="middle">
<s:Label text="Filter By Log Level:"/>
<mx:ComboBox id ="logLevelCombo" dataProvider="{logLevelsInt}" width="150" color="0x000000"
close="changeLogLevelHandler(event);"/>
<s:CheckBox id="showStack" click="showStackTrace(event)" selected="false"/>
<s:Label text="show stackTraces"/>
<mx:Spacer width="550" />
<s:Button id="test" label="refresh2">
</s:Button>
</s:HGroup>
You have a lot going on, with a mix of nested layouts and a mix of Halo and Spark containers. I'm not sure what layout you're trying to create.
That said, take a look at the swapChildren method. Something like this should work:
this.swapChildren(refresh2, searchMsgList);
But it will most likely hide your refresh button, which seems less than ideal.
A few things strike me:
Inside your first VGroup you have x and y values specified. I thought those values were ignored inide VGroups, which automatically position your children in a vertical line.
I see an closing </mx:Canvas> tag, but not an opening canvas tag. It is unusual to me to use a canvas among all the HGroups and VGroups.
I have a panel with a button in it. Clicking on the button will direct the panel to state "State2" adding another two buttons into the panel. During the state change, I want the panel to resize first and then show the newly added two buttons, so I applied transitions onto the state change.
My question is:
If I put the two buttons within a HBox directly under the addChild tag, it works fine. However, if I create a new component with the same code (HBox with two buttons in it) and then add the new component to the panel (Comp in the code commented), it won't show the resize effect.
Could someone tell me how to fix this? Thanks in advance.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
currentState="State2";
}
]]>
</mx:Script>
<mx:transitions>
<mx:Transition>
<mx:Sequence targets="{[comp,panel1]}">
<mx:Resize target="{panel1}" />
<mx:AddChildAction />
</mx:Sequence>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="State2">
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<mx:HBox id="comp">
<mx:Button label="B" />
<mx:Button label="C" />
</mx:HBox>
<!--<local:Comp id="comp" />-->
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Panel layout="horizontal" borderThickness="1" borderStyle="solid" id="panel1" title="AB">
<mx:Button label="A" click="button1_clickHandler(event)"/>
</mx:Panel>
</mx:Application>
I guess <mx:AddChild> tag can handle only one component at a time.
You will get your sweet resize effect if you separate your custom component to another <mx:AddChild> tag, similar to the code below:
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<mx:HBox id="comp">
<mx:Button label="B" />
<mx:Button label="C" />
<!-- Don't put your custom component here. -->
</mx:HBox>
</mx:AddChild>
<!-- Use separated AddChild. Still add to same relativeTo object -->
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<local:Comp id="comp2" />
</mx:AddChild>
I hope you got what you want.