Skinning Halo scroll bar in Flex - css

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.

Related

Flex 3: progress bar with round edges

Based on Flex 3, how can I skin my progress bar to make it look like this example, with round corners/edges?
Thanks in advance!
You can create custom skins for the progress bar and set the css styles to refer to your custom programatic skins. You will need programatic skins for:
barSkin
maskSkin
trackSkin
All of these are found as styles for the ProgressBar component.
You can refer to the default skins to see how they are done:
barSkin="ProgressBarSkin"
maskSkin="ProgressMaskSkin"
trackSkin="ProgressTrackSkin"

All rounded corners TitleWindow in Flex?

how can i get a title window with all rounded courners, so that i may make it whole round or circular shape ?
i want shape like circle..
set the property: cornerRadius
default is 4
A couple of possible approaches:
If you are using Flex 4 (spark TitleWindow as opposed to the halo TitleWindow) you can create your own skin and assign that skin in CSS. In your custom skin you can draw the background however you want, including an Ellipse set to the width and height of the TitleWindow.
If you don't want to create a skin, or you are using a halo TitleWindow, you can create a circular mask and set it as the mask property on the TitleWindow. The downside to this approach is that you will probably clip the title and the close button (if it is visible), not to mention the contents as well.
Hope that helps, let me know if you need more details on either of these approaches.

How to add Scroller in Main application/Windows of 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

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