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"
Related
I need to externalize the styling of a scroller. Is is possible to set the color of the track without assigning a specific .png in a skin? Thanks in advance.
I was able to accomplish this by creating a skin for the scroller and add styles with skins if needed to each component, as I was specifically trying to change the color of the scroll track.
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.
I'd like to add some functionalities to the right border of my ADG component to help the user resize and potentially do more stuff. Is there a skin for that border? For instance, how would you make it wider, or add a handle that perhaps animates when you hover over it?
thank you, yet again!
There is no skin that allows you to do this. You have only two options:
Extend ADG and add the desired functionality.
Create a custom component that can contain an ADG and add additional components und functionality to your custom component.
Extending ADG is no fun at all. So, if possible I'd choose option 2. In MXML it could look something like this:
<ns1:MyAdvancedDataGridContainer>
<ns1:dataGrid>
<mx:AdvancedDataGrid ...>
<!-- your columns and stuff like that -->
</mx:AdvancedDataGrid>
</ns1:dataGrid>
</ns1>
MyAdvancedDataGridContainer would add all the fancy stuff you need without the need of changing and overriding lots of ADG's ugly code.
I want to increase the (height) size and change the color of a spark accordion header, similarly I want to change the color of a spark panel header. Can I do this through mxml properties and css or will I need to use a custom skin?
I recommend creating a custom skin. That was the way Spark was designed to be customized. Specific styles and the sort are almost an afterthought.
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