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