Comment structurer plusieurs projets Cairngorm MVC partageant plusieurs composants?

Question

J'ai récemment terminé un projet d'interface utilisateur de rapport personnalisé dans Flex. Maintenant, j'ai été chargé de créer une nouvelle application qui est essentiellement une version «allégée» de l'interface utilisateur originale. Il inclura seulement quelques-unes des options qui sont dans l'application originale. En outre, il doit être une application distincte. Je ne veux pas dupliquer mon code, j'ai donc l'intention de déplacer un tas de classes de l'application originale à une nouvelle bibliothèque qui peut être partagée par les deux applications. Cependant, j'essaie de comprendre comment faire fonctionner cela dans mon environnement MVC. Par exemple, j'ai un composant Accordion qui permet aux utilisateurs de filtrer plusieurs éléments. Chaque enfant accordéon est une instance d'un composant personnalisé avec deux listes (une pour les entités disponibles pour la sélection, l'autre pour les entités sélectionnées par l'utilisateur). Chaque composant enfant a des propriétés liées au modèle et des fonctions qui appellent des événements Cairngorm.

Voici un exemple simplifié:

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 et LabelFilter.mxml sont à peu près le même design que GenreFilter.mxml, mais utiliser à leurs événements spécifiques.

Alors, comment dois-je faire cela? Cela n'a aucun sens de déplacer mon Modèle dans la bibliothèque partagée. Je veux simplement créer simplement des composants View dans la bibliothèque. Suis-je totalement hors de mon rocker ici, ou quoi?

Answer 1

C'est l'un des gros défauts de Cairngorm - vos opinions sont liées à votre modèle. Cela dit, vous pouvez atténuer la douleur en rendant les composants que vous voulez réutilisés plus génériques et encapsulés. Ensuite, étendez-les pour les associer au reste de l'application.

Ainsi, votre premier composant devient:

<?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> 

Ensuite, vous le faites dans chaque application (mais avec différents modèles/événements).

<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> 

Est-ce logique? C'est la différence entre une "vue" et un "composant". Les composants peuvent être réutilisés, contrairement aux vues. Les composants sont encapsulés, les vues sont spécifiques à l'application.