Creating Windows on HB

On this post i will show you the way you can create and manage windows on HB.

Following is the image showing the HB page we will working on at design time:

the components on the page are:

- database7_1, database7_2: are text, when the user click on 'create windows' we will create three windows, and when click on 'close all windows' all the windows opened will be closed.
- database7_3: this widget will allow us to create windows. we will can move the windows on the page dragging with the mouse from the window's title area.
- database7_4: we will use this widget to create a 'canvas' object, then we will load some HB page inside it and finally we will put the canvas inside the window.

following is the page at visit time:


On the next image you can see how we can move the windows on the page using the mouse:


and next is the code for every event to do this page work:

database7_1_onClick event:

// here we create some windows using the widget

var pagesToLoad=new Array();
pagesToLoad.push('jaime2');
pagesToLoad.push('jaime4');
pagesToLoad.push('jaime5');

var o=page.findObject2('/database7_3');
if (o!=null)
{
for (var i = 0 ;i < pagesToLoad.length ; i++)
{
var w=o.content.application.new_window();
w.title='Window '+(i+1);
// si no especificamos el ancho y alto de la ventana, esta se ajustará a su contenido
w.closeButton(true,w.constant_remove); // show close button
// we want respond to some events
w.addEvents('close|mouseDownOutside','|','win');
// set some styles for the window
w.setStyle('borderColor',0x0099CC);
w.setStyle('borderThicknessLeft',3);
w.setStyle('borderThicknessRight',3);
// show the window
o.content.application.windowManager.addPopUp(w,page,false);
// center the window on the browser
o.content.application.windowManager.centerPopUp(w);



/*
no we create a canvas object, then add the canvas
to the window and load inside it an HB page
*/
var cw=page.findObject2('/database7_4');
var canvas=cw.content.application.new_canvas();
// si no especificamos el ancho y alto del canvas este se ajustara a su contenido
if (canvas!=null)
{
w.addChild(canvas);
page.cargar_pagina(canvas,pagesToLoad[i],'','');
global.canvasWindow=canvas;
}
} // fin ciclo for

}


database7_2_onClick event:

// here we close all the popups
ac=page.getAllPopups();
if (ac.length>0)
{
var o=page.findObject2('/database7_3');
for (var i = 0 ; i < ac.length ; i++)
o.content.application.windowManager.removePopUp(ac[i]);
}

win_windowClose event:

// a window is being closed for the user, you can do something here

win_windowMouseDownOutside event:

// the user clicks outside the window, you can do something here