templates

templates are defined in a normal text file. list below are some of the features of the templates

1. link style group to template

In the example below the .core links the template to the css style group called "core" in your style file.

template.core
{
   list down
   {
       text6 'this is text1'
       text6 'this is text2'
   }
}

2. using comments

1. Comments are in the form of // just like in java.
2. Multi-line comments /* */ are NOT supported.

template.core
{
   list down
   {
       // this is comment 1
       text6 'this is text1'

       // this is comment 2
       text6 'this is text2'
   }
}

3. pre-processor directive

You can use pre-processor directives ( like #define in c# or c++ ) This comes in handy in the example below which defines test-data and checks for this to load some sample data for the template

define test-data
setup 
{	
	ifdef test-data	
	    // set some sample data here.
	endif
}

4. setup section for data ( optional )

A nice feature of the template is to provide a "setup" section which allows you to define variables such as arrays and dictionaries for the purpose of loading up some sample data for the template.

define test-data
setup 
{
	// 2. configures the data during design mode
	ifdef test-data	
		set events = [		
			{ DayName : 'MON', Title: 'Event 1', Location: 'Conference room a', StartTime: '1:30 pm' },
			{ DayName : 'TUE', Title: 'Event 2', Location: 'Conference room b', StartTime: '2:30 pm' },
			{ DayName : 'WED', Title: 'Event 3', Location: 'Conference room c', StartTime: '3:30 pm' },
			{ DayName : 'THU', Title: 'Event 4', Location: 'Conference room d', StartTime: '4:30 pm' },
			{ DayName : 'FRI', Title: 'Event 5', Location: 'Conference room e', StartTime: '5:30 pm' },
		]
	endif
}
template.core
{				
	// display the test data here...
}

5. data integration and loops

Use the example above ( loading some sample data ), we can now bind that data to controls and even loop through collections. For more information on how to bind see the data wiki page.

define test-data
setup 
{
	// 2. configures the data during design mode
	ifdef test-data	
		set events = [		
			{ DayName : 'MON', Title: 'Event 1', Location: 'Conference room a', StartTime: '1:30 pm' },
			{ DayName : 'TUE', Title: 'Event 2', Location: 'Conference room b', StartTime: '2:30 pm' },
			{ DayName : 'WED', Title: 'Event 3', Location: 'Conference room c', StartTime: '3:30 pm' },
			{ DayName : 'THU', Title: 'Event 4', Location: 'Conference room d', StartTime: '4:30 pm' },
			{ DayName : 'FRI', Title: 'Event 5', Location: 'Conference room e', StartTime: '5:30 pm' },
		]
	endif
}
template.core
{				
	@each( day in days )
	{
		list down
		{
			text6.accent  @day.Title
			text6.accent  @day.DayName	
			text6.accent  @day.StartTime	
			text6.accent  @day.Location
		}
	}
}