Application Template 
Application TemplateAn output buffer you can use…Outline1.What the Application Template is, is not and how we got here2.What it looks like3.How to use it4.QuestionsApplication TemplateWhat it is, is not, and how we got hereApplication Template is…•An Output Buffer•A Templating System•A Form Builder•A Rapid Application Development Tool•A Set of Standard, Common•ColdFusion Functions and Tools•HTML Tags and JavaScript Libraries•Centrally Maintained StylesApplication Template is not…•An Application Framework•A Programming Methodology•A Logic Checker•A Replacement for good code•A Substitute For ColdFusionWhy it’s called an “output buffer”•First In First Out (FIFO)•Stores strings for execution later•You will not be able to use CF the way you might thinkWhy We NEEDApp.Template•There is a total lack of consistency across our applications•We duplicate a tremendous amount of code•We spend too much time worrying about look, feel and compatibility on each application•We lack any centralized control over applicationsWhy We NEEDApp.Template•We have an increasing number of applications which independently need to be maintained•We duplicate a tremendous amount of code•We spend too much time writing repetitive HTML, JavaScript•We have lots of “shared code” that’s not really sharedGuiding Principles1.Flexibility2.Transparency3.Simplicity4.ExtensibilityFlexibility•We write code lots of different ways•We have no uniform methodology•We should be able to “retrofit” applications if we wanted•We have no idea what future applications will requireTransparency•The operation of the template should be seamless•Changes to the backend should not require many changes to the front-end•Usable without having to learn a new languageSimplicity•We don’t need “one more language”•A newcomer should be able to maintain & fix applications without years of experience•Individual applications shouldn’t have to worry about shared styles, HTML and JavaScriptExtensibility•Every current application is very different•Every future application is going to be different•Developers will inevitably want refined control over most everythingApplication TemplateWhat it looks like…The styles•There are current six color schemes•Slate Gray•Blue & Teal•Blue & Yellow•Green & Yellow•Blue & Red•Light Blue & Purple•There are two layout types•Fixed Width•StretchyApplication Template elementsThe HeaderThe NavigationThe FooterThe Application Template provides only LIMITED control over these elementsThe Content Section•This is the only section that the developer has absolute control.•The developer is largely responsible for this content.•The template CAN create some contentApplication TemplateHow it works…As simple as it gets…
//always the first linetemplate = createobject(“component”, “cfc.template.template”);//add “Hello World” to contenttemplate.addContent (“Hello World
”);//display ittemplate.display();The fundamentals•The AT is a ColdFusion Component (CFC)•Everything used by the AT is either a Stringor another CFC•You can write almost everything in CFSCRIPT•There are only two necessarylines of code:•template = createobject(…); //beginning•template.display(); //endThe “meat”•Functions within AT allow the•Developer to set•The template’s style (color scheme and fluidity)•The application name and a page’s title•The “Owner” information (e-mail and name)•Developer to add•Header Navigation information•Left Navigation content•“Actual content”•The AT takes all this information and “renders” the final resultRendering Object•Everything in the AT is either already an object or is converted into one for you•All those objects are of type RENDERING•All RENDERING objects have a function “render()” which “renders the output”•Template works by calling the .render() function on everything you send to it.RENDERINGStrings, files, inputs, etcTEMPLATEFORMHTMLSo what does this mean?1.It doesn’t have to mean ANYTHING2.It means that you are not limited by the tools that we provide you –as you can always make your own “rendering” objectWhat are the “rendering” objects?•ALL Available•TEMPLATE•Custom (aka a string)•File•Navigation•navigationHead•Form•Text, Hidden, File, Select, Submit…•Almost every “input type”•The ones to care about•File•Custom•We’ll talk about “Form” separatelyA closer look at “Hello World”
//always the first linetemplate = createobject(“component”, “cfc.template.template”);//add “Hello World” to contenttemplate.addContent (“Hello World
”);//display ittemplate.display();•Why this works•The function “addContent()” takes anystring and creates a “Custom” object which is of type “Rendering”•addContent(), as we will see later, can also take another Application Template object•The “Custom” object simply dumps the string to the output•Why you probably don’t care•You never see the object•It is automatically created & added to the template for you•What this means•You can use AT by storing all your output in a single stringand adding it this wayGetting StartedThe basics…The three types of functions•Template Functions•Navigation Functions•Content FunctionsSetting up the templateMaking it look pretty…Setting up the template…•These functions you probably set up once per applicationsetStyleA number between 1 and 6 for the color schemesetTitleThe name for a given page (or action)setLayoutWhether the layout should be fixed/stretchy (1/0)setApplicationEmailThis is the contact e-mail address for the applicationsetApplicationNameThis is the entire application name (very generic)setApplicationOwnerThis is the developer responsiblesetDebug, setAsStrict, setAsXHTMLSome other rendering functionssetApplicationWebRootsetApplicationRootHow to set up a template
//CREATE THE TEMPLATE OBJECTtemplate = createobject("component", "cfc.template.template");//APPLICATION SETTINGS//Set the name for the entire applicationtemplate.setApplicationName("TEMPLATE examples");//I'm the contact persontemplate.setApplicationOwner("Mike Wokasch");//But send e-mail to everyonetemplate.setApplicationEmail("web@uwex.edu");//Set the location my application [ColdFusion absolute path]template.setApplicationRoot("/application-template/");//PAGE SETTINGS//The title is used to describe the current page, not the applicationtemplate.setTitle("Examples Index");//I like the stars & stripes versiontemplate.setStyle(2);//… the rest of your code//RENDERtemplate.display();How to set up a template
//CREATE THE TEMPLATE OBJECTtemplate = createobject("component", "cfc.template.template");//APPLICATION SETTINGS//Set the name for the entire applicationtemplate.setApplicationName("TEMPLATE examples");//I'm the contact persontemplate.setApplicationOwner("Mike Wokasch");//But send e-mail to everyonetemplate.setApplicationEmail("web@uwex.edu");//Set the location my application [ColdFusion absolute path]template.setApplicationRoot("/application-template/");//PAGE SETTINGS//The title is used to describe the current page, not the applicationtemplate.setTitle("Examples Index");//I like the stars & stripes versiontemplate.setStyle(2);//… the rest of your code//RENDERtemplate.display();TEMPLATE OBJECT•ApplicationName = “TEMPLATE examples”•ApplicationOwner = “Mike Wokasch”•ApplicationEmail = “web@uwex.edu”•ApplicationRoot = “/application-template/”•PageTitle = “Examples Index”•PageStyle = 6Navigation functionsNow we’re getting somewhere…Two type of navigationaddHeaderNavigationAdds a header navigation elementaddLeftNavigationAdds one element to the side navigationaddNavigationFileAdds content from a file to the navigationHEADER NAVIGATIONSIDE NAVIGATIONAdding Header navigation
//CREATE THE TEMPLATE OBJECTtemplate = createobject("component", "cfc.template.template");//APPLICATION SETTINGS (see above)//PAGE SETTINGS (see above )//HEADER NAVIGATION//add the following links: home, examples, Template document//(TEXT, URL, ACTIVE?, ICON)template.addHeaderNavigation(“home”, “./”, false, “home”);template.addHeaderNavigation(“Examples” , “examples/”, TRUE, “unordered”);template.addHeaderNavigation(“Document”, “Template.doc”, false, “entry”);//… the rest of your code//RENDERtemplate.display();TEMPLATE OBJECThomeexamplestemplateAdding navigation to the template
//CREATE THE TEMPLATE OBJECTtemplate = createobject("component", "cfc.template.template");//APPLICATION SETTINGS (see above)//PAGE SETTINGS (see above )//HEADER NAVIGATION (see above)//ADD LEFT NAVIGATION//add the following links: home, examples, Template document//(TEXT, TYPE, URL, ACTIVE?, ICON)template.addLeftNavigation(“Examples”, “header”, “examples/”, true, “unordered”);template.addLeftNavigation(“Home”, “item”, “./”, true);template.addLeftNavigation(“Example 1”, “item”, “ex1.cfm”, false);//… the rest of your code//RENDERtemplate.display();TEMPLATE OBJECTExamplesHomeExample 1Adding contentWe’re almost done…The content within•The functions you call between the start and end functions provide all text on the pageaddContentAdds text to the content paneaddContentFileAdds text from a file to the content paneaddContentFormAdds a form object to the content paneAdding content to a template
//CREATE THE TEMPLATE OBJECTtemplate = createobject("component", "cfc.template.template");//APPLICATION SETTINGS (see above)//PAGE SETTINGS (see above )//HEADER NAVIGATION (see above)//ADD LEFT NAVIGATION(see above)//ADD CONTENT FROM A FILEtemplate.addContent(“Hello World!
");template.addContentFile("examples.html");//… the rest of your code//RENDERtemplate.display();TEMPLATE OBJECTHello Worldexamples.cfmDon’t Forget!•This is an output buffer, not an application framework. That is to say, the content you are adding should not have complex ColdFusion statements, such as queries and reports, that will be evaluated when calling template.display().If your content file looks like thisDon’t display it like this!
| #someQry.someCol# | … //more report outputs
template = createObject(…);template.addContentFile(“fileOnTheLeft.cfm”);template.display();FormsFast and FlexibleForms: previously slow and tedious•Forms can be some of theslowest going code due to:•Repetitive code•Accessibility concerns•Formatting issues•JavaScript validation•One form input can easily take a half-dozen lines of code!Not anymore!•AT lets you reduce all of those lines of code into a few quick commands.
myForm = template.createRenderableForm("heading", "", "", "myForm", "true");//this is the actual inputmyForm.addInput( myForm.createInput("text_input", "Enter Text", "default text", "text", "blank","Please enter text") );//just add the form to the templatetemplate.addContentForm(myForm);Up to 80% code reduction The above 40 lines of code can be replaced by the following 8:myForm = template.createRenderableForm("Easy Form");myForm.addInput(myForm.createInput("datefield", "enter date:", "", "date") );myForm.addInput(myForm.createInput("datefield2", "another date:", "", "date") );myForm.addInput(myForm.createInput("text1", "enter text here:", "", "text") );myForm.addInput(myForm.createInput("text2", "or here:", "", "text") );myForm.addInput(myForm.createInput("t1", "enter lots of text:", "", "textarea") );myForm.addInput(myForm.createInput("go", "Go", "", "submit"));template.addContentForm(myForm);Here's how it works•Create a form object•Add form fields: this is a two step process that can usually be combined into one:•Create an input object•Add the input object to the form•Add the form object to the templateHere's how it worksCreate the formmyForm = template.createRenderableForm();Create the inputmyInput = myForm.createInput("text", "label", "defaultValue", "type");Add the inputmyForm.addInput(myInput);Add the formtemplate.addContentForm(myForm);But we can combine these two!Here's how it worksCreate the formmyForm = template.createRenderableForm();Create the input AND add itmyForm.addInput( myForm.createInput ("text", "label", "defaultValue", "type") );Add the formtemplate.addContentForm(myForm);There are a few circumstances where you would want to be able to access the object created through createInput, but in general it is unnecessary to assign an input to a variable and then add it to the form.Seek ye first the example files•There are many examples athttp://cfmxdev.uwex.edu/application-template/that will guide you more with dynamic forms•Some topics presented:•Simple and complex JavaScript validation made easy•Outputting from a query: Selects, Radio and Checkboxes•Using the provided spellchecker and calendar functions•You can also view details of these functions through the CF studio help files and function insight provided