template.core
{
   list down
   {
      h4 'Slate Templates'
      p  "Build android UI's with this syntax"
      
      text6.accent 'Features' 
      text6 @r.strings.feature_list
   }
}

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/H4"
        android:fontFamily="sans-serif-light"      	        
        android:text="@string/companyName" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Text6"
        android:fontFamily="sans-serif-light"
        android:text="A mobile development company" />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Text6.Accent"
        android:fontFamily="sans-serif-light"  	        
        android:text="Slate Calendar" />
    <TextView
        android:id="@+id/txtAboutVersion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Text6.Contrast"
        android:fontFamily="sans-serif-light"  
        android:text="@string/appAbout" />
</LinearLayout>

template.core
{
   // 1. List items down vs across
   list down
   {
      // 2. Sample heading / text 
      // h1 - h6 and text1 - text 6 supported
      h2 'heading in size 2'
      p  'sample paragraph text'
      
      // 3. Apply styles to paragraph text
      text6.accent 'this text is accented'
	  
      // 4. Set placeholders to replace with data
      text6.strong @companyName
	  
      // 5. Set the name of the element using :name
      p:appDesc 'native mobile templating on android'

      // 6. Tags are also available
      p 'kishore' tag='firstname'
	  
      // 7. Loop over calendar events data, and list 4 
      @each ( event in @calendar.events limit=4 )
      {
         // 8. List each calendar event across
         // Relative widths for different screen sizes
         list across width='80%'
         {
            // 9. Reference the event variable from loop
            h5  @event.time
            text6.accent  @event.title
         }
      }
   }
}

// ANDROID : In android your UI is an xml file 
// packaged in the app. you load the layout like :
View viewFromFile = inflate(R.layout.eventInfo, null);

// SLATE: You have different ways to load the UI
// 1. Load from a string
View viewFromText = loadTemplate("text6:name 'user name'");

// 2. Load template file from assets folder.
View viewFromFile = loadTemplateFile("page_about.txt");

// 3. Load from your server 
// ( basically just download file and load as text)
String templateContent = getFromServer("page_about.txt");
View viewFromText = loadTemplate(templateContent);

// The templates are safe / secure as they 
// are mostly logic-less and can't access any
// device functionality... only data supplied.

template.core
{
   list down
   {
      list across width=200
      {
         p 'this is 20% of parent' width='20%'
      }
      list across width='50%'
      {
         p 'list is 50% of parent' 
      }
   }
}

// 1. define pre-processor variables
define test-data
setup
{
   // 2. Only include mock data if pre-processor 
   // variable exists.
   ifdef test-data
      set events = 
      [
         { name: 'meeting 1', time: '10:00 am' },
         { name: 'meeting 2', time: '11:00 am' },
         { name: 'meeting 3', time: '2:30 pm'  },
         { name: 'meeting 4', time: '3:00 pm'  }
      ];
   endif
}
template.core
{
   list down
   {
      // 3. Now use the mock data
      // Note: the list 'events' can be supplied
      // from code. this example is for mock data	  
      @each( event in events )
      {			
         text6.accent @event.name
         text6.strong @event.location
      }
   }
}

// STYLES FILE : theme_default.txt
// In slate, you can create a styles file ( to represent a theme )
// to store all your styles for UI elements.
// Featues are listed in comments below:


// 1. VARIABLES 
// You can setup variables just like in sass/less,
// but putting the variables inside the 'vars' block.
vars
{	
   screenWidth:           @app.screenWidth;
   screenHeight:          @app.screenHeight;
   pageWidth:             @app.pageWidth;
   themeColor:            @app.themeColor;
   baseTopFontSize:       @app.textFontSizeMax;
   baseTextColor:         @app.textColor;
   baseTextColorAccent:   @app.textColorAccent;
   baseTextColorLight:    @app.textColorLight;	
   baseTextColorContrast: @app.textColorContrast;
   baseTextHeaderWeight:  bold;
}

// 2. STYLE GROUPS:
// Setup a style group called 'core'
// In your template link to this style group via syntax:
// 
// template.core { .... }
//
group:core
{
   h1 { font-weight: @baseTextHeaderWeight; }
   h2 { font-weight: @baseTextHeaderWeight; }
   h3 { font-weight: @baseTextHeaderWeight; }
   h4 { font-weight: @baseTextHeaderWeight; }
   h5 { font-weight: @baseTextHeaderWeight; }
   h6 { font-weight: @baseTextHeaderWeight; }
   
	
   text1 { color: @baseTextColor;  }
   text2 { color: @baseTextColor;  }
   text3 { color: @baseTextColor;  }
   text4 { color: @baseTextColor;  }
   text5 { color: @baseTextColor;  }
   text6 { color: @baseTextColor;  }
	
   .light        { color: @baseTextColorLight;  }
   .strong       { font-weight:bold; }
   .accentlight  { color: @baseTextColorAccent; }
   .accent       { color: @baseTextColorAccent; }
   .accentdark   { color: @baseTextColorAccent; }
   .label        { color: Gray; }
   .contrast     { color: @baseTextColorContrast; }
   .white        { color:'White'; }
	
   .separator { background-color:'#cccccc'; }
   
   .left   { alignh:'center'; }
   .center { alignh:'center'; }
   .right  { alignh:'right';  }

   
   // 3. MATH OPERATIONS
   // Basic math operations are supported for dynamic
   // width and height calculations. 
   .col1  { width: ( @screenWidth * .08 ); }	
   .col2  { width: ( @screenWidth * .16 ); }
   .col3  { width: ( @screenWidth * .25 ); }
   .col4  { width: ( @screenWidth * .33 ); }
   .col5  { width: ( @screenWidth * .42 ); }
   .col6  { width: ( @screenWidth * .50 ); }
   .col7  { width: ( @screenWidth * .58 ); }
   .col8  { width: ( @screenWidth * .66 ); }
   .col9  { width: ( @screenWidth * .75 ); }	
   .col10 { width: ( @screenWidth * .83 ); }
   .col11 { width: ( @screenWidth * .91 ); }
   .col12 { width:   @screenWidth      ; }
   	
   // 4. VARIABLE USAGE
   // You can use the variables using the '@' symbol.
   // You can either use variables declared in 'vars'
   // or you can use variables supplied from your app
   // by using @app.variablename.
   .iconXSmall { width: @app.iconXSmall; }
   .iconSmall  { width: @app.iconSmall; }
   .iconMedium { width: @app.iconMedium; }
   .iconLarge  { width: @app.iconLarge; }
   .iconLarge  { width: @app.iconXLarge; }
   
   .marginl1   { margin-left: ( @screenWidth * .01 ); }
   .marginl2   { margin-left: ( @screenWidth * .02 ); }
   .marginl3   { margin-left: ( @screenWidth * .03 ); }
   .marginl4   { margin-left: ( @screenWidth * .04 ); }	
   .marginl5   { margin-left: ( @screenWidth * .05 ); }	
   .marginl6   { margin-left: ( @screenWidth * .06 ); }	
   .marginl7   { margin-left: ( @screenWidth * .07 ); }	
}


/* INHERITANCE
You can create multiple style groups and have them
inherit from another style group
*/
group:aboutpage inherits=core
{
	
}