2.2. プログラミング・開発ガイド

Developer’s StudioのWebアプリケーション開発環境では、Webアプリケーション開発の生産性を向上させる機能を提供しています。

2.2.1. Webアプリケーションの作成

2.2.1.1. Webアプリケーションとは

Webアプリケーションは、複数のコンポーネントの集まりです。一般的にWebアプリケーションは以下のコンポーネントを1つまたは複数組み合わせて作成されます。

2.2.1.2. Webアプリケーションのディレクトリ構造

Memo
Webコンテナとは、Java EE 6のWeb層で動作するアプリケーション(Servlet、JSP)を制御･管理･実行するコンテナを指します。

2.2.1.3. WARファイル

2.2.1.4. MVCモデル2

• Model：EJBなどによる業務ロジックを記述する部分
• View：HTML、JSPによるWebデザインを記述する部分
• Control：Servletによるクライアントからの要求と業務処理の連携制御を記述する部分

• ｢Model｣、｢View｣、｢Control｣ごとに独立性を与えられる
• WebデザイナはWebデザインに、プログラマはロジック・プログラミングに注力できる
• プログラム･HTMLの可読性が高まり、画面の修正･プログラムの修正を独立して行うことができる
• コンポーネントとして、ビジネスロジックの再利用性を高めることができる

2.2.1.5. Webアプリケーションの定義

• ServletContextオブジェクトの初期パラメータ
• セッション・コンフィグレーション
• Servlet宣言
• Servletマッピング
• アプリケーション･ライフサイクル･リスナー
• フィルター宣言とフィルターマッピング
• MIMEタイプ･マッピング
• Welcomeファイルのリスト
• エラーページ
• ロケールとエンコードマッピング
• セキュリティ
• EJBの参照
• JSP関連の設定

<web-appid="WebApp_ID"
xmlns="http://java.sun.com/xml/ns/javaee"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee web-app_2_5.xsd"
   version="2.5">
     (ここに上述した設定内容に対応する定義を記述します。)
</web-app>

2.2.1.6. Web Application Bundle (WAB)

WABプロジェクトの作成

1. Webアプリケーションを作成します。
2. マニフェストファイル(WebContent/META-INF/MANIFEST.MF)に次の記述を追加します。
   • OSGiバンドルのメタデータ
   • Web-ContextPathヘッダ
   • Bundle-ClassPath

Manifest-Version: 1.0
Bundle-ManifestVersion: 2
Bundle-Name: WAB_ProjName001
Bundle-SymbolicName: WAB_ProjName001
Bundle-Version: 1.0.0.qualifier
Bundle-ClassPath: WEB-INF/classes/
Bundle-RequiredExecutionEnvironment: JavaSE-1.6
Import-Package: javax.el,
 javax.servlet,
 javax.servlet.http,
 javax.servlet.jsp,
 javax.servlet.jsp.el,
 javax.servlet.jsp.tagext
Web-ContextPath: /WAB_ProjName001

WABプロジェクトの配備

2.2.1.7. 動的Webプロジェクト・ウィザードの活用

図2.2.1.7-1

図2.2.1.7-2

図2.2.1.7-3

図2.2.1.7-4

図2.2.1.7-5

図2.2.1.7-6

2.2.1.8. 実行支援ライブラリの活用

図2.2.1.8-1

• 利用するライブラリの選択

Memo
文字エンコードフィルタを利用する場合、エンコード種別と URLパターンの指定は必須です。

2.2.2. Sevletの作成

2.2.2.1. Servletとは

2.2.2.2. Servletコンテナとは

2.2.2.3. Servletのインタフェース

javax.servlet.Servletインタフェース

javax.servlet.GenericServletクラス

javax.servlet.http.HttpServletクラス

2.2.2.4. Servletのライフサイクル

• ロードとインタンス化
• 初期化
• リクエストのハンドリング
• サービスの停止

ロードとインスタンス化

• Servletコンテナ起動時、または、Webアプリケーション起動時(配備時など)
• クライアントからServletに対して、初めてリクエストが発生したとき
  明示的に、前者の契機でServletをロードしたい場合は、web.xmlのServlet定義に load-on-startup要素を定義します。
  

初期化

• データベースへの接続手続き
• 永続的なコンフィグレーション･データの読み込み
• web.xmlのinit-param要素で定義した値の ServletConfigパラメータからの取得
  Servletの初期化の終了後、ServletConfigはgetServletConfig()メソッドで取得できます。
  

リクエストのハンドリング

その他のサーブレットメソッド

サービスの停止

• データベースの切断処理
• Servletが利用していたリソース(例えば、メモリ、ファイルハンドラ、スレッド)の解放処理

2.2.2.5. Servletとスレッド

• Servletのインスタンスとスレッドを1対1とするため、アクセスの頻繁なServletをSingleThreadModelインタフェースで実装した場合、コストパフォーマンスが劣化してしまう。
• Servlet2.4仕様では非推奨となっているため、今後、なくなってしまう可能性がある

• 設計段階において、共有リソース(インスタンス変数・クラス変数などのメモリデータやファイル、データベースコネクションなど)の扱いに対する規約化
• 共有リソースを扱う場合、共有リソースへのアクセスの同期化
• 同時接続による負荷試験など、スレッドセーフを意識したテスト手法の確立

2.2.2.6. Servletの定義

<servlet>
  <servlet-name>TestServlet</servlet-name>
  <servlet-class>servlet.TestServlet</servlet-class>
  <servlet-mapping>
    <servlet-name>TestServlet</servlet-name>
    <url-pattern>/TestServletUri</url-pattern>
  </servlet-mapping>
</servlet>

2.2.2.7. サーブレットウィザードの活用

図2.2.2.7-1

図2.2.2.7-2

図2.2.2.7-3

Memo
Servlet2.5以下の場合、デプロイメント記述子固有情報がweb.xmlに記入されます。
Servlet3.0以上の場合、デプロイメント記述子固有情報がServletクラスの @WebServletアノテーションに記入されます。

名前とURLマッピングは必須項目です。

図2.2.2.7-4

図2.2.2.7-5

2.2.3. JSPファイルの作成

2.2.3.1. JSPとは

2.2.3.2. JSP要素

ディレクティブ

<%@ page(pageディレクティブ属性)%>
pageディレクティブ属性 ::= {language="scriptingLanguage"}
                            {extends="className"}
                            {import="importList" }
                            {session="true|false" }
                            {buffer="none|sizekb" }
                            {autoFlush="true|false" }
                            {isThreadSafe="true|false" }
                            {info="info_text" }
                            {errorPage="error_url" }
                            {isErrorPage="true|false" }
                            {contentType="ctinfo" }
                            {pageEncoding="peinfo" }
                            {isELIgnored="true|false" }

• 利用例1：スクリプト言語を"java"、MIMEタイプを"text/html"、文字エンコード方式を"Windows-31J"に指定した例です。

  <%@ pagelanguage="java"
              contentType="text/html; charset=Windows-31J"
              pageEncoding="Windows-31J" %>
  

• 利用例2：バッファを"32kバイト"、autoFlushを"true"に設定した例です。

  <%@ pagebuffer="32kb" autoFlush="true" %>
  

• 利用例3：インポート宣言の例です。カンマ区切りで複数のパッケージやクラスを宣言できます。

  <%@ pageimport="java.util.*, java.io.*" %>
  

• 利用例4：インポート宣言の例です。パッケージやクラスで1つの宣言をしています。

  <%@ pageimport="java.util.*" %>
  <%@ pageimport="java.io.*" %>
  

<%@taglib ( uri="タグライブラリURI" |
tagdir="タグライブラリディレクトリ")
prefix="カスタムタグの接頭辞" %>

<%@include file="インクルードファイルの相対URL" %>

Memo
IANAとはインターネット上で利用されるアドレス資源(IPアドレス、ドメイン名、プロトコル番号など)の標準化や割り当てを行なっていた組織でした。1998年10月、インターネット資源の管理・調整を行なう国際的な非営利法人ICANNが設立されて、2000年2月には、ICANN、南カリフォルニア大学、アメリカ政府の三者合意により、IANAが行なっていた各種資源の管理はICANNに移管されました。現在では、IANAはICANNにおける資源管理・調整機能の名称として使われています。

スクリプティング

• スクリプトレットの使用例：時間帯(午前か午後)によって表示する文字を切り替えます。

  <% if(Calendar.getInstance().get(Calendar.AM_PM) == Calendar.AM) {%>
  おはよう
  <% }else { %>
  こんにちは
  <% }%>
  

• 式の使用例：年月日を文字列で表示します。

  <%= (newjava.util.Date()).toString() %>
  

• 宣言の使用例：int型の変数『i』の宣言をしている例とint型の変数『j』の値により、返却する文字列が変わるメソッド『getIString』を宣言しています。

  <%! inti = 0; %>
  

  <%!public String getIString(int j) {
       if (j<3) return("...");
        ...
     }
  %>
  

アクション

暗黙オブジェクト

EL(Expression Language)

• ELとスクリプティングの式の相違：ELでは、変数名を記述することによりプロパティアクセスができます。

従来の式の例
   <%=o.getDta() %>
ELの例
   ${o.data }

2.2.3.3. JSPウィザードの活用

図2.2.3.3-1

図2.2.3.3-2

<%@pagelanguage="java"contentType="text/html;charset=windows-31j"
   pageEncoding="windows-31j"%>
<!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=windows-31j">
<title>Insert title here</title>
</head>
<body>
</body>
</html>

図2.2.3.3-3

2.2.3.4. JSP事前コンパイル

Memo
コマンドラインからJSPコンパイルを実行する方法については、 [ ドメイン構築・基本設定ガイド > 13. 付録 > 13.1. JSPの事前コンパイル方法 ] を参照してください。

単独JSPファイルのコンパイル

図2.2.3.4-1

図2.2.3.4-2

図2.2.3.4-3

図2.2.3.4-4

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.5"
  xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name>DynamicWebPJ</display-name>
  <servlet>
   <servlet-name>org.apache.jsp.index_jsp</servlet-name>
   <servlet-class>org.apache.jsp.index_jsp</servlet-class>
  </servlet>
  <servlet-mapping>
   <servlet-name>org.apache.jsp.index_jsp</servlet-name>
   <url-pattern>/index.jsp</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
   <welcome-file>index.html</welcome-file>
   <welcome-file>index.htm</welcome-file>
   <welcome-file>index.jsp</welcome-file>
   <welcome-file>default.html</welcome-file>
   <welcome-file>default.htm</welcome-file>
   <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>

一括JSPファイルのコンパイル

図2.2.3.4-5

図2.2.3.4-6

図2.2.3.4-7

JSP事前コンパイルの異常処理

図2.2.3.4-8

図2.2.3.4-9

図2.2.3.4-10

2.2.3.5. JSPコンパイル結果ビューの説明

図2.2.3.5-1

図2.2.3.5-2

2.2.4. フィルターの作成

2.2.4.1. フィルターとは

• 認証フィルター
• ログおよび監査フィルター
• イメージ変換フィルター
• データ圧縮フィルター
• 暗号化フィルター
• トークン化フィルター
• リソースアクセスイベントのきっかけとなるフィルター
• XMLコンテンツの変換をするXSL/Tフィルター
• MIMEタイプチェーンフィルター
• キャッシュフィルター

2.2.4.2. フィルターのインタフェース

• FilterChain：フィルターされるリクエストの実行チェーンを可視化するために、WebコンテナによりFilterChainインタフェースのオブジェクトが提供されます。フィルターはチェーン中の次のフィルターを実行するのにFilterChainを使用したり、フィルターがチェーン中で最後のフィルターである場合に、リソースに処理を渡すためにFilterChainを使用します。
• FilterConfig：Webコンテナが提供する、フィルターの初期化処理中に使用するフィルターの設定情報を持つFilterConfigインタフェースのオブジェクトです。このオブジェクトからフィルターの初期化パラメーターを取得することができます。

2.2.4.3. フィルターの定義

<filter>
  <filter-name>TestFilter</filter-name>
  <filter-class>filter.TestFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>TestFilter</filter-name>
  <url-pattern>/TestServlet</url-pattern>
</filter-mapping>

2.2.4.4. フィルターウィザード

図2.2.4.4-1

図2.2.4.4-2

図2.2.4.4-3

Memo
Servlet2.5以下の場合、デプロイメント記述子固有情報がweb.xmlに記入されます。
Servlet3.0以上の場合、デプロイメント記述子固有情報がフィルタークラスの @WebFilterアノテーションに記入されます。

名前とURLパターン/サーブレット名は必須です。

図2.2.4.4-4

フィルター・マッピングの右側の追加をクリックするとフィルター・マッピングダイアログが表示されます。この画面ではフィルター・マッピングを追加することができます。

図2.2.4.4-5

フィルターのデプロイメント記述子固有の情報入力画面で次へをクリックすると、以下の画面が表示されます。この画面では、フィルターの修飾子、実装するインタフェースを指定することができます。

図2.2.4.4-6

2.2.5. リスナーの作成

2.2.5.1. リスナーとは

Memo
セッションの活性化と非活性化は、分散環境やセッションを永続的に保持するWebコンテナなどで有用です。利用する環境やWebコンテナを意識した使い分けが必要となります。

2.2.5.2. リスナーのインタフェース

2.2.5.3. リスナーウィザード

図2.2.5.3-1

図2.2.5.3-2

図2.2.5.3-3

図2.2.5.3-4

2.2.6. HTMLファイル作成

2.2.6.1. HTMLウィザード

図2.2.6.1-1

図2.2.6.1-2

<!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=windows-31j">
    <title>Insert title here</title>
  </head>
  <body>
  </body>
</html>

図2.2.6.1-3

2.2.7. 従来のWebアプリケーションをWTPプロジェクトへ変換する方法

プロジェクトの取り込み

図2.2.7-1

プロジェクトフェセットとサーバーランタイムの設定

図2.2.7-2

図2.2.7-3

ファイル、フォルダの移動

図2.2.7-4

ビルド・パスの変更

• <WebOTX root>/lib/*.jar

図2.2.7-5

2.2.8. Webアプリケーション実行支援ライブラリ利用について

2.2.8.1. Webアプリケーション実行支援ライブラリ

• 文字エンコード機能

2.2.8.2. Webアプリケーション実行支援ライブラリを利用する前に

Caution
 Webアプリケーション実行支援ライブラリを利用する前に次のことを確認して下さい。

2.2.8.3. 文字エンコード機能

図2.2.8.3-1

Caution
設定上の注意事項
1.「エンコード種別」 には、 MS932、SJIS(またはShift_JIS)、UTF8、EUC-JP等の中のいずれかを設定して下さい。（例）MS932ページの日本語の文字化けの対処にはMS932を設定します。）
使用できる文字コードの例

2.2.9. Valveの作成

2.2.9.1. Valveとは

Memo
リクエストやレスポンスのデータ処理は、フィルターを使うことを推奨します。

2.2.9.2. Valveのインタフェース

2.2.9.3. invokeメソッド

public int invoke(Request request, Response response) throws java.io.IOException, javax.servlet.ServletException

public void postInvoke(Request request,Response response) throws java.io.IOException, javax.servlet.ServletException

package org.apache.catalina.valves;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
 
import org.apache.catalina.Request;
import org.apache.catalina.Response;
import org.apache.catalina.Container;
import org.apache.catalina.Context;
import org.apache.catalina.Wrapper;

import com.nec.webotx.as.web.valve.WebOTXValve;
 
public final class TestValve extends ValveBase implements WebOTXValve {
  //-----------------------------------------------------------Constructors
   
  /**
  * Constructor
  */

  public TestValve() {
    super();
  }
   
  //---------------------------------------------------------Public Methods
  public int invoke(Request request, Response response)
      throws java.io.IOException, javax.servlet.ServletException{
    // HttpServletRequest 取得
    ServletRequest req = request.getRequest();
    HttpServletRequest hreq = (HttpServletRequest) req;
     
    // HttpServletRequest からコンテキストパス取得
    String ctxPath = hreq.getContextPath();
     
    // HttpServletRequest からセッション取得
    HttpSession session = hreq.getSession(false);
     
    // request からこのリクエストのコンテキスト取得
    Context ctx = request.getContext();
    String ctxName = ctx.getName();

    ……サーブレット実行前の処理の実装
   
    if(….) { // サーブレットを実行させる場合
      return INVOKE_NEXT; // リクエスト処理継続
    } else { // サーブレットを実行させない場合
      return END_PIPELINE; // リクエスト処理終了
    }
  }
   
  public void postInvoke(Request request, Response response)
      throws java.io.IOException, javax.servlet.ServletException {
    ･･････ サーブレットの実行が終わった後の処理
  }
} 

2.2.10. プログラムで認証を行えるAPIの使用方法

2.2.10.1. Webアプリケーションでの利用方法

Memo
web.xmlおよびnec-web.xmlの設定
ServletAuthenticatorを呼び出して認証させるためのservletもしくはJSPには、認証が不要となるように設定する必要があります。

Servletから、ServletAuthenticatorを呼び出して認証する場合

JSPから、ServletAuthenticatorを呼び出して認証する場合

<%@page import="org.apache.catalina.authenticator.ServletAuthenticator" session="true" contentType="text/html;charset=Shift_JIS"%>
<html>
  <head>
    <title>サンプル</title>
  </head>
  <body>
    <%
      String username = "admin";
      String password = "adminadmin";
      ServletAuthenticator sau = new ServletAuthenticator( application );
      sau.authenticate(request, response, username, password);
    %>
    サンプルです<br>
  </body>
</html>

2.2.11. JSFアプリケーションの作成

2.2.11.1. 動的Webプロジェクト・ウィザードの活用

図2.2.11.1-1

図2.2.11.1-2

図2.2.11.1-3

図2.2.11.1-4

図2.2.11.1-5

図2.2.11.1-6

2.2.11.2. 既存動的WebプロジェクトのJSF Facetの追加と変更

図2.2.11.2-1

図2.2.11.2-2

2.2.11.3. 入出力画面用ファイルの作成

図2.2.11.3-1

図2.2.11.3-2

図2.2.11.3-3

図2.2.11.3-4

図2.2.11.3-5

2.2.11.4. JSF配置ファイルの編集

図2.2.11.4-1

図2.2.11.4-2

2.2.11.5. JSFアプリケーションのエクスポート

図2.2.11.5-1

図2.2.11.5-2

2.2.11.6. JSFアプリケーションのデプロイとアクセス

2.2.12. Comet

従来のWebアプリケーションでは、Webコンテナで発生したイベントをクライアントへ通知するには、クライアントが Webコンテナへ定期的にリクエストを行いイベント情報を取得する必要がありました。 しかし、Comet を使う事によりWebコンテナからのプッシュ機能が実現され、リアルタイムでクライアントへイベントを 通知する事ができます。

Servlet3.0 APIを利用したComet Webアプリケーションの作成例を以下に示します。

※Cometの利用に関しては、 [ 注意制限事項 > 3. Webコンテナ > 3.2. 制限事項 ] がありますので御確認ください。

2.2.12.1. 非同期サポートの宣言

アノテーション @WebServlet で asyncSupported=trueを指定するか、web.xmlの<servlet>要素の子要素として <async-supported>true</async-supported>を追加します。

import javax.servlet.AsyncContext;
import javax.servlet.AsyncEvent;
import javax.servlet.AsyncListener;

･･･

@WebServlet(name = "pooling", urlPatterns = {"/pooling"}, asyncSupported=true)
public class PollingServlet extends HttpServlet {

2.2.12.2. メッセージキューの作成

Servletのinitメソッドで、メッセージキュー処理を行います。

    Queue<AsyncContext> queue = new ConcurrentLinkedQueue<AsyncContext>();
    BlockingQueue<String> messageQueue = new LinkedBlockingQueue<String>();
    Thread notifierThread = null;

    public void init(ServletConfig config) throws ServletException { 
        super.init(config);
        Runnable notifierRunnable = new Runnable() {
            public void run() {
                try{
                    while(true){ 
                        String cMessage = messageQueue.take();
                        for (AsyncContext ac : queue) {
                            try {
                                PrintWriter acWriter = ac.getResponse().getWriter();
                                acWriter.println(cMessage);
                                acWriter.flush();
                            } catch(IOException ex) {
                                queue.remove(ac);
                            }
                        }
                    }
                }catch(InterruptedException e){
                    log("messageQueue take error", e);
                }
            }
        };
        notifierThread = new Thread(notifierRunnable);
        notifierThread.start();
    }

2.2.12.3. 非同期処理の開始

最初のリクエストを受けた際に、非同期でレスポンスを返す事ができる様にするためにstartAsync() を行ってAsyncContextを取得します。

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        final AsyncContext ac = request.startAsync();
        ac.setTimeout(30 * 60 * 1000);
        ac.addListener(new AsyncListenerImpl());
        this.queue.add(ac);
        response.setContentType("text/plain;charset=UTF-8");
        response.setCharacterEncoding("utf-8");
        PrintWriter pw = response.getWriter(); 
        pw.println("Welcome");
        pw.flush();
    }

2.2.12.4. メッセージの通知

POSTされたデータをメッセージキューに追加する事で、initメソッドで起動したスレッドへメッセージが通知されます。

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String user = request.getParameter("user");
        String message = request.getParameter("message");
        this.messageQueue.add("[" + user + "]: " + message);
    }

2.2.12.5. その他の実装

destroyメソッドでスレッドを止めます。 AsyncListener の実装クラスではエラー処理等を行います。

    @Override
    public void destroy() {
        this.queue.clear();
        this.notifierThread.interrupt();
    }

    class AsyncListenerImpl extends Thread implements AsyncListener{
        @Override
        public void onStartAsync(AsyncEvent arg0) throws IOException {
            …
        }

        @Override
        public void onComplete(AsyncEvent arg0) throws IOException {
            …
        }

        @Override
        public void onError(AsyncEvent arg0) throws IOException {
            queue.remove(arg0.getAsyncContext());
        }

        @Override
        public void onTimeout(AsyncEvent arg0) throws IOException {
            queue.remove(arg0.getAsyncContext());
        }
        
    }
}

2.2.12.6. API リファレンス

API リファレンスについては以下のドキュメントを参照してください。

• リファレンス集 開発編（共通） > 1. Java EE > Java Platform, Enterprise Edition 6 API
       > javax.servlet.AsyncContext
       > javax.servlet.AsyncEvent
       > javax.servlet.AsyncListener
  

2.2.13. Webアプリケーションのデプロイ

2.2.13.1. 統合運用管理ツールを利用したデプロイ

Memo
『統合運用管理ツール』はオプション製品です。ご利用の際は、『WebOTX Administrator』を別途ご購入下さい。

WARファイルの作成

図2.2.13.1-1

図2.2.13.1-2

統合運用管理ツールを起動します。

スタートメニューから プログラム ＞ WebOTX ＞ 統合運用管理ツールを選択します。

図2.2.13.1-3

Memo
配備操作を行うにはテスト用サーバーが動作している必要があります。

図2.2.13.1-4

図2.2.13.1-5

図2.2.13.1-6

図2.2.13.1-7

図2.2.13.1-8

図2.2.13.1-9

図2.2.13.1-10

図2.2.13.1-11

図2.2.13.1-12

2.2.13.2. 「サーバで実行」機能を利用したデプロイ

2.2.13.3. 運用管理コマンド(otxadmin)を利用したデプロイ

1. 2.2.13.1. 統合運用管理ツールを利用したデプロイ の、「WARファイルの作成」の手順で、WAR ファイルを作成し、 適当なディレクトリに保存します。
2. otxadminを起動し、ログインします。
3. deployコマンドで WARファイルを配備します。
   WebOTX AS Express、もしくはWebOTX AS Standard/Enterpriseのスタンダードモードの場合は以下を実行します。
   

   otxadmin> deploy <WAR ファイルへのパス>

   WebOTX AS Standard/Enterpriseのアドバンスドモードの場合は、
   アプリケーショングループとプロセスグループを指定する必要があるため以下を実行します。
   

   otxadmin> deploy --apgroup <アプリケーショングループ名> --pgroup <プロセスグループ名> <WAR ファイルへのパス>

2.2.13.4. web.xmlデプロイメント記述子

新規web.xmlとnec-web.xmlの作成

1. Developer's Studioを起動します。
2. メニュー ファイル ＞ 新規 ＞ その他 を選択して、新規 ウィザードを起動します。
   

   
   図2.2.13.4-1

3. 新規 ウィザードのXMLからXML ファイルを選択して、次へ をクリックします。
4. 新規web.xmlウィザードの親フォルダーを入力または選択にweb.xmlファイルの格納先（ Webアプリケーションのルートフォルダ /WEB-INF）を設定します。
   

   
   図2.2.13.4-2

5. ファイル名にweb.xmlファイル名（web.xml）を設定して、完了 をクリックします。
6. 新規web.xmlファイルができて、web.xmlエディタが開きます。

web.xmlファイルの要素

nec-web.xmlファイルの要素

2.2.14. WebSocketの作成

2.2.14.1. WebSocketとは

2.2.14.2. WebSocket(Tomcat独自実装のWebSocket)作成ウィザードについて

図2.2.14.2-1

WebSocketサーブレットの作成

図2.2.14.2-2

図2.2.14.2-3

Inboundクラスの作成

図2.2.14.2-4

HTMLファイルの作成

図2.2.14.2-5

2.2.14.3. WebSocket(Java 標準API(JSR 356)のWebSocket)作成ウィザードについて

図2.2.14.3-1

サーバエンドポイントの作成

図2.2.14.3-2

Memo
「WebSocket URL」の入力値について、先頭に「/」を入力する必要はありません。ソースには自動で「/」が付きます。
例えば、「websocket」と入力した場合、エンドポイントクラスに「@ServerEndpoint(value = "/websocket")」と生成され、クライアントエンドポイントメインクラスに「String URL = "ws://localhost:80/{プロジェクト名}/websocket";」と生成されます。また、HTMLファイルに「ws = new WebSocket("ws://localhost:80/{プロジェクト名}/websocket");」と生成されます。

Memo
クライアントエンドポイントメインクラスとHTMLファイルのホストとポートは、環境に応じてソースを手修正する必要があります。
例えば、クライアントエンドポイントメインクラスの「String URL = "ws://localhost:80/{プロジェクト名}/{WebSocket URLの入力値}";」とHTMLファイルの「ws = new WebSocket("ws://localhost:80/{プロジェクト名}/{WebSocket URLの入力値}");」を自動で生成した場合、その中の「localhost:80」をサーバ側のホストとポートに手修正してください。

エンコーダの作成

図2.2.14.3-3

デコーダの作成

図2.2.14.3-4

クライアントエンドポイントの作成

図2.2.14.3-5

HTMLファイルの作成

図2.2.14.3-6

2.2.15. スマートデバイスアプリケーションの作成とテスト実行

2.2.15.1. スニペットの利用

図2.2.15.1-1

図2.2.15.1-2

Memo
スニペットの詳細は[2.2.16. スニペット 一覧]を参照してください。

図2.2.15.1-3

図2.2.15.1-4

図2.2.15.1-5

Memo
WebOTX JQuery Mobile Tag内のスニペットを利用する時に、別途jQuery Mobile及びjQueryのパッケージをダウンロードする必要があります。詳細は[2.2.15.2. jQuery Mobileの入手方法] と　[2.2.15.3. jQueryの入手方法]　を参照してください。

2.2.15.2. jQuery Mobileの入手方法

図2.2.15.2-1

図2.2.15.2-2

<head>
  <link rel="stylesheet" href="./jquery.mobile-XXX.min.css" />
  <script type="text/javascript" src="./jquery.mobile-XXX.min.js"></script>
</head>

2.2.15.3. jQueryの入手方法

図2.2.15.3-1

図2.2.15.3-2

<head>
  <script type="text/javascript" src="./jquery-XXX.min.js"></script>
</head>

2.2.15.4. シミュレータでのテスト実行

シミュレータの入手方法

図2.2.15.4-1

シミュレータでのテスト実行

図2.2.15.4-2

図2.2.15.4-3

図2.2.15.4-4

図2.2.15.4-5

図2.2.15.4-6

図2.2.15.4-7

2.2.16. スニペット 一覧

2.2.16.1. WebOTX WebSocket Tag

• WebSocket

WebSocket

<script type="text/javascript">
    var ws = null;
    function startWebSocket() {
        if ('WebSocket' in window) {
            ws = new WebSocket("ws://localhost/");
        } else if ('MozWebSocket' in window) {
            ws = new MozWebSocket("ws://localhost/");
        } else {
            alert("WebSocket is not supported by this browser.");
            return;
        }
        ws.onmessage = function(evt) {
            //TODO
        };
        ws.onclose = function(evt) {
            //TODO
        };
        ws.onopen = function(evt) {
            //TODO
        };
        ws.onerror = function(evt) {
            //TODO
        };
    }
    function sendMsg() {
        if (ws == null) {
            alert("WebSocket is not supported by this browser.");
            return;
        } else {
            ws.send("something");
        }
    }
    function close() {
        ws.close();
    }
</script>

使用例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>index.html</title>

<script type="text/javascript">
	var ws = null;
	function startWebSocket() {
		if ('WebSocket' in window) {
			ws = new WebSocket("ws://localhost:80/WebSocketSample/WebSocketServlet");
		} else if ('MozWebSocket' in window) {
			ws = new MozWebSocket("ws://localhost:80/WebSocketSample/WebSocketServlet");
		} else {
            alert("WebSocket is not supported by this browser.");
			return;
		}

		ws.onmessage = function(evt) {
			var console = document.getElementById('console');
			var p = document.createElement('p');
			p.style.wordWrap = 'break-word';
			p.innerHTML = evt.data;
			console.appendChild(p);
			while (console.childNodes.length > 25) {
				console.removeChild(console.firstChild);
			}
			console.scrollTop = console.scrollHeight;
		};

		ws.onclose = function(evt) {
		};

		ws.onopen = function(evt) {
		};
		
		ws.onerror = function(evt) {
			alert("websocket error: " + evt.data);
		};
	}

	function sendMsg() {
		if (ws == null) {
		    alert("WebSocket is not supported by this browser.");
		    return;
		}
		var text = document.getElementById('writeMsg');
		ws.send(text.value);
		text.value = "";
	}
	
	function close() {
        ws.close();
    }
</script>

</head>
<body onload="startWebSocket();" onunload="close();">
	<p>
		<B>WebSocket Example</B>
	</p>
	<div>
		<div id="console-container">
			<div id="console"></div>
		</div>
		<input type="text" id="writeMsg"
			placeholder="press Send button to send a message"></input> <input
			type="button" value="Send" onclick="sendMsg()"></input>
	</div>
</body>
</html>
		

2.2.16.2. WebOTX HTML5 Tag

• Audio Tag
• Canvas Tag
• DataList Tag
• Keygen Tag
• Meter Tag
• Video Tag
• Local Storage
• Session Storage
• HTML5レイアウト
• CSS自動切り替え

Audio

<audio controls="controls" autoplay="autoplay" loop="loop">
    <source src="REPLACE_URL" type="audio/mpeg" />
    Your browser does not support the audio tag.
</audio>

使用例：

<!DOCTYPE HTML>
<html>
<body>

<audio controls="controls" autoplay="autoplay" loop="loop">
    <source src="test.mp3" type="audio/mpeg" />
    Your browser does not support the audio tag.
</audio>

</body>
</html>
		

Canvas Tag

<canvas id="canv_"></canvas>

使用例：

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

</script>

</body>
</html>

		

DataList Tag

<datalist id="dl_">
    <option value="item1">
    <option value="item2">
</datalist>

使用例：

<!DOCTYPE HTML>
<html>
<body>

<datalist id="dl_">
    <option value="item1">
    <option value="item2">
</datalist>

</body>
</html>

		

Keygen Tag

<form action="REPLACE_URL" method="get">
    <input type="text" name="user_name" />
    <keygen name="key" />
    <input type="submit" />
</form>

使用例：

<!DOCTYPE HTML>
<html>
<body>

<form action="REPLACE_URL" method="get">
    <input type="text" name="user_name" />
    <keygen name="key" />
    <input type="submit" />
</form>

</body>
</html>
		

Meter Tag

<meter min="0" max="1" value="0.5"></meter>

使用例：

<!DOCTYPE HTML>
<html>
<body>

<meter min="0" max="1" value="0.5"></meter>

</body>
</html>
		

Video Tag

<video width="200" height="100" controls="controls" loop="loop">
    <source src="REPLACE_URL" type="video/mpeg" />
    Your browser does not support the video tag.
</video>

使用例：

<!DOCTYPE HTML>
<html>
<body>

<video width="600" height="400" controls="controls" loop="loop">
    <source src="movie.ogg" type="video/ogg" />
    Your browser does not support the video tag.
</video>

</body>
</html>
		

Local Storage

<script type="text/javascript">
    if (window.localStorage) {
        // add to localStorage
        localStorage.key = value; 
        var ws = localStorage.getItem("key");
        
        // TODO use the value
        
        // remove from localStorage
        localStorage.removeItem("key");
    } else { 
        alert("Your browser does not support localStorage."); 
    } 
</script>

使用例：

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">
    if (window.localStorage) {
        // add to localStorage
        var value ="value";
        localStorage.key = value; 
        var ws = localStorage.getItem("key");
        
        // TODO use the value
        alert(ws);
        
        // remove from localStorage
        localStorage.removeItem("key");
    } else {
        alert("Your browser does not support localStorage."); 
    }
</script>

</body>
</html>
		

Session Storage

<script type="text/javascript">
    if (window.sessionStorage) {
        // add to sessionStorage
        sessionStorage.key = value; 
        var ws = sessionStorage.getItem("key");
        
        // TODO use the value
        
        // remove from sessionStorage
        sessionStorage.removeItem("key");
    } else { 
        alert("Your browser does not support sessionStorage."); 
    } 
</script>

使用例：

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">
    if (window.sessionStorage) {
        // add to sessionStorage
        var value = "test"
        sessionStorage.key = value; 
        var ws = sessionStorage.getItem("key");
        
        // TODO use the value
        alert(ws);
        
        // remove from sessionStorage
        sessionStorage.removeItem("key");
    } else { 
        alert("Your browser does not support sessionStorage."); 
    }
</script>

</body>
</html>
		

HTML5レイアウト

<!DOCTYPE HTML>
<html>
<body>
    <nav>
        <a href="">text</a>
        <a href="">text</a>
        <a href="">text</a>
    </nav>
    <header>
        <h1>text</h1>
    </header>
    <article>
        <a href="">text</a><br />
    </article>
    <section>
        <h1>text</h1>
        <p>text</p>
    </section>
    <footer>text</footer>
</body>
</html>

使用例：

<!DOCTYPE HTML>
<html>
<body>
    <nav>
        <a href="">text</a>
        <a href="">text</a>
        <a href="">text</a>
    </nav>
    <header>
        <h1>text</h1>
    </header>
    <article>
        <a href="">text</a><br />
    </article>
    <section>
        <h1>text</h1>
        <p>text</p>
    </section>
    <footer>text</footer>
</body>
</html>
		

CSS自動切り替え

<link rel="stylesheet" href="REPLACE_UR" media="(min-width:1024px)"/>
<link rel="stylesheet" href="REPLACE_UR" media="(max-width:1023px) and (min-width:641px)"/>
<link rel="stylesheet" href="REPLACE_UR" media="(max-width:640px)"/>

使用例：

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="./css1.css" media="(min-width:1024px)"/>
<link rel="stylesheet" href="./css2.css" media="(max-width:1023px) and (min-width:641px)"/>
<link rel="stylesheet" href="./css3.css" media="(max-width:640px)"/>
<style> 
.wrapper {
	border: solid 1px #666;	
	padding: 5px 10px;
	margin: 40px;
}
</style>
</head>
<body>

<div class="wrapper test">test</div>

</body>
</html>
		

@CHARSET "UTF-8";
div{
	background: #F90;
}
		

@CHARSET "UTF-8";
div{
	background: #9CF;
}
		

@CHARSET "UTF-8";
div{
	background: #F9C;
}
		

2.2.16.3. WebOTX CSS3 Tag

• ボーダー効果
• 背景効果
• テキスト効果
• CSS自動切り替え

ボーダー効果

#id_ {
    border-radius: 5px;
}

使用例：

<!DOCTYPE HTML>
<html>
<head>
<style> 
#img
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}

#img {
    border-image:url(border.png) 30 30 round;
}

#radius
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:350px;
}

#radius {
    border-radius: 20px;
}
</style> 
</head>
<body>

<div id="radius">radius</div>

</body>
</html>
		

背景効果

#id_ {
    background:url(REPLACE_URL);
    background-size: 200px 100px;
    background-origin:content-box;
}

使用例：

<!DOCTYPE HTML>
<html>
<head>
<style> 
#div1 {
	border:1px solid black;
	padding:100px;
    background:url(bg_flower.gif);
    background-size: 200px 100px;
    background-origin:content-box;
}
</style>
</head> 
<body>

<div id="div1"></div>

</body>
</html>
		

テキスト効果

#id_ {
    text-shadow: 5px 5px 5px #FF0000;
    word-wrap:break-word;
}

使用例：

<!DOCTYPE HTML>
<html>
<head>
<style> 
div
{
    width:11em; 
    border:1px solid #000000;
}

#test {
    text-shadow: 5px 5px 5px #FF0000;
    word-wrap:break-word;
}
</style> 
</head>
<body>

<div id="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>

</body>
</html>
		

CSS自動切り替え

@media ( min-width :1024px) {
    /* TODO: Add the content when the browser size is greater than 1024. */
}
@media ( max-width :1023px) and ( min-width :641px) {
   /* TODO: Add the content when the browser size is between ${smallersizer} and 1023. */
}
@media ( max-width :640px) {
   /* TODO: Add the content when the browser size is less than 640. */
}

使用例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Media Query Demos</title>
<style> 
.wrapper {
	border: solid 1px #666;	
	padding: 5px 10px;
	margin: 40px;
}

.viewing-area span {
	color: #666;
	display: none;
}


@media ( min-width :1024px) {
    /* TODO: Add the content when the browser size is greater than 1024. */
    .two {
		background: #F90;
	}
	span.gt900 {
		display: inline-block;
	}
}
@media ( max-width :1023px) and ( min-width :641px) {
   /* TODO: Add the content when the browser size is between ${smallersizer} and 1023. */
   .three {
		background: #9CF;
	}
	span.bt600-900 {
		display: inline-block;
	}
}
@media ( max-width :640px) {
   /* TODO: Add the content when the browser size is less than 640. */
   .one {
		background: #F9C;
	}
	span.lt600 {
		display: inline-block;
	}
}
</style> 
</head>
<body>

    <div class="wrapper one">This box will turn to pink if the viewing area is less than 600px</div>
    <div class="wrapper two">This box will turn to orange if the viewing area is greater than 900px</div>
    <div class="wrapper three">This box will turn to blue if the viewing area is between 600px and 900px</div>
    <p class="viewing-area"><strong>Your current viewing area is:</strong> <span class="lt600">less than 600px</span> <span class="bt600-900">between 600 - 900px</span> <span class="gt900">greater than 900px</span></p>

</body>
</html>
		

2.2.16.4. WebOTX JQuery Mobile Tag

• Button
• Checkbox
• Collapsibleset
• Controlgroup
• Dialog
• Flip toggle switch
• Listview
• Navbar
• Page
• Popup
• Radio

Caution
本スニペットは、jQuery 1.9.1とjQuery Mobile 1.3.2 で動作確認をとっています。

Button

<a href="index.html" data-role="button">button name</a>

使用例：

<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<a href="index.html" data-role="button">button name</a>

</body>
</html>
		

Checkbox

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <legend>Agree to the terms:</legend>
    <input type="checkbox" name="name" id="checkbox_" class="custom" />
    <label for="checkbox_">I agree</label>
    </fieldset>
</div>

使用例：

<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <legend>Agree to the terms:</legend>
    <input type="checkbox" name="name" id="checkbox_" class="custom" />
    <label for="checkbox_">I agree</label>
    </fieldset>
</div>

</body>
</html>
		

Collapsibleset

<div data-role="collapsible-set">
    <div data-role="collapsible" data-collapsed="false">
        <h3>Section 1</h3>
        <p>I'm the collapsible set content for section 1.</p>
    </div>
    <div data-role="collapsible">
        <h3>Section 2</h3>
        <p>I'm the collapsible set content for section 2.</p>
    </div>
</div>

使用例：

<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="collapsible-set">
    <div data-role="collapsible" data-collapsed="false">
        <h3>Section 1</h3>
        <p>I'm the collapsible set content for section 1.</p>
    </div>
    <div data-role="collapsible">
        <h3>Section 2</h3>
        <p>I'm the collapsible set content for section 2.</p>
    </div>
</div>

</body>
</html>
		

Controlgroup

<div data-role="controlgroup">
    <a href="" data-role="button">Yes</a>
    <a href="" data-role="button">No</a>
    <a href="" data-role="button">Maybe</a>
</div>

使用例：

<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="controlgroup">
    <a href="" data-role="button">Yes</a>
    <a href="" data-role="button">No</a>
    <a href="" data-role="button">Maybe</a>
</div>

</body>
</html>
		

Dialog

<a href="REPLACE_URL" data-rel="dialog">Dialog</a>

使用例：

<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<a href="index.html" data-rel="dialog">Dialog</a>

</body>
</html>
		

<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

    <div data-role="dialog" id="msg">
        <div data-role="header" data-theme="d">
            <h1>Notice</h1>
        </div>
        <div data-role="content" data-theme="c">
            <p id="ps"></p>
        </div>
        <div data-role="footer" data-position="fixed" data-theme="d">
            <a href="" data-role="button" data-transition="slide">OK</a>
        </div>
    </div>

</body>
</html>
		

Flip toggle switch

<div class="containing-element">
    <label for="flip-1">Flip switch:</label>
    <select name="fw_" id="fw_" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select>
</div>

使用例：

<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div class="containing-element">
    <label for="flip-1">Flip switch:</label>
    <select name="fw_" id="fw_" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select>
</div>

</body>
</html>
		

Listview

<ul data-role="listview">
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
</ul>

使用例：

<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<ul data-role="listview">
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
</ul>

</body>
</html>
		

Navbar

<div data-role="navbar">
    <ul>
        <li><a href="">One</a></li>
        <li><a href="">Two</a></li>
    </ul>
</div>

使用例：

<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="navbar">
    <ul>
        <li><a href="">One</a></li>
        <li><a href="">Two</a></li>
    </ul>
</div>

</body>
</html>
		

Page

<div data-role="page">
    <div data-role="header">
        <h1>Page Title</h1>
    </div>
    <div data-role="content">
        <h4>Page content</h4>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

使用例：

<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page">
    <div data-role="header">
        <h1>Page Title</h1>
    </div>
    <div data-role="content">
        <h4>Page content</h4>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

</body>
</html>
		

Popup

<a href="#pop_" data-rel="popup">Open Popup</a>
<div data-role="popup" id="pop_">
    <p>This is a completely basic popup, no options set.<p>
</div>

使用例：

<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<a href="#pop_" data-rel="popup">Open Popup</a>
<div data-role="popup" id="pop_">
    <p>This is a completely basic popup, no options set.<p>
</div>

</body>
</html>
		

Radio

<fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
    <input type="radio" name="radio_" id="radio_" value="choice_" checked="checked" />
    <label for="radio_">Cat</label>
</fieldset>

使用例：

<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
    <input type="radio" name="radio_" id="radio_" value="choice_" checked="checked" />
    <label for="radio_">Cat</label>
</fieldset>

</body>
</html>