Setting up the window

<Panel color="white" height="300" width="385"/>

<Panel class="Window" id="Window" color="white" width="385" height="300"> <Panel class="TopBar" id="TopBar" height="20" color="black"> <Text color="white" >Window Title</Text> <Button width="20" height="20" >_</Button> <Button width="20" height="20" >X</Button> </Panel> </Panel>

<Defaults> <Panel class="Window" color="White" width="385" height="300"/> <Panel class="TopBar" color="black" height="20" /> <Text class="WindowTitle" text="Window Title"/> <Button class="topButton" width="20" height="20"/> </Defaults>

<Panel class="Window" id="Window"> <Panel class="TopBar" id="TopBar"> <Text class="WindowTitle"/> <Button class="topButton">_</Button> <Button class="topButton">X</Button> </Panel> </Panel>

<Defaults> <Panel class="Window" color="White" width="385" height="300"/> <Panel class="TopBar" color="black" height="20" rectAlignment="UpperCenter"/> <Text class="WindowTitle" text="Window Title" rectAlignment="UpperCenter"/> <Button class="topButton" width="20" height="20" rectAlignment="UpperRight/> </Defaults>

<Button class="topButton" offsetXY="-20 0">_</Button>

<Defaults> <Panel class="Window" width="385" height="300" color="#696969"/> <Panel class="TopBar" height="30" rectAlignment="UpperCenter" color="#191970"/> <Text class="WindowTitle" text="Window" fontSize="18" height="20" fontStyle="Bold" rectAlignment="UpperCenter" color="#FFFFFF" /> <Button class="topButton" width="20" height="20" rectAlignment="UpperRight" color="#eeeeee"/> </Defaults>

<Panel class="Window" id="Window"> <Panel class="TopBar" id="TopBar"> <Text class="WindowTitle" offsetXY="0 -5"/> <Button class="topButton" offsetXY="-25 -5">_</Button> <Button class="topButton" offsetXY="-5 -5" textColor="White" color="red">X</Button> </Panel> </Panel>

<Panel class="Window" width="385" height="300" color="#696969" allowDragging="True" returnToOriginalPositionWhenReleased="false" rectAlignment="MiddleRight"/>

<Panel class="Window" width="385" height="300" color="#696969" outline="#404040" allowDragging="True" returnToOriginalPositionWhenReleased="false" rectAlignment="MiddleRight" outline="#404040"/> <Panel class="TopBar" height="30" width="385" rectAlignment="UpperCenter" color="#191970" outline="#00008B"/>

<Panel class="Window" width="385" height="300" color="#69696940" allowDragging="True" returnToOriginalPositionWhenReleased="false" rectAlignment="MiddleRight" outline="#404040"/> <Panel class="TopBar" height="30" width="385" rectAlignment="UpperCenter" color="#19197040" outline="#00008B"/>

Before we can do anything, we need to set up our window. As our basic layouting element, we use the Panel, because it gives us the highest degree of freedom to position and size its child elements (one could argue that for our task the VerticalLayout may be useful, but as if have stated in the first part of this series, this layout is, sadly, not useful for cases like this because it resizes every child element to fit its space). To set up the window, we firstly define a panel with defined dimensions and a color (otherwise it would be simply invisible).This gives us the following window:Not very exciting, eh?We will now add typical window top bar with two buttons and a text to display the title of the window. For this task we will define another panel, together with a text element and two buttons:This will result in the following window:That is also only a slight improvement to before. Also, our xml starts to get really messy. That's a good chance to clean up our xml and define a standard appearance via defaults:After assigning the right classes, our code will now look a lot cleaner:We now have to get our top bar to the actual top to make this mess look like a normal window. Also the buttons have to be moved to the right and separated. For this, we change the defaults we have set up to accomodate for our new needs:To separate the buttons, the left (minimize) button needs to get an offset. Because we want to move it to the left, it will get a negative offset for X-axis:Now it looks a lot nicer:But without some color and fancy effects is looks rather boring, don't you think?So i think we can now start to set some colors. For main window, we will use a darker grey which is, in my opinion, much less "agressive" than plain white. Concerning the buttons we will only color the closing button red, because a closing button is always red. Also we need to change the color of the text to make it more visible (and also tweak around with its style and font size). And the top bar needs another color, plain black is simply boring. Every color is possible, i personally prefer could old midnight blue:We will also tweak the positioning of the buttons and the title a little more to give the top bar a nicer look:Before we start the scripting to make our window functional, we need to adjust a few more things:Every user would be annoyed if the window would pop up in the middle of screen and he or she not even able to move it, right?We can simply change that via fiddling around with the default for our window:What have we done? Via setting theattribute to true, we make the panel and thus its child elements dragable. To let the user actually decide where the window should go, we also need to set theattribute to false. Our last change sets the starting position of the window to the middle right of the screen:We should also at a little boundary to our window and top bar to make it look better. This can be done via theattribute:The changes are small, but visible:Now we could be done but allow me to propose one last little change to finish the looks of our window: Transparency. This can be easily added by changing theattribute of both the window and the top bar. We will set the opacity to 25% to give it a nice look: