I have a HorizontalList control that uses a custom ItemRenderer to represent each item as a toggle-button. The list allows drag and drop, and I used this method to rotate the drop feedback (line) into a vertical position instead of horizontal, but with the buttons mashed together, the drop feedback is pretty subtle. I'd like to space out the buttons somehow, so that the drop feedback is more obvious.
I've looked through the properties and nothing stands out. There are padding and margin properties, but their descriptions say they affect the list control itself, not the items.
Below is the code of my ItemRenderer. I've added padding to it, but that doesn't seem to change anything. If I add padding, that affects the inside of the button, not the space between them, and the button control doesn't have margin properties.
I suppose I could base my ItemRenderer on a canvas in order to get a margin, but then I wouldn't inherit all of the functionality of a button.
<?xml version="1.0" encoding="utf-8"?>
<mx:Button
xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="go();"
toggle="true"
>
<mx:Script>
<![CDATA[
private var _val:int = -1;
private function go():void {
this.label = data.title;
_val = data.index;
}
override protected function clickHandler(event:MouseEvent):void{
//todo: bubble an event that causes all other
//buttons in the list to un-toggle
//now do the default clickHandler
super.clickHandler(event);
}
]]>
</mx:Script>
</mx:Button>
How about writing your item renderer as a container (either Canvas or HBox) and placing the Button element inside?
Make a custom skin for your buttons that includes the spacing you need. You may need to combine it with padding styles to ensure that text or icons don't go outside the skin.
It's a bit on the hacky side, but you can also lie about your columnWidth for the actual HorizontalList object. Set it to something larger than your actual itemRenderer width.
Related
We have a list of variable height items that we display in a Spark List control. When the user clicks and drags the vertical scrollbar the list scrolls smoothly. When the up/down arrows are used it moves in small and discrete steps. When the mouse wheel is used the list scrolls in very large discrete steps that is problematic for the user.
We would like to enable smooth scrolling for the mouse wheel. The height of our items vary significantly and it is easy to get lost when you scroll with the moouse due to the discrete scrolling.
Our implementation is fairly simple:
<s:List id="chartList"
dataProvider="{pm.charts}"
itemRenderer="charts.ChartItemRenderer"
horizontalScrollPolicy="off"
verticalScrollPolicy="on"
useVirtualLayout="false"
cachePolicy="auto">
</s:List>
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false"
xmlns:charts="charts.*"
>
<fx:Script>
<![CDATA[
private var _canvas:BitmapData;
public function set canvas(value:BitmapData):void
{
_canvas = value;
}
[Bindable]
public function get canvas():BitmapData
{
return _canvas;
}
public function render(x:int,y:int, data:int):void
{
_canvas.draw(this);
}
]]>
</fx:Script>
<charts:DefaultChartContainer
chart="{data}"
cachePolicy="on"/>
</s:ItemRenderer>
There does not appear to be an out of the box method for implementing smooth scrolling in a Spark List. How would one go about implementing smooth scrolling in a spark list for variable height items?
Edit:
Here is another way to do this:
http://forums.adobe.com/message/3844410#3844410
Ok, so this wont be easy, but it is doable.
1) Create a custom skin for your list
2) In the custom skin, replace the scroller with a custom scroller (MyScroller)
3) Create a new class that extends Scroller, called MyScroller
4) Adobe in their infinite wisdom made skin_mouseWheelHandler private - which they seem to do all over the place, so you would have to override something higher up, maybe attachSkin and detachSkin. Or you could try adding your own skin_mouseWheelHandler with a higher priority in attachSkin and prevent default on it so the default does not get called.
5) Replicate the code in skin_mouseWheelHandler, and modify it to suit your requirements.
Like #Sunil_D. suggested, listening the mousewheel event and manually adjusting the HorizontalScrollPosition is an easy way to handle this. Add the EventListener for your component
chartList.addEventListener(MouseEvent.MOUSE_WHEEL, chartList_mouseWheelHandler);
and increase/decrease the horizontalScrollPosition with, for example, multiples of event.delta
protected function chartList_mouseWheelHandler(event:MouseEvent):void
{
chartList.verticalScrollPosition -= (event.delta * SOME_CORRECT_VALUE);
}
Finding the proper SOME_CORRECT_VALUE might need some experimenting, but it shouldn't be to hard to find.
I have a collection of UIMovieClip components which reside in an s:HGroup tag. In ActionScript code I am modifying the width of a child clip in one of the UIMovieClips but these changes are not reflected by the s:HGroup.
<s:HGroup id="_buttonGroup">
<uiassets:NavigationTabButtonSWC id="_lobby" />
<uiassets:NavigationTabButtonSWC id="_achievements" />
</s:HGroup>
<fx:Script>
<![CDATA[
protected function init() : void
{
// The HGroup does not pickup this change and so my buttons
// are no longer evenly spaced out and overlap!
_lobby.getChildByName("background").width += 200;
}
]]>
</fx:Script>
Thanks!
There's a few reasons for this. Just changing one child's width doesn't mean it'll change the whole UIMovieClip's width, so you should check that first.
Second, Flex has a very specific way of doing things (called the component lifecycle), which the UIMovieClip doesn't implement so you can't manage the width yourself in the 'measure' function. I'm guessing that you just have other children in your movieclip that doesn't let you resize it all. Try changing the width of the MovieClip itself and it should work. If it doesn't, then there's another problem.
In my Flex 4 app I would like all my alert boxes to be a specific width and height, how do I specify that in the CSS? I want to avoid having to specify the width and height every time I want to show an alert, that's why I'd like to set it in the CSS, but does not look like there's a way to..
Something like this does not work:
mx|Alert
{
height: 100;
width: 300;
}
You can do it Using Style + Code like this
Define Style Properties as
Alert {
height:300;
weight:300;
}
Note: height and weight are not default style of Alert
Using them in Code as
var alert:Alert = Alert.show("Hello World");
alert.explicitHeight = Number(alert.getStyle("height"));
alert.explicitWidth = Number(alert.getStyle("weight"));
Working example of Flex3 is
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="{show()}">
<mx:Style>
Alert {
height:300;
weight:300;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function show():void
{
var alert:Alert = Alert.show("Hello World");
alert.explicitHeight = Number(alert.getStyle("height"));
alert.explicitWidth = Number(alert.getStyle("weight"));
}
]]>
</mx:Script>
</mx:Application>
Explanation
Since Alert Control by default not support height and weight style, so example used them just for holding user defined values as variable.
In routine to display Alert/Popup on screen Static method show of class Alert is used, which returns the instance/object of created/active Alert/Popup, using this refrence its properties can be manipulated at runtime as done in above example i.e. explicitHeight and explicitWidth.
Hopes that Help
CSS can only be used to set Style properties of components. There are no dimension based style properties for the mx:Alert as you can see here - although there is one to adjust the height of the header named 'headerHeight'.
You could try extending the mx:Alert class and giving it new style properties that would allow you to change the dimensions via CSS. Or you could extend the class and give it default dimensions in its constructor.
You can't do it out of the box, but you could do it by extending your Alert and adding your own logic in the updateDisplayList to check for the style and change the property appropriately.
Generally not recommended however. Just use the properties given to you instead.
I have a tooltip for each datagrid row. Which is fine. I also can style it with with mx:Style which is great.
However, I desire to have multiple styles ie a header and the rest of the text in the tooltip. Is this possible? Or to have htmlText for input?
If you need that you should create your own component implementing mx.core.IToolTip and use it to display the tooltip. Write you own handler for toolTipCreate and in this handler set your own component as the tooltip renderer.
private function createTooltip(e:ToolTipEvent):void {
//CustomToolTip should extend the Canvas and implement IToolTip
var tooltip:CustomToolTip = new CustomToolTip();
//you need to set the tooltip property in order to make your component used for tooltip renderer
e.toolTip = tooltip;
}
<mx:DataGrid id="myDataGrid" toolTip=" " toolTipCreate="createToolTip(event)">
I have a VBox who dynamically adds and removes children programatically. The height is set to 100% and verticalScrollPolicy=auto.
When a user wants to add another child to that Vbox, I want it to autoscroll to the bottom of the VBox since that is where the child is added.
I've tried every solution I could find online, but no matter what, the verticalScrollPosition and maxVerticalScrollPosition are both ALWAYS equal to 0. Even if I manually scroll to the bottom of the VBox and press a button that alerts these numbers.(Even after 'validateNow()' as well).
The only time I can get these numbers to change programmaticaly is when the VBox height is set in pixels, which I don't want since the children all have varying heights.
Plllease tell me that it's possible to set verticalScrollPosition without hard coding the height in pixels? Am I missing something totally obvious here?
You might not be scrolling the VBox, actually; there's a good chance that if your VBox is contained by another container, like a Canvas or the like, and you're adding items to the VBox as you say you are, it's the Canvas that's doing the scrolling, not the VBox -- in which case the VBox would indeed return 0 for its scroll position.
One way or another, you're right -- you have to set the component's height; even constraint-layout settings (e.g., "bottom='10'", etc.) won't work. But if you can manage to set the height of the VBox, either by binding its dimensions somehow to another control or by setting them explicitly as part of a child's appending/creation process, you should be able to accomplish what you're after.
Here's an example of an AIR app I've mocked up to illustrate the example. Basically it just adds randomly sized boxes to a VBox, and scrolls to the bottom of the VBox after each child gets created.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalScrollPolicy="off" horizontalScrollPolicy="off" width="250">
<mx:Script>
<![CDATA[
import mx.core.Application;
import mx.containers.Box;
import mx.events.FlexEvent;
private function addItem(h:Number):void
{
var b:Box = new Box();
b.width = 200;
b.setStyle("backgroundColor", 0xFFFFFF);
b.height = h;
// Wait for the component to complete its creation, so you can measure and scroll accordingly later
b.addEventListener(FlexEvent.CREATION_COMPLETE, b_creationComplete);
vb.addChild(b);
}
private function b_creationComplete(event:FlexEvent):void
{
event.currentTarget.removeEventListener(FlexEvent.CREATION_COMPLETE, b_creationComplete);
vb.verticalScrollPosition = vb.getChildAt(vb.numChildren - 1).y;
}
]]>
</mx:Script>
<mx:VBox id="vb" top="10" right="10" left="10" height="{Application.application.height - 80}" verticalScrollPolicy="on" />
<mx:Button label="Add Item" click="addItem(Math.random() * 100)" bottom="10" left="10" />
</mx:WindowedApplication>
In this case, the height of the VBox is being bound to the height of its containing component (here, just the Application). Everything else should be pretty self-explanatory.
Hope that helps! Post back if you have any questions.