Sample Bus Stop Record Template
From TechWiki
Here is a sample Smarty record template page in PHP for presenting a bus stop record. NOTE: Renderings for this code are presented at the bottom of this document. The nominal source file is now_busstops.tpl:
<!-- $Id$ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{*
// Tells the templating engine to check for linksTo relationships.
setting->LinksTo=false
// Tells the templating engine NOT to include labels for object resources
setting->setAttributeIgnoreResourceLabel=false
*}
{* Attributes assignation: assignation of pre-defined variables *}
{attribute->getInstanceRecordType assign='InstanceRecordType'}
{attribute->getInstanceRecordDescription assign='InstanceRecordDescription'}
{attribute->getInstanceRecordLabel assign='InstanceRecordLabel'}
{attribute->getInstanceRecordDataset assign='InstanceRecordDataset'}
{attribute->getValues attribute='http://www.geonames.org/ontology#locatedIn' assign='locatedIn'}
{attribute->getValues attribute='http://www.w3.org/2003/01/geo/wgs84_pos#lat' assign='lat'}
{attribute->getValues attribute='http://www.w3.org/2003/01/geo/wgs84_pos#long' assign='long'}
{attribute->getValues attribute='http://xmlns.com/foaf/0.1/homepage' assign='homepage'} {* URL *}
{* ----------------------------------------- *}
{attribute->getUnasigned assign='unasignedAttributes'}
{php}
// Set the template folder URL into a smarty variable
$this->assign('templateLocationUrl', $this->templateLocationUrl);
{/php}
<title>{if $InstanceRecordLabel != ''}{$InstanceRecordLabel} bus stop{else}bus stop{/if}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{*
Used to specify the CSS file related to this template. Put only the name of the file here. The name will be resolved by
the node in the folder "*/templates/css/file_name.css".
*}
<link type="text/css" rel="stylesheet" media="all" href="{$templateLocationUrl}css/now_busstops.css" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {ldelim} height: 100% {rdelim}
body {ldelim} height: 100%; margin: 0; padding: 0 {rdelim}
#map_canvas {ldelim} height: 100% {rdelim}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
{*
IMPORTANT NOTE:
Only what is within the body of this XHTML template will be used to skin the data type
*}
<body>
<script type="text/javascript">
$(document).ready(function()
{ldelim}
var latlng = new google.maps.LatLng({$lat[0].value}, {$long[0].value});
var myOptions = {ldelim}
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
{rdelim};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({ldelim}
position: latlng,
map: map,
icon: "http://npidev.structureddynamics.com/sites/all/modules/conStruct/templates/imgs/busstop.png",
title: "Bus stop: {$InstanceRecordLabel}"
{rdelim});
{rdelim});
</script>
<div id="tBody">
<table id="tMainCharacteristicsTable">
<tbody>
<tr>
<td id="tLeftInformationColumn" valign="top">
<a href="{$imageUrl[0].value}">
<img src="{$imageUrl[0].value}" style="height: 300px" title="{$InstanceRecordLabel}" border="0" />
</a>
<h2>General Information</h2>
<ul>
<li>
<img src="{$templateLocationUrl}imgs/house.png" style="padding-left: 3px; padding-right: 5px;" />The bus stop <code>{$InstanceRecordLabel}</code> is located in the <a href="{$locatedIn[0].value}">{$locatedIn[0].valueLiteral}</a> neighbourhood.
</li>
{if $homepage[0].value != ""}
<li><img src="{$templateLocationUrl}imgs/world_link.png" /> <a href="{$homepage[0].value}" title="document">Bus stop's homepage</a></li>
{/if}
</ul>
</td>
<td id="tMapColumn" valign="top">
{if $lat != "" && $long != ""}
<div id="map_canvas" style="width:400px; height:300px;"></div>
{/if}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{*
// Tells the templating engine to check for linksTo relationships.
setting->LinksTo=false
// Tells the templating engine NOT to include labels for object resources
setting->setAttributeIgnoreResourceLabel=false
*}
{* Attributes assignation: assignation of pre-defined variables *}
{attribute->getInstanceRecordType assign='InstanceRecordType'}
{attribute->getInstanceRecordDescription assign='InstanceRecordDescription'}
{attribute->getInstanceRecordLabel assign='InstanceRecordLabel'}
{attribute->getInstanceRecordDataset assign='InstanceRecordDataset'}
{attribute->getValues attribute='http://www.geonames.org/ontology#locatedIn' assign='locatedIn'}
{attribute->getValues attribute='http://www.w3.org/2003/01/geo/wgs84_pos#lat' assign='lat'}
{attribute->getValues attribute='http://www.w3.org/2003/01/geo/wgs84_pos#long' assign='long'}
{attribute->getValues attribute='http://xmlns.com/foaf/0.1/homepage' assign='homepage'} {* URL *}
{* ----------------------------------------- *}
{attribute->getUnasigned assign='unasignedAttributes'}
{php}
// Set the template folder URL into a smarty variable
$this->assign('templateLocationUrl', $this->templateLocationUrl);
{/php}
<title>{if $InstanceRecordLabel != ''}{$InstanceRecordLabel} bus stop{else}bus stop{/if}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{*
Used to specify the CSS file related to this template. Put only the name of the file here. The name will be resolved by
the node in the folder "*/templates/css/file_name.css".
*}
<link type="text/css" rel="stylesheet" media="all" href="{$templateLocationUrl}css/now_busstops.css" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {ldelim} height: 100% {rdelim}
body {ldelim} height: 100%; margin: 0; padding: 0 {rdelim}
#map_canvas {ldelim} height: 100% {rdelim}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
{*
IMPORTANT NOTE:
Only what is within the body of this XHTML template will be used to skin the data type
*}
<body>
<script type="text/javascript">
$(document).ready(function()
{ldelim}
var latlng = new google.maps.LatLng({$lat[0].value}, {$long[0].value});
var myOptions = {ldelim}
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
{rdelim};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({ldelim}
position: latlng,
map: map,
icon: "http://npidev.structureddynamics.com/sites/all/modules/conStruct/templates/imgs/busstop.png",
title: "Bus stop: {$InstanceRecordLabel}"
{rdelim});
{rdelim});
</script>
<div id="tBody">
<table id="tMainCharacteristicsTable">
<tbody>
<tr>
<td id="tLeftInformationColumn" valign="top">
<a href="{$imageUrl[0].value}">
<img src="{$imageUrl[0].value}" style="height: 300px" title="{$InstanceRecordLabel}" border="0" />
</a>
<h2>General Information</h2>
<ul>
<li>
<img src="{$templateLocationUrl}imgs/house.png" style="padding-left: 3px; padding-right: 5px;" />The bus stop <code>{$InstanceRecordLabel}</code> is located in the <a href="{$locatedIn[0].value}">{$locatedIn[0].valueLiteral}</a> neighbourhood.
</li>
{if $homepage[0].value != ""}
<li><img src="{$templateLocationUrl}imgs/world_link.png" /> <a href="{$homepage[0].value}" title="document">Bus stop's homepage</a></li>
{/if}
</ul>
</td>
<td id="tMapColumn" valign="top">
{if $lat != "" && $long != ""}
<div id="map_canvas" style="width:400px; height:300px;"></div>
{/if}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Record View
Here is a rendering of this record template while in individual record 'View' mode:
Browse Record
Here is a rendering of a recordset record template for this same record. This record view has been generated by the structBrowse conStruct tool, and is used the resultset records templates.
