There are no problems with you altering the way a window works in any
way whatsoever. It's open source software and that includes the
components libraries offered with the download.
The best way to make a window for yourself isn't necessarily to use
the components although you can learn from them and use them whenever
you'd like. Others may have other styles, but the best way to start
with "windows" and the LZX philosophy is compact and short to explain
IMO. May I show you a short and well commented, fully self-contained,
and tweakable example of writing your own window from scratch?
Alright, thanks, don't mind if I do!
Before the actual code, some light weight LZX philosophy:
- An effective way to make a window is to remember that a "window" is
just an area that contains other things. Using this concept, a <view>
becomes a window, because it can contain other things.
- More importantly, when you change a <view>'s x and y one way or
another - say have mousedrag do that via a <handler> - everything
inside of it will move with it. Just like a window does.
To make a window you're used to however, takes three things, not just
one:
- a <view> to contain things
- some graphics that make the view look cool and thus like a window,
- and an inner view where content goes to seperate the window "chrome"
from what the user *puts* in the window.
Instead of being a step by step code example, the following will have
most everything you need to make your own simple window. I typed this
from scratch, and it's all inclusive, so you can just drop it into
your project and start tweaking with it! I made a big effort to
comment everything so this will read easily. The code content of this
is really quite short. First - just copy and paste and compile this in
your openlaszlo environment, and drag on the yellow bars when it's up!
Other things it could do you can learn about:
- how to make it resize from the lower right corner or anywhere else
- how to add scroll bars that only show up if the inner content
overflows
- how to hide/show/make more/remove windows programmatically
- how to make better window chrome, like using images placed around
the border of a window
- how to package things like this so that you can distribute
libraries of your own finished components
If after some study you want to ask questions more specifically, I
think you'd get better understanding of how to work and play with LZX
and it's really cool design patterns.
<canvas>
<!-- make a window class and document it all the way.
Pleas note the:
- exact nesting of elements, which help identify what
does what to what
- the use of constraints to position things relative to
each other and to pass on attribute from the class
defintion
to things inside the class
- the use of recursive defaultplacement attributes to
make inner
content of the window go anywhere else in the hierarchy
- the use of a dragstate (its in the documentation) to
make a view move relative to the mouse when the state is
applied (there is a resizestate too, not shown here!)
- the two examples of using this simple window class below
-->
<class name="mywindow" defaultplacement="content" clip="true">
<!-- make an attribute to hold the window's title -->
<attribute name="title" type="string" value="My Window"/>
<!-- make a dragger object (logic only) that will on
"this.apply(true)"
move the parent when the mouse moves and stop when
"this.apply(false)".
Trigger it from the menubar's onmousedown and onmouseup
-->
<dragstate name="dragger"/>
<!-- the menubar should be after the bkgnd area below, so let's
arrange the two vertically. really, this is preferable to
setting x's and y's manually on each element IF you can
get
away with it, which I can here because i'm only ordering
two things on top of each other. Makes it easier to use
and
understand -->
<simplelayout axis="y" spacing="0"/>
<!-- a menu bar runs the width of the top of the window -->
<view name="menubar" width="${parent.width}" height="20"
bgcolor="0xffff77">
<!-- use the menubar's mousedown event to move the whole
window -->
<handler name="onmousedown">
//we want the window to jump to the front of it's
siblings when clicked!
classroot.bringToFront();
//and we want to apply the dragstate on the classroot
that makes the window
//move (a dragstate is from the state tag and it's
pretty easy to
//make your own - no magic going on here)
classroot.dragger.apply();
</handler>
<!-- use the menubar's mouseup event to stop moving the
whole window -->
<handler name="onmouseup">
//remove the dragstate from affecting the classroot;
the window will
//no longer move with the mouse
classroot.dragger.remove();
</handler>
<!-- make an area for a window title and fill it with the
classroot's
"title" attribute -->
<text name="title" text="${classroot.title}"/>
<!-- make a "button" over to the right (just a square for
now) to close the window -->
<view x="${parent.width-this.width-5}" valign="middle"
bgcolor="red" width="10" height="10">
<handler name="onmousedown">
classroot.setAttribute('visible', false);
</handler>
</view>
</view>
<!-- any inner content of this class supplied by a third
party goes here!
see the placement attribute on the class definition..
note that i'm
for no good reason (artistic) including a black bordered
view below the
content -->
<view name="content" defaultplacement="content"
bgcolor="0xdddddd" opacity="0.9"
width="${parent.width}" height="${parent.height-
parent.menubar.height}">
<!-- the inner view that holds the content, finally! note
it's offset 1,1,1,1 around the
sides to give it that border effect -->
<view name="content" x="1" y="1" width="$
{parent.width-2}" height="${parent.height-2}"/>
</view>
</class>
<!-- actually make some windows -->
<mywindow title="Window 1" x="30" y="30" width="300" height="300">
<!-- inner content of the first window -->
<text text="this is my first window"/>
</mywindow>
<mywindow title="Window 2" x="100" y="150" width="300"
height="300">
<!-- inner content of the second window -->
<text bgcolor="white" text="this is my second window"
align="center" valign="middle"/>
</mywindow>
</canvas>
On Jan 4, 2008, at 12:43 PM, Greg Denton wrote:
This is a newbie question about how to customize windows. Seems like
the look of a window cannot be modified much via subclassing (or any
other way) due to the graphics being drilled into the library code
in windowpanel.lzx . Is this true? I'm just trying to create a
lighter-weight looking window. Are there any licensing problems with
copying/modifying the library code to produce a different looking
window? Thanks.
