Window Manager

From Ka-Map Wiki

Jump to: navigation, search
this implementation is still under development. You can find source code in the CVS repository.


Contents

[edit] Purpose

The window manager is a way to optimize the access to all new features ka-map can offer.

Two active examples are avalable here:

The original idea started looking at GIS desktop client applications. Many of the available features can be easily integrated into ka-Map but the actual GUI didn't born to to this. With this window manager it's easy to add new panels or customize the existing ones.

Many more things can be done on the window manager. Post your ideas in the mailing list.

[edit] How it works

The main idea is to create an environment where one or more windows/panels can co-exists and interact.

The window manager can be used independently from ka-Map as this page shows: http://www.ominiverdi.org/ka-map/kappaCVS/kamap_2006_06/htdocs/tools/kaWinManager.html

what you can do is drag & drop windows, roll them up and resize them. Only windows with the bottom right button are resizable.

[edit] Hacking your ka-Map to use the Window Manager

[edit] Edit main files

[edit] index.html

First of all you have to edit index.html as you get it from the CVS. Just few things have to be changed:

  1. added a div with id="map"
  2. commented toggler arrows.
  3. moved tools in different structure.

Let's start with order.

[edit] adding additional scripts

In the HTML head tag add this JS inclusions: 

<script type="text/javascript" src="tools/dom-drag.js"></script> 
<script type="text/javascript" src="tools/kaWinManager.js"></script>
<script type="text/javascript" src="startUp_winman.js"></script>

for the startUp_winman.js it is better if you take away the old startUp.js inclusion.

[edit] setting up stylesheets

to be done. Actually refere to index_winman.html.

[edit] changing body structure

the main thing to do if you want to view the map inside a window is adding a div like inside viewport div:

before: 

 <body onload="myOnLoad();">
 <div id="viewport">
 <!-- top toolbar, title and navigation -->

after: 

 <body onload="myOnLoad();"> 
 <div id="viewport">
 <div id="map">
 </div>
 <!-- top toolbar, title and navigation -->


than reorder div as you prefere remembering to set a unique id for each one (this means you know how to put your hands in HTML).

a working version is index_winman.html also available in cvs.

[edit] startup.js

than it's the turn of startup.js


insert a null variable for kaWinManager: 

//window manager
var kaWinMan=null;

first trick is setting the div "map" as the target for kamap initialization; myOnLoad() function line 86. 

myKaMap = new kaMap( 'map' );

line 120, after drawPage() 

setWindowManager();

then I've added two functions:

setWindowManager ()

it's called at line 130 inside myOnLoad() function. first of all kaWinManager init 

kaWinMan = new kaWinManager('viewport');

then you can create one object for each window you want to create: 

myZoomWin = kaWinMan.createWin('myZoom');
myToolbarWin = kaWinMan.createWin('myToolbar');
myLegendWin = kaWinMan.createWin('myLegend');
...
myViewportWin = kaWinMan.createWin('myViewport');

then you call the drawWindowManager 

drawWindowManager();
drawWindowManager()

this is called by the first one.

now, for each window object you can set window dimensional parameters(x,y,w,h) 

myViewportWin.setValues('Viewport',top_left_x,top_left_y,width,height,boolean_for_resizable);

and then set some content. This part is very important because will get the original div with the choosen id and put it inside the window. 

myViewportWin.pushContent(getRawObject('map'));

the working version is startup_winman.js

[edit] Setting dynamic contents

the simplest way to test dynamic content inside the window manager is hacking myQuery() function inside startup.js

instead of 

WOOpenWin( 'Query', 'map_query.php?'+params, 'resizable=yes,scrollbars=yes,width=600,height=400' );

I've set 

if(myBlackboardWin){
    call('map_query_float.php?'+params,myBlackboardWin, myBlackboardWin.setContent);
}


you can test it using the identify button or link to this view link.


Lorenzo Becchi (lorenzo AT ominiverdi DOT com)

Retrieved from "http://ka-map.ominiverdi.org/wiki/index.php/Window_Manager"
Personal tools