7 Replies Latest reply: Sep 26, 2011 1:42 PM by juergen_hauser RSS

    Add/Remove tile from panel at runtime

    Adam Smith Community Member

      I have 3 tiles

       

           MenuTile - Flex Menu

           Tile1 - Flex module

           Tile2 - HTML

       

      In my catalog I have a PanelClass that has the MenuTile and Tile1 as TileReferences, where by including the PanelClass as view:PanelReference in my composite application.

       

      Simply I want to be able to select a button on the menu button and either show or remove one of the tiles.

       

      [Bindable]

      [Application]

      public var mosaicApp:IApplication;

       

      mosaicApp.addMessageListener(CatalogLoadEvent.NAMESPACE, CatalogLoadEvent.SUCCESS, onCatLoadEvent);

      mosaicApp.addMessageListener(CatalogLoadEvent.NAMESPACE, CatalogLoadEvent.FAILURE, onCatLoadEvent);

       

      mosaicApp.loadCatalog(new CatalogSpecifier("CustomerServicePOCCatalog"), onLoadSuccess, onLoadFailure);

       

      private function onCatLoadEvent(message:Message):void {

        var  catalogLoadEvent:CatalogLoadEvent = message.payload as CatalogLoadEvent;

        var catalog:ICatalog = catalogLoadEvent.catalog;

        //var a:Array = catalog.tiles;

        //Alert.show("Catalog has " + a.length + " tiles", "Tile Count", Alert.OK, parentDocument as Sprite);

        //custom processing

        var panel:IPanel = catalog.getPanel("SamplePanel");

        var numberOfTiles:Array = panel.tiles;

        Alert.show("Panel has " + numberOfTiles.length + " tiles", "Panel Tile Count", Alert.OK, parentDocument as Sprite);

       

        var tile:ITile = catalog.getTile("adobePage");

        panel.addTile(tile, onLoadSuccess, onLoadFailure);

       

      }

       

      When uncommented I get a correct count of all tiles in the catalog.  Additionally I get the correct count of tiles in the panel before I add the 3rd.  I don't get and error but I also don't see the 3rd tile added to the panel.

       

      Some help with this would be appreciated.

       

      Thanks

      Adam

        • 1. Re: Add/Remove tile from panel at runtime
          David Scott Adobe Employee

          I see that you get the panel labelled "SamplePanel" from a catalog, then you attempt to add a tile to that panel.  However I do not see a step where you add the panel to the application.  I would expect the code to follow these steps:

           

          1. Load a panel from a catalog

          2. Add the panel to the application either under the shell or a view

          3. Load a tile from a catalog

          4. Add the tile to the panel

           

          However, if you already have the panel in your application, you need to access its object and add the tile to that instead of adding the tile to a panel object that was fetched from the catalog:

           

          1. Get the panel's parent object, for example if it is the shell: var shellPanelParent:IShell = mosaicApp.shell;

          2. Get the array of panels under that parent object: var arrayPanels:Array = shellPanelParent.panels;

          3. Parse the array to get the specific panel you are want to add a tile to

          4. Add the tile to the panel

          • 2. Re: Add/Remove tile from panel at runtime
            Adam Smith Community Member

            thank you for your response, but unfortunately  I was unsuccessful in getting your recommendation  to accomplish the goal of adding a tile at run time.  I have provided the ActionScript functions and the catalog entries for the tile and the panel.

             

            I am not getting any failures but at the same time I am not seeing the tile being added to the panel.

             

            private function onMenuClick(event:MenuEvent):void{

            mosaicApp.addMessageListener(CatalogLoadEvent.NAMESPACE, CatalogLoadEvent.SUCCESS, onCatLoadEvent);

            mosaicApp.addMessageListener(CatalogLoadEvent.NAMESPACE, CatalogLoadEvent.FAILURE, onCatLoadEvent);

             

            mosaicApp.loadCatalog(new CatalogSpecifier("CustomerServicePOCCatalog"), onLoadSuccess, onLoadFailure);

            }

             

            //functions to manage success or failure callbacks

            private function onLoadSuccess(evt:CatalogLoadEvent):void {

            //Alert.show("Success", "Success", Alert.OK, parentDocument as Sprite);

            }

            private function onLoadFailure(evt:CatalogLoadEvent):void {

            Alert.show("Failure: " + evt.message, "Failure!", Alert.OK, parentDocument as Sprite);

            }

             

            //functions to manage success or failure events

            private function onCatLoadEvent(message:Message):void {

            Alert.show("In onCatLoadEvent()", "In function!", Alert.OK, parentDocument as Sprite);

             

            var catalogLoadEvent:CatalogLoadEvent = message.payload as CatalogLoadEvent;

            var catalog:ICatalog = catalogLoadEvent.catalog;

             

            var shellPanelParent:IShell = mosaicApp.shell;

            var arrayPanels:Array = shellPanelParent.panels;

            for each (var panel:IPanel in arrayPanels){

            if ("SamplePanel" == panel.nodeName){

            var tile:ITile = catalog.getTile("adobePage");

            panel.addTile(tile, onLoadSuccess, onLoadFailure);

            }

            }

            }

             

            catalog.cxml...

             

             

            <tile:TileClass fitContent="true" height="450" label="Adobe Page" name="adobePage" width="1000">

                <ct:Metadata>

                    <ct:Description>An HTML tile that displays market data via a financial services website.</ct:Description>

                </ct:Metadata>

                <tile:Content contentType="text/html" uri="http://www.adobe.com"/>

            </tile:TileClass>

             

            ...

             

            <view:PanelClassList>

            <view:PanelClass name="SamplePanel">

                        <ct:Metadata>

                            <ct:Description/>

                        </ct:Metadata>

                        <view:Content>           

                            <view:Panel allowContentDelete="true" height="100%" label="Sample Panel" name="SamplePanel" tileChrome="full" width="100%">

            <view:Layout name="VerticalLayout"/>                   

                                <tile:TileReference catalog="${catalog}" height="50" label="Menu" name="com.fedex.mosaic.tiles.MenuTile" width="100%"/>

                                <tile:TileReference catalog="${catalog}" height="768" label="Reference Data Tile" name="com.fedex.mosaic.tiles.ReferenceDataTile" width="1024"/>

                            </view:Panel>

                        </view:Content>

                    </view:PanelClass>

            </view:PanelClassList>

             

            Thanks

            Adam

            • 3. Re: Add/Remove tile from panel at runtime
              dwalling techies

              Hi Adam,

              I think this should work, and if it's not then there is a bug somewhere. But I'm not able to tell from this thread exactly where - it could be in mosaic or it could be in the application. We'll try to reproduce it internally.

              Don

              • 4. Re: Add/Remove tile from panel at runtime
                dwalling techies

                Hi Adam,

                We have a working theory that there is a problem inside of mosaic when an asset that is a reference, e.g. a PanelReference, is then modified from the mosaic-om APIs. Can you include your .axml file in this thread so that we can take a look. Also, as a workaround, is there any way that you can either:

                 

                a) structure your application to have the panel fully defined in the catalog so that you don't need to add tiles to it at runtime, or

                 

                b) structure the application so that the panel and all of its children are dynamically created at runtime (with the mosaic-om APIs)

                 

                Thanks,

                Don

                • 5. Re: Add/Remove tile from panel at runtime
                  Adam Smith Community Member

                  Thanks Don

                   

                  Here is the information you requested before I make some changes:

                   

                  <?xml version="1.0" encoding="UTF-8" standalone="no"?>

                  <!-- Copyright 2011 Adobe Systems Incorporated. All rights reserved. The original

                  version of this material may be obtained from Adobe Systems Incorporated. -->

                  <app:Application xmlns:app="http://ns.adobe.com/Mosaic/Application/1.0/"

                  xmlns:catalog="http://ns.adobe.com/Mosaic/Catalog/1.0/"

                  xmlns:ct="http://ns.adobe.com/Mosaic/CommonTypes/1.0/"

                  xmlns:tile="http://ns.adobe.com/Mosaic/Tile/1.0/"

                  xmlns:view="http://ns.adobe.com/Mosaic/View/1.0/"

                  label="CustomerServicePOC"

                  name="CustomerServicePOC">

                   

                      <ct:Metadata>

                          <ct:Description/>

                      </ct:Metadata>

                   

                      <!--  <fx:Style source="style.css"/> -->

                   

                      <!-- Specifies a default panel or view to use when a user adds a new panel or

                      view to the composite application (if permitted). Specify a default directly,

                      or reference one from a composite application catalog. Referenced default

                      panels and views override the composite application defaults. Note: You can

                      specify only one panel and view in the app:Defaults section, but you can

                      specify any number of catalog:CatalogReference children. -->

                      <app:Defaults>

                          <view:Panels>

                              <view:Panel allowContentDelete="true" height="100%" label="Default Panel" tileChrome="full" width="100%">

                                  <view:Layout name="HorizontalLayout" numColumns="2"/>

                              </view:Panel>

                          </view:Panels>

                      </app:Defaults>

                   

                      <!-- Provide a global context containing values for use across entire

                      application.

                      <ct:Context>

                          <ct:Data key="myApplicationContext" type="string" value="default value" />

                      </ct:Context>

                      -->

                   

                      <!-- A named context is useful for partition of a set of context values

                      to a subsection of the application.

                      <app:NamedContexts>

                          <ct:Context name="basictypes">

                              <ct:Data key="aSimpleString" type="string" value="sample string"/>

                              <ct:Data key="aBoolean" type="boolean" value="true"/>

                              <ct:Data key="anInteger" type="number" value="2011"/>

                              <ct:Data key="aDate" type="date" value="2011-11-01T19:00:00-05:00"/>

                              <ct:Data key="aNull" type="null" />

                          </ct:Context>

                      </app:NamedContexts>

                      -->

                   

                      <!-- Specifies the runtime content for a composite application. The order of

                      the elements affects the appearance in the application user interface. You

                      can specify only one app:Shell or app:ShellReference element as a child of

                      app:Application. -->

                      <app:Shell label="Sample Shell" name="SampleShell">

                          <!-- Specifies a reference to a composite application catalog. Catalogs

                          contain composite application assets. The name attribute creates a

                          shorthand reference to the catalog, which is stored on the Experience

                          Server. -->

                          <catalog:CatalogReference name="${catalog}" uri="${catalog}"/>

                          <!-- Specifies a container to display views in the application user

                          interface. The order of elements affects the appearance of the user

                          interface. You can include only one view:ViewManager element as a child

                          of the app:Shell element. The default skin for the view:ViewManager

                          element provides a set of tab buttons to switch between views in the

                          application, as well as an Add button, and an option menu. -->

                          <!-- <view:ViewManager height="100%" width="100%"> -->

                              <!-- The runtime content for a composite application view. -->

                              <!--

                              <view:View height="100%" width="100%" label="Sample View">

                              -->

                                  <!-- The runtime content for a composite application panel. -->

                   

                                  <!-- 

                                  <view:Panel allowContentDelete="true" height="100%" label="Sample Panel" styleName="PanelInShellStyle" tileChrome="full" width="100%">

                                   <view:Layout name="VerticalLayout"/> 

                   

                                   <view:Panel tileChrome="full" width="100%" height="50"  >

                                  

                                   <view:Layout numColumns="1" name="SmartGridLayout" />    

                      <tile:TileReference catalog="${catalog}"

                      name="com.fedex.mosaic.tiles.MenuTile" label="Menu" width="100%" height="50" />

                     

                                   </view:Panel>

                  <tile:TileReference catalog="${catalog}"

                      name="com.fedex.mosaic.tiles.ReferenceDataTile" label="Reference Data Tile" width="1024" height="768" />    

                     

                  <tile:TileReference catalog="${catalog}"

                      name="adobePage" label="Adobe Page" width="1000" height="450" visible="false" />

                   

                                  </view:Panel>

                                  -->

                                  <view:PanelReference catalog="${catalog}" name="SamplePanel" height="100%" width="100%" tileChrome="full"></view:PanelReference> 

                          <!--

                              </view:View>

                          </view:ViewManager>

                          -->

                      </app:Shell>

                  </app:Application>

                   

                   

                   

                  Also here is the PanelClass from the catalog....

                   

                   

                  <view:PanelClass name="SamplePanel">

                              <ct:Metadata>

                                  <ct:Description/>

                              </ct:Metadata>

                              <view:Content>           

                                  <view:Panel allowContentDelete="true" height="100%" label="Sample Panel" name="SamplePanel" tileChrome="full" width="100%">

                  <view:Layout name="VerticalLayout"/>                   

                                      <tile:TileReference catalog="${catalog}" height="50" label="Menu" name="com.fedex.mosaic.tiles.MenuTile" width="100%"/>

                                      <tile:TileReference catalog="${catalog}" height="768" label="Reference Data Tile" name="com.fedex.mosaic.tiles.ReferenceDataTile" width="1024"/>

                                  </view:Panel>

                              </view:Content>

                          </view:PanelClass>

                   

                   

                   

                  Thanks

                  Adam

                  • 6. Re: Add/Remove tile from panel at runtime
                    lburch@PRFT

                    I am adding a tile to a visible panel at runtime and haven't come across an issue so far.  The code I am using is:

                     

                                private function onMenuClick(event:MenuEvent):void{
                                    //var a:Array = mosaicApp.catalogs;
                                    tilenameToAdd = event.item.@data;
                                    //mosaicApp.loadCatalog(new CatalogSpecifier("POCCatalog"), onLoadSuccess, onLoadFailure);               
                                    var tile:com.adobe.mosaic.om.interfaces.ITile = catalog.getTile(tilenameToAdd);
                                    for each (var view:IView in mosaicApp.findViewManagers()[0].views) {
                                        if (view.displayed) {
                                            for each (var panel:IPanel in view.panels){
                                                if (panel.displayed) {
                                                    panel.addTile(tile,onSuccess,onFailure);
                                                    return;
                                                }
                                            }
                                        }
                                    }               
                                }

                     

                    Which is basically derived from the ADEP example "SlateDashboard"

                     

                    However it would be really nice if ADEP had the same robust dynamic tile placement like say in WebSphere Portal.  I am sure it is planed for the next version somewhere along the line.

                     

                    Lee Burch

                    • 7. Re: Add/Remove tile from panel at runtime
                      juergen_hauser Community Member

                      Hi Lee,

                       

                      Could you please clarify what you are expecting exactly to see when you write "robust dynamic tile placement like say in WebSphere Portal"? A UI or additional APIs?

                      We are considering suggestions in the forums when it comes to release planning and prioritization.

                       

                      Thanks,

                      Juergen

                       

                      Juergen Hauser  |  Senior Product Manager – Adobe Digital Enterprise Platform