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
{				
	list:root down
	{
		@each( day in days )
		{
			list down
			{
				text6.accent  @day.Title
				text6.accent  @day.DayName	
				text6.accent  @day.StartTime	
				text6.accent  @day.Location
			}
		}
	}
}

6. data integration with code

Ultimately the data for the template comes from your application. In order to supply the data for the template through code you would do the following:

// 1. Get the content of the template from your asset file.
String templateContent = getTemplateContent("events_for_week.txt");

// 2. Get the template service
TemplateService svc = new TemplateService();

// 3. build a list of events for the template
List<Event> events = getEventsForThisWeek();

// 4. Now supply the data to the template engine
svc.getData().put("days", events);

// 5. Now execute the template and get the control.
TemplateView tview = svc.executeTemplate(templateContent);