templates

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

prerequisites

each template must contain the template { } syntax

template.core
{
  // put your nodes in here
  list down
  {
  }
}

1. linking styles to templates

Styles are associated to a template by linking the style of the template tag to the name of the style in the styles file.

For more information about styles see Styles

Example: In the example below the style of the template tag .core tells the engine to use the .core style group in the styles 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. 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.

setup 
{
	// 2. configures the data during design mode	
	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' },
	]
}
template.core
{				
	// display the test data here...
}

4. pre-processor directives

You can use pre-processor directives ( like #define in c# or c++ ) This comes in handy for testing purposes.

example : the example below defines test-data and only loads sample data if test-data is defined.

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

Using 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( event in events )
		{
			list down
			{
				text6.accent  @event.Title
				text6.accent  @event.DayName	
				text6.accent  @event.StartTime	
				text6.accent  @event.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 template service
TemplateService svc = new TemplateService();
svc.initialize((Activity)this);

// 2. setup the references to the resource 
// strings and images and styles.
svc.Context.ResourceStyles = R.style.class;
svc.Context.ResourceStrings = R.string.class;
svc.Context.ResourceImages  = R.drawable.class;

// 3. load the theme and set optional variables
svc.registerDefaultStyles();
svc.setThemeVariable("textColorAccent", "#2980B9", true);
svc.loadThemeFile("slate_theme_default.txt");

// 3. OPTIONAL: setup some sample data to use in template.
List<Event> events = getEventsForThisWeek();
svc.getData().put("days", events);

// 4. Now execute template and get view
TemplateView tview = svc.executeTemplateFile("events_for_week.txt");

// Get the built view and add it to your page
View rootView = tview.RootView;