Canarys | IT Services

Blogs

Google Closure

Date:
Author:
Tags:
Share

Introduction

Closure is a collection of tools for building rich web applications in JavaScript.Google closure make it significantly easier to maintain a large JavaScript codebase. Using Closure essentially extends JavaScript to include features available in other programming languages, such as namespaces, type checking, and data hiding.

Google closure libraries are used to create html template which can be called in javascript.In the next steps I will be explaining how to create html template,how to convert the template to google closure library file and using of that template.

The basic advantage of google closure libraries is that the minimized file size and fast response with the browser.

Note: Please make sure that java compiler is installed in your machine to compile the google template

1 Creating google closure template

In this part i am explaining about creating a html template which displays data coming from server side.

Open a text document and paste the code placed below and save it as example.soy

* Parameterized CSS for .templatedata template.
* @param maincss //CSS background color for the even rows
*/
{namespace canarys.templates}
/**
* @param tempdatas //Data to be displayed
*/
{template .displaydivdata}
{foreach $tempdata in $tempdatas}

{$tempdata.tempheader}
  • {foreach $mystring in $tempdata.displaypoints}
    • {$mystring}
    • {/foreach}

{/foreach}

{/template}

This template is in canarys.templates namespace and it can be called in program as canarys.templates.displaydivdata. Save the file as example.soy
2.Creating batch file
Open a text file and paste the code placed below and name it as compile_example.bat which is a batch file and run this  in java compiler, creates a temporary javascript   file and compiled javascript file.
rem echo off
echo Please wait compiling ...
rem compiling the soy files

"C:Program Files (x86)Javajdk1.8.0_05binjava" -jar ../closure-templates/SoyToJsSrcCompiler.jar --shouldGenerateJsdoc --shouldProvideRequireSoyNamespaces --outputPathFormat example.soy.js  example.soy 2>soy_err.log

rem Creating the concatenated script file (test_v2.html)

..PortablePythonapppython  ../closure-library/closure/bin/calcdeps.py -p ../closure-library/ -i ../closure-templates/javascript/soyutils_usegoog.js -i example.soy.js -o script  > example-temp.js 2>err_temp.log

rem Creating the compiled version of the concatenated script file (test_v3.html)

..PortablePythonapppython  ../closure-library/closure/bin/calcdeps.py -p ../closure-library/ -i ../closure-templates/javascript/soyutils_usegoog.js -i example.soy.js  -o compiled  -c ../closure-compiler/compiler.jar   >example-compiled.js 2>err_compile.log

rem Creating the unit testable version of the concatenated script file (test_unitTest.html)


echo Done
This will generate example-temp.js(Human readable) file and example-compiled.js file.

3.Using closure template in  application

Now we can use this comiled template in our application as below

@using gclnp.Models
@model StringClass
@{
 Layout = null;
}



 

 

The final output will be shown as below
Output

Leave a Reply

Your email address will not be published. Required fields are marked *

Reach Us

With Canarys,
Let’s Plan. Grow. Strive. Succeed.