我正在 flex 中开发一个仪表板应用程序,它是 flex dashboard 的副本.这里有多个显示不同内容的面板。我想要的是每当用户点击任何特定面板时说例如“年收入”然后我只想突出显示该特定面板。
所以基本上所有处于初始状态的面板都将处于“非事件”状态,但只要用户点击它,它就会变为事件状态,从而为用户提供更好的体验,让他们知道他正在使用“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'));
}
So my question is, is it the right way of fulfilling my requirement ?
How can i access the css properties of the hostcomponent in the skin class ?
Here in my main.mxml i have defined the style file. So if style file contains a style class named "panelOn" and if i give that class to the panel so will it be able to access the styles associated with that class ?
请不要建议使用面板的 setStyle 方法放置每个 css 属性,因为那样使用 css 文件对我来说没有任何优势,而且 css 样式也很糟糕。
如果还有其他更好的解决方案,请分享您的意见。我希望我很清楚。任何形式的帮助将不胜感激。
最佳答案
满足您要求的最佳方式 - 使用 Spark 状态。面板组件和 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>
Pod 组件:
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
关于css - Flex 在运行时更改 css 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15138072/