Flex在运行时更改css属性
我正在开发一个用于flex的仪表板应用程序,它是flex dashboard的复制品。这里有多个显示不同内容的面板。我想要的是每当用户点击任何特定的面板说例如“年收入”,那么我只是想突出特定的面板。Flex在运行时更改css属性
所以基本上在初始状态下所有的面板将是“不活动”状态,但只要用户点击它,它会变得活跃知道提供用户更好的体验,他正在与“XYZ”面板其余的将进入非活动状态。
所以我的意思是“活动”和“非活动”状态是,在任何HTML页面上,当我们将鼠标悬停在任何超链接上时,它变为“蓝色”(例如),所以我将其称为活动和非活动状态。
现在,谈论面板。
该面板具有定义其布局的外壳。为了满足我的要求,我尝试的是将“css”应用于面板。现在,我已经以这种方式应用CSS现在
public class Pod extends Panel
{
...properties
public function init():void
{
setStyle('styleName',"panelOff");
}
}
,在这个阶层本身我正在处理面板上的“点击”。因此,在单击事件我在做什么基本上是,
setStyle('styleName',"panelOn");
因为,板由具有皮肤上我需要改变包含在皮肤中的组件的属性。所以我必须能够访问皮肤中的css属性。
在皮肤文件我正在做这样的事情
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
setStyle('border-alpha', hostComponent.getStyle('border-alpha'));
}
所以我的问题是,是否满足我的要求的正确方法吗?
如何访问皮肤 类中的主机组件的css属性?
在我的main.mxml中,我定义了样式文件。因此,如果 样式文件包含一个名为“panelOn”的样式类,并且如果我将该类 类给予面板,那么它将能够访问与该类关联的样式 ?
请不要使用忠告面板的使用setStyle方法,因为这样就没有使用CSS文件给我的优势,也将是不错的CSS样式,把每一个CSS属性。
如果还有其他更好的解决方案,请分享您的观点。我希望我很清楚。任何帮助将不胜感激。
您的要求的最佳途径 - 使用火花状态。面板组件和Mxml皮肤有两种状态:活动和不活动(或新状态)。面板组件具有设置当前皮肤状态的逻辑。如果你想使用css保持属性,每个状态都会为皮肤应用自己的样式名称。
主要应用:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
xmlns:classes="classes.*">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace classes "classes.*";
classes|Pod
{
skinClass : ClassReference("skins.PodSkin");
}
.active
{
backgroundColor: #ff0000;
}
.inactive
{
backgroundColor: #00ff00;
}
</fx:Style>
<classes:Pod x="800" width="300" height="300" />
</s:Application>
吊舱组件:
package classes
{
import flash.events.MouseEvent;
import spark.components.Panel;
public class Pod extends Panel
{
private var _isActive:Boolean = false;
public function Pod()
{
super();
}
override protected function childrenCreated():void
{
super.childrenCreated();
addEventListener(MouseEvent.CLICK, onClickHandler, false, 0, true);
}
protected function onClickHandler(event:MouseEvent):void
{
_isActive = !_isActive;
invalidateSkinState();
}
override protected function getCurrentSkinState():String
{
if (_isActive) return "active";
return "inactive";
}
}
}
而且PodSkin MXML皮肤的一部分,您可以设置每个状态样式名:
<s:SparkSkin
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
blendMode="normal" mouseEnabled="false"
styleName.active="active" styleName.inactive="inactive"
minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
<s:states>
<s:State name="normal" />
<s:State name="active" />
<s:State name="inactive" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" stateGroups="withControls" />
<s:State name="disabledWithControlBar" stateGroups="withControls" />
</s:states>
享受的Flex
嘿谢谢你的回复。在我的mxml文件中,我不是直接创建Pod类的任何实例(我没有为此编写标记)。我以编程方式创建所需的pod,并且在mxml中有一个组件是视图堆栈。所以如果我遵循你的方式,pod组件将能够找出我们在
@llya Z:非常感谢.. :) – ankurtr 2013-03-01 07:45:34
是的,你是对的,我编辑答案。如何创建一个组件并不重要 - 使用mxml或as3。您应该在应用程序中加载的主应用程序类或css文件(最佳方式)中声明样式。 – 2013-03-01 07:50:09
这有点难以理解低 - 你问如何访问存储在主类中的样式信息?或者如何使用类选择器? – ethrbunny 2013-02-28 14:46:55