0

当我不为 ViewNavigatorApplication 应用 skinClass 时，ViewMenuItems 工作正常，但是当我将自定义皮肤应用于 ViewNavigator 时，ViewMenuItems 不会出现。

我的 Main.mxml 文件包含

    <?xml version="1.0" encoding="utf-8"?>
    <s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"                                  xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.MainHomeView"                                skinClass="skins.CustomApplicationSkin">
        <fx:Declarations>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
            </fx:Declarations>
    </s:ViewNavigatorApplication>

CustomApplicationSkin 的代码是

<?xml version="1.0" encoding="utf-8"?>
<s:Skin name="CustomApplicationSkin"
            xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                               >

    <fx:Metadata>
                <![CDATA[ 
                [HostComponent("Main")]
                ]]>
            </fx:Metadata> 

    <s:states>
                <s:State name="normal" />
                 <s:State name="disabled" />
             </s:states>

    <s:BitmapImage width="100%" height="100%" source="@Embed('/assets/background.jpg')"/>

    <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />

    <s:ViewNavigator id="navigator" width="100%" height="100%" />

</s:Skin>

MainHomeView.mxml 的代码

<?xml version="1.0" encoding="utf-8"?>
<!-- components\mobile\views\ViewMenuHome.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        title="Home">

    <fx:Script>
        <![CDATA[
        // The event listener for the click event.
            private function itemClickInfo(event:MouseEvent):void {
                switch (event.currentTarget.label) { 
                    case "Add" : 
                        myTA.text = "Add selected"; 
                        break; 
                    case "Cancel" : 
                        myTA.text = "Cancel selected"; 
                        break; 
                    case "Delete" : 
                        myTA.text = "Delete selected"; 
                        break; 
                    case "Edit" : 
                        myTA.text = "Edit selected"; 
                    break; 
                case "Search" : 
                    myTA.text = "Search selected"; 
                        break; 
                default : 
                    myTA.text = "Error"; 
                }                
            }
        ]]>
    </fx:Script>

    <s:viewMenuItems>
        <s:ViewMenuItem label="Add" click="itemClickInfo(event);" />
        <s:ViewMenuItem label="Cancel" click="itemClickInfo(event);"/>
        <s:ViewMenuItem label="Delete" click="itemClickInfo(event);"/>
        <s:ViewMenuItem label="Edit" click="itemClickInfo(event);"/>
        <s:ViewMenuItem label="Search" click="itemClickInfo(event);"/>
    </s:viewMenuItems>

    <s:VGroup paddingTop="10" paddingLeft="10">
        <s:TextArea id="myTA" text="Select a menu item"/>
        <s:Button label="Open Menu" 
              click="mx.core.FlexGlobals.topLevelApplication.viewMenuOpen=true;"/>
        <s:Button label="Close Menu" 
              click="mx.core.FlexGlobals.topLevelApplication.viewMenuOpen=false;"/>
    </s:VGroup>
</s:View>

请协助。

4

1 回答 1

0

有两个问题：

  1. 您的皮肤不包括菜单（ViewMenu 对象）
  2. 该类ViewNavigatorApplicationSkin是用 Actionscript 编写的并扩展了MobileSkin该类，而您的皮肤是用 MXML 编写的并扩展了Skin该类。

第一个问题很容易解决：我为您的皮肤添加了一个“初始化”事件处理程序，其中我以与默认移动皮肤 ( )ViewMenu的构造函数中相同的方式实例化对象。ViewNavigatorApplicationSkin

但是，在这样做之后，我在尝试打开视图菜单时在运行时遇到错误。此错误是上述第二个问题的结果：具体而言，代码中的代码ViewNavigatorApplication正在尝试使用该addChild()方法添加菜单，但是，由于您的自定义皮肤扩展了非移动Skin类（本质上是一个 Spark Group），它会抛出一个错误说您不能使用该addChild()方法，而应该使用该方法addElement()。此错误是您的皮肤基于非移动皮肤类的直接结果（宿主组件 ,ViewNavigatorApplication不希望出现这种情况）。

我建议您通过扩展原始ViewNavigatorApplicationSkin类在 Actionscript 中创建您的皮肤。看来您所做的只是添加背景，因此类似下面的代码可能会起作用。但是，问题在于，在您的皮肤中ViewNavigator，背景图像的宽度/高度均为 100%。所以导航器完全覆盖了背景。在下面的示例中，我为导航器提供了一些透明度以让背景显示出来。我假设您不希望这样，但在您当前的设计中，这是查看图像的唯一方法。

package
{
    import spark.components.Image;
    import spark.skins.mobile.ViewNavigatorApplicationSkin;

    public class MyViewNavAppSkin extends ViewNavigatorApplicationSkin
    {
        public function MyViewNavAppSkin()
        {
            super();
        }

        [Embed('Android_Robot_100.png')]
        private var embeddedImage:Class;

        private var background:Image;

        override protected function createChildren():void
        {
            super.createChildren();
            background = new Image();
            background.source = new embeddedImage();
            addChildAt(background, 0);
            navigator.alpha=.5;
        }

        override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
        {
            background.setLayoutBoundsSize(unscaledWidth, unscaledHeight);
            background.setLayoutBoundsPosition(0,0);
            super.layoutContents(unscaledWidth, unscaledHeight);
        }
    }
}
于 2013-05-01T17:32:30.703 回答