« webでプロジェクト管理 | トップページ | はやりもん列挙してTomcatがおちる »

JSF(MyFaces)でGoogleカレンダーみたいなのをつくりたい

セルをドラッグ&ドロップなんて無理ですが

まずは単にカレンダーをかくことすらJSFではむずかしい。
いやそれは単にCSSの知識がたりないという前提

JSFのテーブルは(カレンダーをテーブルでかくという発想事態が
まちがいだったらみもふたもなし)
HTMLのテーブルとは違う考え方をする。
HTMLは行を書いていくが
JSFのdataTableは列を書いていく
データ的にみればJSFが正しいがHTML的にみると
無理していることこのうえない。

HTMLで書く場合
曜日を7個入れたリストが最大5個はいったリストを用意して
2重ループにする。

JSFで書く場合
日から土まで用意する、なんてことをすると
セルのなかの繰り返しができないので
やはりHTMLの場合と同じものを考える

外の繰り返しはふつーに<h:dataTable />を使う。
内側の繰り返しは、<t:newspaperTable newspaperColumns="7" />を使う。
ポイントはいうまでもなく
newspaperColumns="7"
これがあればなんとか実現できる。

テーブルのなかにテーブルがあるだけってことだが
見た目をそろえるという大問題がある。
土日祝日は色を変えたいというニーズもある

全体的なスタイルシートのデフォルトは以下のような隙間無しにする。

border:0;
border-collapse:collapse;
margin:0;
padding:0;  <=ここは増やしてもよい。

で、
JSFのタグの構造としては以下のようになる。
省略してあるがすべてstyleClass、columnClassesを指定する

<h:dataTable>
  <h:column>
    <t:newspaperTable newspaperColumns="7">
      <h:column>
        <t:div styleClass="#{休み ? '休みのCSSのクラス' : ( 土曜日 ? '土曜日のCSSのクラス' :'普通のCSSのクラス' ) }">

          <h:dataTable value="#{その日の予定のリスト}">
            <h:column>
              <h:outputText value="#{予定}" />
            </h:column>
          </h:dataTable>

        </t:div>
      </h:column>
    </t:newspaperTable>
  </h:column>
</h:dataTable>

内側に
<t:div />がある。
ここのstyleClassも、隙間無しにしておく。

かなり大変だが、できあがるとうつくしーJSPになる。
うつくしーものはメンテしやすい
多分動きやすい

Googleカレンダーへの道は遠い。

|

« webでプロジェクト管理 | トップページ | はやりもん列挙してTomcatがおちる »

JSF」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/4757/4329616

この記事へのトラックバック一覧です: JSF(MyFaces)でGoogleカレンダーみたいなのをつくりたい:

» スタイルシート [スタイルシート]
スタイルシート の案内専門サイトです [続きを読む]

受信: 2006年11月27日 (月) 23時52分

« webでプロジェクト管理 | トップページ | はやりもん列挙してTomcatがおちる »