]>
git.argeo.org Git - gpl/argeo-slc.git/blob - org.argeo.slc.webapp/src/main/webapp/argeo-ria-src/class/org/argeo/ria/components/ViewPane.js
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
7 qx
.Class
.define("org.argeo.ria.components.ViewPane",
9 extend
: qx
.ui
.container
.Composite
,
10 implement
: [org
.argeo
.ria
.components
.ILoadStatusable
],
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.
17 construct : function(viewId
, viewTitle
, splitPaneData
){
19 this.setViewId(viewId
);
20 this._defaultViewTitle
= viewTitle
;
21 this.setViewTitle(viewTitle
);
23 this.setSplitPaneData(splitPaneData
);
25 this.setFocusable(true);
26 this.addListener("click", function(e
){
27 this.fireDataEvent("changeFocus", this);
34 * Trigger when the focus is changing
36 "changeFocus" : "qx.event.type.Data",
38 * Triggered when selection of content has changed.
40 "changeSelection" : "qx.event.type.Event"
46 * Unique id of the pane
50 * Human-readable title for this view
52 viewTitle
: {init
:"", event
:"changeViewTitle"},
54 * Has its own scrollable content
56 ownScrollable
: {init
: false, check
:"Boolean"},
58 * Data concerning the split pane
60 splitPaneData
: {init
: null, check
:"Map"},
62 * Map of commands definition
63 * @see org.argeo.ria.event.Command
65 commands
: {init
: null, nullable
:true, check
:"Map"},
67 * The real business content.
72 check
: "org.argeo.ria.components.IView",
73 apply
: "_applyContent"
78 *****************************************************************************
80 *****************************************************************************
86 * Creates a standard GUI for the viewPane, including a container for an IView.
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();
99 this.headerLabel
.setContent(newTitle
);
100 if(e
.getOldData() == ""){
101 this.header
.add(this.headerLabel
, {edge
:"west"});
104 this.header
.remove(this.headerLabel
);
107 this.add(this.header
);
108 this.setDecorator(new qx
.ui
.decoration
.Single(1,"solid","#000"));
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;
128 if(this.origDimension){
129 objectToResize["set"+functionDim](this.origDimension);
130 image.setSource("resource/slc/"+maximize+".png");
134 this.header.add(image,{edge:"east"});
140 * Get the content ViewSelection object.
141 * @return {org.argeo.ria.components.ViewSelection} The view selection
143 getViewSelection : function(){
144 if(this.getContent()){
145 return this.getContent().getViewSelection();
150 * Checks if the pane already contains a given view, identified by its instance id
151 * @param iViewId {Mixed} The instance id to check
154 contentExists : function(iViewId
){
155 if(this.getContent()){
162 * Sets the content of this pane.
163 * @param content {org.argeo.ria.components.IView} An IView implementation
165 _applyContent : function(content
){
166 if(content
== null) return;
167 var addScrollable
= (content
.addScroll
?content
.addScroll():false);
169 this.setOwnScrollable(true);
170 this.scrollable
= new qx
.ui
.container
.Scroll(content
);
171 this.add(this.scrollable
, {flex
: 1});
173 this.guiContent
= content
;
174 this.add(this.guiContent
, {flex
:1});
176 content
.getViewSelection().addListener("changeSelection", function(e
){
177 this.fireEvent("changeSelection");
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.
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);
194 * Implementation of the ILoadStatusable interface.
195 * @see org.argeo.ria.components.ILoadStatusable
196 * @param load {Boolean} The loading status
198 setOnLoad : function(load
){
200 this.header
.add(this.loadImage
, {edge
:"east"});
202 this.header
.remove(this.loadImage
);
207 * Call empty() method, since this pane can only handle one view.
209 closeCurrent : function(){
214 * Removes and destroy the IView content of this viewPane.
217 if(this.getOwnScrollable() && this.scrollable
){
218 this.remove(this.scrollable
);
219 }else if(this.guiContent
){
220 this.remove(this.guiContent
);
222 if(this.getCommands()){
223 org
.argeo
.ria
.event
.CommandsManager
.getInstance().removeCommands(this.getCommands());
224 this.setCommands(null);
226 if(this.getContent()){
227 this.getContent().close();
229 this.setViewTitle(this._defaultViewTitle
);
230 this.setContent(null);
233 * Sets a graphical indicator that this pane has the focus. A blue border.
236 if(this.hasFocus
) return;
237 this.setDecorator(new qx
.ui
.decoration
.Single(1,"solid","#065fb2"));
238 this.fireEvent("changeSelection");
239 this.hasFocus
= true;
242 * Remove a graphical focus indicator on this pane.
245 this.hasFocus
= false;
246 this.setDecorator(new qx
.ui
.decoration
.Single(1,"solid","#000"));