|
I am trying to disable the resize functionality of b:window. I tried using b:resize="none" but of no use.
Also went through previous forum topics but couldn't find any useful clue.
Can anyone help me out in this?
Following is the code I have -
<div>
<b:window label="test" height="280px" width="445px" buttons="none" resize="flase" b:resize="false" top="50px"> content </b:window>
</div>
<b:window label="test" height="280px" width="445px" buttons="none" resize="flase" b:resize="false" top="50px"> content </b:window>
</div>
disable resize
10 July, 2008 - 15:39 — andysHi nitesh,
The b:window extends many backbase elements and behaviors. One of the behavior is b:resize.
b:resize has a event handler "construct" which will enable the resizable action.
You can disable it by using this code below
<b:window label="test" height="280px" width="445px" buttons="none" top="50px"> content
<e:handler event="DOMNodeInsertedIntoDocument" type="application/javascript">
this._._resizable = false;
</e:handler>
</b:window>
</div>
As you can see from the code above, I define the resizable property become 'false';
Initially it is defined 'true';
Hope this helps,
Andys
Need more help
10 July, 2008 - 16:36 — niteshThanks a lot for response Andys. It works but I am confused as where could have I looked out for it as couldn't find such such properties specific to controls. Please give some pointers for that.
Also it would be really nice if you can help me with another such property where I don't want user to be able to drag a window. The problem description is that I have embedded one HTML form in window and whenever I try to select the text with mouse in that form, window starts dragging and no text gets selected.
property lookup
10 July, 2008 - 16:48 — andysHi nitesh,
The backbase widget is actually built with xml and javascript. Everything is defined in the ****.xml. It is a good code experience, experiment, and knowledge to dig deeper the widget source code.
By going to the source code, you will be able to understand the flow of each widget.
e.g : if you could not find any needed information from the documentation, You might better go to the widget source code.
In this case, you actually would like to disable "resize" functionality in the b:window
step to dig more knowledge on it
1. Check the reference.chm (and try to find related information about it)
2. Check the windowBase.xml in the "bindings" folder
After this, I hope you will understand what you should do next.
Just explore the code and happy investigate!
Andys
Not able to map
16 July, 2008 - 08:03 — niteshHi Andys
Thank you for pointing to the resources to look out for required behavior. Still I wasn't able to stop making a window element draggable.
As defined in dragAndDrop.xml inside dragAndDrop folder of btl, I tried to set btl.drag.dragManager.isDragging = true as
btl.drag.dragManager.isDragging = true;
</e:handler>
to stop dragging of window but it didn't work and gave error - "controller is null or not an object".
Please help if there is other way to do that.
Disabling resize of a window
16 July, 2008 - 11:06 — yudiHi nitesh,
If you look at the window header template in the BB debugger or firebug, there is a div with role attribute. By default,window is drag able and has dragMove in that div role attribute. Could you try to set the value of role attribute to empty in that div ? To target that div, you could use bb.selector.query to target it by its class name(btl-window-head). Example:
bb.selector.query(this.viewNode, '.btl-window-head').attributes[0].nodeValue= "";
</e:handler>
Note: the move cursor is still appeared in the window but you could change the header cursor style. Example:
bb.selector.query(this.viewNode, '.btl-window-label').style.cursor= "";
~Yudi
Correction
16 July, 2008 - 14:28 — niteshThank you Yudi for the reply. Although it solved my issue but I had an observation which I think will be helpful for others.
Presently I am using BackBase 4.2.1 where role="dragMove" is placed in class="btl-window-label" inside window.xml but in BackBase 4.2.0, role="dragMove" is placed in class="btl-window-head" (both in reference to chameleon skin).
For BackBase 4.2.1, I was able to make window non-dragable using
But for BackBase 4.2.0, same behavior couldn't be repeated using
I am not sure what is right code for BackBase 4.2.0.
Once again thanks for the resolution.
Not foolproof
16 July, 2008 - 14:42 — niteshWait a minute Yudi.
This solution given by you works only in Firefox and not in IE7.
Can I call it a bug?
Kindly suggest an alternative for IE7.
Alternative solution
16 July, 2008 - 15:59 — nick@backbaseAn alternative way to make a window non-draggable is to add the following handler.
event.preventDefault();
</e:handler>
You will still need to set the cursor style to 'default' though.
Thank you
17 July, 2008 - 08:28 — niteshThank you Nick. It is working absolutely fine in all browsers.
Can you tell me you figured out the solution so that next time I can do it on my own? I knew the dragStart event existed for window element but how to know the corresponding functions for that event?
Hi, But the resize is not
17 July, 2008 - 18:01 — JayHi,
But the resize is not working in IE with "this._._resizable = false"
Regards
Jay
Resize working in IE7 for 4.2.1
18 July, 2008 - 11:51 — niteshHi Jay
It is working for me. I am using BackBase 4.2.1
Event object
18 July, 2008 - 09:12 — nick@backbaseHi,
There's a listing of the properties and methods of the Backbase event object in the reference (e.g. Backbase API/Backbase DOM Events/Methods/preventDefault). The preventDefault method cancels the action associated with an event.
Incidentally, I'm curious why you actually need to cancel drag and resize on a window. You mentioned in a previous post that you have a form in a window, and that when you try to select text in the form this initiates dragging. Do you have a simple test case that shows this behavior? It seems strange to me that this should happen (it should be possible to edit a form inside a fully functional window without it dragging etc).
If you just want a container for the form and don't want drag/resize functionality, you could also consider using the groupBox element.
Reason for stopping drag functionality
18 July, 2008 - 12:03 — niteshThank you Nick for your concern. The reason for which I wanted to stop drag functionality is specific to example I am working on. In start I wanted swap functionality for different window elements (not resizable) placed on page but no one could give me appropriate answer. You can see the thread here -
http://bdn.backbase.com/node/5099
I would appreciate any help in this thread.
Therefore, I had to temporarily find out a way to stop dragging of windows. I tried stopping dragging of window (which is otherwise inherited) using e:behavior="b:drag" which resulted in form selection and editing problem. So I posted the problem here.
Thanks for suggestion about groupBox but still I am interested in finding out solution for swapping the different windows on same page. Please see if you can help me in that.
For reference (test case), you can see the problem in following code (just copy and paste in required page and changing BackBase path) -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>DataSource and ListGrid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../generic.css" />
<link rel="credit" href="http://www.famfamfam.com/lab/icons/silk/" />
<script type="text/javascript" src="../Backbase/4_2_0/engine/boot.js"></script>
<style type="text/css">
.nofade{
font-size:16px;
font-family:arial;
font-weight:bold;
}
</style>
</head>
<body>
<script type="text/backbase+xml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:b="http://www.backbase.com/2006/btl"
xmlns:c="http://www.backbase.com/2006/command"
xmlns:d="http://www.backbase.com/2006/tdl"
xmlns:e="http://www.backbase.com/2006/xel"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:smil="http://www.w3.org/2005/SMIL21/BasicAnimation">
<xi:include href="../Backbase/4_2_0/bindings/config.xml" />
<b:windowArea height="500px" class="nofade">
<b:window label="Window 1" top="0" left="0" padding="5px" icon="icon-bb-window">
<p>This is the content area for Window 1.</p>
</b:window>
<b:window e:behavior="b:drag" label="Window 2" top="20px" left="450px" padding="5px" icon="icon-bb-window">
<p>This is the content area for Window 2.</p>
<form>
<label>username:<input value="username"></input></label>
<label>password:<input value="password"></input></label>
<label>username:<input value="username"></input></label>
<label>password:<input value="password"></input></label>
<label>username:<input value="username"></input></label>
<label>password:<input value="password"></input></label>
<label>username:<input value="username"></input></label>
<label>password:<input value="password"></input></label>
<input type="reset"></input>
<input type="submit"></input>
</form>
</b:window>
<b:window label="Window 3" top="40px" left="40px" padding="5px" icon="icon-bb-window">
<p>This is the content area for Window 3.</p>
<form>
<label>username:<input></input></label>
<label>password:<input></input></label>
<input type="reset"></input>
<input type="submit"></input>
</form>
</b:window>
<b:taskBar />
</b:windowArea>
</script>
</body>
</html>
Reason for stopping drag functionality
28 August, 2008 - 17:33 — yudiI have answered this question in other post.Please,have a look post in this link http://bdn.backbase.com/node/5099 for an answer.
Cheers,
Yudi