How to add Scroller in Main application/Windows of Flex? - apache-flex

I am new to Flex. I am trying to add a scroller in my main application/windows.
Is that possible?
I found out it is possible to add scoller bars in DataGrid, like horizontalScrollPolicy="on".
How to implement it in containers like Group,Panel and etc?
Thanks

The answer differs between flex 4 (spark) components and flex 3 (halo) container components. For spark components such as Groups, you need to wrap your group in a Scroller component to get scrollbars to appear when all of the group's content cannot be viewed. Halo container components, such as Canvas, have built in support for scrollbars, meaning they should show up automatically when all of the canvas's content cannot be viewed. Hope that helps.

The Application tag also has horizontalScrollPolicy and verticalScrollPolicy properties.
http://livedocs.adobe.com/flex/3/langref/mx/core/Container.html#horizontalScrollPolicy
http://livedocs.adobe.com/flex/3/langref/mx/core/Container.html#verticalScrollPolicy
In the Spark architecture, you want to look at the Scroller class. This is a good tutorial:
http://www.adobe.com/devnet/flex/articles/flex4_viewport_scrolling.html

Related

Skinning Halo scroll bar in Flex

I have the Spark scroll bar in my application skinned the way I want where I use s|VScrollBar and then set skinClass: ClassReference(my skin class) in my CSS file. For my Halo scroll bar I have the skins set for each element of the scroll bar (arrows, thumb, track, etc.) but I want to have one central class like with the Spark scroll bar. Is there any way to do this?
Yes, but not in the same way as you can in Spark. Spark was made for easy skinning which is the great thing about Flex 4, but Flex 3 did things very differently.
What you can do is extend the Flex 3 scrollbar into a custom class that sets all those elements in it. Then within that project, just reference that custom class. Sadly, that's all that can be done.

How do I add a scroller to a Menu in Flex 4

In flex 4 I'm using a PopUpButton with a Menu populated with records from the database.
For one of our clients, the data provider of the Menu has more than 50 elements.
When they click on the Menu it expands beyond the height of the screen without showing a scroller or responding to the mouse-wheel. So in effect there is no way to access the lower items on the menu.
So I need to somehow restrict the height of the menu and add a scroller.
The rowCount and maxHeight commands are having no effect.
var companyContextMenu:Menu=new Menu();
companyContextMenu.maxHeight=400;
companyContextMenu.rowCount=20;
The same code was working fine before migrating to Flex 4.
Any help is much appreciated.
In Flex there is a big different regarding scrollbars between version 3 and 4.
First, please don't mix the halos and the sparks.
Then put a scroller-Tag around the menu, that should become a scroller.
Just the container Group, DataGroup, VGroup, HGroup and TitleGroup implement IViewport and can handle the scoller-tag ouround them.
So, put your menu in one of the container above. Is this not handle for you, please post your code.
BR
Frank

Background Image in Flex

I'm using Flash Builder 4 to create an application. I need to set an background image for the app. I've pulled through the data from XML.
I am using an <mx:Image> for the background-image. But I need elements to then be added inside it. How do I achieve this? I considered using Layers, but dont know how you achieve this.
Any help appreciated.
Cheers
One approach: in our flex application, we have a canvas behind our primary container as in
<mx:Canvas id="bgImg" width="1280" height="800"
backgroundImage="assets/background.jpg" />
<containers:FlashContainer id="mainContainer">
<!-- HBoxs, VBoxes and loads of other components -->
</containers:FlashContainer>
So, the other elements you're looking to add would exist within the internal container with a stationary Canvas "behind" it, which holds your image.
To get this to work in Flex 4 you need to compile with the Halo theme (instead of Spark). We use flex builder and set the following flag under the project compiler preferences.
-theme=${flexlib}/themes/Halo/halo.swc
As in the following image:
In the Flex 3 Model, you can set a backgroundImage on the Application tag, which should, effectively, give your whole application a background image.
In the Flex 4 Model, you need to create a custom skin class for your Application tag. Set the skin using the skinClass style. Since s:Application extends SkinnableContainer, you should be able to use the default SkinnableContainer style as a guide for adding a background image. The default background, I believe, is just a Rect w/ a solid fill.
i m still working in flex3, so i would have used backgroundImage on the application tag, and also do set backgroundSize to 100%, these 2 properties r on the application tag,
may be some help 2 u
tc

What is the most lightweight container in Flex 4?

In the root of my application I have 5 named "slots" (layers) that I want content to appear in. Should I be using Canvas, Group or something else for each of these slots? I don't need any kind of automatic layout inside these slots.
Use Group. You can plug a custom layout into it if you wish. Here's a good preso on what's new with Flex 4 Lists and Layouts:
http://tv.adobe.com/watch/max-2009-develop/a-deep-dive-into-flex-4-lists-and-layouts/
If you don't need any layout and scrolling, then you can use UIComponent as a container.

Flex: Displaying more than 5 things at a time in a DropDown (ComboBox)

I have a ComboBox in Flex with about 20 items. How do I display all of them in a dropdown with no scroll bar? Right now, Flex displays 5 at a time in the dropdown and puts a scrollbar to scroll for more.
Here's an example:
http://blog.flexexamples.com/2008/07/18/setting-the-dropdown-menu-border-thickness-and-border-color-on-a-combobox-control-in-flex/#more-711
How do I make the dropdown bigger in this example so it shows all 10 items at once?
Found it: 'rowCount' is the property to change. It defaults to 5.
For ones who search for same thing for spark combo:
for spark components that extend SkinnableDataContainer (including ComboBox) you can specify layout with
requestedMinRowCount , requestedMaxRowCount
properties, and do as much changes as you want with the help of skin(this layout directly goes to DataGroup skinpart inside skin).

Resources