如何構建共享多個組件的多個Cairngorm MVC項目？

Question

我最近完成了Flex中自定義報告UI的項目。現在，我的任務是創建一個基本上是原始UI「精簡版」的新應用程序。它將只包含原始應用程序中的一些選項。此外，它需要是一個單獨的應用程序。

我不想重複我的代碼，所以我打算將一堆類從原始應用程序移動到可由這兩個應用程序共享的新庫中。但是，我試圖弄清楚如何在我的MVC環境中進行這項工作。

例如，我有一個Accordion組件，允許用戶過濾多個項目。每個Accordion子項都是具有兩個列表的自定義組件的實例（一個用於可供選擇的實體，另一個用於用戶已選擇的實體）。每個子組件具有綁定到調用Cairngorm事件的模型和函數的屬性。

下面是一個簡單的例子：

FiltersAccordion.mxml: 
<?xml version="1.0" encoding="utf-8"?> 
<mx:Accordion xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:local="*"> 
    <mx:Script> 
     <![CDATA[ 
      import model.ModelLocator; 

      [Bindable] 
      private var __model:ModelLocator = ModelLocator.getInstance(); 
     ]]> 
    </mx:Script> 

    <local:GenreFilter availableGenres="{__model.availableGenres}" 
     selectedGenres="{__model.selectedGenres}" /> 

    <local:ArtistFilter availableArtists="{__model.availableArtists}" 
     selectedArtists="{__model.selectedArtists}" /> 

    <local:LabelFilter availableLabels="{__model.availableLabels}" 
     selectedLabels="{__model.selectedLabels}" /> 
</mx:Accordion> 


GenreFilter.mxml: 

<?xml version="1.0" encoding="utf-8"?> 
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"> 
    <mx:Script> 
     <![CDATA[ 
      import control.events.AddGenresEvent; 
      import control.events.RemoveGenresEvent; 

      import model.ModelLocator; 

      [Bindable] 
      private var __model:ModelLocator = ModelLocator.getInstance(); 

      [Bindable] 
      public var availableGenres:ArrayCollection; 

      [Bindable] 
      public var selectedGenres:ArrayCollection; 

      private function addGenresButton_clickHandler():void 
      { 
       var event:AddGenresEvent = new AddGenresEvent(); 

       event.availableGenres = availableGenres; 

       event.selectedGenres = selectedGenres; 

       event.itemsToAdd = availableGenresList.selectedItems; 

       event.dispatch(); 
      } 

      protected function removeGenresButton_clickHandler():void 
      { 
       var event:RemoveGenresEvent = new RemoveGenresEvent(); 

       event.availableGenres = availableGenres; 

       event.selectedGenres = selectedGenres; 

       event.itemsToRemove = selectedGenresList.selectedItems; 

       event.dispatch(); 
      } 

     ]]> 
    </mx:Script> 

    <mx:List id="availableGenresList" dataProvider="{availableGenres}" /> 

    <mx:VBox> 
     <mx:Button id="addButton" icon="{rightArrowIcon}" width="22" 
      height="22" click="addGenresButton_clickHandler();" /> 

     <mx:Button id="removeButton" icon="{leftArrowIcon}" width="22" 
      height="22" click="removeGenresButton_clickHandler();" /> 
    </mx:VBox> 

    <mx:List id="selectedGenresList" dataProvider="{selectedGenres}" 
     width="100%" height="100%" allowMultipleSelection="true" /> 
</mx:HBox> 

ArtistFilter.mxml和LabelFilter.mxml是幾乎相同的設計GenreFilter.mxml，而是用自己的具體活動。

那麼我應該怎麼做？將我的模型移動到共享庫是沒有意義的。我基本上只想在庫中創建View組件。我完全擺脫了我的搖桿嗎？還是什麼？

Answer 1

這是Cairngorm的一大缺陷 - 您的觀點與您的模型相關聯。也就是說，你可以通過使你想要重用的組件更加通用和封裝，來減輕很多痛苦。然後，擴展它們以將它們與應用程序的其餘部分相關聯。

所以，你的第一個組件就變成了：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Accordion xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:local="*"> 
    <mx:Script> 
     <![CDATA[ 
      [Bindable] 
      public var availableGenres:ArrayCollection; 

      [Bindable] 
      public var availableArtists:ArrayCollection; 

      [Bindable] 
      public var availableLabels:ArrayCollection; 

      [Bindable] 
      public var selectedGenres:ArrayCollection; 

      [Bindable] 
      public var selectedArtists:ArrayCollection; 

      [Bindable] 
      public var selectedLabels:ArrayCollection; 
     ]]> 
    </mx:Script> 

    <local:GenreFilter availableGenres="{availableGenres}" 
     selectedGenres="{selectedGenres}" /> 

    <local:ArtistFilter availableArtists="{availableArtists}" 
     selectedArtists="{selectedArtists}" /> 

    <local:LabelFilter availableLabels="{availableLabels}" 
     selectedLabels="{selectedLabels}" /> 
</mx:Accordion> 

然後，在每個應用程序做到這一點（但具有不同的型號/事件）。

<library:SpecialAccordion ... 
    availableGenres="{_model.availableGenres}" 
    availableArtists="{_model.availableArtists}" 
    ... etc ... 
    > 

    <mx:Script> 
     <![CDATA[ 
      import model.ModelLocator; 

      [Bindable] 
      private var __model:ModelLocator = ModelLocator.getInstance(); 
     ]]> 
    </mx:Script> 

</library:SpecialAccordion> 

這有道理嗎？這是「觀點」和「組件」之間的區別。組件可以重用，而視圖不能。組件被封裝，視圖是特定於應用程序的。