Making a page template

Page templates are files that can be used by skins that support web pages, also know as 'Site aware' skins. There are many popular Skins that are site aware that come with several page templates. This article will show you how to build a basic template, it does not go in to the detail of styling templates to fit the design of a particular skin.

Note, jAbum offers users of site aware skins a default empty page template, if you want to offer your own instead make sure you name the template empty-page.htt.

The page template is just a plain text file saved with the file extension of .htt, so it can be written with any basic text editor. jAlbum makes it easy to create your own as it comes with an empty template, use the context menu and select "New page" that creates an "empty-page.htt" file. The template for the empty-page.htt looks like this (double click to open):

<ja:include page="page-header.inc" /> <%-- Keep this --%>

<%-- Replace this with your html --%>
    <h1>${title}</h1>
    <div>${comment}</div>

<ja:include page="page-footer.inc" /> <%-- Keep this --%>

As it stands, this page can be modified directly by adding your own HTML code just below the line that includes 'keep this'. To make an interactive template, like the About.htt in the Turtle skin, we need to make some modifications. Start by selecting the template and then double click it to open it. To create fields and settings within a graphical user interface (GUI) we need to insert some code at the beginning of the page. This code is similar to that used by a skin's onload.bsh file to create the gui for any skin, it is wrapped in a Java class that 'extends' jAlbum's JWebPageUI. This next block shows the code for the GUI of a template that will use an iframe to embed another web page in your site, a blog for example.

<%-- User interface for editing this page from within jAlbum --%>
<ja:ui>
	// build the template's GUI
	// give it  meaningful name, like embedIframe
	class embedIframe extends JWebPageUI {
		// Define the interface elements
		// Some text fields to hold the information needed, each field has it's own name
		JTextField iframeWidth = new JTextField("600",3);	// iframeWidth will specify the width of the iframe!
		JTextField iframeHeight = new JTextField("900",3);	// the figures in quotes are the default values, the last figure
		JTextField iframeSRC = new JTextField("");			// sets the width of the field within the gui
		JTextField iframeScrolling = new JTextField("yes",3);	// we also want to control scrolling, yes or no values
		JCheckBox showPageTitle = new JCheckBox("Show page title", true);	// let the user decide if the page title is shown or not
		{	// this and the next closing brace are optional, it can help identify blocks of code
			// having defined our fields and settings we now need to 'add' them to make them visible
			// start by adding a line of text stating what this template does
			add(new JLabel("This template embeds external content in an iframe."));
			// now add a description, on a new line, of the iframeWidth field 
			add("br", new JLabel("Set the iframe width in pixels"));
			// now add the iframeWidth field on the same line
			add(iframeWidth);
			add("br", new JLabel("Set the iframe height in pixels"));
			add(iframeHeight);
			add("br", new JLabel("Enter the src for iframe content"));
			// this could be a long string, e.g http://some-other-site/my-bit/this-page.html
			// so we add the field letting it expand to fill up the horizontal space
			add("tab hfill", iframeSRC);
			add("br", new JLabel("Allow the content to scroll? Enter yes or no"));
			add(iframeScrolling);	
			// this next item is a checkbox which already has a label "Show page title"
			add("br", showPageTitle);
		}
	}	// close the embedIframe class definition
</ja:ui>

Next we want to delete the default HTML content and replace it with our own. We will add a test to see if the page title should be shown and then build the iframe tag. So, delete the lines

<%-- Replace this with your html --%>
    <h1>${title}</h1>
    <div>${comment}</div>

and replace them with this

<ja:if test="${showPageTitle}">
	${title}<br>
</ja:if>
<iframe src="${iframeSRC}" width="${iframeWidth}" height="${iframeHeight}" frameborder="0" scrolling="${iframeScrolling}">

The complete template code should now look like this

<%-- User interface for editing this page from within jAlbum --%>
<ja:ui>
	// build the template's GUI
	// give it  meaningful name, like embedIframe
	class embedIframe extends JWebPageUI {
		// Define the interface elements
		// Some text fields to hold the information needed, each field has it's own name
		JTextField iframeWidth = new JTextField("600",3);	// iframeWidth will specify the width of the iframe!
		JTextField iframeHeight = new JTextField("900",3);	// the figures in quotes are the default values, the last figure
		JTextField iframeSRC = new JTextField("");			// sets the width of the field within the gui
		JTextField iframeScrolling = new JTextField("yes",3);	// we also want to control scrolling, yes or no values
		JCheckBox showPageTitle = new JCheckBox("Show page title", true);	// let the user decide if the page title is shown or not
		{	// this and the next closing brace are optional, it can help identify blocks of code
			// having defined our fields and settings we now need to 'add' them to make them visible
			// start by adding a line of text stating what this template does
			add(new JLabel("This template embeds external content in an iframe."));
			// now add a description, on a new line, of the iframeWidth field 
			add("br", new JLabel("Set the iframe width in pixels"));
			// now add the iframeWidth field on the same line
			add(iframeWidth);
			add("br", new JLabel("Set the iframe height in pixels"));
			add(iframeHeight);
			add("br", new JLabel("Enter the src for iframe content"));
			// this could be a long string, e.g http://some-other-site/my-bit/this-page.html
			// so we add the field letting it expand to fill up the horizontal space
			add("tab hfill", iframeSRC);
			add("br", new JLabel("Allow the content to scroll? Enter yes or no"));
			add(iframeScrolling);	
			// this next item is a checkbox which already has a label "Show page title"
			add("br", showPageTitle);
		}
	}	// close the embedIframe class definition
</ja:ui>
<ja:include page="page-header.inc" /> <%-- Keep this --%>
<ja:if test="${showPageTitle}">
	${title}<br>
</ja:if>
<iframe src="${iframeSRC}" width="${iframeWidth}" height="${iframeHeight}" frameborder="0" scrolling="${iframeScrolling}">
<ja:include page="page-footer.inc" /> <%-- Keep this --%>

Now to save your edit close it's window and say yes to save the change. Double click the thumbnail again, notice that now you see the GUI, not the source code you just wrote! To edit the source code you now must right-click the thumbnail and select 'Edit' (Alt/Opt + ENTER Key) or click on the 'Edit' button between the Explore and Preview buttons.

To use it just fill in the fields as needed to embed the page pointed to by src for the iframe content. This is how the GUI looks.