In a Flex Mobile app i have a view that contain a "header" which is a carousel of images and a 2 column list (point 1 on attached image). The list is scrollable and works great but when scrolling the header remains fixed. What is the best approach in order to scroll the whole view. I want the header to move and the list to show new elements on full screen.
Here is a image that may help:
Following your answers i end up with this code
<s:Scroller id="scroler" left="0" right="0" top="0" >
<s:Group id="container" left="0" right="0" top="0">
<components:restaurantHeader id="header" />
<s:DataGroup dataProvider="{DataModel.instance.listaCategoriiRestaurante}"
top="260" left="0" right="0" width="100%"
itemRenderer="itemRenderers.categoriiRestaurantRender">
<s:layout>
<s:TileLayout columnWidth="200" rowAlign="justifyUsingHeight" orientation="rows" clipAndEnableScrolling="false" columnAlign="justifyUsingGap" >
</s:TileLayout>
</s:layout>
</s:DataGroup>
</s:Group>
</s:Scroller>
But now it seems i cannot make the data group list to be a 2 column one. the datagrop list expands on horizontal and not vertical and i end up with 3-4 columns and not extra rows.
Can you tell me how to make the datagroup list stay on 2 columns and expand vertical adding extra rows and not columns.
Thanks again
Wrap your header and list with a scroller. That would make the list scrolling obsolete though, so you could replace the list component with a DataGroup.
Related
I have a custom component with some properties. Now I want to add scroller for this component. I don't have any idea about it. I want to add this scroller in ActionScript file. Not in MXML file. Can anyone help me out from this?
Update:
<s:Scroller width="100%" height="100%">
<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
<s:layout>
<s:VerticalLayout paddingTop="25" paddingLeft="25" paddingRight="15"/>
</s:layout>
</s:Group>
</s:Scroller>
I recommend adding the scroller in the MXML skin of your custom component.
Here's a tutorial on the scroller component from Adobe.
[Updated answer]
By setting the left="0" right="0" top="0" bottom="0" minWidth="0" properties for the contentGroup, you are always keeping that group the same size as the scroller. The direct effect is that you don't need scrollbars.
If you'd only want a vertical scroll bar you can add the left="0" right="0" properties the contentgroup width will never surpass the scroller but because the height grows based on the childeren it will generate a vertical scroll bar. You can do the same for bottom and top to create only a horizontal scrollbar.
If you want them both, remove any size indication properties. This way the contentGroups childelements will adjust the size and as soon as it gets larger then the scroller it will display scrollbars accordingly.
[Answer before question was changed]
If you are using a SkinnableComponentI agree with hidarikani.
But because you want to add the scroller in the actionscript, I'm guessing its not a SkinnableComponent.
The trick is that you need to add all the child elements inside a group inside the scroller.
var scroller:Scroller = new Scroller();
var content:Group = new Group();
scroller.addElement(content);
this.addElement(scroller);
#insert elements that need to be inside the scroller to the content group.
content.addElement(visualElement1);
content.addElement(visualElement2);
The content group can now resize based on his children and the scroller needs to be specified with a size so it can create scrollbars based on the size of the content group.
i am flashAs3.0 developer but am new to flex.Can anyone help me how to Create a Horizontal scroll-er in list view by adding images dynamically.i am using flash builder 4.6.
here i tried this code.but i need to Create a Horizontal scroll-er in list view by adding images dynamically.Help me regarding this pls.Thanks in advance
<s:Scroller width="100" height="100">
<s:Group>
<mx:Image width="300" height="400"
source="#Embed(source='assets/logo.jpg')"/>
</s:Group>
</s:Scroller>
You may need to add the following arguments to your scroller:
<s:Scroller horizontalScrollPolicy="on" verticalScrollPolicy="on">
These should force the scroll bars to appear, if you still can't scroll then the container inside the scroller isnt setting it's height and width correctly, try:
<s:Scroller horizontalScrollPolicy="on" verticalScrollPolicy="on" height='150' width='150'>
<s:Group height='100%' width='100%'>
<s:Image height='400' width='300'/>
The group should size itself to it's children and as the scrollers viewport it should create the correct scroll area.
Im not completely sure the situation you are describing. With your current code a horizontal scroll bar is added to the image. If you add more images dynamically and you want them to stack horizontally then you will need to use an HGroup instead of a normal group.
<s:Scroller width="100" height="100">
<s:HGroup>
<mx:Image width="300" height="400"
source="#Embed(source='assets/logo.jpg')"/>
</s:HGroup>
</s:Scroller>
This is how I understood your question. My apologies if I am off track.
Good luck.
In flex 4.6, mobile project, i have a list component with a custom itemRenderer. My problem is that the list won't scroll on vertical. Can you tell me what i'm doing wrong.
Here is the code :
<s:List left="0" right="0" top="0" dataProvider="{DataModel.instance.listaRestaurante}"
itemRenderer="itemRenderers.restauranteRender" width="320" horizontalScrollPolicy="off" verticalScrollPolicy="on">
<s:layout>
<s:VerticalLayout gap="10" requestedRowCount="-1" useVirtualLayout="true" />
</s:layout>
</s:List>
Thank you
SOLVED by putting buttom="0" on list
SOLVED by putting buttom="0" on list
Do you know why this solved the problem? I guess not, so here goes:
Originally, you hadn't assigned a height to the list. Because of this, the list would expand indefinitely until it accomodated all the objects.
When you assigned a height (setting bottom=0 is effetively the same thing, just assigning a relative height), the list was constrained to that height. Any objects overflowing would cause a scrollbar to be shown.
Working with Flex 4.6 spark forms, i encountered strange behaviour:
FormItem element ALWAYS has inner gap (padding), which cannot be removed.
Red area on image ilustrates the unwanted GAP that i cannot manage to get rid of.
Blue border represents Form component. Grey border (thin) represents FormItem component.
FormItem has no padding or gap property.
This is the code for image above:
<s:Form id="form">
<s:layout>
<s:FormLayout gap="0"
paddingBottom="50"
paddingTop="0"/>
</s:layout>
<s:FormItem width="100%" label="RC">
<s:TextInput id="myTextInput" width="215"/>
</s:FormItem>
</s:Form>
When developing for mobile, you want to make best use of every pixel on your screen. This is unacceptable for me since i want to have several TextInput fields and having this gap will waste lots of space...
So my question is, can the red GAP be removed? I want my FormItem to have padding 0 - meaning TextInput border will touch FormItem border...
Well things like that are usually managed by the skin of the component, so what you have to do is to provide your own skin for your FormItem components. The easiest way to do it is to copy the skin provided by Adobe and make some tweaks that'll accomplish what you require. Most of all you have to set baseline to maxAscent:0 on row1 ConstraintRow and bottom to row1:0 on sequenceLabelDisplay, labelDisplay and contentGroup components.
I have a layout question for Tab Navigators in Adobe Flex 3.
Is it possible to insert a button that invades the grid space of the tabs?
I have a tab navigator component and I am dynamically adding sub components to tab navigator and I want squeeze a button inside the tab space. I don't want the button to be another tab. And I don't want to use a TabBar for the tabs.
This graphic illustrates the problem.
This is the current layout I have
This is a mockup (photoshopped) of the layout I want. I basically want to shave some pixels off the layout.
Is there a way to push the button down or manually override its layout position in MXXML or actionscript?
I would think if you put the elements in a Canvas (which allows you to lay out elements absolutely) rather than a VBox as it appears you are using now, you could force the Home button to display the way you want it to, ie:
<mx:Canvas>
<mx:Button top="5" right="5" />
<mx:TabNavigator top="5" left="5" right="5" />
</mx:Canvas>