*[scala][lift]Liftの入門（sitemap編） - メイクミラクル　〜大逆転〜

liftは若干癖があるフレームワークなので勉強を始めると最初に画面遷移あたりで引っかかるかもしれません。
最初はどのファイルが呼ばれているのかすらよくわからないかもしれません。リンクでどんなURLを指定すれば良いのか迷います。

調べているとsitemapってのを書く必要があるみたいだけど、書き方も一見よくわかりにくいため、戸惑うかもしれません。

そこで色々な指定方法があるので、一部ですがまとめていきたいと思います。

今回の本題のsitemapの前に画面が表示される流れだけ簡単に説明しときます。

sbtでプロジェクトを作成した標準的な場合を前提に話します。
まず[プロジェクト]/src/webapp/templates-hidden/default.htmlが呼ばれます。
その中にデフォルトで以下のような記述があります。

default.html

<div id="content" ></div>

上記の部分にその他のhtmlを埋め込んで表示させます。
例えば以下のような指定をします。

index.html

    <div id="main" class="lift:surround?with=default;at=content">
      <div class="lift:helloWorld">
      </div>
    </div>

classで指定してあるlift:surroundがポイントでwith=default;at=contentと記述するとdefault.htmlのid、contentと入れ替わります。なお、lift:surroundの外にある部分は無視され表示されません。

かなりざっくりで読んでいる人がついて来ているか心配ですが、表示される仕組みはこんな感じです。

ではsitemapでの画面遷移についてです。
sitemapを指定するとメニューが表示されます。

sitemapの一番簡単な指定方法

一番シンプルな設定は以下のように行います。
Homeがメニューのリンク名でindexがパスになります。

def sitemap(): SiteMap = SiteMap(
  Menu.i("Home") / "index"
)

複数指定する

複数指定する場合は、「,」区切りで指定します。

def sitemap(): SiteMap = SiteMap(
  Menu.i("Home") / "index",
  Menu.i("Home2") / "index2"
)

呼び出されるhtmlの場所

画面遷移時に呼び出されるHTMLは、[プロジェクト]/src/main/webapp配下に格納します。
ファイル名はパスをindexと指定した場合、index.htmlとなります。

開発モード（liftではrunmodeというのが指定出来ます。）では、毎回画面ロード時に読み込みが行われるため即時反映されます。その他のモードでは、1度だけ読み込まれます。
毎回読み込まれるのは便利ですがコストが高いです。

メニューに表示させない方法について

メニューに表示させないようにするには、「>> Hidden」と記述します。

Menu.i("Home") / "index" >> Hidden

フッタに表示させたい場合

Menu.i("About") / "about" >> LocGroup("bottom")

LogGroup("XX")で指定します。上記例では、bottomを指定しています。グループbottomはdefault.htmlで以下のように指定します。指定した場所にリンクが表示されます。

<span class="lift:Menu.group?group=bottom"></span>

メニューには表示させないでフッタにだけ表示させたい場合は、「>> Hidden」と組み合わせて利用することも出来ます。

Menu.i("About") / "about" >> Hidden >> LocGroup("bottom")

動的なページについて

パスについて全てsitemapに指定しなくてはいけないわけではないです。
以下のようにワイルドカードで指定すると「http://localhost:8080/sample/index」のようなsample/以下の任意のパスを呼び出すことが出来ます。

Menu.i("Sample") / "sample" / **

ファイルは、[プロジェクト]/src/main/webapp/sample/XXX.htmlとして格納します。

デザインについて

liftはデザイナフレンドリなフレームワークですが、事前にsitemapで出力されるhtmlを理解しておく必要があります。
HTMLとしては、以下のようなタグが表示されます。選択されているメニューはspanタグが出力されます。選択されていないメニューはaタグが出力されます。
○lift例

<div id="menu">
<span class="lift:Menu.builder"></span>
</div>

○html例

<div id="menu">
<ul>
  <li><span>Home</span></li>
  <li> <a href="/contents">Contents</a></li>
  <li> <a href="/contents2">Contents2</a></li>
</ul>
</div>

cssを指定するにはliftでは以下のような感じで記述すればよいです。

○css例

#menu ul li {xxx}
#menu ul li span {xxx}
#menu ul li a {xxx}

メニューの階層化

メニューの階層化を行うことが出来ます。サブメニューは初期表示された段階では非表示になっています。親メニューが選択されると表示されます。

      Menu.i("Info") / "info" submenus(
        Menu.i("About") / "about" >> Hidden >> LocGroup("bottom"),
        Menu.i("Contact") / "contact",
        Menu.i("Feedback") / "feedback" >> LocGroup("bottom")
      )

HTMLは以下のようにulタグ、liタグがネストされる形で表示されます。

<ul>
  <li> <span>info</span>
    <ul>
      <li> <a href="/contact">Contact</a></li>
      <li> <a href="/feedback">Feedback</a></li>
    </ul>
  </li>
</ul>

ざっと駆け足で説明しましたがsitemapについての説明は以上です！