私が尋ねようとしていることは単純すぎるかもしれませんが、私の問題に対する解決策を見つけることができませんでした.
私はAIRアプリを開発しています。Spark コンポーネントのウィンドウ アプリケーション用のカスタム スキンがあります。そのスキンでは、windowedapplication の背景を設定するビットマップ イメージを追加しました。
また、「ヘッダー」と呼ばれるカスタム コンポーネントがあります。それは、いくつかのテーブル ヘッダーを描画することです。
<ui:header width="100%" and height="40"\>ここで、ビットマップイメージの直後にスキンのようにヘッダーを追加すると、ヘッダーが想定どおりに表示されます。しかし、windowedapplication 内にヘッダーを配置すると、ビットマップ画像が削除されない限り表示されないビットマップ画像の下に表示されます。
ビットマップイメージとヘッダーコンポーネントの深さを適切な順序で変更することでこの問題を解決しようとしましたが、これはうまくいきません。
アイデアがあれば、私を助けてください。ありがとう
ここにコードのビットがあります
`
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" skinClass="ui.uiskin"
height = "728" width="910"
xmlns:ui="ui.*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<ui:header x="0" y="{.0258*height}" depth="0"
height="{0.0774*height}" width="100%"/>
</s:WindowedApplication>
`
ウイスキンは
`
<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" xmlns:ui="com.youspin.components.ui.*"
depth="-10">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.WindowedApplication")]
</fx:Metadata>
<fx:Script>
<![CDATA[
]]>
</fx:Script>
<!-- states -->
<s:states>
<s:State name="disabledAndInactive" />
<s:State name="normalAndInactive" />
<s:State name="disabled" />
<s:State name="normal" />
</s:states>
<s:BitmapImage source="@Embed('../../images/ui/background.png')" depth="-10"/>
<s:TitleBar left="0" right="0" top="1"
height="{0.0258*height}"
skinClass="titleSkin"/>
<ui:header x="0" y="{.0258*height}" depth="0"
height="{0.0774*height}" width="100%"/>
</s:Skin>
`
そしてヘッダーは
`
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%"
>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Rect width="100%" height="{.04*height}">
<s:fill>
<s:SolidColor color="black"/>
</s:fill>
</s:Rect>
<s:Rect width="100%" height="100%"
left="0" top="2"
alpha=".2"
>
<s:fill>
<s:SolidColor color="black"/>
</s:fill>
</s:Rect>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%"
top="2" left="0"
id="headingsGroup"
>
<mx:Image source="@Embed('../../images/header/logo.png')"
width="{0.2*headingsGroup.width}"
left="{0.015*headingsGroup.width}" top="{0.04*headingsGroup.height}"/>
<!-- left line drop -->
<s:Rect left="{.25*headingsGroup.width}" top="0"
width="2" height="{.23*headingsGroup.height}">
<s:fill>
<s:SolidColor color="black"/>
</s:fill>
</s:Rect>
<!-- middle line drop -->
<s:Rect left="{.50*headingsGroup.width}" top="0"
width="2" height="{.23*headingsGroup.height}">
<s:fill>
<s:SolidColor color="black"/>
</s:fill>
</s:Rect>
<!-- side line drop -->
<s:Rect left="{.75*headingsGroup.width}" top="0"
width="2" height="{.23*headingsGroup.height}">
<s:fill>
<s:SolidColor color="black"/>
</s:fill>
</s:Rect>
<s:Label text="artist"
top="{0.06*headingsGroup.height}"
horizontalCenter="{-0.125*headingsGroup.width}"
styleName="balonez"/>
<s:Label text="song"
top="{0.06*headingsGroup.height}"
horizontalCenter="{0.125*headingsGroup.width}"
styleName="balonez"/>
<s:Label text="album"
top="{0.06*headingsGroup.height}"
horizontalCenter="{0.375*headingsGroup.width}"
styleName="balonez"/>
<!-- bottom line -->
<s:Rect left="{.25*headingsGroup.width}" top="{.22*headingsGroup.height}"
width="{.75*headingsGroup.width}" height="2">
<s:fill>
<s:SolidColor color="black"/>
</s:fill>
</s:Rect>
</s:Group>
<fx:Style>
@font-face {
src:url("../../fonts/balonez fantasia.ttf");
fontFamily: myFontFamily;
advancedAntiAliasing:true;
}
.balonez{
font-family:myFontFamily;
font-size:25;
}
</fx:Style>
</s:Group>
`
コードの一部はここには示されていませんが、上記で私が何をしようとしているのかがわかると思います。
私がやろうとしていたのは、ウィンドウ化されたアプリケーションにカスタムスキン、つまり uiskin があることです。また、「ヘッダー」と呼ばれる別のコンポーネントもあります。uiskin.mxml 内に、windowedapplication の背景として使用するビットマップ画像を追加しました。そして、windowedapplication 内にヘッダーを追加しました。これを行うと、ヘッダーが画像の後ろに表示されます。
今のところ、私が行ったことは、ビットマップイメージの後に uiskin 内にヘッダーを追加することです。これで、ヘッダーがビットマップ画像の上に表示されます。しかし、実際にはヘッダーをカスタムスキン内ではなく、windowedapplication 内に配置したいと考えています。これを行う方法はありますか。