[Laszlo-user] Customizing the window component

[jamesr]

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.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.openlaszlo.org/pipermail/laszlo-user/attachments/20080104/5f77819e/attachment-0001.html