如何用mxml继承状态？ [英] How to inherit states with mxml?
问题描述
我有下面的面板组件叫做AdvancedPanel with controlBarContent：
<！ - AdvancedPanel.mxml - >
< s：Panel>
< s：州>
< s：controlBarContent>
< s：Button
includeIn =edit
label =在编辑中显示
/>
click ={currentState ='edit'}
/>
< / s：controlBarContent>
< / s：面板>
我创建了第二个面板，名为CustomAdvancedPanel，基于AdvancedPanel，因为我不想重新声明controlBarContent
<！ - CustomAdvancedPanel.mxml - >
< local：AdvancedPanel>
< s：Button includeIn =editlabel =Extra edit button/>
< / local：AdvancedPanel>
这是行不通的，因为CustomAdvancedPanel中的'edit'状态没有根据编译器。我必须在CustomAdvancedPanel.mxml中重新声明编辑状态如下：
<！ - 带重新编辑状态的CustomAdvancedPanel.mxml - >
< local：AdvancedPanel>
< local：states>
< s：Button includeIn =editlabel =Extra edit button/>
< / local：AdvancedPanel>
在应用程序组件中使用CustomAdvancedPanel显示一个带有Go to edit按钮的空面板。但是，当我点击它时，额外的编辑按钮变得可见，但在controlBar里面的在编辑中显示按钮不会。
当CustomAdvancedPanel为空，没有重新宣布的国家和额外的编辑按钮面板工程就好了。
我认为这是因为在AdvancedPanel中声明的状态对象不是CustomAdvancedPanel相同，所以国家是不同的，即使它们有相同的名字。然而。我无法在CustomAdvancedPanel中使用AdvancedPanel的状态，而没有（重新）在mxml中声明它们。
有没有办法实现这种状态重用？或者有没有更好的方法来获得相同的结果？
我建议你使用Spark的皮肤架构来获得你的目标。因为皮肤状态是在主机组件中继承的，所以你可以把所有的逻辑放在OOP的方式。但皮肤仍然包含重复的代码:(无论如何，它是比所有组件的重复代码更好。
所以我们的AdvancedPanel将如下所示：
包
{
导入flash.events.MouseEvent;
导入spark.components.supportClasses .ButtonBase;
进口spark.components.supportClasses.SkinnableComponent;
[SkinState（edit）]
[SkinState（normal）]
public class AdvancedPanel扩展SkinnableComponent
{
[SkinPart（required =true）]
public var goToEditButton：ButtonBase;
[SkinPart（required =true）]
public var showInEditButton：ButtonBase;
private var editMode：Boolean;
覆盖protected function getCurrentSkinState（）：String
{
return editMode？ ：normal;
}
覆盖保护函数partAdded（partName：Stri ng，instance：Object）：void
{
super.partAdded（partName，instance）;
if（instance == goToEditButton）
goToEditButton.addEventListener（MouseEvent.CLICK，onGoToEditButtonClick）;
保护函数partRemoved（partName：String，instance：Object）：void
{
super.partRemoved（partName，instance）;
if（instance == goToEditButton）
goToEditButton.removeEventListener（MouseEvent.CLICK，onGoToEditButtonClick）;
private function onGoToEditButtonClick（event：MouseEvent）：void
{
editMode = true;
invalidateSkinState（）;
对于CustomAdvancedPanel： p>
包
{
import spark.components.supportClasses.ButtonBase;
$ b $ public class CustomAdvancedPanel extends AdvancedPanel
{SkinPart（required =true）]
public var extraEditButton：ButtonBase;
$ b当然你可以从Panel类继承，示例代码更加简单。
和皮肤：
< ？xml version =1.0encoding =utf-8？>
<！ - AdvancedPanelSkin.mxml - >
xmlns：s =library：//ns.adobe.com/flex/spark
xmlns：mx =library：//ns.adobe.com/flex/mx>
< fx：元数据>
[HostComponent（AdvancedPanel）]
< / fx：Metadata>
< s：州>
< s：面板left =0right =0top =0bottom =0>
< s：controlBarContent>
< s：Button id =showInEditButtonlabel =在编辑中显示includeIn =edit/>
< / s：面板>
< / s：Skin>
<？xml version =1.0encoding =utf-8？>
<！ - CustomAdvancedPanelSkin.mxml - >
xmlns：s =library：//ns.adobe.com/flex/spark
xmlns：mx =library：//ns.adobe.com/flex/mx>
< fx：Metadata> [HostComponent（CustomAdvancedPanel）]< / fx：Metadata>
< s：州>
< s：面板left =0right =0top =0bottom =0>
< s：Button includeIn =editlabel =Extra edit buttonid =extraEditButton/>
< s：controlBarContent>
< s：Button id =showInEditButtonlabel =在编辑中显示includeIn =edit/>
< / s：面板>
< / s：Skin>
I have the following panel component called AdvancedPanel with controlBarContent:
<!-- AdvancedPanel.mxml -->
<s:Panel>
<s:states>
<s:State name="normal" />
<s:State name="edit" />
</s:states>
<s:controlBarContent>
<s:Button
includeIn="edit"
label="Show in edit"
/>
<s:Button
label="Go to edit"
click="{currentState='edit'}"
/>
</s:controlBarContent>
</s:Panel>
I created a second panel, called CustomAdvancedPanel based on the AdvancedPanel since I don't want to redeclare the controlBarContent
<!-- CustomAdvancedPanel.mxml -->
<local:AdvancedPanel>
<s:Button includeIn="edit" label="Extra edit button" />
</local:AdvancedPanel>
This doesn't work, because the 'edit' state in CustomAdvancedPanel isn't declared according to the compiler. I have to redeclare the edit state in CustomAdvancedPanel.mxml as follows:
<!-- CustomAdvancedPanel.mxml with edit state redeclared -->
<local:AdvancedPanel>
<local:states>
<s:State name="normal" />
<s:State name="edit" />
</local:states>
<s:Button includeIn="edit" label="Extra edit button" />
</local:AdvancedPanel>
Using the CustomAdvancedPanel inside an application component shows an empty panel with the "Go to edit" button. But when I click it, the "Extra edit button" becomes visible, but the "Show in edit" button inside the controlBar doesn't.
When the CustomAdvancedPanel is empty, without redeclared states and "Extra edit button" the panel works just fine.
I think it is because the State object declared in AdvancedPanel isn't the same as CustomAdvancedPanel, so the state is different, even if they have the same name. However. I can't use the states of AdvancedPanel inside CustomAdvancedPanel without (re)declare them in mxml.
Is there any way to achieve this kind of state-reuse? Or is there a better way to obtain the same result?
解决方案 I suggest you to use Spark's skinning architecture to obtain your goals. Because skin states are inherited in host component you can place all the logic in OOP way. But skins will still contain duplicate code :( Anyway it is better than duplicate code of all the component.
So our AdvancedPanel will look like the following:
package
{
import flash.events.MouseEvent;
import spark.components.supportClasses.ButtonBase;
import spark.components.supportClasses.SkinnableComponent;
[SkinState("edit")]
[SkinState("normal")]
public class AdvancedPanel extends SkinnableComponent
{
[SkinPart(required="true")]
public var goToEditButton:ButtonBase;
[SkinPart(required="true")]
public var showInEditButton:ButtonBase;
private var editMode:Boolean;
override protected function getCurrentSkinState():String
{
return editMode ? "edit" : "normal";
}
override protected function partAdded(partName:String, instance:Object):void
{
super.partAdded(partName, instance);
if (instance == goToEditButton)
goToEditButton.addEventListener(MouseEvent.CLICK, onGoToEditButtonClick);
}
override protected function partRemoved(partName:String, instance:Object):void
{
super.partRemoved(partName, instance);
if (instance == goToEditButton)
goToEditButton.removeEventListener(MouseEvent.CLICK, onGoToEditButtonClick);
}
private function onGoToEditButtonClick(event:MouseEvent):void
{
editMode = true;
invalidateSkinState();
}
}
}
And for CustomAdvancedPanel:
package
{
import spark.components.supportClasses.ButtonBase;
public class CustomAdvancedPanel extends AdvancedPanel
{
[SkinPart(required="true")]
public var extraEditButton:ButtonBase;
}
}
Of course you can inherit from Panel class but I made sample code more simple.
And the skins:
<?xml version="1.0" encoding="utf-8"?>
<!-- AdvancedPanelSkin.mxml -->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Metadata>
[HostComponent("AdvancedPanel")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="edit" />
</s:states>
<s:Panel left="0" right="0" top="0" bottom="0">
<s:controlBarContent>
<s:Button id="showInEditButton" label="Show in edit" includeIn="edit" />
<s:Button id="goToEditButton" label="Go to edit" />
</s:controlBarContent>
</s:Panel>
</s:Skin>
And:
<?xml version="1.0" encoding="utf-8"?>
<!-- CustomAdvancedPanelSkin.mxml -->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Metadata>[HostComponent("CustomAdvancedPanel")]</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="edit" />
</s:states>
<s:Panel left="0" right="0" top="0" bottom="0">
<s:Button includeIn="edit" label="Extra edit button" id="extraEditButton" />
<s:controlBarContent>
<s:Button id="showInEditButton" label="Show in edit" includeIn="edit" />
<s:Button id="goToEditButton" label="Go to edit" />
</s:controlBarContent>
</s:Panel>
</s:Skin>
这篇关于如何用mxml继承状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
