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         if(splitPaneData){
  23                 this.setSplitPaneData(splitPaneData);
  24         }
  25         this.setFocusable(true);
  26         this.addListener("click", function(e){
  27                 this.fireDataEvent("changeFocus", this);
  28         }, this);
  29         this.createGui();
  30   },
  31
  32   events : {
  33         /**
  34          * Trigger when the focus is changing
  35          */
  36         "changeFocus" : "qx.event.type.Data",
  37         /**
  38          * Triggered when selection of content has changed.
  39          */
  40         "changeSelection" : "qx.event.type.Event"
  41   },
  42
  43   properties :
  44   {
  45         /**
  46          * Unique id of the pane
  47          */
  48         viewId : {init:""},
  49         /**
  50          * Human-readable title for this view
  51          */
  52         viewTitle : {init:"", event:"changeViewTitle"},
  53         /**
  54          * Has its own scrollable content
  55          */
  56         ownScrollable : {init: false, check:"Boolean"},
  57         /**
  58          *  Data concerning the split pane
  59          */
  60         splitPaneData : {init  : null, check:"Map"},
  61         /**
  62          * Map of commands definition
  63          * @see org.argeo.ria.event.Command
  64          */
  65         commands : {init : null, nullable:true, check:"Map"},
  66         /**
  67          * The real business content.
  68          */
  69         content : {
  70                 init: null,
  71                 nullable : true,
  72                 check : "org.argeo.ria.components.IView",
  73                 apply : "_applyContent"
  74         }
  75   },
  76
  77   /*
  78   *****************************************************************************
  79      MEMBERS
  80   *****************************************************************************
  81   */
  82
  83   members :
  84   {
  85         /**
  86          * Creates a standard GUI for the viewPane, including a container for an IView.
  87          */
  88         createGui : function(){
  89                 this.setLayout(new qx.ui.layout.VBox());
  90                 this.header = new qx.ui.container.Composite();
  91                 this.header.setLayout(new qx.ui.layout.Dock());
  92                 this.loadImage = new qx.ui.basic.Image('resource/slc/ajax-loader.gif');
  93                 this.header.set({appearance:"app-header", height:34});
  94                 this.headerLabel = new qx.ui.basic.Label(this.getViewTitle());
  95                 this.header.add(this.headerLabel, {edge:"west"});
  96                 this.addListener("changeViewTitle", function(e){
  97                         var newTitle = e.getData();
  98                         if(newTitle != ""){
  99                                 this.headerLabel.setContent(newTitle);
 100                                 if(e.getOldData() == ""){
 101                                         this.header.add(this.headerLabel, {edge:"west"});
 102                                 }
 103                         }else{
 104                                 this.header.remove(this.headerLabel);
 105                         }
 106                 }, this);
 107                 this.add(this.header);
 108                 this.setDecorator(new qx.ui.decoration.Single(1,"solid","#000"));
 109                 /*
 110                 // Open close button of splitPane, not very useful at the moment.
 111                 if(this.getSplitPaneData()){
 112                         var data = this.getSplitPaneData();
 113                         var imgName = (data.orientation=="horizontal"?"go-left":"go-bottom");
 114                         var image = new qx.ui.basic.Image("resource/slc/"+imgName+".png");
 115                         image.addListener("click", function(e){
 116                                 var image = e.getTarget();
 117                                 var data = this.getSplitPaneData();
 118                                 var functionDim = (data.orientation=="horizontal"?"Width":"Height");
 119                                 var objectToResize = data.object || this;
 120                                 var crtDim = objectToResize["get"+functionDim]();
 121                                 var minimize = (data.orientation=="horizontal"?"go-right":"go-top");
 122                                 var maximize = (data.orientation=="horizontal"?"go-left":"go-bottom");
 123                                 if(crtDim > data.min){
 124                                         objectToResize["set"+functionDim](data.min);
 125                                         image.setSource("resource/slc/"+minimize+".png");
 126                                         this.origDimension = crtDim;
 127                                 }else{
 128                                         if(this.origDimension){
 129                                                 objectToResize["set"+functionDim](this.origDimension);
 130                                                 image.setSource("resource/slc/"+maximize+".png");
 131                                         }
 132                                 }
 133                         }, this);
 134                         this.header.add(image,{edge:"east"});
 135                 }
 136                 */
 137         },
 138
 139         /**
 140          * Get the content ViewSelection object.
 141          * @return {org.argeo.ria.components.ViewSelection} The view selection
 142          */
 143         getViewSelection : function(){
 144                 if(this.getContent()){
 145                         return this.getContent().getViewSelection();
 146                 }
 147                 return null;
 148         },
 149         /**
 150          * Checks if the pane already contains a given view, identified by its instance id
 151          * @param iViewId {Mixed} The instance id to check
 152          * @return {Boolean}
 153          */
 154         contentExists : function(iViewId){
 155                 if(this.getContent()){
 156                         this.empty();
 157                 }
 158                 return false;
 159         },
 160
 161         /**
 162          * Sets the content of this pane.
 163          * @param content {org.argeo.ria.components.IView} An IView implementation
 164          */
 165         _applyContent : function(content){
 166                 if(content == null) return;
 167                 var addScrollable = (content.addScroll?content.addScroll():false);
 168                 if(addScrollable){
 169                         this.setOwnScrollable(true);
 170                         this.scrollable = new qx.ui.container.Scroll(content);
 171                         this.add(this.scrollable, {flex: 1});
 172                 }else{
 173                         this.guiContent = content;
 174                         this.add(this.guiContent, {flex:1});
 175                 }
 176                 content.getViewSelection().addListener("changeSelection", function(e){
 177                         this.fireEvent("changeSelection");
 178                 }, this);
 179         },
 180         /**
 181          * Adds a graphical component too the header of the view pane.
 182          * It is added as "center" in the dock layout, and will override the view pane title label.
 183          * For example, you can add your own title, or add a switch, or buttons, etc.
 184          * @param component {qx.ui.core.Widget} The graphical component to add.
 185          */
 186         addHeaderComponent : function(component){
 187                 this.header.setPadding(4);
 188                 this.header.add(component, {edge:"center"});
 189                 component.setTextColor("#1a1a1a");
 190                 this.loadImage.setMargin(4);
 191         },
 192
 193         /**
 194          * Implementation of the ILoadStatusable interface.
 195          * @see org.argeo.ria.components.ILoadStatusable
 196          * @param load {Boolean} The loading status
 197          */
 198         setOnLoad : function(load){
 199                 if(load){
 200                         this.header.add(this.loadImage, {edge:"east"});
 201                 }else{
 202                         this.header.remove(this.loadImage);
 203                 }
 204         },
 205
 206         /**
 207          * Call empty() method, since this pane can only handle one view.
 208          */
 209         closeCurrent : function(){
 210                 this.empty();
 211         },
 212
 213         /**
 214          * Removes and destroy the IView content of this viewPane.
 215          */
 216         empty: function(){
 217                 if(this.getOwnScrollable() && this.scrollable){
 218                         this.remove(this.scrollable);
 219                 }else if(this.guiContent){
 220                         this.remove(this.guiContent);
 221                 }
 222                 if(this.getCommands()){
 223                         org.argeo.ria.event.CommandsManager.getInstance().removeCommands(this.getCommands());
 224                         this.setCommands(null);
 225                 }
 226                 if(this.getContent()){
 227                         this.getContent().close();
 228                 }
 229                 this.setViewTitle(this._defaultViewTitle);
 230                 this.setContent(null);
 231         },
 232         /**
 233          * Sets a graphical indicator that this pane has the focus. A blue border.
 234          */
 235         focus : function(){
 236                 if(this.hasFocus) return;
 237                 this.setDecorator(new qx.ui.decoration.Single(1,"solid","#065fb2"));
 238                 this.fireEvent("changeSelection");
 239                 this.hasFocus = true;
 240         },
 241         /**
 242          * Remove a graphical focus indicator on this pane.
 243          */
 244         blur : function(){
 245                 this.hasFocus = false;
 246                 this.setDecorator(new qx.ui.decoration.Single(1,"solid","#000"));
 247         }
 248
 249   }
 250 });