Here is my problem. I have a s:GridItemRenderer (the spark DataGrid size where I use this, is: 100% x 100%) and here is the function in it:
override public function prepare(hasBeenRecycled:Boolean):void {
myLabel.text = width.toString();
}
and here is the "myLabel" in it:
<s:Label id="myLabel" x="0" y="0" width="100%" height="20" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"/>
SO AND THE PROBLEM IS:
When i drag the side of the window, and resize it everything is fine! myLabel is updating, but sometimes the last column doesn't. BUT when I maximize the window, NOTHING happend, BUT the "width" variable is updated, but the myLabel.text doesn't. (so I try to use this.width too, but it isn't take effects)
Related
I'm trying to make a compact colorPicker with a limited number of colors. I've been able to do most of it but I can't find the property to set the size of the background panel.
Is this exposed to styling or programmatic control?
<fx:Script>
<![CDATA[
[Bindable]
public var simpleDP:Array = ['0x000000', '0xFF0000', '0xFF8800',
'0xFFFF00', '0x88FF00', '0x00FF00', '0xFF00FF', '0xFFFFFF'];
]]>
</fx:Script>
<fx:Style>
.mySwatchPanel {
backgroundColor:#E5E6E7;
columnCount:10;
horizontalGap:0;
previewHeight:20;
previewWidth:20;
swatchGridBackgroundColor:#000000;
swatchGridBorderSize:0;
swatchHeight:20;
swatchWidth:20;
swatchHighlightColor:#FFFFFF;
swatchHighlightSize:1;
textFieldWidth:72;
verticalGap:0;
paddingBottom:0;
}
</fx:Style>
<mx:ColorPicker id="colorPicker"
swatchPanelStyleName="mySwatchPanel"
dataProvider="{simpleDP}"
showTextField="false"
width="40" height="40"/>
You can resize the ColorPicker's SwatchPanel using the default style properties that are defined by the swatchPanelStyleName like this for example :
<fx:Style>
.mySwatchPanel {
backgroundColor:#E5E6E7;
swatchHighlightColor:#FFFFFF;
swatchHighlightSize:0;
swatchGridBorderSize:0;
swatchGridBackgroundColor:#000000;
textFieldWidth:0;
previewHeight:20;
previewWidth:20;
columnCount:3;
swatchHeight:20;
swatchWidth:20;
paddingBottom:2;
paddingTop:2;
paddingLeft:2;
paddingRight:2;
horizontalGap:0;
verticalGap:0;
}
</fx:Style>
this style will give you something like this :
of course you can play with these properties to get the size that you want, but don't forget that the default minimum size of the SwatchPanel is 100x100px.
But to overpass this limitation, you can use mx.core.mx_internal like this for example :
<mx:ColorPicker id="colorPicker" width="40" height="40" dataProvider="{simpleDP}"
showTextField="false" swatchPanelStyleName="mySwatchPanel"
open="colorPicker_openHandler(event)" />
and
protected function colorPicker_openHandler(event:DropdownEvent):void
{
// resize the SwatchPanel once then remove the event listener
colorPicker.mx_internal::dropdown.mx_internal::setUnscaledWidth(62);
colorPicker.mx_internal::dropdown.mx_internal::setUnscaledHeight(85);
ColorPicker(event.target).removeEventListener('open', colorPicker_openHandler);
}
which will give you something like this :
Hope that can help.
See the swatchPanelStyleName style property, it must helps.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/ColorPicker.html
I'm struggling with touch support in WinRT.
I have a Canvas with a Frame that contains a TextBlock. The TextBlock can have varying amounts of text which could make the Frame extend below the bottom of the Canvas. If that happens, I want the user to be able to touch the Frame and move it up so they can finish reading the text. If they move the Frame all the way up, it should stop when the bottom of the Frame is a set margin from the bottom of the Canvas. Same for moving it back down. Using the Inertia capabilities would be preferred as well.
If anyone can offer some direction, I'd appreciate it.
I would recommend wrapping a ScrollViewer around your textblock enabling the user to scroll on the screen to see all the text.
<ScrollViewer>
<TextBlock Content="Very long content goes here" />
</ScrollViewer>
For additional information check these sites out:
Link to the scrollviewer in the control list
Link to the scrollviewer documentation
I figured it out...
<Canvas x:Name="MainCanvas" ManipulationMode="TranslateRailsX" IsRightTapEnabled="False" IsDoubleTapEnabled="False" Margin="50,50,716,0" Width="600" ManipulationDelta="MainFrame_ManipulationDelta_1">
<Canvas.RenderTransform>
<CompositeTransform x:Name="ScrollMain"></CompositeTransform>
</Canvas.RenderTransform>
<Frame x:Name="MainFrame" Background="Beige" Height="auto" Width="600">
<RichTextBlock x:Name="MainContent" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="18" FontFamily="Segoe Script" Width="540" HorizontalAlignment="Left" Margin="30,10,0,10" Foreground="Black" Height="auto" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" ManipulationMode="None" IsTextSelectionEnabled="False"/>
</Frame>
</Canvas>
MainCanvas.ManipulationMode = ManipulationModes.TranslateY | ManipulationModes.TranslateRailsY | ManipulationModes.TranslateInertia;
private void MainFrame_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
{
CompositeTransform transform = ScrollMain as CompositeTransform;
double yDelta = e.Delta.Translation.Y;
double bDelta = (MainFrame.ActualHeight - pageRoot.ActualHeight + MainCanvas.Margin.Top + MainCanvas.Margin.Top) * -1;
if (transform.TranslateY + yDelta > 0)
{
yDelta = transform.TranslateY * -1;
}
if (transform.TranslateY + yDelta < bDelta)
{
transform.TranslateY = bDelta;
}
else
{
transform.TranslateY += yDelta;
}
base.OnManipulationDelta(e);
}
Apologies for the vague title. I could not think of a better way to word it in so few words.
Basically, I am creating a custom ItemRenderer (IR). The IR has a label on the left side and an icon on the right side. The icon on the right side is dynamic (can be either an add or remove icon or nothing at all). This works beautifully and gives me the control I need over it.
Now, the problem is that when I scroll the list in my mobile application, the icons change.
How it should look:
How it looks after scrolling using a finger (or mouse in emulator) by dragging on Test3:
As you can see, the icons change but the labels do not. I have dragEnabled, dropEnabled, and dragMoveEnabled all set to false on my Spark List component. The only time the icon selection runs is on creationComplete, so there is no way it is choosing a different icon at some point. I can also verify that the data itself is what it should be after this change occurs.
Here is the MXML that creates the item:
<s:HGroup width="100%" verticalAlign="middle" left="{this.sideSpacing}" right="{this.sideSpacing}" top="{this.sideSpacing}" bottom="{this.sideSpacing}">
<s:Label id="text" width="100%"/>
<s:Image id="actionIcon" buttonMode="true" click="actionIconClick( event );">
<s:filters>
<s:DropShadowFilter alpha=".45" angle="90" distance="3" blurX="3" blurY="3" quality="3"/>
</s:filters>
</s:Image>
</s:HGroup>
<s:Rect width="100%" height="1" bottom="0" alpha=".1">
<s:fill>
<s:SolidColor color="#000000"/>
</s:fill>
</s:Rect>
And the possibly over-elaborate AS3 for selecting which icon should be displayed:
private function creationComplete( e:Event ):void {
if ( this.data.actionIcon != null ) {
this.actionIconType = this.data.actionIcon;
if ( this.data.actionIcon == ACTION_ICON_ADD ) {
this.actionIcon.source = this.addBitmapSource;
}
else if ( this.data.actionIcon == ACTION_ICON_REMOVE ) {
this.actionIcon.source = this.removeBitmapSource;
}
else {
this.actionIcon.source = null;
this.actionIcon.visible = false;
this.actionIcon.includeInLayout = false;
}
}
else {
this.actionIcon.source = null;
this.actionIcon.visible = false;
this.actionIcon.includeInLayout = false;
}
}
What could be causing this issue?
Basically, you need to update your renderer's label and icon when the dataChange event is fired. CreationComplete is only fired once. The list isn't really scrolled, just that the data in the itemRenderers change; causing it to look like things are scrolling. I call this renderer recycling.
Here is a component I created for a mobile app that does what you want. It displays a label and an icon (AKA the Decorator). When scrolling the label and icon are both updated. You can use a very similar approach.
<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
dataChange="onDataChange(event)" alpha=".7" width="100%" cacheAsBitmap="true">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.dotcomit.magondaMaze.managers.BoardDataManager;
import com.dotcomit.magondaMaze.managers.StatManager;
import mx.events.FlexEvent;
[Embed(source="assets/images/chooseLevel/completed78x78.png")]
private var completedImage:Class;
public var statManager :StatManager = StatManager.instance;
protected function onDataChange(event:FlexEvent):void
{
var itemAsXML :XML = data as XML;
var results :String = itemAsXML.#id + '. ' + itemAsXML.#title;
label = results;
if( statManager.isBoardComplete(itemAsXML.#id)){
this.decorator = completedImage;
} else {
this.decorator = null;
}
}
]]>
</fx:Script>
</s:IconItemRenderer>
I'll also add that the IconItemRenderer component--which my code above extends--is designed to do exactly what you need. So, you may not have to re-write the wheel so to speak.
This question is similar to the post:
"Move Button into grid space of a TabNavigator’s tabs in Flex Builder."
Move Button into grid space of a TabNavigator's tabs in Flex Builder
but with a slight difference. I wish to have a button that adds a child (tab) to the TabNavigator in the grid space (simpler with TabBar, but see below), but will not block tabs as they extend towards the button. This functionality can be seen in every web browser that uses tabs.
In addition I would like to have a scroll button appear if too many tabs are opened, and the ability to close tabs. I have tried using Doug McCune's SuperTabNavigator, which offers most of these features, but it does not offer the addChild button that I am looking for.
Is there a way to add this 'addChild' button to the grid space, or to add the features from SuperTabNavigator to TabBar?
This class will do the trick except for scrolling when there are too many tabs.
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="400">
<mx:HBox width="100%">
<mx:TabBar dataProvider="{viewstack}"/>
<mx:Button label="+" width="35" click="addTab()"/>
</mx:HBox>
<mx:ViewStack height="100%" width="100%" id="viewstack"/>
<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.containers.Panel;
//add a new container
private function addTab():void
{
var l:Label = new Label();
l.text = "Panel " + (viewstack.numChildren + 1);
var p:Panel = new Panel();
p.label = l.text;
p.addChild(l);
viewstack.addChild(p);
viewstack.selectedChild = p;
}
]]>
</mx:Script>
</mx:VBox>
How do I position a child relative to its containing box?
The Code:
<mx:Script>
<![CDATA[
thisMap.scaleX = scaleFactor;
thisMap.scaleY = scaleFactor;
thisMap.x = thisMap.x - thisMap.mouseX * 1.3;
thisMap.y = thisMap.y - thisMap.mouseY * 1.3;
]]>
</mx:Script>
<mx:Box id="mapHolder" x="0" y="30">
<mx:SWFLoader id="thisMap" source="MyWorld1.swf" />
</mx:Box>
To access thisMap it is not necessary to go through mapHolder.
A box is a container that manages positioning for you in a horizontal or vertical stack (see VBox or HBox). It looks like you are trying to position thisMap as if it was in a canvas. Try
<mx:Script>
<![CDATA[
thisMap.scaleX = scaleFactor;
thisMap.scaleY = scaleFactor;
thisMap.x = thisMap.x - thisMap.mouseX * 1.3;
thisMap.y = thisMap.y - thisMap.mouseY * 1.3;
]]>
</mx:Script>
<mx:Canvas id="mapHolder" x="0" y="30">
<mx:SWFLoader id="thisMap" source="MyWorld1.swf" />
</mx:Canvas>
Also i'm not sure how this will look by positioning it relative to the mouse coordinates... it looks like you are trying to achieve some sort of drag functionality. However the canvas should solve the original problem.
I am creating a zoom functionality. When the user clicks thisMap, it zooms into the point that was clicked. I scale this map and adjust for the scaling and centering by offsetting its x, y position. This works fine in the main app, but I can't figure out how to put the swf in some kind of container.