By default TitleWindows seem to have no padding. I tried the properties "left", "right" etc and it doesn't work. Actually I'd like to have a default for my whole app, so I tried creating a skin but no matter where in the skin I add 'left="50"' it just doesn't create padding on the left. You'd think that you should add it to the element with id="contentGroup", as described on this Adobe Skinning help page, but that does not work.
Surely this is something almost everyone wants to do?
The contentGroup in the default TitleWindowSkin is inside a VerticalLayout which does not respect top/left/right/bottom constraints.
You could do this by duplicating the default TitleWindowSkin and wrapping the contentGroup with a Group with width/height of 100%:
...
<s:Group width="100%" height="100%">
<!--- #copy spark.components.SkinnableContainer#contentGroup -->
<s:Group id="contentGroup" top="10" left="10" right="10" bottom="10" minWidth="0" minHeight="0" />
</s:Group>
...
Since the TitleWindow extends the Panel component, it doesn't support the padding properties a HGroup or VGroup based component would. As far as I know, there's no way to skin a TitleWindow so that the padding properties are automatically set.
All I do is set the x and y coordinates of my components within the TitleWindow so that they are laid out where I want them.
Related
Is there a Flex layout class that wraps to the next line and does not size all the items the same size?
I've tried using TileLayout but the problem with that is that all the items are sized to the largest item. I want to set the gap between each to be consistent. Basically a variableColumnWidth type of feature.
<s:List id="exampleList"
selectedIndex="0"
width="100%"
dataProvider="{examplesCollection}"
change="exampleList_changeHandler(event)"
height="250"
>
<s:layout>
<s:TileLayout verticalGap="0" horizontalGap="0" />
</s:layout>
</s:List>
I'm using Apache Flex 4.12.
I think that the quickest way would be to implement an item renderer, like this example. The other option is to implement your own layout which you can adapt to what you need, for this you need to understand very well how layouts work.
I'm new to flex,and I want to change the image of HSlider,like this
What should I do?please give me a simple example.
#RIAstar had a great answer. But there is a little problem - this orange part before thumb. AFAIK the easiest way to create skin like this is to add rect or more complicated figure in HSlider skin, that will change it's width according to thumb's x coordinate, i.e.
<s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
tabEnabled="false"
skinClass="spark.skins.spark.HSliderTrackSkin" />
<s:Rect width="{thumb.x + thumb.width/2}" height="{track.height}">
<s:fill>
<s:SolidColor color="0x00FF00" />
</s:fill>
</s:Rect>
<s:Button id="thumb" top="0" bottom="0" width="11" height="11"
tabEnabled="false"
skinClass="spark.skins.spark.HSliderThumbSkin" />
You'll have to create a custom skin. Now, HSlider is a little bit special in that it has some subcomponents that are also skinnable. You'll actually have to create three custom skins:
one for the HSlider itself (this skin includes the tooltip)
one for the track (the yellow/brown zone in your picture)
and one for the thumb
The track and the thumb are both in fact Buttons so those skins will have to be Button skins.
Explaining the entire process will make this answer too lengthy and specific, so I'll just get you started. You should be able to figure it out from there. I'll also assume you're using FlashBuilder as an IDE.
Create main skin
Set the skinClass style on an HSlider and hit Alt+Space. This will bring up code completion, but you can also select "Create Skin...".
Select that and a wizard will appear. Fill out something like the following. Note that we're making a copy of the default Spark HSlider skin. We remove the styling code because it will not be necessary in such a customized skin.
Create track and thumb skins
Open this new skin class and scroll down to the bottom. You'll see two Buttons; one with id track and one with id thumb. Their skinClass style is set to the default spark skins for these buttons. Delete the content and repeat the operation of the previous step (creating a new skin), only this time create a copy of HSliderTrackSkin and HSliderThumbSkin
Edit the skins
You now have an exact copy of the default Spark skins for HSlider (except you removed the styling). Now you can start editing: changing colors, changing shapes, etc. If you need more information about Flex graphics, I suggest you Google up on FXG. But you can just try to fiddle with the default skins and see where you can get too.
Hi I'm using flex 4.1 to write an application.
i read in the documents that has the rowCount property to set how many items to display. the does not have that property.
how can I limit the list to display 3 items ?
you can directly set requestedMinRowCount to 3 in the VerticalLayout
<s:List>
<s:layout>
<s:VerticalLayout requestedMinRowCount="3"/>
</s:layout>
</s:List>
In Flex 4 this is driven by the skin rather than the component itself. You can create a custom List skin and in the VerticalLayout of the DataGroup, set the requestedRowCount to 3, then set the skin for your List to be your new custom skin. To get started, just copy the default ListSkin into your custom skin file and make your changes. Here's the relevant section from the default ListSkin file:
<s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
<s:layout>
<!--- The default layout is vertical and measures at least for 5 rows.
When switching to a different layout, HorizontalLayout for example,
make sure to adjust the minWidth, minHeihgt sizes of the skin -->
<s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="5" />
</s:layout>
</s:DataGroup>
Just remove requestedMinRowCount and replace it with requestedRowCount="3" Hope that helps.
Thanks Wade for the great answer, it put me on the right path.
Actually you don't need to copy the default skin, if it's only the row count you want to fix Just use the tag inside the tag to control the minimum row count like Wade described.
I'm building a custom component that extends SkinnableContainer. I can center the content either vertically or horizontally inside it, but not both-- and that is what I need.
I'm setting the layout to HorizontalLayout for the component and setting verticalAlign to middle.
Then I'm creating a canvas to surround another component that goes inside this component, and setting that canvas width to 100%, and then setting textAlign=center, but no dice.
Any help is appreciated.
Use the horizontalCenter and verticalCenter properties to center your groups. The value is the number of pixels from either center where the sign of value denotes direction, 0 is absolute center.
This'll do the trick (assuming you want horizontal layout for your items). The 's' namespace refers to the spark components, since you're asking about flex 4 I assume Halo isn't of interest.
<s:Group>
<!-- Any parent with BasicLayout will acknowledge horizontalCenter and verticalCenter -->
<s:layout>
<s:BasicLayout />
</s:layout>
<s:Group horizontalCenter="0" verticalCenter="0">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button />
<s:Button />
<s:Button />
</s:Group>
</s:Group>
I am creating a Label in a Datagrid itemRenderer(extended from UIComponent) and right now I am setting the width of the label to some static value. I would like to create the label with 100% width. I do not want to use unScaledWidth because I am using link for the label so the link will be visible in the entire cell.
Thanks for the help in advance.
Am I missing something here or you should simply use percentWidth?
Using percentWidth won't work. If you have only a Label in the ItemRenderer, make sure the Label has (if an mx item renderer) autolayout="true" (which is the default) and add top="0" left="0" right="0" bottom="0" to the Label. This will make your label take up the entire cell.
If you are using a Spark item renderer, the default layout of none is absolute layout, and simply adding top="0" left="0" right="0" bottom="0" to the Label should be enough.
On another note, updateDisplayList() and measure() are two of the most overused overrides in Flex. Always try to fix your problem with an MXML skin-class before you try to go the route of overriding updateDisplayList() and measure(). Most MX class drawing methods were implemented incorrectly with private methods doing most of the drawing and this makes extending those classes difficult.