#template engine

Android – Chunk Template Engine Integration

Developers, I hope you all are doing good. Let me show you an interesting library or type of library i.e., Template engine. Template engines are tools to separate program-logic and presentation into two independent parts, this makes the development of both logic and presentation easier, improves flexibility and eases modification and maintenance. There are several template engines available…

Hadlebars.java – How to use it as Server side Template Engine?

               handlebars.java is a server side Java template engine like velocity, freemaker etc.. It follows the syntax of Mustache spec. The main goal of handlebar.java is to reuse the same templates at client side and server side. In this article we will see how to use Handlebars.java along with Spring framework. I have used Spring Boot for the demonstration. Follow the below steps to setup…

誰が得するのかわからないようなことですみません。

昨夜、ふと「そういえばJadeってあったよな…」と思い出してしまいまして、きっとXMLをつくることもできるだろうと思い立ってやってみました。 結論から言うと、できなくはありません。

Jade

node.jsのパッケージで、単独のコマンドラインツールでもあります。

Jade - Template Engine

テンプレートエンジンでして、ruby製のhamlなんかと同じ類でしょうか。 node.jsを勉強するときに合わせて少しかじっていました。 なんとなくdoctypeでXMLもいけたような気がしていたのでHTMLをつくるときのようにするといい感じになるんじゃないかと。 つまりはXAMLを簡単につくることができるかな？と思った次第です。 なにせ、タグをタイプするのがダルいですし、Visual Studioを起動しなくても書くことができるのでいいですよね（注意：インテリセンスが効いたほうが絶対いいです！）

JadeでXMLをつくるには

Jadeではdoctypeの指定に「xml」とすればいいです。 それだけで、あの長いドキュメントタイプの指定にしてくれます。

doctype xml

あとは何事もなかったかのようにタグを改行しながらタイプしていきます。 XAMLを考えていますので、画面になるもののルート要素はWindowです。 また、XAMLでは名前空間に指定のものがありますのでそれをタグの属性として指定していきます。

doctype xml Window(xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation")

タイトルや画面のサイズ指定もするなら、同じようにカンマで区切って入れていきます。

doctype xml Window(xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation",Title="My First Jade XAML",Width="800",Height="600")

最後にHello World的なことをしたいのでテキストブロックを入れます。 最終的には以下のようになりました。

doctype xml Window(xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation",Title="My First Jade XAML",Width="800",Height="600") TextBlock(name="txt") Hello

シンプル…

これを文字コードUTF-8で「main.jade」という名前のファイルに保存します。

JadeでXMLに変換したいのでまずはインストールしておきます。 node.jsはインストール済みとして、次のようにしましょう。

npm install -g jade

もうこれで「jade」コマンドが使えるはずです。 PowerShellならGet-Commandコマンドレットで確認できると思います。

Get-Command jade

ではjadeコマンドを使いましょう。 ここで、ひとつ注意が必要です。 次のようにそのまま実行してしまうと…

jade main.jade

「rendered main.html」と表示されると思います。 そうです、デフォルトではHTMLを作成するようになっているからです。

では名前を付ければいいのでは？と思うのですが「-n」あるいは「--name」は関係がありません。さらに、クライアントサイドだからとして「-c」や「--client」もつけてはだめです。なんとJavaScriptに変換されてしまいます！

XMLを出力するJavaScriptになるのでXAMLではなくなりますのでだめですね。

どうするかというと拡張子を「-E」オプションを付けるだけでした。

jade main.jade -E xaml

これで「main.xaml」ができあがります。

MSBuildでビルドできるようにする

次はビルドできるようにします。 同じ要領でjadeを書いていきます。

今回はアプリケーション定義のXAMLを用意してXAMLだけでGUIをつくります。 まずアプリケーション定義の「app.jade」です。 同じように「-E」オプションで「xaml」と指定して「app.xaml」をつくります。

doctype xml Application(xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation", StartupUri="main.xaml")

Application要素しかいらないので簡単ですね。

次にプロジェクトファイルをつくります。 こちらは適当に「jadexaml.jade」と名前を付けますが「-E」オプションには「proj」を指定します。

doctype xml Project(xmlns="http://schemas.microsoft.com/developer/msbuild/2003", DefaultTargets="Build") PropertyGroup AssemblyName jadexaml OutputType winexe OutputPath .\ ItemGroup ApplicationDefinition(Include="app.xaml") Page(Include="main.xaml") Reference(Include="System") Reference(Include="WindowsBase") Reference(Include="PresentationCore") Reference(Include="PresentationFramework") Import(Project="$(MSBuildBinPath)\\Microsoft.CSharp.targets")

これでプロジェクトファイルにします。

jade jadexaml.jade -E proj

うまくいっていれば「jadexaml.proj」も完成しているはずです。 それでは「MSBuild」といきましょう。

もしもパスが通っていない（コマンドが見つからない）場合は環境変数PATHにいれましょう。 PowerShellであれば以下のように。

[System.Environment]::SetEnvironmentVariables("PATH","$env:PATH;MSBuildがあるパス")

パスが通ったか確認するならGet-Commandで見てみましょう。

ビルドもうまくいったら同じフォルダに「jadexaml.exe」が爆誕しているはずです。

Compile Jade Template Dalam Sebuah Direktori

Jika sebelumnya mengenai compile coffeescript dalam satu direktori, maka kali ini mengenai Jade Template. Jade adalah salah satu template engine yang mengubah file .jade menjadi file .html. Untuk dokumentasi penulisan kode pada jade template ini anda bisa langsung ke jade-lang.com. Berikut cara untuk compile jade melalui command line

(more…)