/samples/scalate-presentation/src/scalate.jade

http://github.com/scalate/scalate · Jade · 425 lines · 346 code · 79 blank · 0 comment · 5 complexity · 4a79df8c27b5e731639959d178559a32 MD5 · raw file

  1. !!! XML
  2. !!!
  3. - attributes("layout") = ""
  4. - response.setContentType("text/html")
  5. html(lang="en-US" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml")
  6. head
  7. meta(content="Scalate, see scalate.fusesource.org" name="generator")
  8. title Scalate, the Scala Template Engine
  9. meta(content="text/html; charset=us-ascii" http-equiv="Content-Type")
  10. meta(content="Copyright Š 2011, James Strachan" name="copyright")
  11. meta(content="5" name="duration")
  12. meta(content="-2" name="font-size-adjustment")
  13. link(type="text/css" href="styles/slidy.css" rel="stylesheet")
  14. link(type="text/css" href="styles/w3c-red.css" rel="stylesheet")
  15. link(href={uri("/css/pygmentize.css")} rel="stylesheet" type="text/css")
  16. script(space="preserve" type="text/javascript" charset="utf-8" src="scripts/slidy.js")
  17. body
  18. .background
  19. img#head-icon(name="head-icon" src="images/scalate/project-icon-107x107.png" alt="")
  20. .background.slanty
  21. .slide
  22. h1 Scalate: the Scala Template Engine
  23. img(alt="Scalate" src="images/scalate/project-logo.png")
  24. br(clear="all")
  25. p
  26. a(shape="rect" href="http://macstrac.blogspot.com/") James Strachan
  27. br(clear="none")
  28. a(shape="rect" href="http://twitter.com/#!/jstrachan") @jstrachan
  29. br(clear="none")
  30. a(shape="rect" href="http://fusesource.com/") FuseSource
  31. .slide
  32. :markdown
  33. # Your presenter: James Strachan
  34. * James Strachan
  35. * twitter: @jstrachan
  36. * blog: [http://macstrac.blogspot.com/](http://macstrac.blogspot.com/)
  37. * Software Fellow at [FuseSource](http://fusesource.com)
  38. * long term Open Source contributor
  39. * created Apache Camel
  40. * created the Groovy programming language
  41. * co-founder of
  42. * Apache ActiveMQ, Camel, ServiceMix, Fabric, ...
  43. * Scalate
  44. .slide
  45. :markdown
  46. # Scalate Overview
  47. ![Scalate](images/scalate/project-logo.png)
  48. * its a **Scala** based **T**emplate **E**ngine
  49. * Scala T E => **Scalate**
  50. .slide
  51. :markdown
  52. # Design Goals
  53. ![Scalate](images/scalate/project-logo.png)
  54. * make an awesome template engine
  55. * framework & container agnostic
  56. * support different template flavours under same API
  57. * there isn't really a one size fits all
  58. * reuse the power & type safety of Scala
  59. * catch errors in templates at edit/build time
  60. * templates are for life, not just for Christmas!
  61. * IDE friendly for smart completion
  62. .slide
  63. :markdown
  64. # Features
  65. * Templates are compiled & cached as fast Scala objects
  66. * Template objects are statically typed to catch typos
  67. * apart from Mustache
  68. * Scalate is equivalent to the combination of JSP, JSTL, JSP EL
  69. & SiteMesh/Tiles
  70. * Scala replaces JSP EL and Scala functions replace JSP
  71. custom tags
  72. * Scalate template languages are richer, more powerful &
  73. usually more DRY than JSP + JSTL
  74. * Scalate has in built layout support replacing
  75. SiteMesh/Titles
  76. .slide
  77. :markdown
  78. # How Scalate works
  79. * TemplateEngine is used to load Templates
  80. * typically templates are converted into scala code and
  81. compiled to avoid runtime parsing
  82. * can customize various things...
  83. * caching & reloading
  84. * how URIs are resolved (classpath, file system etc)
  85. * internationalisation
  86. * RenderContext is used to render a template
  87. * has a Map[String,Any] like set of attributes for
  88. passing/sharing state
  89. * loads of helper methods for use inside the template
  90. * localisation, including other templates, views,
  91. layouts etc
  92. * template languages implemented using Scala parser generators
  93. .slide
  94. :markdown
  95. # Scalate Template Languages
  96. * SSP
  97. * Scaml
  98. * Jade
  99. * Mustache
  100. * Scuery
  101. .slide
  102. :markdown
  103. # SSP
  104. * SSP or _Scala Server Pages_
  105. * like a non-sucky JSP :)
  106. * easiest template engine to start with if folks know
  107. * ASP, JSP, GSP, Erb, Velocity, FreeMarker style templates
  108. * supports JSP / Erb style syntax
  109. * <% statements %>
  110. * <%= expression %>
  111. * ${expression}
  112. * examples:
  113. * Dear ${people.map(_.name).mkString(", ")} how are you?
  114. .slide
  115. :markdown
  116. # SSP also supports Velocity style tokens
  117. :pygmentize
  118. -----------------------------
  119. ssp: example
  120. -----------------------------
  121. #if (lineItems.find(_.price > 10).isDefined)
  122. <b>Welcome big spender!</b>
  123. #end
  124. .slide
  125. :markdown
  126. # SSP sample page
  127. ### Sample page using SSP markup
  128. !~~ pygmentizeUri("../scalate-example/src/main/webapp/tableSsp.ssp")
  129. .slide
  130. :markdown
  131. # Scaml
  132. * Scaml is a Scala port of HAML
  133. * HAML started in the Rails world and became a very popular
  134. alternative to Erb templates
  135. * whitespace sensitive (which is handy for markup, avoids
  136. badly nested markup)
  137. * syntax
  138. * %foo to indicate &lt;foo&gt;...&lt;/foo&gt;
  139. * \- for statements
  140. * = expressions
  141. .slide
  142. :markdown
  143. # Scaml sample page
  144. ### Sample page using Scaml markup
  145. !~~ pygmentizeUri("../scalate-example/src/main/webapp/tableScaml.scaml")
  146. .slide
  147. :markdown
  148. # Jade
  149. * Jade came from JavaScript / Rails as a simpler more DRY
  150. version of HAML / Scaml
  151. * avoid the % to indicate element name
  152. * folks tend to use lots of elements; few are
  153. multi-line text content
  154. * use | to indicate text content inside an element when
  155. multiple lines required
  156. * Implemented as just a slightly different surface parser
  157. on Scaml
  158. * Jade + markdown are the hotness!
  159. .slide
  160. :markdown
  161. # Jade sample page
  162. ### Sample page using Jade markup
  163. !~~ pygmentizeUri("../scalate-example/src/main/webapp/tableJade.jade")
  164. .slide
  165. :markdown
  166. # Mustache
  167. * no logic in the scripts
  168. * can be used from JavaScript on the client side or Scala /
  169. Scalate on the server side
  170. * uses {{foo}} mustaches for values
  171. * use {{#foo}} and {{/foo}} for blocks/loops/conditionals
  172. * good if you want your designer to own the templates
  173. * though dynamically typed
  174. .slide
  175. :markdown
  176. # Mustache sample page
  177. ### Sample page using Mustache markup
  178. !~~ pygmentizeUri("../scalate-example/src/main/webapp/tableMustache.mustache", "html")
  179. .slide
  180. :markdown
  181. # Scuery
  182. * more of a HTML/XHTML transformation engine really
  183. * uses CSS3 parser & transformation engine
  184. * templates are regular HTML pages (possibly with mock data)
  185. owned by your designer
  186. * use the transform API (jQuery-ish) to transform the HTML to
  187. inject/replace with dynamic data
  188. .slide
  189. :markdown
  190. # Scuery sample HTML page
  191. ### Sample page using plain HTML markup
  192. !~~ pygmentizeUri("../scalate-example/src/main/webapp/tableScuery.html")
  193. .slide
  194. :markdown
  195. # Scuery sample Scala transform
  196. ### Sample HTML page transform with Scuery
  197. !~~ pygmentizeUri("../scalate-example/src/main/scala/MyTransform.scala")
  198. .slide
  199. :markdown
  200. # Tips on picking a template language
  201. * If you want your designers to own your templates
  202. * consider **mustache** or **scuery**
  203. * if you want developers to hack your templates
  204. * want to generate HTML/XML really DRY?
  205. * use **jade**
  206. * otherwise **SSP**
  207. .slide
  208. :markdown
  209. # Scalate Layouts
  210. * TemplateEngine.layoutStrategy defines the strategy
  211. * default implementation uses the "layout" attribute to define
  212. the template used for laying out any template
  213. * to change the layout you want to use...
  214. * \- attributes("layout") = "/my/layouts/foo.jade"
  215. * to disable layouts
  216. * \- attributes("layout") = ""
  217. .slide
  218. :markdown
  219. # Using Scalate
  220. * can use TemplateEngine directly if doing code generation
  221. * or if using servlets:
  222. :pygmentize
  223. -----------------------------
  224. xml: add this to web.xml
  225. -----------------------------
  226. <filter>
  227. <filter-name>TemplateEngineFilter</filter-name>
  228. <filter-class>org.fusesource.scalate.servlet.TemplateEngineFilter</filter-class>
  229. </filter>
  230. <filter-mapping>
  231. <filter-name>TemplateEngineFilter</filter-name>
  232. <url-pattern>/*</url-pattern>
  233. </filter-mapping>
  234. .slide
  235. :markdown
  236. # Framework support
  237. * bowler
  238. * jersey
  239. * lift
  240. * playframework
  241. * scalatra
  242. * servlets
  243. * sbt / lifty
  244. * spring mvc
  245. * unfiltered
  246. .slide
  247. :markdown
  248. # mod your Template Engine!
  249. :pygmentize
  250. -----------------------------
  251. scala: add this class to pimp your TemplateEngine
  252. -----------------------------
  253. package scalate
  254. import org.fusesource.scalate.TemplateEngine
  255. import java.io.File
  256. class Boot(engine: TemplateEngine) {
  257. def run: Unit = {
  258. // lets change the workingDirectory
  259. engine.workingDirectory = new File("myScalateWorkDir")
  260. }
  261. }
  262. .slide
  263. :markdown
  264. # Precompile your templates
  265. :pygmentize
  266. -----------------------------
  267. xml: add to your pom.xml
  268. -----------------------------
  269. <build>
  270. <plugins>
  271. <plugin>
  272. <groupId>org.fusesource.scalate</groupId>
  273. <artifactId>maven-scalate-plugin</artifactId>
  274. <version>1.5.0</version>
  275. <executions>
  276. <execution>
  277. <goals>
  278. <goal>precompile</goal>
  279. </goals>
  280. </execution>
  281. </executions>
  282. </plugin>
  283. </plugins>
  284. </build>
  285. .slide
  286. :markdown
  287. # Getting Started
  288. * install Scalate
  289. * [http://scalate.fusesource.org/download.html](http://scalate.fusesource.org/download.html)
  290. * add **SCALATE_HOME/bin** to your **PATH**
  291. h3 Create a sample project
  292. :pygmentize
  293. scalate create jersey mygroup myartifact
  294. cd myartifact
  295. mvn jetty:run
  296. h3 To try out the Scalate shell
  297. :pygmentize
  298. scalate
  299. help
  300. .slide
  301. :markdown
  302. # Static site generation
  303. * maven plugin to generate a complete static website for your
  304. project using Scalate
  305. * deploy it to some web server using maven's wagon transports
  306. * scp / webdav etc
  307. * allows real time updates of templates & layouts while editing
  308. docs
  309. * your own personal offline wiki using git for source control &
  310. versioning
  311. * use a text editor to edit, erm, text files! :)
  312. h3 Create a website project
  313. :pygmentize
  314. scalate create sitegen mygroup mysite
  315. cd mysite
  316. mvn jetty:run
  317. :markdown
  318. * now open [http://localhost:8080/scalate](http://localhost:8080/scalate)
  319. * click on the top right scalate icon for the [Scalate Console](http://scalate.fusesource.org/documentation/console.html)
  320. .slide
  321. :markdown
  322. # Presentation generation
  323. * this presentation is created by Scalate :)
  324. * deployed online [static HTML](http://scalate.fusesource.org/presentations/scalate)
  325. * implemented in a [single jade + markdown template](https://github.com/scalate/scalate/blob/master/samples/scalate-presentation/src/scalate.jade)
  326. * uses [HTML Slidy](http://www.w3.org/Talks/Tools/Slidy2/) for JavaScript + CSS
  327. ### To try it out locally from a scalate checkout
  328. :pygmentize
  329. cd samples/scalate-presentation
  330. mvn jetty:run
  331. :markdown
  332. * now open [http://localhost:8080/scalate](http://localhost:8080/scalate)
  333. .slide
  334. :markdown
  335. # Demo time!
  336. * Demo templates & web app here:
  337. * [https://github.com/scalate/scalate/tree/master/samples/scalate-example](https://github.com/scalate/scalate/tree/master/samples/scalate-example)
  338. ![Cross Fingers](images/cross-fingers.png)
  339. .slide
  340. :markdown
  341. # Any Questions?
  342. ![Scalate](images/scalate/project-logo.png)
  343. * [http://scalate.fusesource.org/](http://scalate.fusesource.org/)
  344. * twitter: @jstrachan
  345. * [http://fusesource.com](http://fusesource.com)
  346. ![Questions](images/questions.png)