Flex4/skinning a spark TileList

I have a TileList control I want to skin.

Deselected items have a background of the bitmap image. The text of these articles would be white.

The selected item will become transparent and the text labels are red.

Placing the cursor on an unselected item will change its color. Hovering over the selected item does nothing.

Selection of an element must dispatch an event that I can actually do something about the selection.

I don't know even where to start. Help please!

Hello

For what you are trying to do you would use a custom converter, the code below gives you an idea where to start, firstly you override normal colors / hover / select default by setting autodrawbackground to false, then you have full control of what happens in each State, including having an image that is displayed only to the normal state.

David

http://ns.Adobe.com/MXML/2009.

xmlns:s = "library://ns.adobe.com/flex/spark".

xmlns:MX = "library://ns.adobe.com/flex/mx".

autoDrawBackground = "false" >

Tags: Flex

Similar Questions

Skin of spark and Halo component question

Hello

While browsing the Flex SDK folder, I found:

Flash Builder Beta\sdks\4.0.0\frameworks\projects\sparkskins\src\mx\skins\spark\TabSkin.mxml

That seems to be the skin spark FXG of TabNavigator tab, but I don't know how to use it since TabNavigator component of Halo and this skin is skin spark, so I can't use "skinClass" property of the TabNavigator component as this property does not exist in the component of Halo. But I think that there is a way to use the skin spark component Halo so if anyone can help me with this I would really appreciate it?

Thanks in advance,
Best regards

If you use Flex 4 and the default theme, it already uses that skin. In default css it looks like:

Tab

{

...

skin: ClassReference ("mx.skins.spark.TabSkin");

...

}

Alex Harui

Flex SDK Developer

Adobe Systems Inc..

Blog: http://blogs.adobe.com/aharui

ActionScript gives 1024 custom skin: a function that is not marked for substitution substitution

I am trying to create an appearance in actionscript. When I put the HostComponent metadata on top of the compoiler class provides actionscript 1024: a function that is not marked for the substitution of alternative.
package skins
{
Import spark.components.supportClasses.Skin;
[HostComponent ("spark.components.BorderContainer")]
[The States ("normal", "disabled")]
SerializableAttribute public class TestSkin extends skin
{
public void TestSkin()
{
Super();
}
}
}
use:
< s:BorderContainer skinClass = 'skins. TestSkin "/ >"
What I am I missing here is nothing to this...
10 x,
Claudiu

Claudiu salvation,

I think that you are currently running on this known issue: http://bugs.adobe.com/jira/browse/SDK-25312

-Kevin

How to use a Label component under the skin?

Hello
I try to use the Label component as part of the skin of a component skinnable AS3 and Flash Builder report about it:
Incompatible component skinnable custom ActionScript: part skin type spark.components.Label is not compatible.
It's the same for ComboBox, NumericStepper.
Do you know why? You have a list of all the components that we use in the pieces of skin?
Thank you very much.
Julien

Hello

Flash uses catalyst "RichText", which is an advanced as control label. So, your part of skin should be of type 'RichText' instead of 'Label' so that you can use in the catalyst.

Similarly, as ComboBox and NumericStepper are not supported in Flash Catalyst, you may not like parts of your skin.

Basically, whatever components you see in "Convert the work by dialing" combobox are supported as parts of skin.

I hope this helps.

Concerning

Srinivas Annam

DropDownList available in Flash Catalyst but not able to set as required skinpart

I have create a skinnable in Flash Bulder 4.5 component - where I would include a DropDownList or combobox control. In doing so, I get a compatibility warning and am not able to import using the componenen in catalyst 1.5. This link explains that a combox is included http://learn.adobe.com/wiki/display/fcc/Visual+objects. Why do I get a Flash Bulder 4.5 compatibility warning saying this:
"Skin part spark.components.DropDownList type is not supported by Flash Catalyst. Right click to the problems for more information. »
Thank you
Marc

Flash Catalyst 5.5 supports only a limited set of Spark components. The drop-down list unfortunately isn't one of them. Although several other components have been improved MX spark with the 4.5 Flex framework update, they were not included as "natives" components in Flash Catalyst. You can always include the component and ignore the warning of computability, but the actual counting of the component has to be via Flash Builder, and Flash Catalyst.

Chris

Flex 4 style halo progressbar 'MX '.

Is style MX progressbar in flex 4 possible?
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

MX | ProgressBar {}
barColor: #dbe6ec;
trackColors: #009900, #e6eeee;
color: #ffffff;
paddingRight: 3;
textIndent: 0;
trackHeight: 15;
verticalGap: 6;
fontFamily: Arial;
fontSize: 16;
fontWeight: bold;
}
I can't change the 'barColor' and 'trackColors '.
It seems very strange that you would be unable to modify these properties in flex 4.
Any help would be greatly appreciated.
Thank you

Not with the skins of Spark-like default. There are not as many styles in Spark

skins.

Skin - Having trouble finding some sparks itemimage

Hey all,.
I applied this solution to my project http://www.flex4fun.com/Ex/ComboBoxNew3/ComboBoxNew3.html except what I want to do is to display the image and not the text.
In the skin for the above solution, I replaced it
<s:TextInput id="textInput"
left="0"right="18"top="0"bottom="0"
skinClass="spark.skins.spark.ComboBoxTextInputSkin"/>
with
< s:Image source='{hostComponent.selectedItem.source}'/ >
or
" < s:Image source =" hostComponent.selectedItem.icon{}"/ > "

I have a feeling that {hostComponent.selectedItem.source} does not work in my case because the source is in two parts, a label and an image.
Anyone have any ideas when I select something in my combobox that image is only displayed in the bombobox label?
Thanks for your time!
Flex

Found the solution

http://flex4fun.com/2010/11/30/Flex4-DropDownList-display-icon-only/

How to pass data to the Spark skin class

Hello
I created a music skin to my spark component, and I would like to add another mode of this skin, how can I pass id mode during my skin?

Maybe this will help you

http://TV.Adobe.com/watch/Flex-in-a-week-day-5/creating-custom-skin-properties/

The skin of the sparks - convert Flex 3 style

I'm not asking to do a job for me but what would it take to convert the next spark in Flex 3 skin styles. Assuming that it is even remotely possible:
<? XML version = "1.0" encoding = "utf-8"? >
" < = xmlns:fx s:SparkSkin ' http://ns.Adobe.com/MXML/2009 "
xmlns:s = "library://ns.adobe.com/flex/spark".
minWidth = "85" minHeight = "27" alpha.disabled = "0.5"
>
< fx:Metadata >
[HostComponent ("spark.components.Button")]
< / fx:Metadata >
< fx:Script >
<! [CDATA]
Import mx.events.StateChangeEvent;
/ * Set the skin elements that should not be colorized.
For the button, the graphics are colorized but the label is not. */
public static private const exclusions: Array = ["labelDisplay"];
[Bindable] private var _fillHighAlphaOver:Number;
[Bindable] private var _fillHighAlphaDown:Number;
[Bindable] private var _fillLow:uint = 0 x 000000;
[Bindable] private var _fillHigh:uint = 0xFFFFFF;
[Bindable] private var _highlight1:uint = 0xFFFFFF;
[Bindable] private var _highlight2:uint = 0xD8D8D8;
[Bindable] private var _highlightDown1:uint = 0 x 000000;
[Bindable] private var _highlightDown2:uint = 0 x 000000;
[Bindable] private var _rollOverTextColor:uint = 0 x 333333;
[Bindable] private var _selectedTextColor:uint = 0 x 333333;
private var _borderColor:uint = 0 x 373830;
private var hlight:Boolean;
override public function get colorizeExclusions (): Array {return exclusions ;}
override protected function initializationComplete (): void
{
useChromeColor = true;
super.initializationComplete ();
var rotc:uint = hostComponent.getStyle ("rolloverTextColor");
{if (ROTC)}
_rollOverTextColor = rotc;
}
var stc:uint = hostComponent.getStyle ("selectedTextColor");
{if (STC)}
_selectedTextColor = stc;
}
var fc:Array = hostComponent.getStyle ("fillColors");
{if (CF)}
fill1. Color = fc [0];
fill2. Color = fc [1];
}
var bc:uint = hostComponent.getStyle ("borderColor");
{if (BC)}
_borderColor = bc;
}
var color: uint = hostComponent.getStyle("color");
{if (Color)}
labelDisplay.setStyle ("color", color);
}
var fl:uint = hostComponent.getStyle ("fillLow");
var fh:uint = hostComponent.getStyle ("fillHigh");
var fhs:Array = hostComponent.getStyle ("fillHighStrokes");
var fhds:uint = hostComponent.getStyle ("fillHighDownStrokes");
If (FL)
_fillLow = fl;
If (FH)
_fillHigh = fh;
{if (FHS)}
fhs = _highlight1 [0];
_highlight2 = fhs [1];
}
{if (FHDS)}
_highlightDown1 = fhds;
_highlightDown2 = fhds;
}
Border.visible = hostComponent.getStyle ("borderVisible");
crttr = hostComponent.getStyle ("skinHighlight");
}
override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number): void
{
var cr:Number = value ("cornerRadius");
If (cornerRadius! = cr)
{
cornerRadius = cr;
shadow.radiusX = cornerRadius;
fill.radiusX = cornerRadius;
lowlight.radiusX = cornerRadius;
highlight.radiusX = cornerRadius;
border.radiusX = cornerRadius;
}
If (highlightStroke) highlightStroke.radiusX = cornerRadius;
If (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
If (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
borderStroke.color = _borderColor;
lowlight.visible = crttr;
Highlight.visible = crttr;
If (highlightStroke) highlightStroke.visible = crttr;
If (hldownstroke1) hldownstroke1.visible = crttr;
If (hldownstroke2) hldownstroke2.visible = crttr;
super.updateDisplayList (unscaledWidth, unscaledHeight);
}
private var cornerRadius:Number = 2;
[]] >
< / fx:Script >
<! - States - >
< s: states >
< name s: State = "mounted" / >
< name s: State = "over" / >
< name s: State = "low" / >
< name s: State = "disabled" / >
< / s: states >

< s:Rect id = "fill" left = "1" right = "1" top down = '1' = '1' radiusX = "2" >
< s:fill >
< s:LinearGradient rotation = "90" >
< s:GradientEntry id = "fill1" color = "0x7B82C3" alpha = "0.85" alpha.down="0.6375"/ >
< s:GradientEntry id = "fill2" color = "0x4378AA" alpha = "0.85" alpha.down="0.6375"/ >
< / s:LinearGradient >
< / s:fill >
< / s:Rect >
<!-layer 3: filling lowlight->

< s:Rect id = "lowlight" left = "1" right = "1" top down = '1' = '1' radiusX = "2" >
< s:fill >
< s:LinearGradient rotation '270' = >
< s:GradientEntry id = "fillLow1" color = ratio "{_fillLow}" = "0,0" alpha = "0,0627" / >
< s:GradientEntry id = "fillLow2" color = ratio "{_fillLow}" = "0.48" alpha = "0,0099" / >
< s:GradientEntry id = "fillLow3" color = ratio "{_fillLow}" = "0.48001" alpha = "0" / >
< / s:LinearGradient >
< / s:fill >
< / s:Rect >
<!-layer 4: highlight of fill->

< s:Rect id = "highlight" left = "1" right = "1" top down = '1' = '1' radiusX = "2" >
< s:fill >
< s:LinearGradient rotation = "90" >
< s:GradientEntry id = "fillHigh1" color = ratio "{_fillHigh}" = "0,0" alpha = "0.33" alpha.over = "0.22" alpha.down="0.12"/ > "
"< s:GradientEntry id ="fillHigh2"color ratio"{_fillHigh}"= '0.48' = alpha = alpha.over =" 0.22 "0.33" "alpha.down =" 0.12 "/ >
< s:GradientEntry id = "fillHigh3" color = ratio "{_fillHigh}" = "0.48001" alpha = "0" / >
< / s:LinearGradient >
< / s:fill >
< / s:Rect >
<!-layer 5: race to highlight (all States except down)->

< s:Rect id = "highlightStroke" left = right '1' = '1' top low = '1' = '1' = '2' = 'low' excludeFrom radiusX >
< s:stroke >
< s:LinearGradientStroke rotation = "90" weight = "1" >
< s:GradientEntry id = 'highlight1' color = "{_highlight1}" alpha.over = "0.22" / > "
< s:GradientEntry id = "highlight2" color = "{_highlight2}" alpha.over = "0.22" / > "
< / s:LinearGradientStroke >
< / s:stroke >
< / s:Rect >
<!-layer 6: highlight of the stroke (to the low State only)->

< s:Rect id = "hldownstroke1" left = "1" right = "1" top down = '1' = '1' radiusX = "2" includeIn = "bottom" >
< s:stroke >
< s:LinearGradientStroke rotation = "90" weight = "1" >
< s:GradientEntry color = alpha "{_highlightDown1}" = "0.25" ratio = "0,0" / >
< s:GradientEntry color = alpha "{_highlightDown1}" = "0.25" ratio = "0.001" / >
< s:GradientEntry color = alpha "{_highlightDown1}" = "0.07" ratio = "0,0011" / >
< s:GradientEntry color = alpha "{_highlightDown1}" = "0.07" ratio = "0.965" / >
< s:GradientEntry color = alpha "{_highlightDown1}" = '0.00' ratio = "0.9651" / >
< / s:LinearGradientStroke >
< / s:stroke >
< / s:Rect >
< s:Rect id = "hldownstroke2" left = "2" right = "2" high low = '2' = '2' radiusX = "2" includeIn = "bottom" >
< s:stroke >
< s:LinearGradientStroke rotation = "90" weight = "1" >
< s:GradientEntry color = alpha "{_highlightDown2}" = '0.09' ratio '0.0' = / >
< s:GradientEntry = "{_highlightDown2}" alpha = "0.00" color ratio = "0.0001" / >
< / s:LinearGradientStroke >
< / s:stroke >
< / s:Rect >
<!-Layer 7: border - put it on top of the filling so it does not disappear when the scale is less than 1->

< s:Rect id = 'border' left right '0' is is '0' high = low "0" = "0" width = "100%" height = "100%" radiusX = "2" >
< s:stroke >
"< s:SolidColorStroke id ="borderStroke"color.over ="0x00FF00"weight ="1"alpha ="1"alpha.down =" 0.6375 "/ >
<!-< s:LinearGradientStroke rotation = weight "90" = "1" >
< s:GradientEntry id = "border1" alpha = "0.5625" alpha.down = "0.6375" / > "
< s:GradientEntry id = "border2" alpha = "0.75" alpha.down = "0.85" / > "
< / s:LinearGradientStroke >->
< / s:stroke >
< / s:Rect >
<!-layer 8: text-->
<! spark.components.supportClasses.ButtonBase #labelDisplay->---@copy
< s:Label id = "labelDisplay".
textAlign = "center".
verticalAlign = "middle".
maxDisplayedLines = "1".
Color.over = "{_rollOverTextColor}" "
Color.Down = "{_selectedTextColor}" "
horizontalCenter = "0" = "1" Red
left = "10" right = "10" top = low "2" = "2" >
< / s:Label >
< / s:SparkSkin >
Appreciate any help.

The sparkskins project. In a folder of the Flex 4 sdk, there should be a record of frameworks/projects with several projects in it.

actual target for MouseEvent.CLICK - spark skins

Hello

I have a question about events and events targeting listeners.

In my mobile AIR application, I need to click / tap on a number of s:Image objects.

As a first step, I added an event listener to each of them related to an event handler. Then try to optimize my code, I moved the event listener to the container object such as suggested in various optimization resources that I found online.

The problem was that the event.target property was not the image clicked, but a s:Group. I finally realized that the s:Group was part of the skin of the s:Image and I solved the problem by using the target.owner property, but this behavior has really created a lot of confusion. I couldn't find anything about this on the Adobe development resources, either as they just insist on (and explain very well) the difference between the target and currentTarget properties.

Below you will find a simple representation of my solution, but I was wondering if:

(1) this was actually due to a mistake I made, and whether it could be more easily avoided.

(2) there is a better or more effective than what I came up with.

(3) the topic is discussed somewhere in the documentation.

Thank you very much!

import spark.components.Image;

private var image1:Image;

private function initComponent():void
{
     image1 = new Image();
     image1.source = "assets/aaa.png";
     image1.id = "thisIsTheImage";
     addElement(image1);
                    
     addEventListener(MouseEvent.CLICK, clickHandler);          // 1
//   image1.addEventListener(MouseEvent.CLICK, clickHandler);     // 2 - the old one
}
               
private function clickHandler(event:MouseEvent):void
{
     trace("event.currentTarget \t\t\t" +              event.currentTarget);
     trace("event.target \t\t\t\t" +                   event.target);
     trace("event.target.owner.owner \t\t" +           event.target.owner.owner);
     trace("image1.imageDisplay.displayObject \t" +    image1.imageDisplay.displayObject);
     
     if(event.target.owner.owner is Image){
          // do something
     }
}

console:

event.currentTarget                     TestApp0.ViewNavigatorApplicationSkin2.navigator.ViewNavigatorSkin4.contentGroup.TestView33
event.target                            TestApp0.ViewNavigatorApplicationSkin2.navigator.ViewNavigatorSkin4.contentGroup.TestView33.SkinnableContainerSkin35.contentGroup.thisIsTheImage.ImageSkin43.Group44
event.target.owner.owner                TestApp0.ViewNavigatorApplicationSkin2.navigator.ViewNavigatorSkin4.contentGroup.TestView33.SkinnableContainerSkin35.contentGroup.thisIsTheImage
image1.imageDisplay.displayObject       TestApp0.ViewNavigatorApplicationSkin2.navigator.ViewNavigatorSkin4.contentGroup.TestView33.SkinnableContainerSkin35.contentGroup.thisIsTheImage.ImageSkin43.Group44

Simply set mouseChildren = false on the Images, and that any click on children will be recognized as a click on the Image.

HTH;

Amy

default skin for the button class spark

Hi, where in the button spark or superclasses class specifies its default appearance?

The Spark as Button.as components do not define their default skin internally. If you want to have a skin by default so that you don't have to manually specify the skin whenever you have two options: skinnable component. One that is used in the flex sdk, and the preferred method is to use a css file to specify the skin for the component. If you do not want to, then the other option is to call setStyle ("skinClass", YourSkinClass) within the constructor of the actionscript component.

How to attach a skin to a list of spark (AS3)?

Hi all

I would like attached skin to my List (spark) component, as I tied my Renderer... but how?

My code:

---------------------------------------------------------

var myList:List = new List();
ListArea.addElement(myList);
myList.percentHeight = myList.percentWidth = 100;
myList.dataProvider = monDC;
myList.x = 50;
myList.y = 50;
myList.addEventListener(IndexChangeEvent.CHANGE, changedItemHandler);
myList.itemRenderer = new ClassFactory(mesRenderers.monRendererDeList);

---------------------------------------------------------


myList.skin = ????

---------------------------------------------------------

Kind regards

Patrick

Oh, you're in fx4.

setStyle ("skinClass", SkinRef);

SkinRef is the reference class. It is the name of the class, but do not set

as a string.

In your case would be

setStyle ("skinClass", myListSkin);

as you put in there already.

skinning spark scroller - seems easy, but does not

Hello
I'm trying to define a custom vertical scroll bar by incorporating images right in the skin for each of the pieces of skin increment, decrement, follow and thumb.
The problem is that I am not able to hold the 'thumb' and move upwards or downwards. He behaves as if I clicked on the track to increment the top or bottom of a step.
Also, if I try to place a 'thumb' like a white image on a gray track, the thumb is not at all visible. The thumb was visible when I placed a gray image darker on a trail of light gray. He is so boring, I couldn't guess what was going on...
help everything I could find on google, is that they use default spark.skins.spark(VscrollBarThumbSkin|) VScrollBarTrackSkin), but I don't want to use it.
It was pretty easy in mxml comps by definition upskin, downskin etc in css itself, now I am struggling with the spark.
Any help is greatly appreciated.
Here is my statement in the css style-
s | {VScrollBar
skinClass:ClassReference('assets.skins.VScrollBarSkin');
}
My VScrollBarSkin-
< s: states >
< s: State name = "disabled" / >
< s: State name = "normal" / >
< s: State name 'dormant' = / >
< / s: states >
< s:Button id = 'decrementButton' top = "0" left = "0"
width = "20" height = "20"
focusEnabled = 'false'
skinClass="assets.skins.VScrollBarUpArrowSkin"/ >

< s:Button id = 'incrementButton' bottom = "0" left = "0"
width = "20" height = "20"
focusEnabled = 'false'
skinClass="assets.skins.VScrollBarDownArrowSkin"/ >

< s:Button id = 'thumb' high = low "0" = "0"
width = "20" height = "30"
right="2"
focusEnabled = "true"
skinClass="assets.skins.VScrollBarThumbSkin"/ >

< s:Button id = "track".
width = "20" height = "100%"
top = '20' low '20' = left = '1' right is "2"
focusEnabled = 'false'
skinClass="assets.skins.VScrollBarTrackSkin"/ >
-My skin to 'decrementButton' and "incrementButton" works very well. It incorporates only top-arrow/arrow image respectively.
-My skin of thumb is-
< s:SparkSkin >
< s: states >
< s: State name = "rise" / >
< s: State name = "low" / >
< s: State name = "over" / >
< s: State name = "disabled" / >
< / s: states >
< s:BitmapImage
height: ' 100 percent ' width = ' 100% '
( source.up="@Embed('assets/images/thumb-1.jpg') '
( source.over="@Embed('assets/images/thumb-1.jpg') '
source.down="@Embed('assets/images/thumb-1.jpg')" / > "
< / s:SparkSkin >
-My skin of track is-
< s:BitmapImage width = "100%" height = "100%".
( source="@Embed('assets/images/scrollBar/scrolltrack.png') '
/>

Hi lakshdn,

To the skin of your scroll bar, try it in the following order:

width = "20" height = "100%".

Top = '20' low '20' = left = "1" right = "2".

focusEnabled = "false".

skinClass="assets.skins.VScrollBarTrackSkin"/ >

width = "20" height = "30".

right = '2 '.

focusEnabled = "false".

skinClass="assets.skins.VScrollBarThumbSkin"/ >

Top = "0" left = "0".

width = "20" height = "20".

focusEnabled = "false".

skinClass="assets.skins.VScrollBarUpArrowSkin"/ >

low = "0" left = "0".

width = "20" height = "20".

focusEnabled = "false".

skinClass="assets.skins.VScrollBarDownArrowSkin"/ >

where all parts of skin have focusEnabled = 'false', the constraints of up/down of the thumb has been removed, and the order of the parts appear as above. The order of the elements is important because stacking on screen order begins with the first component on the bottom. I think the problem you were having was that 'track' has been placed after the 'thumb '. This means that on screen, the 'thumb' is in fact under the rail so that when you click on the thumb, you're always clicking on the track. Let me know if you have more questions or problems.

Hope this helps,

-Kevin

Skin + component custom Spark does not correctly appear in Flash Builder

I am creating a custom spark component which has a personalized content for use in MXML much as controlbar and the contents of a special group. I imitated the application Panel and PanelSkin, but is not correctly make in FlashBuilder, but it looks good at execution time. My custom group is called headerGroup. And I followed the implementation of the controlBar in Panel. My skin file should display the header at the top of the container. For debugging, I just renamed my headerGroup to contentGroup (defined in SkinnableContainer) and I can see this content at design time.
What should I do extra to get my custom group appears at design time? Below, I've stuck my componetn and his skin file.
Console.As
package
{
import flash.utils.describeType;
import mx.core.mx_internal;
import mx.utils.BitFlagUtil;
import spark.components.Button;
import spark.components.Group;
import spark.components.SkinnableContainer;
import spark.components.supportClasses.SkinnableComponent;
import spark.layouts.supportClasses.LayoutBase;
use the space namespace mx_internal;
public class Console extends SkinnableContainer
{
protected const CONSOLE_HEADER:String = "consoleHeader";
protected public static const HEADER_PROPERTY_FLAG:uint = 1 < < 0;
protected public static const LAYOUT_PROPERTY_FLAG:uint = 1 < < 1;
protected public static const VISIBLE_PROPERTY_FLAG:uint = 1 < < 2;
mx_internal public static var createAccessibilityImplementation:Function;
[SkinPart(required="false")]
public var headerGroup:Group;
mx_internal var headerGroupProperties:Object = {visible: true};
[ArrayElementType("mx.core.IVisualElement")]
public function get headerContent (): array
{
If (headerGroup)
return headerGroup.getMXMLContent ();
else
return headerGroupProperties.headerContent;
}
public public function set headerContent(value:Array):void
{
If (headerGroup)
{
headerGroup.mxmlContent = value;
headerGroupProperties = BitFlagUtil.update (headerGroupProperties as uint, )
HEADER_PROPERTY_FLAG, value! = null);
}
else
headerGroupProperties.headerContent = value;
invalidateSkinState();
}

public function get headerLayout (): LayoutBase
{
(headerGroup) return
? headerGroup.layout
: headerGroupProperties.layout;
}
public public function set headerLayout(value:LayoutBase):void
{
If (headerGroup)
{
headerGroup.layout = value;
headerGroupProperties = BitFlagUtil.update (headerGroupProperties as uint, )
LAYOUT_PROPERTY_FLAG, true);
}
else
headerGroupProperties.layout = value;
}
public function get headerVisible (): Boolean
{
(headerGroup) return
? headerGroup.visible
: headerGroupProperties.visible;
}
public public function set headerVisible(value:Boolean):void
{
If (headerGroup)
{
headerGroup.visible = value;
headerGroupProperties = BitFlagUtil.update (headerGroupProperties as uint, )
VISIBLE_PROPERTY_FLAG, value);
}
else
headerGroupProperties.visible = value;
invalidateSkinState();
if (skin)
skin.invalidateSize ();
}

/**
* @private
*/
override protected function initializeAccessibility (): void
{
If (VMConsole.createAccessibilityImplementation! = null)
VMConsole.createAccessibilityImplementation (this);
}
override protected function partAdded(partName:String,_instance:Object):void
{
super.partAdded (partName, instance);
If (instance is headerGroup)
{
/ / copy values transferred by proxy (if defined) headerGroupProperties to headerGroup
var newHeaderGroupProperties:uint = 0;
If (headerGroupProperties.headerContent! == undefined)
{
headerGroup.mxmlContent = headerGroupProperties.headerContent;
newHeaderGroupProperties = BitFlagUtil.update(newHeaderGroupProperties, )
HEADER_PROPERTY_FLAG, true);
}
If (headerGroupProperties.visible! == undefined)
{
headerGroup.visible = headerGroupProperties.visible;
newHeaderGroupProperties = BitFlagUtil.update(newHeaderGroupProperties, )
VISIBLE_PROPERTY_FLAG, true);
}
headerGroupProperties = newHeaderGroupProperties;
}
}

override protected function partRemoved(partName:String,_instance:Object):void
{
super.partRemoved (partName, instance);
}

override protected function getCurrentSkinState (): String
{
var State: String = active? 'normal': "disabled";
If (headerGroup)
{
If (BitFlagUtil.isSet (headerGroupProperties as uint, HEADER_PROPERTY_FLAG) & & )
BitFlagUtil.isSet (headerGroupProperties as uint, VISIBLE_PROPERTY_FLAG))
State += "WithHeader";
}
else
{
If (headerGroupProperties.headerContent & & )
headerGroupProperties.visible)
State += "WithHeader";
}
return status;
}
}
}
ConsoleSkin.mxml
<? XML version = "1.0" encoding = "utf-8"? >
" < = xmlns:fx s:SparkSkin ' http://ns.Adobe.com/MXML/2009 "
xmlns:s = "library://ns.adobe.com/flex/spark".
xmlns:mx = "library://ns.adobe.com/flex/mx" >
< fx:Declarations >
<! - Place non-visual elements (e.g., services, items of value) here - >
< / fx:Declarations >
< fx:Metadata >
<! [CDATA]
/**
* @copy #hostComponent spark.skins.spark.ApplicationSkin
*/
[HostComponent ("Console")]
]]>
< / fx:Metadata >
< s: states >
< s: State name = "normal" / >
< s: State name = "disabled" / >
< name s: State = "normalWithHeader" / >
< name s: State = "disabledWithHeader" / >
< / s: states >
< s:Rect id = "shadow" left = "-1" right = "-1" high = low '-1' = '-1' radiusX = "2" >
< s:fill >
< s:LinearGradient rotation = "90" >
< s:GradientEntry color = "0x000000".
Alpha = "0.01" / >
< s:GradientEntry color = "0x000000".
Alpha = "0.07" / >
< / s:LinearGradient >
< / s:fill >
< / s:Rect >
< s:Rect id = "fill" left = "1" right = "1" top down = '1' = '1' radiusX = "2" >
< s:fill >
< s:LinearGradient rotation = "90" >
< s:GradientEntry color = "0xFFFFFF".
Alpha = "0.85" / >
< s:GradientEntry color = "0xD8D8D8".
Alpha = "0.85" / >
< / s:LinearGradient >
< / s:fill >
< / s:Rect >
< s:Group id = "headerGroup" width = "100%" height = "100%" >
< s:layout >
< s:HorizontalLayout paddingLeft = "10" paddingRight = "10" paddingTop = "7" paddingBottom = gap "7" = "10" / >
< / s:layout >
< / s:Group >
< / s:SparkSkin >

Hello

> Why it does not work when the component is not in a library of thought

The application code is not "compiled". A CFC is final compiled code, so design mode can load and display. I think that it won't work in an application's performance. Things will need to be recompiled constantly since there is no compc compiler in an application.

The extra leg, that I am referring is in Design view extensions. There are in fact extended components that implement the API they use in Design mode. It's a glorified built-in Flash Player.

It's a complication bit, I intend writes a blog on sooner rather than later.

Mike

Alternative to getLineText() in Flex4 (spark)?

We need to create a function that puts a line break after each winding displayed. It's save the entered text the same way, it is displayed in the editor for its later reproduction in PDF format.
Now that getLineText() has not been included in the new components and we can not return MX we must retrieve each line of characters in different ways.
I would like to know if there is an alternative to the getLineText() of MX in Flex4 Spark with the RichEditableText, or at least a way to combine functions that will reach the same result.

If you want to know what text went into the lines, first get the TextFlow of the RichEditableText. Once you have it, see that he has a "flowComposer. Given the flowComposer and assuming that the text is validated in Flex (e.g., updateDisplayList was called), you can browse the lines like this:

for (var i: int = 0; i< flowcomposer.numlines;="">

{

the var line: TextFlowLine = flowComposer.getLineAt (0);

var lineStart:int = line.absoluteStart;

var lineEnd:int = line.absoluteStart + line.textLength;

}

I don't know what you're doing to export text in PDF, but this should give you the information on where the lines of her finish, so you can incorporate that into your export function.

Hope this helps,

-robin

Flex4/skinning a spark TileList

Similar Questions

Maybe you are looking for