使用Flex mxml文件繼承 - 附帶屏幕截圖

Question

在Flex移動應用程序中，我有5 View s，通過5個不同的社交網絡（包括Google+和Facebook）處理OAuth登錄。的View s的正通過菜單選擇的如下所示：

的文件名是FB.mxml，GG.mxml，MR.mxml，OK.mxml，VK.mxml和它們的源代碼看起來非常類似：

<?xml version="1.0" encoding="utf-8"?> 
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     viewActivate="loadInfo(event)" 
     viewDeactivate="closeSWV(event)" 
     title="Facebook.com"> 
.... 
      private function closeSWV(event:Event=null):void { 
       _busy.visible = _busy.includeInLayout = false; 
       _reload.visible = _reload.includeInLayout = true; 

       stage.removeEventListener(Event.RESIZE, resizeSWV); 
       if (! _swv) 
        return; 
       _swv.removeEventListener(Event.COMPLETE, extractAccessToken); 
       _swv.removeEventListener(LocationChangeEvent.LOCATION_CHANGE, extractAccessToken); 
       _swv.removeEventListener(IOErrorEvent.IO_ERROR, closeSWV); 
       _swv.removeEventListener(ErrorEvent.ERROR, closeSWV); 
       _swv.dispose(); 
       _swv = null; 
      }   

      private function resizeSWV(event:Event=null):void { 
       if (! _swv) 
        return; 
       // align to the right-bottom corner 
       _swv.viewPort = new Rectangle(stage.stageWidth - Preferans.SCALE * width, 
        stage.stageHeight - Preferans.SCALE * height, 
        Preferans.SCALE * width, 
        Preferans.SCALE * height); 
      } 
.... 
     <s:VGroup> 
      <s:Label id="_first" fontWeight="bold" text="Your name:" /> 
      <s:Label id="_gender" fontWeight="bold" text="Gender:" /> 
      <s:Label id="_city" fontWeight="bold" text="City:" /> 
     </s:VGroup> 

    <s:Button id="_play" 
       label="Play" 
       click="startGame(event)" 
       includeInLayout="false" 
       visible="false" /> 
</s:View> 

我的問題是：上面列出的5個MXML文件有許多相似的方法和變量和UI元素，只有幾個不同的方法和變量。

我試着爲它們多次引入一個「基類」，並且總是放棄它，因爲它對於mxml文件（與純粹的AS3類相比）並不簡單。

有沒有人有一個想法，如何解決這個問題？

Answer 1

您可以定義一個抽象類來擴展要在列表的每一行中使用的UI組件。在你的情況下，它將延伸View。

package your.package{ 
    public class SocialAccountView extends View{ 

     // in this class you can add the generic methods 
     // that you want the view to have 

    } 
} 

後，在mxml文件，您可以使用您爲主要類型，而不是View

<your.package:SocialAccountView 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    viewActivate="loadInfo(event)" 
    viewDeactivate="closeSWV(event)" 
    title="Facebook.com"> 

</your.package:SocialAccountView> 

有了這個創建的類，你知道，在列表中的所有項目都是這種類型的，並擁有父類的方法。您甚至可以覆蓋每個視圖中的方法。

關於UI組件，您可以使用的最大抽象級別（我知道）是構建一個額外的組件並在所有視圖中使用它。喜歡的東西...

Labels.mxml

<s:VGroup> 
     <s:Label id="_first" fontWeight="bold" text="Your name:" /> 
     <s:Label id="_gender" fontWeight="bold" text="Gender:" /> 
     <s:Label id="_city" fontWeight="bold" text="City:" /> 
    </s:VGroup> 

，然後用它在每個組件像

<your.package:Labels 
       id="labelsComponent"/> 

希望這有助於。