[Chameleon] how to create a custom print layout
Jason Fournier
jfournier at dmsolutions.ca
Fri Jan 28 07:03:59 EST 2005
Brian,
Another method for generating print versions of you map is to create an
entirely new Chameleon app altogether. This may seem redundant but it
actually makes sense in alot of cases and is easier that it might first
seem. This methodology works when you know exactly how you want your
printed map to look. Here is how I have done it in the past (there are,
of course, always variations):
4 files:
print_nav.html
print.html
print.phtml
print_template.html
Basically, access to your custom printing is achieved from your main
Chameleon app via a link widget, eg:
<cwc2 type="Link" linktype="javascript" jsfunction="openPrintDlg"
styleresource="NavButton" image="icons/icon_print.png" ImageTip="Print
Your Current Map">
<image state="normal"/>
<image state="hover"/>
<image state="selected"/>
</cwc2>
This widget will call a custom javascript function (in my case
openPrintDlg):
function openPrintDlg()
{
var szSID = document.forms[0].sid.value;
var url = 'simpleprint.phtml?sid='+szSID;
window.open(url,'printwin','width=675,height=600,directories=no,location=yes,menubar=no,scrollbars=yes,status=no,toolbar=no,resizable=yes');
}
As you can see ... this javascript function calls our simpleprint.phtml
file and passes it the SID of our Chameleon app (very important!).
simpleprint.phtml is a simple frameset:
-FILE-------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Print</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
</script>
</head>
<frameset rows="27,*" frameborder="NO" border="0" framespacing="0">
<frame src="print_nav.html" name="topFrame" scrolling="NO" noresize
title="topFrame" >
<frame src="print.phtml?sid=<?php echo $_GET['sid']; ?>"
name="mainFrame" title="mainFrame" scrolling="yes">
</frameset>
<noframes><body>
</body></noframes>
</html>
-END FILE-------------------------------------
The reason for using a frameset will become clear in a bit. Our top
frame includes our print navigation (eg):
-FILE-------------------------------------
<html>
<head>
<title></title>
<style>
.simplePrint {
font-family: arial, helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
}
.helpNav {
font-family: arial, helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
border-bottom: 2px solid #000000;
height: 27px;
padding-left: 5px;
padding-right: 5px;
margin-left: 0px;
margin-right: 0px;
}
</style>
</head>
<body bgcolor="#d4d4d4" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0">
<table cellpadding="0" cellspacing="0" border="0" width="100%"
class="helpNav">
<tr>
<td align="left" valign="middle"><a href="javascript:void(0);"
onClick="window.top.mainFrame.focus(); window.top.mainFrame.print();"
class="simplePrint" target="mainFrame">Print Map</a></td>
<td align="right" valign="middle"><a href="javascript:void(0);"
onClick="window.close();" class="simplePrint">Close Print</a></td>
</tr>
</table>
</body>
</html>
-END FILE-------------------------------------
while our main frame is the actual Chameleon app we want to print
(initialization file eg):
-FILE-------------------------------------
<?php
/**
* Application: Chameleon Print Init file
* Revision: $Id:
* Purpose: Chameleon
* Author: Jason Fournier (jfournier at dmsolutions.ca)
* Copyright:
*/
include( "/path/to/chameleon/htdocs/chameleon.php" );
$szTemplate = "print.html";
$szMapFile = "../map/chameleon.map";
class SimplePrint extends Chameleon
{
function SimplePrint()
{
parent::Chameleon();
$this->moMapSession = new MapSession_RW;
$this->moMapSession->setTempDir( getSessionSavePath());
}
}
$oApp = new SimplePrint();
$oApp->CWCInitialize( $szTemplate, $szMapFile );
// Pass Any Vars you like here ....
$oApp->setVar( 'todayDate', date('r') );
$oApp->setVar( 'title', 'My Map' );
$oApp->CWCExecute();
?>
-END FILE-------------------------------------
As you can see from above, this is a standard Chameleon Initialization
file .... which means that it can do anything a regular Chameleon app
can do. I mention this because you can pass it (via a $_GET url
perhaps) a title and then:
$oApp->setVar( 'title', $_GET['title'] );
The title can be set by the user in the main Chameleon app either using
a special input textbox or even a javascript prompt.
The last file you need to have is the Chameleon template itself. Here
is a VERY simple rendition:
-FILE-------------------------------------
<!--
/**
* Application: Chameleon Print Template
* Revision: $Id:
* Purpose: Chameleon Template
* Author: Jason Fournier (jfournier at dmsolutions.ca)
* Copyright:
*/
-->
<cwc2 type="SharedResource" name="WaitImage">
<waitimage language="en-CA" waitimage="images/spinner.gif"
waitimagewidth="216" waitimageheight="50"/>
<waitimage language="fr-CA" waitimage="images/spinner_f.gif"
waitimagewidth="216" waitimageheight="50"/>
</cwc2>
<html>
<head>
<title>Print</title>
<script>
function myOnLoad()
{
CWC2OnLoadFunction();
}
</script>
<style>
body {
padding:0px;
margin:0px;
}
.h2 {
font-family: arial, helvetica, verdana,serif,sans-serif,monospace;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body onLoad="myOnLoad()">
<form method="POST">
<table width="0" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><span class="h2">[$title$]</span></td>
</tr>
<tr>
<td valign="top"><cwc2 type="MapDHTML" bordercolor="#000000"
visible="true" width="400" height="300" allowresize="true"
marqueecolor="FF3333" marqueewidth="2" minscale="1"></cwc2></td>
</tr>
</table>
</form>
</body>
</html>
-END FILE-------------------------------------
I have included our map and the title of the application. Some notes of
interest at this point:
o The size of the map is probably most easily controlled by including a
different template depending on desired printed sizes. So you probably
want to have the following templates:
- sp_a5.html
- sp_legal.html
The selection of the proper template can be done with a $__GET var:
if( $_GET['mapsize'] == 'sp_a5' )
$szTemplate = 'sp_a5.html
etc. etc. You could also set this via the initialization file with
MapScript ... but that's just making it more complicated probably.
o The Chameleon application knows which map to use because of the SID.
Whatever is shown on the main map at this point is what will be printed.
o I use frames for this because I don't want to see the words 'Print'
and 'Close Window' on my resulting pages. you could bypass the frameset
(ie, two files) and go directly to the SimplePrint Chameleon app -
nothing wrong with that technically speaking. I find the frame method
to look more professional - especially since you can style it to look
any way you want.
To recap:
A Link widget in your main Chameleon application calls a small
javascript function which opens a new window (or open in _self). this
new window contains a frameset - the top being a small nav and the
bottom frame being a Chameleon app. The Chameleon app gets the SID of
the main app and shows whatever widgets are defined in the simple template.
That should do it. I will (at some point in the near future) place this
howto on the Chameleon tiki with supporting files.
Jason
Brian May wrote:
> What is a good way to create a custom print layout? For example, instead
> of using the PrintProduction widget, I would like for the user to be
> able to select a "Print 11 x 8.5" or "Print 17 x 11" button, be prompted
> for a Title, and then the print layout is created in a new window. I've
> got the HTML markup for how I want the print layout to look, I'm just
> not sure how to incorporate that into my Chameleon app.
>
> thx
> Brian
> _______________________________________________
> Chameleon mailing list
> Chameleon at lists.maptools.org
> http://lists.maptools.org/mailman/listinfo/chameleon
>
More information about the Chameleon
mailing list