Vorgehensweise + View ?

[Omega Psi]

So viele "Blank Lines"? Ich schaue mir das nachher mal an.

[Nico B.]

Ja+ da häuft sich bei mir gerne mal was an zwischendurch...

[Omega Psi]

@namespace t "fs.examples.*";

t|Twitterific {
    skinClass: ClassReference("fs.examples.skins.TwitterificSkin");
}

package fs.examples
{
    import flash.events.MouseEvent;

    import mx.events.FlexEvent;
    import mx.states.State;

    import spark.components.Panel;
    import spark.components.supportClasses.SkinnableComponent;

    [SkinState("master")]

    [SkinState("detail")]

    public class Twitterific extends SkinnableComponent
    {

        //---------------------------------------------------------------------
        //
        //          Skin Parts
        //
        //---------------------------------------------------------------------

        [SkinPart(required="true")]
        public var detailPanel:Panel;

        [SkinPart(required="true")]
        public var masterPanel:Panel;

        //---------------------------------------------------------------------
        //
        //          Properties
        //
        //---------------------------------------------------------------------

        override public function set currentState(value:String):void
        {
            if (currentState === value) return;

            super.currentState = value;
            invalidateSkinState();
        }

        //---------------------------------------------------------------------
        //
        //          Constructor
        //
        //---------------------------------------------------------------------

        public function Twitterific()
        {
            addEventListener(FlexEvent.PREINITIALIZE, preinitializeHandler)
        }

        //---------------------------------------------------------------------
        //
        //          Event Handler
        //
        //---------------------------------------------------------------------

        private function panel_clickHandler(event:MouseEvent):void
        {
            const oldTarget:Panel = Panel(event.currentTarget);
            const newTarget:Panel = oldTarget == detailPanel ? masterPanel : detailPanel;

            oldTarget.removeEventListener(MouseEvent.CLICK, panel_clickHandler);
            newTarget.addEventListener(MouseEvent.CLICK, panel_clickHandler);

            currentState = currentState == "master" ? "detail" : "master";
        }

        private function preinitializeHandler(event:FlexEvent):void
        {
            states = [new State({name:"detail"}), new State({name:"master"})];
            currentState = "master";
        }

        //---------------------------------------------------------------------
        //
        //          Overridden Methods
        //
        //---------------------------------------------------------------------

        override protected function getCurrentSkinState():String
        {
            return currentState;
        }

        override protected function partAdded(partName:String, instance:Object):void
        {
            super.partAdded(partName, instance);

            if (instance == detailPanel)
            {
                detailPanel.title = "Detail";
            }

            if (instance == masterPanel)
            {
                masterPanel.addEventListener(MouseEvent.CLICK, panel_clickHandler);
                masterPanel.title = "Master";
            }
        }

        override protected function partRemoved(partName:String, instance:Object):void
        {
            super.partRemoved(partName, instance);

            if (instance == detailPanel || instance == masterPanel)
            {
                const panel:Panel = currentState == "master" ? masterPanel : detailPanel;
                panel.removeEventListener(MouseEvent.CLICK, panel_clickHandler);
            }
        }
    }
}

<?xml version="1.0"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
        <![CDATA[
        import mx.graphics.SolidColor;

        protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            contentGroup.columnWidth = unscaledWidth;
        }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="master"/>
        <s:State name="detail"/>
    </s:states>

    <s:transitions>
        <s:Transition fromState="master" toState="detail">
            <s:Move target="{contentGroup}"/>
        </s:Transition>
        <s:Transition fromState="detail" toState="master">
            <s:Move target="{contentGroup}"/>
        </s:Transition>
    </s:transitions>

    <s:Group id="contents" bottom="0" clipAndEnableScrolling="true" left="0" right="0" top="0">
        <s:HGroup id="contentGroup" bottom="0" gap="0" top="0" variableColumnWidth="false" verticalAlign="justify"
                  x.detail="{-width}">
            <s:Panel id="masterPanel"/>
            <s:Panel id="detailPanel"/>
        </s:HGroup>
    </s:Group>
</s:SparkSkin>

So als Beispiel...

[Nico B.]

Kannst Du dazu noch 2-3 erklärende Sätze schreiben? SIeht sehr interessant aus, aber ic verstehe nicht zu 100% den Zusammenhang. ;/

[Omega Psi]

Das ist eine einfache SkinnableComponent, die zwei Panels aggregiert. Es gibt ein Panel, dass den Master View darstellt (die Liste bei dir) und ein Detail Panel...

Sollte nur eine fixe Beispiel-Implementierung sein...

[Nico B.]

Alles klar - danke dafür. Wieder was gelernt, auch wenn ich es jetzt, layoutmäßig, wohl anders umsetzen werde. (Meine erste Idee war eher Benutzerunfreundlich in der Praxis^^)