SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

「Dojo道場」~実用アプリ構築のためのベストプラクティス

Dojo道場 ~ 第6回「Dijitウィジェットを利用したアプリケーション作成の基礎」

「Dojo道場」~実用アプリ構築のためのベストプラクティス

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本シリーズでは、豊富な機能の中から厳選した、ビジネス・アプリケーションのためのベスト・プラクティスを中心に、Dojo Toolkitの活用方法をご紹介します。連載第6回の今回は、Dijitのウィジェットを用いて実用的なWebアプリケーション作成を行うために必要な一連の基礎的知識を扱います。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Dojoツールキットはアプリケーションを作成するための部品(ウィジェット)を実現する、Dijitフレームワークを備えています。 今回はDijitのウィジェットを用いて実用的なWebアプリケーション作成を行うために必要な一連の基礎的知識を扱います。 すでに今までの連載でウィジェットは使用しているので一部の話題は復習になってしまいますが、 次回以降の発展的な話題(ウィジェット・システムの詳細、レイアウトの詳細)の準備編という位置づけになるのでお付き合いください。

 なおDojoの入手、実行するための配置方法などは連載第1回の冒頭を参照してください。

テーマの指定

 Dijitウィジェットにはテーマの機能があり、テーマを指定すればさまざまなウィジェットが統一されたスタイルで描画されます。 Dojo 1.5では次の4つのテーマが用意されています。テーマ名はdojotoolkit.orgにあるテーマ・テスターへのリンクになっていて、実際に各テーマでの描画の様子を見ることができます(図1 a-d)。

図1-a 各テーマの描画 (テーマ・テスター画面の一部):claroテーマ
図1-a 各テーマの描画 (テーマ・テスター画面の一部):claroテーマ
図1-b 各テーマの描画 (テーマ・テスター画面の一部):tundraテーマ
図1-b 各テーマの描画 (テーマ・テスター画面の一部):tundraテーマ
図1-c 各テーマの描画 (テーマ・テスター画面の一部):soriaテーマ
図1-c 各テーマの描画 (テーマ・テスター画面の一部):soriaテーマ
図1-d 各テーマの描画 (テーマ・テスター画面の一部):nihiloテーマ
図1-d 各テーマの描画 (テーマ・テスター画面の一部):nihiloテーマ

 テーマを利用するには、各テーマのCSSファイルを読み込み、利用したい要素のclass属性にテーマ名を指定する必要があります。 通常はアプリケーション全体で統一したテーマを用いますので、body要素に指定するのが一般的です。

 下のサンプル・コードはアプリケーション全体でclaroテーマを利用する場合のHTMLファイルの雛形です。

リスト1. テーマの利用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>テーマの利用</title>
<!-- Dojoの基本CSSと利用するテーマのメインCSSファイルを読み込んでおく  -->
<style>
@import url("../dojo-release-1.5.0/dojo/resources/dojo.css");
@import url("../dojo-release-1.5.0/dijit/themes/claro/claro.css");
</style>
<script type="text/javascript" src="../dojo-release-1.5.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
</head>
<body class="claro">
<!-- bodyにclaroテーマを指定。以下ウィジェットは指定したテーマで描画される -->
</body>
</html>

次のページ
Dijitウィジェットの生成

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
「Dojo道場」~実用アプリ構築のためのベストプラクティス連載記事一覧

もっと読む

この記事の著者

仁田 圭祐(ニッタ ケイスケ)

日本アイ・ビー・エム株式会社ソフトウェア開発研究所にて日々Webアプリケーションに関わる製品開発をしています。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

三浦 圭司(ミウラ ケイジ)

日本アイ・ビー・エム株式会社ソフトウェア開発研究所に勤務。現在は、エンタープライズ向け製品のWebアプリケーションのユーザー・インターフェース開発に従事。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5835 2011/04/06 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング