<?xml version="1.0" encoding="utf-8"?>
<!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>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
		<meta name="generator" content="Adobe GoLive 5"/>
		<title>Translate Time Sample Extension</title>
	</head>

	<body>
		<hr/>
		<p>ADOBE SYSTEMS INCORPORATED</p>
		<p>Copyright 2001-2002 Adobe Systems Incorporated<br/>
			All Rights Reserved</p>
		<p>NOTICE: Adobe permits you to use, modify, and distribute this file in accordance with the terms of the Adobe license agreement accompanying it. If you have received this file from a source other than Adobe, then your use, modification, or distribution of it requires the prior written permission of Adobe.</p>
		<hr/>
		<p><b>Extension Name:</b> Translate Time</p>
		<p><b>Folder name:</b> Translate Time</p>
		<hr/>
		<p><b>Description:</b></p>
		<p>This sample demonstrates how to use the JSXTranslator object and how to implement a markup translator. See the documentation for more information on JSXTranslator. A markup translator is called before the GoLive parser parses the file. The translator is able to modify the document markup before it is sent to the parser.</p>
		<p>This sample translates a tag called &lt;time&gt;. The translator is activated on file extensions htm and html. These are specified in the &lt;jsxtranslator&gt; tag (see below).</p>
		<p>The time tag is replaced by the current time. See the translate() function in the &lt;script&gt; tag (see below).</p>
		<p>According to the implementation, the &lt;time&gt; tag is defined as follows:</p>
		<blockquote>
			<pre>&lt;!ELEMENT time - o EMPTY&gt;</pre>
			<pre>&lt;!ATTLIST time</pre>
			<blockquote>
				<pre>format CDATA #IMPLIED &gt;</pre>
			</blockquote>
		</blockquote>
		<p>The translator translates the contents of the format attribute as follows:</p>
		<p>%H: hours</p>
		<p>%M: minutes</p>
		<p>%S: seconds</p>
		<hr/>
		<p><b>How to use</b></p>
		<ol>
			<li>Create a new document.</li>
			<li>From the Translator Tags Objects Palette, drag the &lt;time&gt; tag object onto the page. Notice that the current time is displayed on the &lt;time&gt; tag.</li>
			<li>Highlight the &lt;time&gt; tag. The Inspector shows the current setting for the format attribute (%H:%M:%S).</li>
			<li>In the Inspector, change the format attribute (%H hours, %M minutes, %S seconds). See the changes reflected in the document view.</li>
			<li>In source view, you can see the &lt;time&gt; tag.</li>
			<li>In Split View (select &quot;Toggle Split View&quot; at the bottom of the Layout window), you can see the &lt;agl:translated&gt; tag contents that this extension updates. &lt;agl:translated&gt; is the translation of the &lt;time&gt; tag.</li>
			<li>Save the document, and view the document in a text editor. See the &lt;time&gt; tags.</li>
			<li>Open the document in GoLive. The &lt;time&gt; tags are translated, and display the current time.</li>
		</ol>
		<hr/>
		<p><b>Removing the blue color</b></p>
		<p>If you would not like the time objects to be displayed in blue, create an attribute called &quot;blend&quot; set to &quot;no&quot; on to the jsxtranslator object below.</p>
		<hr/>
		<p><b>Editing this sample</b></p>
		<p>It is necessary to turn off this extension before editing this file. If the extension is not turned off, &lt;time&gt; tags that occur in this document will be translated to &lt;agl:translated&gt; tags.</p>
		<hr/>
		<p><b>Module Definition:</b></p>
		<jsxmodule debug="debug" info="$$$/GoLiveExtension/TranslateTime/info=This sample SDK extensions adds a Translator Tags Objects Palette with a <time> tag object. The time object displays the current time. This sample demonstrates how to use the JSXTranslator object and how to implement a markup translator." name="Translate Time" version="1.0"/> 
		<p><b>Scripts:</b></p>
		<script><![CDATA[
//--------------------------------------------------------------------
// GLOBAL VARIABLES
//--------------------------------------------------------------------

// define global variables here


//--------------------------------------------------------------------
// CALLBACK FUNCTIONS
//--------------------------------------------------------------------


//---------------------------------------------------------
// controlSignal -  called when the state of a control has changed
//
// Description:
//   Use to extract the state of the control, and react to the state
//   change.
//
// Warning: see documentation for warnings about reparse, 
//   reformat, setInnerHTML, and setOuterHTML.

function controlSignal (control) 
{
	if (control.name == "content") {
		var fmt = control.value;
		var newContent = "<time format=\"" + fmt + "\">";
		app.translator.rewriteSnippet (newContent, module.localize("Time Format Change"));
	}
}


//---------------------------------------------------------
// inspectTranslation -  inspect the translated tag
//
// Description:
//   Use it to fill in the controls of the inspector with
//   current values.

function inspectTranslation (inspector, source) 
{
	var fmt = "%H:%M:%S";
	var pattern = /format\s*=\s*["'](.*)["']/;
	var match = source.match (pattern);
	if (match != null) 
		fmt = match [1];
	inspector.content.value = fmt;
}


//---------------------------------------------------------
// translate -  implement the document translation
//
// Description:
//   Called when the translator detects a match
//   with its defined file types and one of its regular
//   expressions.

function translate (documentURL, siteURL, source) 
{
	var pattern =/<time[^>]*>/g; // /<time\s+[^>]*> |<time>/g;
	var date = new Date();
	vartranslation	= "";
	var h	 = date.getHours();
	var m = date.getMinutes();
	var s	 = date.getSeconds();
	// create two-digit strings
	h = (h < 10) ? "0" + h : "" + h;
	m = (m < 10) ? "0" + m : "" + m;
	s = (s < 10) ? "0" + s : "" + s;
	while (true) {
		// find the <time> tag
		var match = pattern.exec (source);
		if (match == null) {
			break;
		}		
		var idx = match.index;
		match = match [0];
		// find the format attribute
		var fmt = /format\s*=\s*["'](.*)["']/.exec (match);
		if (fmt != null) {
			// set up the resulting clock string
			fmt = fmt [1];
		}
		else {
			// no format attribute, use default
			fmt = "%H:%M:%S";
		}
		translation = "";
		for (var i = 0; i < fmt.length; i++) {
			var ch = fmt [i];
			if (ch == '%' && i < fmt.length - 1) {
				// replace h, m, or s
				switch (fmt [++i]) {
				case 'h':
				case 'H': 
					translation += h; 
					break;
				case 'm':
				case 'M': 
					translation += m; 
					break;
				case 's':
				case 'S': 
					translation += s; 
					break;
				default: 
					translation += "%"; i--;
				}
			}
			else {
				translation += ch;
			}
		}
		app.translator.translateSnippet (idx, match.length, translation);
	}
}


//--------------------------------------------------------------------
// HELPER FUNCTIONS
//--------------------------------------------------------------------
]]>
		</script>
		<hr/>
		<p><b>User Interface Tags:</b></p>
		<p><b>Image</b> Define images here. These are referenced by the picture attribute of the jsxpaletteentry and jsxpalettegroup tags.</p>
		<p>The little icon displayed in the Objects palette tab:</p>
		<img src="Images/groupicon.jpg" name="paletteGroupIcon"/> 
		<p>The icon to be displayed in the Objects palette:</p>
		<img src="Images/paletteicon.gif" name="paletteIcon"/> 
		<img src="Images/paletteicon_over.gif" name="hilitePaletteIcon"/> 
		<p><b>Translator</b> Define a translator that imitates server side replacements.</p>
		<jsxtranslator classid="timeClass" direction="twoway">
			<param name="extension" value="html"/>
			<param name="extension" value="htm"/>
			<param name="expression" value="<time\s+[^>]*>|<time>"/>
		</jsxtranslator>
		<p><b>Inspectors</b> Define Inspectors for custom tags</p>
		<jsxinspector classid="timeClass" height="164" name="inspector" title="Time Inspector" width="215">
			<table width="215" border="0" cellspacing="0" cellpadding="0" cool="cool" gridx="5" gridy="5" height="164" showgridx="yes" showgridy="yes" usegridx="yes" usegridy="yes">
				<tr height="10">
					<td colspan="3" width="214" height="10"></td>
					<td width="1" height="10"><spacer height="10" type="block" width="1"/></td>
				</tr>
				<tr height="153">
					<td width="10" height="153"></td>
					<td align="left" valign="top" width="40" height="153" xpos="10">
						<jsxcontrol height="16" name="static" posx="10" posy="10" type="static" value="Format:" width="38"></jsxcontrol>
					</td>
					<td align="left" valign="top" width="164" height="153" xpos="50">
						<jsxcontrol halign="scale" height="18" name="content" posx="50" posy="10" type="edit" valign="top" width="150"></jsxcontrol>
					</td>
					<td width="1" height="153"><spacer height="153" type="block" width="1"/></td>
				</tr>
				<tr cntrlrow="cntrlrow" height="1">
					<td width="10" height="1"><spacer height="1" type="block" width="10"/></td>
					<td width="40" height="1"><spacer height="1" type="block" width="40"/></td>
					<td width="164" height="1"><spacer height="1" type="block" width="164"/></td>
					<td width="1" height="1"></td>
				</tr>
			</table>
		</jsxinspector>
		<p><b>Palette Group</b> Define a new tab for the Object Palette, or add to an existing tab.</p>
		<jsxpalettegroup display="Translator Tags" name="TRANS" order="3000" picture="paletteGroupIcon" taborder="3000">
			<jsxpaletteentry classid="timeClass" display="<time> tag" picture="paletteIcon"  hilitepicture="hilitePaletteIcon">
				<time format="%H:%M:%S"></time>
			</jsxpaletteentry>
		</jsxpalettegroup>
		<p><b>JSXLocale</b> Specify localized versions of strings used in menu items, dialogs, alerts, etc.</p>
		<jsxlocale>
			<table>
				<tr>
					<th>US</th>
					<th>DE</th>
				</tr>
				<tr>
					<td>time Inspector</td>
					<td>time Inspektor</td>
				</tr>
				<tr>
					<td>Time Format Change</td>
					<td>Zeit Format Änderung</td>
				</tr>
			</table>
		</jsxlocale>
		<p></p>
	</body>

</html>