org.argeo.slc.webapp/src/main/webapp/argeo-ria-src/class/org/argeo/ria/components/ViewPane.js

   1 /**
   2  * A standard view container, referenced in the application by its unique id.
   3  * It is managed by the ViewsManager singleton that works as the "View" part of an MVC model.
   4  * @see org.argeo.ria.components.ViewsManager
   5  * @author Charles
   6  */
   7 qx.Class.define("org.argeo.ria.components.ViewPane",
   8 {
   9   extend : qx.ui.container.Composite,
  10   implement : [org.argeo.ria.components.ILoadStatusable],
  11
  12   /**
  13    * @param viewId {String} Unique id of this viewPane
  14    * @param viewTitle {String} Readable Title of this viewPane
  15    * @param splitPaneData {Map} Additionnal data to be used by splitpanes implementations.
  16    */
  17   construct : function(viewId, viewTitle, splitPaneData){
  18         this.base(arguments);
  19         this.setViewId(viewId);
  20         this._defaultViewTitle = viewTitle;
  21         this.setViewTitle(viewTitle);
  22         var viewSelection = new org.argeo.ria.components.ViewSelection(viewId);
  23         this.setViewSelection(viewSelection);
  24         if(splitPaneData){
  25                 this.setSplitPaneData(splitPaneData);
  26         }
  27         this.createGui();
  28   },
  29
  30   properties :
  31   {
  32         /**
  33          * Unique id of the pane
  34          */
  35         viewId : {init:""},
  36         /**
  37          * Human-readable title for this view
  38          */
  39         viewTitle : {init:"", event:"changeViewTitle"},
  40         /**
  41          * Selection model for this view
  42          */
  43         viewSelection : { nullable:false, check:"org.argeo.ria.components.ViewSelection" },
  44         /**
  45          * Has its own scrollable content
  46          */
  47         ownScrollable : {init: false, check:"Boolean"},
  48         /**
  49          *  Data concerning the split pane
  50          */
  51         splitPaneData : {init  : null, check:"Map"},
  52         /**
  53          * Map of commands definition
  54          * @see org.argeo.ria.event.Command
  55          */
  56         commands : {init : null, nullable:true, check:"Map"},
  57         /**
  58          * The real business content.
  59          */
  60         content : {
  61                 init: null,
  62                 nullable : true,
  63                 check : "org.argeo.ria.components.IView",
  64                 apply : "_applyContent"
  65         }
  66   },
  67
  68   /*
  69   *****************************************************************************
  70      MEMBERS
  71   *****************************************************************************
  72   */
  73
  74   members :
  75   {
  76         /**
  77          * Creates a standard GUI for the viewPane, including a container for an IView.
  78          */
  79         createGui : function(){
  80                 this.setLayout(new qx.ui.layout.VBox());
  81                 this.header = new qx.ui.container.Composite();
  82                 this.header.setLayout(new qx.ui.layout.Dock());
  83                 this.loadImage = new qx.ui.basic.Image('resource/slc/ajax-loader.gif');
  84                 this.header.set({appearance:"app-header", height:34});
  85                 this.headerLabel = new qx.ui.basic.Label(this.getViewTitle());
  86                 this.header.add(this.headerLabel, {edge:"west"});
  87                 this.addListener("changeViewTitle", function(e){
  88                         var newTitle = e.getData();
  89                         if(newTitle != ""){
  90                                 this.headerLabel.setContent(newTitle);
  91                                 if(e.getOldData() == ""){
  92                                         this.header.add(this.headerLabel, {edge:"west"});
  93                                 }
  94                         }else{
  95                                 this.header.remove(this.headerLabel);
  96                         }
  97                 }, this);
  98                 this.add(this.header);
  99                 this.setDecorator(new qx.ui.decoration.Single(1,"solid","#000"));
 100                 /*
 101                 // Open close button of splitPane, not very useful at the moment.
 102                 if(this.getSplitPaneData()){
 103                         var data = this.getSplitPaneData();
 104                         var imgName = (data.orientation=="horizontal"?"go-left":"go-bottom");
 105                         var image = new qx.ui.basic.Image("resource/slc/"+imgName+".png");
 106                         image.addListener("click", function(e){
 107                                 var image = e.getTarget();
 108                                 var data = this.getSplitPaneData();
 109                                 var functionDim = (data.orientation=="horizontal"?"Width":"Height");
 110                                 var objectToResize = data.object || this;
 111                                 var crtDim = objectToResize["get"+functionDim]();
 112                                 var minimize = (data.orientation=="horizontal"?"go-right":"go-top");
 113                                 var maximize = (data.orientation=="horizontal"?"go-left":"go-bottom");
 114                                 if(crtDim > data.min){
 115                                         objectToResize["set"+functionDim](data.min);
 116                                         image.setSource("resource/slc/"+minimize+".png");
 117                                         this.origDimension = crtDim;
 118                                 }else{
 119                                         if(this.origDimension){
 120                                                 objectToResize["set"+functionDim](this.origDimension);
 121                                                 image.setSource("resource/slc/"+maximize+".png");
 122                                         }
 123                                 }
 124                         }, this);
 125                         this.header.add(image,{edge:"east"});
 126                 }
 127                 */
 128         },
 129
 130         /**
 131          * Sets the content of this pane.
 132          * @param content {org.argeo.ria.components.IView} An IView implementation
 133          */
 134         _applyContent : function(content){
 135                 if(content == null) return;
 136                 var addScrollable = (content.addScroll?content.addScroll():false);
 137                 if(addScrollable){
 138                         this.setOwnScrollable(true);
 139                         this.scrollable = new qx.ui.container.Scroll(content);
 140                         this.add(this.scrollable, {flex: 1});
 141                 }else{
 142                         this.guiContent = content;
 143                         this.add(this.guiContent, {flex:1});
 144                 }
 145         },
 146         /**
 147          * Adds a graphical component too the header of the view pane.
 148          * It is added as "center" in the dock layout, and will override the view pane title label.
 149          * For example, you can add your own title, or add a switch, or buttons, etc.
 150          * @param component {qx.ui.core.Widget} The graphical component to add.
 151          */
 152         addHeaderComponent : function(component){
 153                 this.header.setPadding(4);
 154                 this.header.add(component, {edge:"center"});
 155                 this.loadImage.setMargin(4);
 156         },
 157
 158         /**
 159          * Implementation of the ILoadStatusable interface.
 160          * @see org.argeo.ria.components.ILoadStatusable
 161          * @param load {Boolean} The loading status
 162          */
 163         setOnLoad : function(load){
 164                 if(load){
 165                         this.header.add(this.loadImage, {edge:"east"});
 166                 }else{
 167                         this.header.remove(this.loadImage);
 168                 }
 169         },
 170
 171         /**
 172          * Removes and destroy the IView content of this viewPane.
 173          */
 174         empty: function(){
 175                 if(this.getOwnScrollable() && this.scrollable){
 176                         this.remove(this.scrollable);
 177                 }else if(this.guiContent){
 178                         this.remove(this.guiContent);
 179                 }
 180                 if(this.getCommands()){
 181                         org.argeo.ria.event.CommandsManager.getInstance().removeCommands(this.getCommands());
 182                         this.setCommands(null);
 183                 }
 184                 this.setViewTitle(this._defaultViewTitle);
 185                 this.setContent(null);
 186         }
 187
 188   }
 189 });