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

   1 qx.Class.define("org.argeo.ria.components.TabbedViewPane",
   2 {
   3         extend : qx.ui.container.Composite,
   4         implement : [org.argeo.ria.components.ILoadStatusable],
   5
   6   /**
   7    * @param viewId {String} Unique id of this viewPane
   8    * @param viewTitle {String} Readable Title of this viewPane
   9    * @param splitPaneData {Map} Additionnal data to be used by splitpanes implementations.
  10    */
  11         construct : function(viewId, viewTitle){
  12                 this.base(arguments);
  13                 this.setViewId(viewId);
  14                 this._defaultViewTitle = viewTitle;
  15                 this.setLayout(new qx.ui.layout.Canvas());
  16                 this.blurredDecorator = new qx.ui.decoration.Uniform(1, "solid", "#000");
  17                 this.blurredDecorator.setBackgroundImage("decoration/app-header.png");
  18                 this.blurredDecorator.setBackgroundRepeat("scale");
  19                 this.setDecorator(this.blurredDecorator);
  20
  21                 this.focusedDecorator = new qx.ui.decoration.Uniform(1, "solid", "#065fb2");
  22                 this.focusedDecorator.setBackgroundImage("decoration/app-header.png");
  23                 this.focusedDecorator.setBackgroundRepeat("scale");
  24
  25                 this.tabView = new qx.ui.tabview.TabView();
  26                 this.tabView.setAppearance("widget");
  27                 // Empty mode
  28                 this.add(this.tabView, {top: 7, width:"100%", bottom:0});
  29                 this.tabView.setBackgroundColor("#fff");
  30                 this.tabView.setMarginTop(27);
  31
  32                 this.tabView.addListener("changeSelected", function(){
  33                         this.fireEvent("changeSelection");
  34                 }, this);
  35
  36
  37                 this.setFocusable(true);
  38                 this.addListener("click", function(e){
  39                         this.fireDataEvent("changeFocus", this);
  40                 }, this);
  41
  42                 this.pageIds = {};
  43         },
  44
  45         properties : {
  46                 /**
  47                  * Unique id of the pane
  48                  */
  49                 viewId : {init:""},
  50                 /**
  51                  * Human-readable title for this view
  52                  */
  53                 viewTitle : {init:"", event:"changeViewTitle"},
  54                 /**
  55                  * Has its own scrollable content
  56                  */
  57                 ownScrollable : {init: false, check:"Boolean"},
  58                 /**
  59                  * Map of commands definition
  60                  * @see org.argeo.ria.event.Command
  61                  */
  62                 commands : {init : null, nullable:true, check:"Map"}
  63
  64         },
  65
  66         members : {
  67                 contentExists : function(contentId){
  68                         if(this.pageIds[contentId]){
  69                                 this.tabView.setSelected(this.pageIds[contentId]);
  70                                 return this.pageIds[contentId].getUserData("argeoria.iview");
  71                         }
  72                 },
  73                 setContent : function(content){
  74                         if(!this.tabView.getChildren().length){
  75                                 this.tabView.setBackgroundColor("transparent");
  76                                 this.tabView.setMarginTop(0);
  77                         }
  78                         var contentId = content.getInstanceId();
  79                         var page = new qx.ui.tabview.Page(content.getInstanceLabel());
  80                         this.pageIds[contentId] = page;
  81                         page.setPadding(0);
  82                         page.setLayout(new qx.ui.layout.Canvas());
  83                         page.add(content, {width:"100%", top:0, bottom:0});
  84                         this.tabView.add(page);
  85                         page.setUserData("argeoria.iview", content);
  86                         content.getViewSelection().addListener("changeSelection", function(e){
  87                                 this.fireEvent("changeSelection");
  88                         }, this);
  89                         this.tabView.setSelected(page);
  90                 },
  91                 getContent : function(){
  92                         if(this._getCrtPage()){
  93                                 return this._getCrtPage().getUserData("argeoria.iview");
  94                         }
  95                         return null;
  96                 },
  97                 getViewSelection : function(){
  98                         if(!this.getContent()) return null;
  99                         return this.getContent().getViewSelection();
 100                 },
 101                 _getCrtPage : function(){
 102                         return this.tabView.getSelected();
 103                 },
 104                 closeCurrent : function(){
 105                         var crtPage = this._getCrtPage();
 106                         if(!crtPage) return;
 107                         var iView = crtPage.getUserData("argeoria.iview");
 108                         var iViewInstance = iView.getInstanceId();
 109                         iView.close();
 110                         this.tabView.remove(crtPage);
 111                         delete(this.pageIds[iViewInstance]);
 112                         if(!this.tabView.getChildren().length){ // No more tabs : remove commands!
 113                                 if(this.getCommands()){
 114                                         org.argeo.ria.event.CommandsManager.getInstance().removeCommands(this.getCommands(), this.getViewId());
 115                                         this.setCommands(null);
 116                                 }
 117                                 this.tabView.setBackgroundColor("#fff");
 118                                 this.tabView.setMarginTop(27);
 119                         }
 120                 },
 121                 empty : function(){
 122                         var crtPage = this._getCrtPage();
 123                         while(crtPage){
 124                                 this.closeCurrent();
 125                                 crtPage = this._getCrtPage();
 126                         }
 127                 },
 128                 setOnLoad : function(load){
 129
 130                 },
 131                 focus : function(){
 132                         if(this.hasFocus) return;
 133                         this.fireEvent("changeSelection");
 134                         this.setDecorator(this.focusedDecorator);
 135                         this.hasFocus = true;
 136                 },
 137                 blur : function(){
 138                         this.hasFocus = false;
 139                         this.setDecorator(this.blurredDecorator);
 140                 }
 141         }
 142 });