How to add scroller for custom component in as 3? - actionscript-3

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.

Related

Trying to align a label in a text box

I am trying to align my text over a VBox correctly. The VBox I am using has a background image. Then the label overlaps the image. This is basically creating an button I want.
The issue is that the background image I am using has a shadow effect on the bottom. So when I use verticalAlign="middle" on the VBox it isn't actually centered.
I have tried changing the VBox and the Labels y value, top & bottom properties, and verticalCenter property. None of them seem to shift the label up or down in anyway. I am confused on why these would not shift the label.
Here is my current code w/o any y, top, bottom or verticalCenter set.
<mx:VBox height="70" width="175" backgroundImage="{buttonBackground}" verticalAlign="middle" horizontalAlign="center" backgroundSize="100%" buttonMode="true" useHandCursor="true" mouseChildren="false" click="{controller.goToPage('configPg')}">
<mx:Label text="Configure" buttonMode="true" useHandCursor="true" mouseChildren="false" fontSize="24" color="white"/>
</mx:VBox>
Any help would be greatly appreciated.
Thanks
I was able to solve this by adjusting the paddingBottom. Thanks drkstr1 for the answer.
All the properties you tried are irrelevant in a layout container. Use the font styles to position your text (EG. padding, verticalAlign, textAlign, etc.), Or use a Canvas with manual positioning if there is nothing else in the VBox. – drkstr1 Nov 14 at 17:25

Horizontal scroller in flex

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.

Flex Mobile - make a scrollable view

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.

Flex mobile list won't scroll vertically

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.

Move Button into grid space of a TabNavigator's tabs in Flex Builder

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>