IBM Mashup Center は、業界をリードする企業向けの統合マッシュアップ・ソフトウェアであり、エンドツーエンドのマッシュアップ環境を提供するプラットフォームです。IBM Mashup Center は、IT部門による管理、セキュリティー、およびガバナンスの元、ビジネスユーザーがシンプル・柔軟かつ動的に変化するWeb アプリケーション組み立てる環境を実現します。IBM は軽量なウィジェット・モデルを開発し、ウィジェットの仕様を定義してMashup Centerでも採用しています。この成果を通じて、IBM は OpenAJAX の新しいウィジェット仕様ワークグループを牽引しています。

Lotus Mashups のコア UI コンポーネント

IBM Mashup Center は Lotus Mashups と InfoSphere™ MashupHub を統合しています。製品全体の概要説明はこの記事の趣旨ではないため他にゆずるとして、ここでは、Lotus Mashups の主なユーザー・インターフェース (UI) コンポーネントについて説明します。新しいテーマとスキンを開発するには、コア UI コンポーネントに関する背景の知識が必要です。

テーマはプレーンの HTML ファイルであり、ナビゲーション、バナー、パレット、およびレイアウトといったシステム・レベルのすべてのウィジェットをとりまとめます。図１はマッシュアップ・ページの構造を示しています。

上に戻る

テーマ内のすべてのものは iWidget

テーマ内のすべてのものは iWidget です。iWidget は単純な HTML フラグメントで定義されます。例として、ナビゲーション iWidget の HTML フラグメントをリスト 1 に示します。

<div class="mm_iWidget" id="navigator"> 
<a class="mm_Definition" href="/mum/widget-catalog/navigator.xml"></a> 
</div> 
  

システム・ウィジェット

システム・ウィジェットは IBM Lotus Mashups のコアとして機能します。マッシュアップ・ページにシステム・ウィジェットをその場で動的に追加することはできません。システム・ウィジェットは、主に Lotus Mashups のメイン UI を提供するために使用されます。メイン UI には、ページ・ナビゲーション、パレット、バナー、ページ・レイアウトなどが含まれます。システム・ウィジェットの一部を簡単に紹介します。

• ナビゲーション. ナビゲーション・ウィジェットを使用すると、ページの切り替えと、ページの作成、削除、共有ができます。
• モード・セレクター. モード・セレクター・ウィジェットを使用すると、ページ・モードを「ビュー」または「編集」に切り替えられます。また、モード・セレクターを通じて、InfoSphere MashupHub メイン・ページへのアクセスや、他のユーザーと共有しているビューの表示ができます。
• バナー. バナー・ウィジェットは、ページ・タイトルの表示に使用します。また、バナー・ウィジェットは、モード・セレクター・ウィジェット、検索開始ウィジェット、およびシステム・メッセージ・ウィジェットのホストとしても機能します。
• パレット. パレット・ウィジェットは、利用可能なすべての利用可能なオブジェクトを各ウィジェット・カテゴリーに編成するときに使用します。パレットからウィジェットをドラッグし、マッシュアップ・ページのキャンバス上にドロップすることができます。
• HTML コンテンツ. HTML コンテンツ・ウィジェットは、マッシュアップ・ページの実際のコンテンツを保持しています。マッシュアップ・ページは、フリー・フォームまたはカラム・レイアウトのいずれかに基づきます。

利用可能なウィジェット

パレット・カテゴリーにはすぐに利用可能なウィジェットが登録されています。何かを実現したい時、その場で動的にマッシュアップ・ページに追加できます。たとえば、フィード URL を使用してフィードを読むために、FeedViewer ウィジェットをマッシュアップ・ページに追加できます。また、DataViewer ウィジェットをマッシュアップ・ページに追加して、データ・ソースからデータを表内に表示できます。

上に戻る

テーマとスキンのプログラミング・モデル

テーマとスキンによってIBM Lotus Mashups のルック・アンド・フィールが決まります。テーマは、システム・レベルのすべてのウィジェット、ページ全体の外観、および現在のページで使用されている要素に対して適用されます。Lotus Mashups では、新しいテーマを追加することができます。

スキンは、ウィジェットのコンテンツ回りを飾るものです。各スキンは 1 つの HTML テンプレートです。単純なテンプレート・スケルトンに基づいて、自由にスキンを作成することが可能です。スキンは特定のテーマに属します。1テーマが複数の異なるスキンを持つことができます。

IBM Lotus Mashups では、1 つのデフォルト・テーマと 4 つのデフォルト・スキンが用意されています。

テーマとスキンのモデル

テーマとスキンは、すべて WAR ファイルに格納できます。IBM Lotus Mashups がインストールされた WebSphere® Application Server に テーマの WAR ファイルをデプロイすると、新たにデプロイしたテーマが Lotus Mashups によって検出され、ロードされます。

一般的なテーマ WAR ファイルには、ナビゲーション、パレット、バナーの各ウィジェットなど、すべてのシステム・ウィジェットの定義が含まれています。また、テーマ WAR ファイルにはテーマのすべてのスキンをリストする必要があります。テーマ内の各スキンは、Lotus Mashups のスキン・サービスによってロードされます。すべてのスキン HTML テンプレート・ファイル、CSS ファイル、および他のリソース・ファイルを 1 つのフォルダーに収め、このフォルダーをテーマ WAR ファイルに追加すると、スキン・サービスがそのスキンを自動的にロードできるようになります。

パレットからウィジェットをドラッグ＆ドロップでページに配置すると、現在のページ・レイアウトのデフォルトのスキン・タイプがウィジェットに適用されます。デフォルトのスキンは、現在のページ・レイアウト・ウィジェットの構成ウィ画面で確認または変更できます。

上に戻る

新しいテーマとスキンの作成手順

お気に入りのテキスト・エディターまたは Eclipse IDE を使用して、カスタマイズされたテーマとスキンを開発できます。Aptana などのポピュラーな Eclipse プラグインも使用できます。作成手順を示すこのセクションでは、プラグインの追加されていない Eclipse IDE を使用します。

テーマとスキンのディレクトリーの構成

テーマとスキンのソース・コードを含むフォルダーは、図 2 に示すように構成する必要があります。

テーマ・フォルダーの名前は任意です。resources、mythemes などの適当な名前を付けます。フォルダー名は、mashups.properties ファイル内で指定する必要があります。

themeRootDir=themes

カスタマイズしたテーマは、このテーマ・フォルダー内に作成されます。この記事では、新しいテーマには customTheme という名前を、新しいスキンには ThinTitle という名前を付けます。

新しいテーマの作成

このセクションでは、図 4 に表示されているような新しいテーマを作成します。このテーマにはいくつかのシステム・ウィジェットを追加し、背景色やロゴ・イメージなど、他のオプションのリソースをカスタマイズします。この新しいテーマは、以下の手順で作成します。

1. 新しいテーマのメタデータを metadata.xml 内でで定義します。
2. theme.htmlと theme.cssにこのテーマの UI コードを記述します。

metadata.xml

メタデータには、国際化されたテーマの名前、識別用のID、およびテーマのデフォルト・スキン名が含まれます。リスト 2 を参照してください。

<metadata> 
       <title> 
              <nls-string language="en">Custom Theme</nls-string> 
              <nls-string language="zh">自定义主题</nls-string> 
       </title> 
       <id>3</id> 
       <default-skin>Glass</default-skin> 
</metadata> 
  

theme.html と theme.css

theme.html は、システム・ウィジェットのレイアウトを決めるために使用します。theme.html で使用されるスタイルは、theme.css で定義します。作成する新しいテーマはデフォルト・テーマと少し異なっていて、システム・ウィジェットは図 5 のようになります。

リスト 3 に示すように、Theme.html では、すべてのシステム・ウィジェットがプレーンな <div> 要素内で構成されています。これらの div 要素に適用されるスタイルは、theme.css で定義されています。

<div class="customTheme_main" align="center">       
    <div class="customTheme_top" align="left"> 
      <!-- Common Actions --> 
        <div class="customTheme_action">
        <div class="mm_iWidget" id="commonAction"> 
        <a class="mm_Definition" 
href="/mum/widget-catalog/commonActions.xml"></a> 
          </div> 
          </div>            
     <!-- Navigator --> 
        <div class="customTheme_navigator"> 
            <div class="mm_iWidget" id="navigator"> 
                <a class="mm_Definition" 
                href="/mum/widget-catalog/navigator.xml"></a> 
                </div> 
              </div>            
       </div>     
       <div class="customTheme_content" align="left"> 
        <!-- Banner -->             
              <div class="mm_iWidget" id="banner"> 
                     <a class="mm_Definition" 
                     href="/mum/widget-catalog/banner.xml"></a> 
              </div> 
        <!-- Palette -->              
              <div class="mm_iWidget" id="palette"> 
                     <a class="mm_Definition" 
                     href="/mum/widget-catalog/palette.xml"></a> 
              </div>            
        <!-- Html Content --> 
              <div class="mm_iWidget" id="htmlContent" style="height:100%;"> 
                     <a class="mm_Definition" 
                     href="/mum/widget-catalog/htmlContent.xml"></a> 
                     <span class="mm_ItemSet" title="attributes"> 
                            <a class="mm_Item" 
                            href="#url">%mm.selectpageurl%</a> 
                     </span>                 
              </div>            
       </div> 
</div> 
 

新しいスキンの作成

各テーマは複数のスキンを持つことができます。カスタマイズしたテーマの元で、ThinTitle スキンを作成します。図 6 に示すように、このスキンはライト・ブルーのタイトルと幅の狭い境界線を持ちます。

スキンはウィジェットを囲みます。スキンには、ウィジェット・アイコン、ウィジェット・タイトル、ワイヤリング・アイコン、および構成アイコンを持つタイトル・バーがあります。タイトル・バーは、ウィジェットのドラッグを可能にするドラッグ・ハンドラーとして機能します。タイトル・バーは ThinTitle の一部ではありませんが、Lotus Mashups スキン・サービスの一部です。スキン・サービスは、各スキンにこのタイトル・バーを作成します。ウィジェットのボディ領域は、ウィジェットのコンテンツを表示します。一番下にあるサイズ変更バーを使用すると、ウィジェットの幅と高さを変更できます。

次の手順に従って、ThinTitle スキンを作成します。

1. 新しいスキンのメタデータをスキンの metadata.xml の中で定義します。リスト 4 を参照してください。
2. skin.html (リスト 5 参照) と skin.cssで、スキン UI を作成します。
3. この新しいスキンの JavaScript™ オブジェクトを skin.js ファイルで定義します。
4. イメージなど、他のリソースがあればスキン・フォルダーに格納します。

<metadata> 
<title> 
    <nls-string language="en">ThinTitle</nls-string> 
    <nls-string language="zh">瘦标题</nls-string> 
</title> 
<id>ThinTitle</id> 
<preview-url>preview.jpg</preview-url> 
</metadata> 

スキンのメタデータには、国際化されたスキン名、ID、およびプレビュー画像の情報が含まれています。

<div style="${location}" class="ThinTitle_main" id="${skinId}"> 
       <div id="${widgetBodyId}" class="widgetBody"> 
              <div class="ThinTitle_text"> 
                     <img src="${iconUrl}" class="ThinTitle_icon"/>${title} 
              </div>     
              <div id="${widgetContentId}">    
                     <div style="height:24px;"></div>  
                     ${widgetBody} 
              </div>     
            <div id="${resizerId}" class="ThinTitle_drag"></div> 
       </div>  
</div> 
  

スキンは、ウィジェットのボディ領域とウィジェットのコンテンツ領域を保持する必要があります。また、ThinTitle スキンでは、タイトルとサイズ変更ハンドラーを使用します。このスキンのレイアウトを図 7 に示します。

実行時、skin.html 内のいくつかのプレースホルダー (${variable}) には、skin.js ファイルに含まれる実際の値が入ります (リスト 6 参照)。スキン・サービスはこれらの変数を使って、スキンおよびスキン内部のウィジェットを描画します。必須の変数は次のとおりです。

• ${location}. ウィジェットの位置です。最も外側の <div> で定義する必要があります。
• ${skinId}. スキンの ID です。
• ${widgetBodyId}. ウィジェットのラッパーの ID です。このラッパーの DIV には、"widgetBody"というclass属性を指定する必要があるので、注意してください。
• ${widgetContentId}. ウィジェットのコンテンツ領域の ID です。
• ${widgetBody}. ウィジェットの実際のコンテンツです。

役に立つ他の値を以下に示します。

• ${iconUrl}. ウィジェット・アイコンの URL です。
• ${title}. ウィジェットのタイトルです。
• ${resizerId}. サイズ変更ハンドルの ID です。

{ 
       widgetId:"", 
       location:"", 
       title:"", 
       widgetContentId:"", 
       widgetBodyId:"", 
       iconUrl:"", 
       resizerId:"", 
       
//TODO: add your customized variable here 
  
       process:function(skinId, tagId) { 
              var domNode=dojo.byId(tagId); 
              this.location = domNode.getAttribute("locationstyle"); 
  
              this.resizerId = tagId + "_resizer"; 
              this.widgetContentId = tagId + "_content"; 
              this.widgetId = tagId; 
              this.widgetBodyId = tagId + "_widgetBody"; 
              
        // get the icon url 
              var widgetObj = mainPage.getWidgetMetadataByInstanceId(domNode);    
              if (widgetObj!=null){ 
                     this.iconUrl = widgetObj.widgetIconSrc; 
              } 
  
        // TODO: Add your customized code here 
       } 
} 

skin.htmlで定義された変数の値は、 process(skinId, tagId) で設定されます。process 関数はスキンが描画されるときに呼び出されるため、ここに任意の特殊なコードを追加することで、カスタマイズされたスキンにすることができます。

skin.js ファイルで使用できるオプションの変数を以下に示します。

• minHeight. サイズ変更するときの、スキン・ラッパーの最小の高さです。
• minWidth. サイズ変更するときの、スキン・ラッパーの最小の幅です。
• marginHeight. ウィジェット・ボディとスキン・ラッパー間の上部マージンです。
• marginWidth. ウィジェット・ボディとスキン・ラッパー間の下部マージンです。
• resizerHeight. サイズ変更ハンドラーの高さです。

パッケージ化とデプロイ

Eclipse IDE を使用してプロジェクトを WAR ファイルにエクスポートするか、プロジェクトを圧縮して「*.war」と名前変更することができます。このサンプルでは、myTheme.war というファイルにプロジェクトをパッケージ化します。次に、WebSphere Application Server コンソールで、使用されていないコンテキスト・ルートを用いてこの WAR ファイルをインストールし、他のデフォルト設定を使用してデプロイします。WAR ファイルをデプロイした後は、開始して有効にします。図 8 を参照してください。

新しいテーマとスキンを確認するために、Lotus Mashups にログインし、マッシュアップ・ページを開き、テーマを「Custom Theme」に変更します (図 9 参照)。次に、いくつかのウィジェットをキャンバスに配置し、スキンを「ThinTitle」に変更します (図 10 参照)。

上に戻る

制限

Lotus Mashups 1.0 では、新しいテーマとスキンを開発する際にいくつかの制限があります。

テーマの制限

テーマの場合は、テーマと同じ名前のフォルダーに、少なくとも 1 つの theme.htmlと 1 つの theme.cssを含める必要があります。theme.html には、すべてのコア・ウィジェット（ナビゲーション、パレット、バナー、HTML コンテンツ、共通アクションの各ウィジェット）を保持していなければなりません。これらのウィジェットのうち、いずれかでも削除すると、実行時に予期せぬ例外が発生します。スタイル情報は、theme.cssに含めます。このフォルダーの他の CSS ファイルは、まだサポートされていません。

スキンの制限

スキンには、次に示すいくつかの制限があります。

• 「glass」という名前のスキンを新しいテーマのデフォルト・スキンとして設定するべきです。
• テンプレート・ファイルskin.htmlには、プレースホルダーとして skinId と widgetBody という予約済み変数があります。
  
  • skinId は、スキンがウィジェットに適用された後の HTML DOM ツリー内の固有 ID を表します。
  • widgetBody は、ウィジェットのコンテンツが表示される領域を表します。
• スキンのプレビュー・イメージは、スキン・ディレクトリーで「preview.jpg」という名前で保管する必要があります。
• スキンをサイズ変更可能にするときは、「resizerId」という名前の別のプレースホルダーを skin.html内で指定します。

上に戻る

まとめ

IBM Lotus Mashups は、軽量なテーマとスキンのフレームワークを提供します。ユーザーと開発者は、自らがカスタマイズしたテーマとスキンで、現在のテーマとスキンを置き換えることができます。

上に戻る

ダウンロード

ダウンロード形式について

参考文献

学ぶために

• Learn more about IBM Mashup Center.
  
  
• Learn more about IBM Lotus Mashups.
  
  
• Read the developerWorks® article, "Get started with InfoSphere MashupHub."
  
  
• Read the developerWorks article, "In-depth look at IBM Mashup Center Feed Mashup Editor."
  
  
• Try the public IBM Mashup Center deployment on greenhouse.
  
  

製品や技術を入手するために

• Download Eclipse IDE for Java EE Developers (Ganymede Package).
  
  

議論するために

• ディスカッション・フォーラムに参加してください。
  
  

著者について

この記事を評価する

コメント

上に戻る

目次

• Lotus Mashups のコア UI コンポーネント
• テーマ内のすべてのものは iWidget
• テーマとスキンのプログラミング・モデル
• 新しいテーマとスキンの作成手順
• 制限
• まとめ
• ダウンロード
• 参考文献
• 著者について
• コメント