Custom Simple Print
This methodology works when you know how you want your printed map to look. Play around with it — there are always variations
4 required 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">
</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@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@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>
function myOnLoad()
{
CWC2OnLoadFunction();
}
<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:
- 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:
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.
- 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.
- 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.
Created by: jfournier last modification: Wednesday 02 of February, 2005 [16:47:29 UTC] by jfournier
|
