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.
Related
I'm trying to make a BitmapImage tag be as wide as its container, while scaling the bitmap. I achieved it using this code, which I think you'll find obvious:
<s:BitmapImage id='image' width='100%' source='assets/eyes.jpg' scaleMode="letterbox"/>
The problem I'm having is that under certain combinations of container width and image size, the bitmap doesn't show at all. I reduced the problem to discover that if I round up (or down) the height of the BitmapImage (using a timer, for instance), it displays perfectly. So I'm assuming the problem has to do with the height being some weird decimal number (although it does work with some non-integral heights).
Did someone found the same problem? I have code to reproduce it if you need it.
<s:Group id="grp" width="50%" height="50%" horizontalCenter="0" verticalCenter="0" color="RED" >
<s:BitmapImage id="bmpImg" depth="100" width="{grp.width - 20}" height="{grp.height - 30}"
source="#Embed('assets/image1.jpg')"
horizontalCenter="0" verticalCenter="0">
<s:mask>
<s:BorderContainer id="bmpMask"
cornerRadius="{sl.value}"
width="{bmpImg.width}" height="{bmpImg.height}" />
</s:mask>
</s:BitmapImage>
</s:Group>
<s:controlBarContent>
<mx:Form id="fid">
<mx:FormItem id="fiid" label="cornerRadius:">
<s:HSlider id="sl"
minimum="0"
maximum="{bmpImg.height/2}" />
</mx:FormItem>
</mx:Form>
</s:controlBarContent>
<s:Group id="grp" width="50%" height="50%" horizontalCenter="0" verticalCenter="0" color="RED" >
<s:BitmapImage id="bmpImg" depth="100" width="{grp.width}" height="{grp.height}"
source="#Embed('assets/image1.jpg')"
horizontalCenter="0" verticalCenter="0">
<s:mask>
<s:BorderContainer id="bmpMask"
cornerRadius="{sl.value}"
width="{bmpImg.width}" height="{bmpImg.height}" />
</s:mask>
</s:BitmapImage>
</s:Group>
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.
I'm trying to create a custom view (one that is not 100% listview, for example), mix and matching images and labels.
One issue is that when the label overflows greater than the screen height, the rest just gets off. I had assumed scrolling or touch-drag scrolling would be automatically enabled? How do you enable the touch-drag scrolling that happens naturally in list view?
I wrap all the visual elements of my View inside a Scroller - this will solve that problem
<s:Scroller id="scroller" left="10" right="10" top="10" bottom="10" >
<s:VGroup paddingTop="3" paddingLeft="5" paddingRight="5" paddingBottom="3" horizontalAlign="center">
<s:HGroup horizontalAlign="right" width="100%">
<s:Image scaleMode="letterbox" source="#Embed('images/small_background.GIF')"/>
</s:HGroup>
<s:TextInput id="txtUsername" prompt="Enter user name..." fontFamily="Arial"/>
<s:TextInput id="txtPassword" prompt="Enter password..." fontFamily="Arial"
displayAsPassword="true" />
<s:Button />
<s:Button />
</s:VGroup>
</s:Scroller>
I have a custom component that has an background image.
But when you generate this component by an ItemRenderer in a List, the background image is gone.
What am I doing wrong?
Here is an image. The first element is not generated in a list and has a background image. The other three are part of a List and have no background image.
Here is the code of the MXML of the List
<mx:VBox>
<solutionItems:displaySolutionItem /> <!-- This element shows the background image -->
<mx:List selectable="false"
useRollOver="false"
id="listControllers"
backgroundAlpha="1"
dataProvider="{controllers}" >
<mx:itemRenderer>
<fx:Component>
<solutionItems:displaySolutionItem /> <!-- These elements have nog background image -->
</fx:Component>
</mx:itemRenderer>
</mx:List>
</mx:VBox>
And here is the code of <solutionItems:displaySolutionItem />
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundImage="{itemBackGround}"
backgroundSize="100%">
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source="assets/Components/ContainerBackgrounds/BoxBg.png", scaleGridLeft="5", scaleGridRight="50", scaleGridTop="5", scaleGridBottom="50")]
private var itemBackGround:Class;
]]>
</mx:Script>
<mx:VBox
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
paddingTop="10">
<mx:CheckBox id="chbControllerItem" label="NSL-4601" styleName="titleRed" />
<mx:HBox>
<mx:Image width="67" height="50" id="loader1" source="#Embed(source='assets/Components/ContainerBackgrounds/BoxBg.png')"/>
<mx:HBox>
<mx:VBox>
<mx:Label text="Cube size" styleName="formLabel" height="12" />
<mx:Label text="Cube config" styleName="formLabel" height="12" />
<mx:Label text="Display res" styleName="formLabel" height="12" />
<mx:Label text="DPI" styleName="formLabel" height="12" />
<mx:Label text="Price" styleName="formLabel" height="12" />
</mx:VBox>
<mx:Box>
<mx:Label text="50''" height="12" />
<mx:Text text="2x3 (1224mm x 3264mm)" height="12" />
<mx:Label text="WXGA (1360x768)" height="12" />
<mx:Label text="72 dpi" height="12" />
<mx:Label text="€ 101.000,00" height="12" />
</mx:Box>
</mx:HBox>
</mx:HBox>
</mx:VBox>
</mx:Canvas>
It is probably something small, but I can not find it.
The following will get around the problem:
Remove the backgroundImage="{itemBackGround}" from the Canvas element of the itemRenderer
Add the following before the VBox in the itemRenderer class. I tested it out and it works fine:
<mx:Canvas width="100%" height="100%" backgroundImage="{itemBackGround}" backgroundSize="100%"/>
If your find a better way, sure update your question to let us know,
Brian
Have you tried setting the alpha, or backgroundAlpha properties on your List or perhaps in the itemRenderer?
I'm guessing that the List is either drawing something on top of the background, or preventing the background from being drawn. You'd have to step through code to know for sure, though.
I didn't try this, but look like
component is not creating multiple instance/copies of image for each renderer
possible solution may be is, load image in any Singleton/Constant Class like in Model and NOT in component/list and use Model's attribute reference in component/list i.e. one copy for all renderer.
Hopes this works
I want to create a custom list in Flex for an interface prototype. The list is supposed to have an image and 3 text fields. This is what I have done so far, the control displayed is what I want. But, when I click on one of the items, the item does not appear (visually) to be selected. I was not sure how I would implement this.
Here is my code so far:
<s:List width="400" height="220"
dataProvider="{arrColl}"
alternatingItemColors="[#EEEEEE, white]">
<s:itemRenderer>
<fx:Component>
<mx:Canvas height="100">
<mx:Image height="90" width="120" source="{data.imageSource}"></mx:Image>
<mx:Label left="125" y="10" text="{data.title}" />
<mx:Label left="125" y="30" text="{data.type}" />
<mx:Label left="125" y="50" text="{data.description}" />
</mx:Canvas>
</fx:Component>
</s:itemRenderer>
</s:List>
Not sure what kind of graphic your data.imageSource is. Perhaps the Image is masking the highlight. Can you try making it the backgroundImage of the Canvas? Also, I've noticed that using PNG or JPG images in lists and grids can mask highlight colors. They also can prevent mouseclicks from reaching the listItem. If possible try using a SWF with vector graphics.
For anyone else, who is stuck and on the same boat - this is what I did and it works now:
<mx:List width="400" height="220"
dataProvider="{arrColl}"
alternatingItemColors="[#EEEEEE, white]">
<mx:itemRenderer>
<fx:Component>
<mx:Canvas height="100">
<mx:Image height="90" width="120" source="{data.imageSource}"></mx:Image>
<mx:Label left="125" y="10" text="{data.title}" fontWeight="bold" />
<mx:Label left="125" y="30" text="{data.type}" fontStyle="italic" />
<mx:Label left="125" y="50" text="{data.description}" />
</mx:Canvas>
</fx:Component>
</mx:itemRenderer>
</mx:List>
Note: The difference is the List and itemRenderer are from the mx namespace rather than the s namespace.