kishore edited this page Jun 26, 2014 · 17 revisions

Like most templating engines, Slate templates consists of 3-4 major components/phases. these include the templates themselves and the features supported. The syntax for the tags, and how to supply data to the template.

  1. basics
  2. tags
  3. templates
  4. styles
  5. data
  6. limitations
  7. license
  8. releases

Sample App

There is a sample android app available in the github repo that uses slate templates. Please refer to the sample for more detailed information.

Initial release

This is the first release ( beta ) of slate templates. The second release ( beta 2 ) will be out in a few weeks. Refer to the releases section for more info.

Setup

The setup for slate-templates involves 3 things:

1. Entries in styles.xml ( this will not be necessary in the next version )

Slate templates uses tags that are very similar to html. This includes headings, texts and images.

  1. headings h1 to h6
  2. text sizes text1 to text 6
  3. image icon sizes small, mid, large, xlarge are supported

To automatically have text scaled to different resolutions, we have created default styles for h1-h6 and text1-text6 and for images. These need to be in your styles.xml. Here is the setup. You can also copy this from the sample app above.

Note: This step will not be necessary in the next version of slate templates as it will done programmatically in slate code.

<!-- Refer to styles.xml in the sample app -->  
<!-- Base text styles -->    
       
    <!-- Headings and Text ( size 1 - 6 ) -->    
    <style name="H1" parent="AppTextHeadingBase">
        <item name="android:textSize">36sp</item>  
    </style>
    <style name="H2" parent="AppTextHeadingBase">
        <item name="android:textSize">32sp</item>
    </style>
    <!-- Normal text ( size 1 - 6 ) -->   
    <style name="Text1" parent="AppTextBase">
        <item name="android:textSize">34sp</item>
    </style>    
    <style name="Text2" parent="AppTextBase">
        <item name="android:textSize">30sp</item>
    </style>

    <!-- Image icon sizes ( small - xlarge ) -->   
    <style name="IconSmall" parent="AppTextBase">
        <item name="android:layout_width">24dp</item>
        <item name="android:layout_height">24dp</item>
    </style>
    <style name="IconMid" parent="AppTextBase">
        <item name="android:layout_width">36dp</item>
        <item name="android:layout_height">36dp</item>
    </style>
    <style name="IconLarge" parent="AppTextBase">
        <item name="android:layout_width">48dp</item>
        <item name="android:layout_height">48dp</item>
    </style>
    <style name="IconXLarge" parent="AppTextBase">
		<item name="android:layout_width">72dp</item>
        <item name="android:layout_height">72dp</item>
    </style>

2. A theme file in assets folder

Slate uses a styles / theme file that closely mimics css and tools like sass/less to have support for variables. You can also use this file to setup custom styles for tags in your templates. Refer to the styles wiki page for more information.

  1. styles file must be located in the assets folder
  2. there is a default styles file supplied called slate_theme_default.txt
  3. you can configure slate template to use this default slate_theme_default.txt

NOTE: In the next version of slate templates, we will support a 'dp' suffix for font-sizes, which will make step 1 above unnecessary.

// refer to slate_theme_default.txt in the sample app.
vars
{	
	...
	themeColor:	       @app.themeColor;
	baseTextColor:         @app.textColor;
	baseTextColorAccent:   @app.textColorAccent;
        ....
}

group:core
{
	h1 {  font-weight: @baseTextHeaderWeight; color: @baseTextColor; }
	h2 {  font-weight: @baseTextHeaderWeight; color: @baseTextColor; }
        ....

	text1 {  color: @baseTextColor;  }
	text2 {  color: @baseTextColor;  }
...

3. Java setup code

The java code below can be used to load a slate template and get the generated control. You only need to initialize the code once

TemplateService svc = new TemplateService();
if( !_isInitialized )
{
   // 1. give the templating the activity
   // This is the easiest way to setup the context,
   // resources, windows manager on the templating system.
   svc.initialize((Activity)this);

   // 2. Now set the resource strings / images
   svc.Context.ResourceStyles = R.style.class;
   svc.Context.ResourceStrings = R.string.class;
   svc.Context.ResourceImages = R.drawable.class;

   // 3. Load the theme file ( just like css )
   svc.registerDefaultStyles();
   svc.setThemeVariable("textColorAccent", "#2980B9", true);
   svc.loadThemeFile("slate_theme_default.txt");
}

// 4. Put some data into template
svc.setData("firstName", "john doe");       

// 4. Now execute template (must be located in assets folder )
TemplateView tview = svc.executeTemplateFile("slate_sample1.txt");
page.addView(R.id.pnlContainer, tview.RootView);

Use cases

Listed below are some of the most common use cases for templates and how to execute them for android in java.

1. Setup

TemplateService svc = new TemplateService();

// 1. give the templating the activity
// This is the easiest way to setup the context,
// resources, windows manager on the templating system.
svc.initialize((Activity)this);

// 2. Now set the resource strings / images
svc.Context.ResourceStyles = R.style.class;
svc.Context.ResourceStrings = R.string.class;
svc.Context.ResourceImages = R.drawable.class;

// 3. Load the theme file ( just like css )
svc.registerDefaultStyles();
svc.setThemeVariable("textColorAccent", "#2980B9", true);
svc.loadThemeFile("slate_theme_default.txt");

// 4. Put some data into template
svc.setData("firstName", "john doe");    	

// 4. Now execute template (must be located in assets folder )
TemplateView tview = svc.executeTemplateFile("slate_sample1.txt");
page.addView(R.id.pnlContainer, tview.RootView);

2: Load data

// Same setup as before..

// You can programmatically supply the data to the template.
// 1. Put in simple data values.
svc.setData("name", "slate");
svc.setData("isActive", false);
svc.setData("total", 304);
svc.setData("activeDate", new Date(2014,4,2));

// 2. Put in a hashmap data value named "weather"
HashMap<String, Object> weatherData = new HashMap<String, Object>();
weatherData.put("todayHigh", 60);
weatherData.put("todayLow", 40);
weatherData.put("todayConditions", "Sunny");
svc.setData("weather", weatherdata);

// 3. In the template you can then refer to the data 
// text6 @weather.todayHigh
// text6 @weather.todayLow
// text6 @weather.todayConditions

// 4. You can also put a custom object
// NOTE: The class must implement IValueStore ( refer to examples )
// This is allow retrieval of either Fields and/or properties.
// This allows you to also control the naming convention e.g. camel case.
User user = new User("john", "doe", 30);
svc.setData("user", user);

// Now you can get the custom objects properties or fields.
// text6 @user.firstName
// text6 @user.age

// 5. You can also put in lists of data
List<User> users = new ArrayList<User>();
users.add(new User("john", "doe", 30));
users.add(new User("john", "doe", 30));
svc.setData("users", users);

3: Load theme variables

svc.setThemeVariable("textColorAccent", "#2980B9", true);
svc.setThemeVariable("textColorContrast", "#333333", true);

4: Load template and get the generated control

TemplateView tview = svc.executeTemplateFile("slate_sample1.txt");
View view = tview.RootView;

5: Load template and get the generated controls by name

TemplateView tView = svc.executeTemplateFile("slate_sample1.txt");

// 1. Get control by name ( if name was setup in template )
View view = tview.getViewByName("firstName");

// 2. Controls get ids ( incrementing integers ), get id of view
int id = tview.getViewId("firstName");

// 3. With the id, you can also retrieve the view by id
View view = tview.getViewById(id);

6: Register click handler

TemplateView tView = svc.executeTemplate(templateContent);
view.setOnClickListener("firstName", this);

...
@Override
public void onClick(View view) {
	if(view.getTag().toString().equals("action_phone"))
	{
		_templateView.setText("message", "phone icon clicked", null);
	}
	else if(view.getTag().toString().equals("action_chat"))
	{
		_templateView.setText("message", "chat icon clicked", null);
	}
	else if(view.getTag().toString().equals("action_share"))
	{
		_templateView.setText("message", "share icon clicked", null);
	}
}
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.