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

   1 /**
   2  * A more elaborate views container than ViewPane, as it can handle multiple contents
   3  * at once via a TabView.
   4  * See {@link org.argeo.ria.components.ViewPane}.
   5  */
   6 qx.Class.define("org.argeo.ria.components.TabbedViewPane",
   7 {
   8         extend : qx.ui.container.Composite,
   9         implement : [org.argeo.ria.components.ILoadStatusable],
  10
  11   /**
  12    * @param viewId {String} Unique id of this viewPane
  13    * @param viewTitle {String} Readable Title of this viewPane
  14    */
  15         construct : function(viewId, viewTitle){
  16                 this.base(arguments);
  17                 this.setViewId(viewId);
  18                 this._defaultViewTitle = viewTitle;
  19                 this.setLayout(new qx.ui.layout.Canvas());
  20                 this.blurredDecorator = new qx.ui.decoration.Uniform(1, "solid", "#000");
  21                 this.blurredDecorator.setBackgroundImage("decoration/app-header.png");
  22                 this.blurredDecorator.setBackgroundRepeat("scale");
  23                 this.setDecorator(this.blurredDecorator);
  24
  25                 this.focusedDecorator = new qx.ui.decoration.Uniform(1, "solid", "#065fb2");
  26                 this.focusedDecorator.setBackgroundImage("decoration/app-header.png");
  27                 this.focusedDecorator.setBackgroundRepeat("scale");
  28
  29                 this.tabView = new qx.ui.tabview.TabView();
  30                 this.tabView.setAppearance("widget");
  31                 // Empty mode
  32                 this.add(this.tabView, {top: 7, width:"100%", bottom:0});
  33                 this.tabView.setBackgroundColor("#fff");
  34                 this.tabView.setMarginTop(27);
  35
  36                 this.tabView.addListener("changeSelected", function(){
  37                         this.fireEvent("changeSelection");
  38                 }, this);
  39
  40
  41                 this.setFocusable(true);
  42                 this.addListener("click", function(e){
  43                         this.fireDataEvent("changeFocus", this);
  44                 }, this);
  45
  46                 this.pageIds = {};
  47         },
  48
  49         properties : {
  50                 /**
  51                  * Unique id of the pane
  52                  */
  53                 viewId : {init:""},
  54                 /**
  55                  * Human-readable title for this view
  56                  */
  57                 viewTitle : {init:"", event:"changeViewTitle"},
  58                 /**
  59                  * Has its own scrollable content
  60                  */
  61                 ownScrollable : {init: false, check:"Boolean"},
  62                 /**
  63                  * Map of commands definition
  64                  * @see org.argeo.ria.event.Command
  65                  */
  66                 commands : {init : null, nullable:true, check:"Map"}
  67
  68         },
  69
  70         members : {
  71                 /**
  72                  * Checks if the pane already contains a given view, identified by its instance id
  73                  * @param contentId {Mixed} The instance id to check
  74                  * @return {Boolean}
  75                  */
  76                 contentExists : function(contentId){
  77                         if(this.pageIds[contentId]){
  78                                 this.tabView.setSelected(this.pageIds[contentId]);
  79                                 return this.pageIds[contentId].getUserData("argeoria.iview");
  80                         }
  81                 },
  82                 /**
  83                  * Sets a new instance in the tabbed pane.
  84                  * @param content {org.argeo.ria.components.IView} The applet to add.
  85                  */
  86                 setContent : function(content){
  87                         if(!this.tabView.getChildren().length){
  88                                 this.tabView.setBackgroundColor("transparent");
  89                                 this.tabView.setMarginTop(0);
  90                         }
  91                         var contentId = content.getInstanceId();
  92                         var page = new qx.ui.tabview.Page(content.getInstanceLabel());
  93                         this.pageIds[contentId] = page;
  94                         page.setPadding(0);
  95                         page.setLayout(new qx.ui.layout.Canvas());
  96                         page.add(content, {width:"100%", top:0, bottom:0});
  97                         this.tabView.add(page);
  98                         page.setUserData("argeoria.iview", content);
  99                         content.getViewSelection().addListener("changeSelection", function(e){
 100                                 this.fireEvent("changeSelection");
 101                         }, this);
 102                         this.tabView.setSelected(page);
 103                 },
 104                 /**
 105                  * Get the currently selected tab content, if any.
 106                  * @return {org.argeo.ria.components.IView} The currently selected view.
 107                  */
 108                 getContent : function(){
 109                         if(this._getCrtPage()){
 110                                 return this._getCrtPage().getUserData("argeoria.iview");
 111                         }
 112                         return null;
 113                 },
 114                 /**
 115                  * Get the currently selected tab ViewSelection object.
 116                  * @return {org.argeo.ria.components.ViewSelection} The view selection object of the currently selected view.
 117                  */
 118                 getViewSelection : function(){
 119                         if(!this.getContent()) return null;
 120                         return this.getContent().getViewSelection();
 121                 },
 122                 /**
 123                  * Return the currently selected tab Page.
 124                  * @return {qx.ui.tabview.Page} The page
 125                  */
 126                 _getCrtPage : function(){
 127                         return this.tabView.getSelected();
 128                 },
 129                 /**
 130                  * Closes the currently selected view and remove all tabs components (button, page).
 131                  */
 132                 closeCurrent : function(){
 133                         var crtPage = this._getCrtPage();
 134                         if(!crtPage) return;
 135                         var iView = crtPage.getUserData("argeoria.iview");
 136                         var iViewInstance = iView.getInstanceId();
 137                         iView.close();
 138                         this.tabView.remove(crtPage);
 139                         delete(this.pageIds[iViewInstance]);
 140                         if(!this.tabView.getChildren().length){ // No more tabs : remove commands!
 141                                 if(this.getCommands()){
 142                                         org.argeo.ria.event.CommandsManager.getInstance().removeCommands(this.getCommands(), this.getViewId());
 143                                         this.setCommands(null);
 144                                 }
 145                                 this.tabView.setBackgroundColor("#fff");
 146                                 this.tabView.setMarginTop(27);
 147                         }
 148                 },
 149                 /**
 150                  * Call closeCurrent() recursively until there is no more page.
 151                  */
 152                 empty : function(){
 153                         var crtPage = this._getCrtPage();
 154                         while(crtPage){
 155                                 this.closeCurrent();
 156                                 crtPage = this._getCrtPage();
 157                         }
 158                 },
 159                 /**
 160                  * Sets the tabView on "load" state. Nothing is done at the moment.
 161                  * @param load {Boolean} Load status
 162                  */
 163                 setOnLoad : function(load){
 164
 165                 },
 166                 /**
 167                  * Sets a graphical indicator that this pane has the focus. A blue border.
 168                  */
 169                 focus : function(){
 170                         if(this.hasFocus) return;
 171                         this.fireEvent("changeSelection");
 172                         this.setDecorator(this.focusedDecorator);
 173                         this.hasFocus = true;
 174                 },
 175                 /**
 176                  * Remove a graphical focus indicator on this pane.
 177                  */
 178                 blur : function(){
 179                         this.hasFocus = false;
 180                         this.setDecorator(this.blurredDecorator);
 181                 }
 182         }
 183 });