Your first website powered by haXe

Ok this is a very basic tutorial about how to make a website, fully powered by haXe :p. So you're going to see how to use templo2 in order to make template, and hss for css design.

You can see the result here. It's a very simple design...it's better than nothing... :p, so I hope it will help to begin with templo and hss, and also haXe (targeting php).

Requirements :

  • You'll need to install templo : open a terminal > haxelib install templo
  • then install hss: download it > Windows | Linux
  • For linux you just have to dezip and move hss binarie to /usr/bin/ directory. For windows I just copied and pasted hss.exe into haxe directory c:\Motion-Twin\haxe\hss.exe
  • Configure your path environment :
    For Windows > Right click on "My Computer" > Property > Advanced settings > Paths environment > create a new user variables (name : HSS; value: c:\Motion-Twin\haxe\hss.exe) then valid. Now hss should be well installed.
    No need for linux since you moved hss binary to /usr/bin/

Now let's create the following folders in order to organize our files :

  • /src > haxe source files
  • /lib > output directory for php files generated by haXe
  • /tpl > template
  • /tmp > output directory for php files generated by templo
  • /media > for HSS source file and CSS file generated by HSS

Then let's create our templates. My main template is named page.mtt

Almost of our pages are going to be structured like this : a title page displayed, a header, a content, and a footer. In order to apply some CSS design we also are going to include a CSS stylesheet.

You have to know that files generated by templo will be named like this "tpl__YOUR_TEMPLATE_NAME.mtt.php, so in a template, you can call/include another template just by calling its name, without the ".php" extension. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
    <head>  
        <title>
			::titlePage::
		</title> 
		<link rel="stylesheet" type="text/css" href="media/style.css"/>
    </head>
    <body>      	 
        ::use 'tpl__header.mtt'::::end:: 
        
        ::use 'tpl__content.mtt'::::end::      
        
        ::use 'tpl__footer.mtt'::::end::       
    </body>
</html>

Hum now let's create our header template : header.mtt
another template is included in it, it's going to be a horizontal menu, and that's all for header... 

<div id="header">
	<div id="menu">
			<div class="itemMenu"> <a href="?p=home">Home </a></div>
			<div class="itemMenu"> <a href="?p=content1">Content1 </a></div> 
			<div class="itemMenu"> <a href="?p=">404</a></div>  
	</div> 
    ::use 'tpl__menu.mtt'::::end::  
</div>

menu.mtt : 

<div id="menu">
	    <div class="itemMenu"> <a href="?p=home">Home </a></div>
	    <div class="itemMenu"> <a href="?p=content1">Content1 </a></div> 
	    <div class="itemMenu"> <a href="?p=">404</a></div>  
</div>

Next template > content.mtt :
For the "content" part, we can call another template (templatePage) in order to display differently some contents.

We also are going to include another menu, a vertical menu which is going to be placed on the right.

Just notice the use of the keyword "use". It allows you to include another template after specifying its real name.

You also have to notice the use of the simple quotes.

templatePage isn't between simple quotes, because it's like a variable which is going to be replaced by a value (here a template name).

As we'll never have the same design for the content, we can vary it by using other templates.

In the horizontal menu we saw that we could navigate to 3 pages named : Home, Content1 and 404.

templatePage is going to be replaced by one of these 3 pages.

We specify to the "system" that we are going to display a given template by passing in GET method in the URL, the template requested.

<div id="content"> 
	 ::use templatePage::::end::
	 ::use 'tpl__right_col.mtt'::::end::
</div>

As we said, these are the three templates : home.mtt 

<div id="middleContent"> 
    <h3>A home page</h3>
    <div>
		<p>
			- Some content -
		</p>
    </div>
</div>

content1.mtt

<div id="middleContent"> 
	$$SayHelloTo(haXers)
</div>

page_not_found.mtt

<div id="middleContent">  
	<h3>Uh, page not found ...</h3>
</div>

In content1.mtt you may be noticed the use of a strange syntax (don't you?) : $$SayHelloTo(...)
It's a "macro" !

So let's create our macro file : "macro.mtt"

<macros>
	<macro name="SayHelloTo(name)">
		<span>Hello ::name:: !</span>
	</macro>
</macros>

Next ! the vertical menu : nothing special "right_col.mtt 

<div id="rightCol"> 
	<ul>
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li> 
	</ul>
</div>

And finally, we also have a footer :
footer.mtt :

<div id="footer">
	Proud to be powered by haXe, HSS & Templo  
</div>

Ok, now you know to write templates, include other templates, or to call variables, and also to create some macros.

Remember that in templates, you can use these keywords : 

::if some_condition::
	do_something
::elseif::
	do_whatever
::end::

/**********************/
::set myNameIs = Plop::
His name is ::myNameIs::

/**********************/
::foreach child children::
	This is my ::child::
::end::

/**********************/
::set content='<p>plop</p>'::
::content:: //& lt;p & gt; plop & lt; /p & gt;
::raw content::  //<p>plop</p>

/**********************/
<ul>
::foreach link links::
    <li><a ::attr title link.title; href link.href::>::link.title::</a></li>
::end::
</ul>
/***********************/
<ul id="userMenu" ::cond user.isLogged::>
    <li><a href="/logout">Log out</a></li>
    <li><a href="/account">My account</li>
</ul>

We now have our templates, let's compile them with templo now. Open a terminal :

temploc2 tpl/*.mtt -output tmp/ -php -macros tpl/macros.mtt

Check in the /tmp directory that php files have been generated.

Ok now let's make our design :D.

WebsiteFullyPoweredByhaXe.7z
(136 times)