MenuBar Flex 4 Styles

Similar Questions

• Where can I access Flex 2 Style Explorer

  Hi all

  I had consulted the link: http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html to reference css design but now I can't access link above, is: http://www.adobe.com/devnet/ ?

  Does anyone know where I can get Flex 2 Style Explorer?

  Thank you

  http://examples.Adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

• Flex Uniffied style

  We have two or three applications developed in flex through the org, but all the components appearance is different even if the components are same.we wanted to apply the style unified for all, which means that if I use the button/tabbar etc. in all the request style must be same.is there any way to do this with minimal changes like below what we think creating a CFC with style sheet and ask them to use. It work? and what is the best way to do it.

  -MSR
  

  Yes, the skins and the style sheets would be the best route.

  You should probably set a record on the project for styles and put the items in there and then to call the style of the main file of the application.

  Then of course, you will have to make sure that nobody has any change of style in the components themselves or through code.

• 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 >

  <!--> drop shadow

  < s:Rect id = "shadow" left = "-1" right = "-1" high = low '-1' = '-1' radiusX = "2" >

  < s:fill >

  < s:LinearGradient rotation = "90" >

  "< s:GradientEntry color ="0x000000"color.down ="0xFFFFFF"alpha ="0.01"alpha.down =" 0 "/ >

  "< s:GradientEntry color ="0x000000"color.down ="0xFFFFFF"alpha ="0.07"alpha.down =" 0.5 "/ >

  < / s:LinearGradient >

  < / s:fill >

  < / s:Rect >

  <!-layer 2: fill->

  <!---@private-->

  < 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->

  <!---@private-->

  < 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->

  <!---@private-->

  < 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)->

  <!---@private-->

  < 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)->

  <!---@private-->

  < 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->

  <!---@private-->

  < 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.

• 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.

• TabBar Style help needed

  Hello
  
  I'm trying to understand how a style such as the selected tab tab bar will have the text in a different color than the unselected tabs.
  
  Imagine 4 tabs. 3 are very light grey with black text. 1 is selected and it is dark blue with white text.
  
  I've been everywhere in the documentation and I can not just know how to do this.
  
  Here is what I tried that did not work:
  
  {.myTabs}
  tabHeight:30;
  tabStyleName: "myTab";
  }
  
  {.myTab}
  fillAlphas:1, 1;
  fillColors: #F1F1F1, #FAFAFA;
  textSelectedColor: #FFFFFF;
  Color: #000000;
  borderColor: #A7A7A7;
  backgroundColor: #6B86B6;
  cornerRadius: 0;
  }
  
  I thought using the property textSelectedColor could give me what I need, but it does not. Help, please.
  Thank you
  -Jon

  This is a really good resource for style issues. Flex 3 Style Explorer... See the code in real time and changes.
  See here

• CSS and scene generator

  I watched several videos scene Builder and read several articles.

  Each is implementing a CSS file, what can I do via overview, scene Style sheets, add Style sheets.

  I used FXExperience to generate a quick CSS file to use.

  Once applied, the CSS data work on the FXML file but it does not appear in the section of JavaFX CSS Inspector properties section.  Everything I've seen and read shows the CSS instruction in the JavaFX CSS section.

  Any experience with this and a resolution?  This may be due the CSS I created, but I tested a different CSS that was part of a tutorial I've read.  Still nothing appears.

  Kind regards

  Lance

  If you want to add a style sheet to your FXML you do through the property of style sheets in the Inspector. Once the style sheet is added, the property of the Style class allows you to apply style classes to the selected node.

  You can see this in action 28: 50, in this video: Parleys.com

  MenuBar > overview > scene Style Sheets > Add Style sheets allows you to listen to a style sheet without adding it to your document FXML scene graph. If you would use it to verify the impact of a style sheet without having to add a node in your document.

• Confusion DefaultItemRender help me.

  When you do something like this:

  < s:DataGroup id = "dataGroup" itemRenderer = "nikos.itemRenderers.LightBlueDefaultItemRenderer" >

  rather than use the DefaultItemRenderer

  You automactically have all the code for the DefaultItemRenderer

  That is, my LightBlueDefaultItemRenderer is the following:

  <? XML version = "1.0" encoding = "utf-8"? >
  < s:ItemRenderer focusEnabled = "false".
                  xmlns:fx=" http://ns.Adobe.com/MXML/2009 "xmlns:s ="library://ns.adobe.com/flex/spark" "
  autoDrawBackground = "true" >
  
  < s: states >
  < name s: State = "normal" / >
  < name s: State = "flat" / >
  < name s: State = "selected" / >
  < name s: State = "normalAndShowsCaret" / >
  < name s: State = "hoveredAndShowsCaret" / >
  < name s: State = "selectedAndShowsCaret" / >
  < / s: states >
  
  < s:Label id = "labelDisplay".
  Red = "0" left = "3" right = '3' high low = '6' = '4 '.
  "" fontFamily.normal = "Verdana" / color.selected = "red color.normal =" #46F9FB "color.hovered =" green"" fontWeight.normal = "bold" >
  
  < / s:ItemRenderer >

  but the DefaultItemRenderer code is much more complex as follows:

  ////////////////////////////////////////////////////////////////////////////////
  //
  ADOBE SYSTEMS INCORPORATED
  Copyright 2004 - 2007 Adobe Systems Incorporated
  All rights reserved.
  //
  NOTE: Adobe permits you to use, modify, and distribute this file
  under the terms of the license agreement that accompanies it.
  //
  ////////////////////////////////////////////////////////////////////////////////

  package spark.skins.spark
  {
  
  import flash.display.DisplayObject;
  import flash.events.MouseEvent;
  to import flash.geom.Point;

  Mx.controls.listClasses import. *;
  Import mx.core.IDataRenderer;
  Import mx.core.UIComponent;
  Import mx.core.mx_internal;
  Import mx.events.FlexEvent;

  Import spark.components.IItemRenderer;
  Import spark.components.Label;
  Import spark.components.supportClasses.TextBase;

  Use namespace mx_internal;

  //--------------------------------------
  Events
  //--------------------------------------

  /**
  * Dispatched when the data < code > < code > changes to the property.
  *
  * < p > when you use a component as a driving force of rendering,
  * the data < code > < code > property contains the data to display.
  * You can listen for this event and update the component
  * When the data < code > < code > property change. < /p >
  *
  * @eventType mx.events.FlexEvent.DATA_CHANGE
  *
  * @langversion 3.0
  * flash 9 @playerversion
  * @playerversion AIR 1.1
  * @productversion flex 3
  */
  [Event (name = "dataChange", type = "mx.events.FlexEvent")]

  //--------------------------------------
  Styles
  //--------------------------------------

  include "... /.. '. "/ styles/metadata/BasicInheritingTextStyles.as".
  include "... /.. '. "/ styles/metadata/AdvancedInheritingTextStyles.as".
  include "... /.. '. "/ styles/metadata/SelectionFormatTextStyles.as".

  /**
  Color to use for the backgrounds of the items in the list.
  * The value is an array of two or more colors.
  * The backgrounds of the items on the list among the colors of the table.
  *
  * undefined @default
  *
  * @langversion 3.0
  * @playerversion flash 10
  * @playerversion AIR 1.5
  * @productversion flex 4
  */
  [Style (name = "alternatingItemColors", type = "Array", arrayType = "uint", format ="color", inherit = "yes", topic = "spark")]

  /**
  * Color of the focus ring when the component is in short
  *
  * @default 0x70B2EE
  *
  * @langversion 3.0
  * @playerversion flash 10
  * @playerversion AIR 1.5
  * @productversion flex 4
  */
  [Style (name = "focusColor", type = "uint", format ="color", inherit = "yes", topic = "spark")]

  /**
  * The color of the highlights when the mouse is over the component
  *
  * @default 0xCEDBEF
  *
  * @langversion 3.0
  * @playerversion flash 10
  * @playerversion AIR 1.5
  * @productversion flex 4
  */
  [Style (name = "rollOverColor", type = "uint", format ="color", inherit = "yes", topic = "spark")]

  /**
  The color of any symbol of a component. Examples of the box of a CheckBox control or
  * the arrow of a scroll button
  *
  * @default 0x000000
  *
  * @langversion 3.0
  * @playerversion flash 10
  * @playerversion AIR 1.5
  * @productversion flex 4
  */
  [Style (name = "symbolColor", type = "uint", format ="color", inherit = "yes", topic = "spark")]

  //--------------------------------------
  Excluded API
  //--------------------------------------

  [Exclude (name = "focusBlendMode", type = "style")]
  [Exclude (name = "focusThickness", type = "style")]

  /**
  * The DefaultItemRenderer class defines the default item converter
  for a list control.
  * The default item converter draws just the associated text
  * with each item in the list.
  *
  * < p > you can override the default value for the motor point of rendering
  * by creating a custom item renderer. < /p >
  *
  * @see spark.components.List
  * @see mx.core.IDataRenderer
  * @see spark.components.IItemRenderer
  * @see spark.components.supportClasses.ItemRenderer
  *
  * @langversion 3.0
  * flash 9 @playerversion
  * @playerversion AIR 1.1
  * @productversion flex 3
  */
  SerializableAttribute public class extends UIComponent DefaultItemRenderer
  implements IDataRenderer, IItemRenderer
  {
  
  //--------------------------------------------------------------------------
  //
  Constructor
  //
  //--------------------------------------------------------------------------
  
  /**
  * Constructor.
  *
  * @langversion 3.0
  * flash 9 @playerversion
  * @playerversion AIR 1.1
  * @productversion flex 3
  */
  public void DefaultItemRenderer()
  {
  Super();
  
  addHandlers();
  }
  
  //--------------------------------------------------------------------------
  //
  Variables
  //
  //--------------------------------------------------------------------------
  
  //--------------------------------------------------------------------------
  //
  Private properties
  //
  //--------------------------------------------------------------------------
  
  /**
  * @private
  * Indicator that is set when the mouse is passed the item converter.
  */
  private var hovered: Boolean = false;
  
  //--------------------------------------------------------------------------
  //
  Substitution of properties: UIComponent
  //
  //--------------------------------------------------------------------------
  
  //----------------------------------
  baselinePosition
  //----------------------------------
  
  /**
  * @private
  */
  override public function get baselinePosition (): number
  {
  If (! labelDisplay |! validateBaselinePosition())
  Return super.baselinePosition;
  
  Return labelDisplay.y + labelDisplay.baselinePosition;
  }
  
  //--------------------------------------------------------------------------
  //
  Public properties
  //
  //--------------------------------------------------------------------------
  
  //----------------------------------
  data
  //----------------------------------
  
  /**
  * @private
  * Storage of property data.
  */
  private var _data:Object;
  
  [Bindable ("dataChange")]
  
  /**
  * The implementation data < code > < code > property
  as defined by the IDataRenderer interface.
  * When set, it stores the value and invalidate the component
  * to trigger a new provision of the component.
  *
  * @see mx.core.IDataRenderer
  *
  * @langversion 3.0
  * flash 9 @playerversion
  * @playerversion AIR 1.1
  * @productversion flex 3
  */
  public function get data (): object
  {
  return _data;
  }
  
  /**
  * @private
  */
  public function set data(value:Object):void
  {
  _data = value;
  
  dispatchEvent (new FlexEvent (FlexEvent.DATA_CHANGE));
  }
  
  //----------------------------------
  itemIndex
  //----------------------------------
  
  /**
  * @private
  * storage of the itemIndex property
  */
  private var _itemIndex:int;
  
  /**
  * @inheritDoc
  *
  * @default 0
  */
  public function get itemIndex (): int
  {
  Return _itemIndex;
  }
  
  /**
  * @private
  */
  public function set itemIndex(value:int):void
  {
  If (value == _itemIndex)
  return;
  
  _itemIndex = value;
  invalidateDisplayList();
  }
  
  //----------------------------------
  label
  //----------------------------------
  
  /**
  * @private
  * Storage var for label
  */
  private var _label:String = "";
  
  /**
  * @inheritDoc
  *
  * @default «»
  */
  public function get label (): String
  {
  Return _label;
  }
  
  /**
  * @private
  */
  public function set label(value:String):void
  {
  If (value is _label)
  return;
  
  _label = value;
  
  Lower the label in the labelDisplay
  If there is
  If (labelDisplay)
  Displaylabel.text = _label;
  }
  
  //----------------------------------
  labelDisplay
  //----------------------------------
  
  /**
  The component of label made available as an option.
  * This component is used to determine the value of the
  * < code > < code > baselinePosition property in the host component of
  * the item converter.
  *
  * @langversion 3.0
  * @playerversion flash 10
  * @playerversion AIR 1.5
  * @productversion flex 4
  */
  public var labelDisplay:TextBase;
  
  //----------------------------------
  showsCaret
  //----------------------------------
  
  /**
  * @private
  * Storage of the property of showsCaret
  */
  private var _showsCaret:Boolean = false;
  
  /**
  * @inheritDoc
  *
  * fake @default
  */
  public function get showsCaret (): Boolean
  {
  Return _showsCaret;
  }
  
  /**
  * @private
  */
  public function set showsCaret(value:Boolean):void
  {
  If (value == _showsCaret)
  return;
  
  _showsCaret = value;
  invalidateDisplayList();
  }
  
  //----------------------------------
  selected
  //----------------------------------
  /**
  * @private
  * storage for the selected property
  */
  private var _selected:Boolean = false;
  
  /**
  * @inheritDoc
  *
  * fake @default
  */
  public function get selected (): Boolean
  {
  return _selected;
  }
  
  /**
  * @private
  */
  public function set selected(value:Boolean):void
  {
  If (value! = _selected)
  {
  _selected = value;
  invalidateDisplayList();
  }
  }
  
  //----------------------------------
  by dragging
  //----------------------------------
  
  /**
  * @private
  * Ownership of pieces hanging storage.
  */
  private var _dragging:Boolean = false;
  
  /**
  * @inheritDoc
  */
  public function get dragging (): Boolean
  {
  Return _dragging;
  }
  
  /**
  * @private
  */
  public function set dragging(value:Boolean):void
  {
  If (value == _dragging)
  return;
  
  _dragging = value;
  }
  
  //--------------------------------------------------------------------------
  //
  Alternative methods: UIComponent
  //
  //--------------------------------------------------------------------------
  
  /**
  * @private
  */
  override protected function createChildren() (): void
  {
  super.createChildren ();
  
  If (! labelDisplay)
  {
  labelDisplay = new Sun;
  addChild (DisplayObject (labelDisplay));
  If (_label! = "")
  Displaylabel.text = _label;
  }
  }
  
  /**
  * @private
  */
  override protected function measure (): void
  {
  Super.Measure ();
  
  label has a padding of 3 left and right and 5 at the top and bottom padding.
  measuredWidth = labelDisplay.getPreferredBoundsWidth () + 6;
  measuredHeight = labelDisplay.getPreferredBoundsHeight () + 10;

  measuredMinWidth = labelDisplay.getMinBoundsWidth () + 6;
  MaxHeight = labelDisplay.getMinBoundsHeight () + 10;
  }
  
  /**
  * @private
  */
  override protected function updateDisplayList (unscaledWidth:Number,
  unscaledHeight:Number): void
  {
  super.updateDisplayList (unscaledWidth, unscaledHeight);
  
  Graphics.Clear;
  
  var backgroundColor:uint;
  var drawBackground:Boolean = true;
  If (selected)
  backgroundColor = value ("selectionColor");
  ElseIf (stationary)
  backgroundColor = value ("rollOverColor");
  on the other
  {
  var alternatingColors:Array = value ("alternatingItemColors");
  
  If (alternatingColors & & alternatingColors.length > 0)
  {
  These colors translates uints
  styleManager.getColorNames (alternatingColors);
  
  backgroundColor = alternatingColors [% alternatingColors.length itemIndex];
  }
  on the other
  {
  If it's the contentBackgroundColor don't draw background. The
  skin list manages the background drawing for us.
  drawBackground = false;
  }
  }
  
  graphics.beginFill (backgroundColor, drawBackground? 1: 0);
  
  If (showsCaret)
  {
  graphics.lineStyle (1, value ("selectionColor"));
  graphics.drawRect (0.5, 0.5, 1-unscaledWidth, unscaledHeight-1);
  }
  on the other
  {
  graphics.lineStyle ();
  graphics.drawRect (0, 0, unscaledWidth, unscaledHeight);
  }
  
  graphics.endFill ();
  
  Make sure our width/height is in min/max for the label
  var childWidth:Number = unscaledWidth - 6;
  childWidth = Math.max (labelDisplay.getMinBoundsWidth (), Math.min (labelDisplay.getMaxBoundsWidth (), childWidth));
  
  var childHeight:Number = unscaledHeight - 10;
  childHeight = Math.max (labelDisplay.getMinBoundsHeight (), Math.min (labelDisplay.getMaxBoundsHeight (), childHeight));
  
  define the position and size of the label
  labelDisplay.setLayoutBoundsSize (childWidth, childHeight);
  labelDisplay.setLayoutBoundsPosition (3, 5);
  }
  
  //--------------------------------------------------------------------------
  //
  Event management
  //
  //--------------------------------------------------------------------------
  
  /**
  * @private
  To reach the mouse events.
  */
  private void addHandlers (): void
  {
  addEventListener (MouseEvent.ROLL_OVER, itemRenderer_rollOverHandler);
  addEventListener (MouseEvent.ROLL_OUT, itemRenderer_rollOutHandler);
  }
  
  /**
  * @private
  */
  private void anyButtonDown(event:MouseEvent):Boolean
  {
  var type: String = event.type;
  return event.buttonDown | (type == "middleMouseDown"). (type is "rightMouseDown");
  }
  
  /**
  * @private
  * Event handler in rolling mouse.
  */
  protected function itemRenderer_rollOverHandler(event:MouseEvent):void
  {
  If (! anyButtonDown (event))
  {
  Hung = true;
  invalidateDisplayList();
  }
  }
  
  /**
  * @private
  * Deployment handler mouse.
  */
  protected function itemRenderer_rollOutHandler(event:MouseEvent):void
  {
  Hung = false;
  invalidateDisplayList();
  }
  
  }
  
  }

  Hello

  The DefaultItemRenderer is a lightweight UIComponent that renders a background and a label. He has designed to be rendered quick and is not a subclass of DataRenderer as ItemRenderer is.

  You subclassed ItemRenderer, so you get much more then the DefaultItemRenderer gives you (layout, States, etc.).

  You must use ItemRenderer in mxml because you need the layout (of the Group).

  Mike

• Change of color of the lines in the chart

  Well, it is a stupid question, but how do I change the color of the lines in a chart?
  
  
  
  

  "spacehog" wrote in message
  News:g81g1a$EQ4$1@forums. Macromedia.com...
  > Ok this is a stupid question, but how do I change the color of the lines in a
  > line
  > chart?

  http://www.rphelan.com/2008/05/23/taking-control-of-Flex-charting-styles/

• Two styles for a native look (Flex Mobile App)?

  Hello

  is it possible to use two styles/looks for the same application, it will look native on iOS AND Android?

  Or do I have to build the same application twice to get this?

  -BB

  Check out the blog of Jason San Jose post here: http://blogs.adobe.com/jasonsj/2011/06/ios-theme-for-flex-mobile-projects-proof-of-concept .html

• Flex Modules and Styles

  I would like to load many small modules using the ModuleManager class but I noticed that the modules do not inherit the styles of the parent app.

  You can compile the style in each module to get around this, but it's obviously not ideal.

  However when you use the Module SDK Hero classes and new ModuleLoader module inherits apps parent style, incorporating policies etc. without declaring any style information in the compiled module.

  How can I make the module loaded with the ModuleManager to do the same thing?

  Thank you

  GOL

  The IModuleInfo.load () function from Flex 4 has a new parameter, moduleFactory. Make sure you pass the moduleFactory to the application, the module loading.

  -Darrell

• Menu in Flex 4 with a horizontal suckerfish style (work)

  I'm looking to create a menu in Flex 4 with a horizontal suckerfish style.

  http://www.alistapart.com/d/horizdropdowns/horizontal.htm

  Someone could give me a kick start, is it easy to do?

  Note here, the solution does not work very well

  
  

  http://forums.Adobe.com/message/2368906#2368906

  Hello

  Thought that it would be a toy little interesting, but then thought to ease the multiple levels, so no real functionality yet but display bases are there.

  I need to decide how the trigger works displaying and freeing from the submenu, for now you need the mouse backward through the 'tree' for submarines to disappear (I was more interested in the appearance of display for the time being, I'll sort the aspect "delete" once I am satisfied with the list of submenu.

  Anyway have a look at tellme what you think, good or bad

  source of http://Gumbo.flashhub.net/SimpleMenu/ included.

  David

• [ADF, JDev12.1.3] How to embellish (style) the af: menuBar?

  Hallo,

  in the homepage of my request, there is a menu bar.

  His style is similar to that I can find in a desktop application.

  I would like to know if there is some CSSs well made to beautify the menu bar and give it a style a little more closely the style of web.

  Thank you

  Federico

  Federico, Google is your friend!

  The problem is that you cannot copy just part of the skin. A defined appearance the identity of your application. It should be defined in sound together and not only at certain times.

  There are a couple of good tutorials available (again Google it) and you must use the skin editor that allows you to see what changes you make are looking in the application.

  Watch http://m.youtube.com/watch?v=QEfOpHtkXyI

  Start: Oracle ADF Skin Editor 12 c (12.1.2)

  https://blogs.Oracle.com/jdevotnharvest/entry/how_to_learn_adf_skinning

  For ux Oracle RCUI Guidelines guidelines

  And you use 12.1.3 http://www.oracle.com/webfolder/ux/middleware/alta/index.html might also interest you

  Timo

• Flex Hero - good way to change the style/color

  There must be an easy way to change the hue of the view... or more precisely the ActionBar/header at the top.

  For example, as I see on this site:

  http://Thoughtfaqtory.com/blog/2010/11/10/Adobe-Flex-Mobile-overview-part-1/

  I would like to be able to change the background colors for something else then the default value is black.  I need to create a new skin for this?

  Darren

  You can set the ActionBar chromeColor.

• Flex menubar help

  Hi all
  
  I developed a flex menu system for my portal but noticed something strange, when I click it. After it loads first, I am able to see the drop down menu, but when you click a second time the context menu are displayed above the menu instead of below. don't know what im doing wrong here?
  
  
  Thank you
  
  REDA

  Hi all

  I developed a flex menu system for my portal but noticed something strange, when I click it. After it loads first, I am able to see the drop down menu, but when you click a second time the context menu are displayed above the menu instead of below. don't know what im doing wrong here?

  Thank you

  REDA