-
Notifications
You must be signed in to change notification settings - Fork 0
Design: Templates
Contents
1 File Structure 2 Converting to Handlebars templates 3 The Database 4 Variables 5 Session variables 6 global.vm Variables 7 Form Submission URL 8 Internal Functions 9 Templates 10 Macro Tips
The website folder (named here "webroot") is the root of the domain. Inside you should find this directory structure:
assets
|-css
|-img
|-html
Handlebars is the template engine that loads the BullRoarer websites. You can do a handful of things like set variables and execute simple if() conditions. But everything major works in the back end, which you can't control through Handlebars.
You can find the official reference guide here: http://handlebarsjs.org
First thing to take care of in converting the template is to replace the relative paths it might have into absolute paths.
ex. /css/main.css not ../css/main.css Be sure to update the HTML markup and the style sheet files. Since most of the URLs are dynamic, called from the "action.do" (or other) script, putting absolute paths in your template is essentially the only way.
- A folder is a group of records. Each main container (like wallpapers, ringtones etc) can have a selection of folders that are used for different organizing of the content. The folders available in each page are defined from the fIds=... in the URL and they are called in the content from the $titleList000 variable.
In the database each record is described by the following fields
private String titleName; private String titleTypeId; private String titleType; private String titleTypeGroup; private String titleTypeGroupId; private String artist; private String rating; private String text1; private String text2; private String text3; private String oneOffPrice; private String rank; private String largeDisplayFile; private String thumbFile; private String wapThumbFile; private String animatedGifFile; private String soundPreviewFile;
$creditDispList - display remaining list of credits $titleList000 - where "000" can be any number, the folder to draw content from $phoneDisplay - displays the full phone number of the user when signed in, in a formatted way (with dashes) $msisdn = displays the full phone number in an unformatted way (just numbers) $msisdn1 = displays the first part of the phone number (3 digits) $msisdn2 = displays the second part of the phone number (3 digits) $msisdn3 = displays the third part of the phone number (4 digits) Variable names defined internally (within the macros) should be named with underscores, ex. $next_page While name functions are defined like in JavaScript, like showDescription()
Define your variables at the beginning of each functions with a comment at the top
#* Variables *#
[edit] Session variables
$homeFlag, a boolean that confirms if the user is viewing the homepage or not These variables are user-specific and are stored into the session
$titleId = the item (last) selected by the user $selTitle = access the properties of the item with id the $titleId . $selTitle.titleName, $selTitle.thumbFile, $selTitle.Text1 etc... $titledisplay $selTitle.thumbFile
- Error handling variables
$badMsisdn , when the user enters a valid 10 digit mobile number. $badPassword, when the phone number and PIN number don't match. $unknownPhone, when the system doesn't recognize the cell phone number
[edit] global.vm Variables
The basic variables defined are the following:
Common names for user activity are the following:
#set( $GB_PAGE_SIGNUP = "/vm/user/sign_up/pge_index.vm" ) #set( $GB_PAGE_SIGNIN = "/vm/user/sign_in/pge_index.vm" ) #set( $GB_PAGE_DOWNLOAD = "/vm/user/download/pge_index.vm" ) #set( $GB_PAGE_ADDCREDITS = "/vm/user/add_credits/pge_index.vm" ) #set( $GB_PAGE_FORGOTPIN = "/vm/user/forgot_pin/pge_index.vm" ) You can set other pages used regularly as global variables to make the Handlebars helpers cleaner. Write them as such:
#set( $GB_PAGE_PAGENAME = "..." )
[edit] Form Submission URL
With this information you should be able to construct most form actions you'll need.
the form names don't matter, just the form field names. That means you can put any id in a form field, but you'll have to put specific names for them. action = what you want to do... has values: "csuser" to create a new user (subaction=inits) "login" to login a user (subaction=login) | to logout a user (subaction=logout) "sendp" to send the pin to a user (no subaction) "selt" to start the download process (no subaction) "gett" to complete the download process (no subaction) next = the next page to show up. has values the absolute path of a vm template. error = the page to show up when there is an error. has values the absolute path of a vm template. fIds = defines the folders that will be access to display content (usually followed by a number). Each folder usually contains a different type of content (wallpapers, videos etc.) fIds=400, fIds=200-300-400 titleId= the id of a content item, usually defined with the variable $row.titleId or $titleId the basic fields you will need for most forms is: msisdn = the phone number networkId = the carrier password = the PIN number for the number field you can have them named as msisdn1, msisdn2, msisdn3 in three fields or msisdn in one field
the action in the form field is almost always a dynamic link, like this: ${response.encodeURL("action.do?action=csuser&subaction=inits&clubc=VIVID&next=/vm/user/sign_up/pge_step2.vm&error=$GB_PAGE_HOME")}
Complete a download - Resend a Download link: ${response.encodeURL("action.do?action=gett&titleId=$titleId&next=$GB__PAGE_DOWNLOAD_COMPLETE")}
You can use a set of functions to change the variables. For example for a variable $a we can apply these:
$a.toString() , to convert $a into a string $a.toLowerCase() , to convert $a into lower case letters Most of these functions are self-explanatory and are easy to remember...
[edit] Templates
Template names: "/html/pge_index.vm" is by default the index page "/html/global.vm" is where all the global variables are placed "/html/macro.vm" is where all the functions are placed "/html/pge_system_error.vm" is used to output system errors
Start every document with the following #parse("/vm/global.vm") #parse("/vm/macro.vm")
Parts for the template that are repeated are parsed with macro function, like showBox ( ) Start each section with a pge_index.vm and if there are a series of steps continue as pge_step1.vm, pge_step2.vm etc. In the end of each sequence you end with a pge_confirmation.vm page Put all the custom functions in a "macro.vm" file and all the global variables in a "global.vm" file, in the root of the vm folder.
leave spaces between function names and their variable definition in their brackets. Also spaces between variables: showBox ('var1' 'var2') Be as descriptive as you can in your functions showListings ('wallpapers') is a lot better than dbl ($titleList200)
It's just fine to look into the other websites and see what variables are used and how the macros are written (actually it's the only way for now until we finish writing this documentation) - just remember not to copy-paste deprecated styling.