Home
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.
There is a sample android app available in the github repo that uses slate templates. Please refer to the sample for more detailed information.
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.
The setup for slate-templates involves 3 things:
Slate templates uses tags that are very similar to html. This includes headings, texts and images.
- headings h1 to h6
- text sizes text1 to text 6
- 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>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.
- styles file must be located in the assets folder
- there is a default styles file supplied called slate_theme_default.txt
- 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; }
...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);Listed below are some of the most common use cases for templates and how to execute them for android in java.
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);// 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);svc.setThemeVariable("textColorAccent", "#2980B9", true);
svc.setThemeVariable("textColorContrast", "#333333", true);TemplateView tview = svc.executeTemplateFile("slate_sample1.txt");
View view = tview.RootView;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);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);
}
}