最近の更新

読込中...

2012年6月30日土曜日

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(005)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※005では、ログイン画面のログインボタン位置をセル中央にします。



【手順１】
１．「index.xhtml」を以下の様に修正。
※Styleシートを埋め込みで追加しfooterクラスを追加。
※h:panelGridタグで、footerClass="footer"でスタイルシートのクラスを指定。

<html xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
<h:head>
    <title>書き取りサービス【ログイン画面】</title>
    <style type="text/css">
<!--
.footer {
    text-align: center;
}
-->
</style>
</h:head>
<h:body onload="loginId.focus()">
    <h:panelGrid columns="2" border="1" footerClass="footer">
        <h:outputLabel value="ログインID" />
        <h:inputText id="loginId" tabindex="1" />
        <h:outputLabel value="パスワード" />
        <h:inputSecret tabindex="2" />
        <f:facet name="footer">
            <h:commandButton value="ログイン" tabindex="3" />
        </f:facet>
    </h:panelGrid>
</h:body>
</html>

２．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを再起動します。
３．ブラウザで以下のURLにアクセスします。
http://localhost:8080/kakitori/faces/index.xhtml

４．以下の様に表示されれば成功です。
※ログインボタンがセル中央になっています。





































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。



以上です。

投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(004)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※004では、ログイン画面の表示時のTabキーでの移動処理を追加します。



【手順１】
１．「index.xhtml」を以下の様に修正。
※ログインID、パスワード、ログインボタンにtabindexを追加。

<html xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
<h:head>
    <title>書き取りサービス【ログイン画面】</title>
</h:head>
<h:body onload="loginId.focus()">
    <h:panelGrid columns="2" border="1">
        <h:outputLabel value="ログインID" />
        <h:inputText id="loginId" tabindex="1" />
        <h:outputLabel value="パスワード" />
        <h:inputSecret tabindex="2" />
        <f:facet name="footer">
            <h:commandButton value="ログイン" tabindex="3" />
        </f:facet>
    </h:panelGrid>
</h:body>
</html>

２．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを再起動します。
３．ブラウザで以下のURLにアクセスします。
http://localhost:8080/kakitori/faces/index.xhtml

４．以下の様に表示されれば成功です。
※「Tab」キー押下で、「ログインID」⇒「パスワード」⇒「ログインボタン」の順に移動します。
※「ログインボタン」⇒最初に戻るまでには「Tab」キーを数回（ブラウザ依存）押さなければなりません。








































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。



以上です。

投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(003)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※003では、ログイン画面の表示時のフォーカス処理を追加します。



【手順１】
１．「index.xhtml」を以下の様に修正。
※ログインIDのテキストフィールドにid="loginId"を追加。
※bodyのonload属性にログインIDのフォーカスJavaScriptを追加。

<html xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
<h:head>
    <title>書き取りサービス【ログイン画面】</title>
</h:head>
<h:body onload="loginId.focus()">
    <h:panelGrid columns="2" border="1">
        <h:outputLabel value="ログインID" />
        <h:inputText id="loginId" />
        <h:outputLabel value="パスワード" />
        <h:inputSecret />
        <f:facet name="footer">
            <h:commandButton value="ログイン" />
        </f:facet>
    </h:panelGrid>
</h:body>
</html>

２．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを再起動します。
３．ブラウザで以下のURLにアクセスします。
http://localhost:8080/kakitori/faces/index.xhtml

４．以下の様に表示されれば成功です。
※フォーカスがログインIDのテキストボックスに移動しています。








































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。
００７．IDの命名方法の検討が必要。



以上です。

投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(002)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※002では、ログイン画面のXHTMLを作成します。



【手順１】
１．「index.xhtml」を以下の様に修正。
<html xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
<h:head>
    <title>書き取りサービス【ログイン画面】</title>
</h:head>
<h:body>
    <h:panelGrid columns="2" border="1">
        <h:outputLabel value="ログインID" />
        <h:inputText />
        <h:outputLabel value="パスワード" />
        <h:inputSecret />
        <f:facet name="footer">
            <h:commandButton value="ログイン" />
        </f:facet>
    </h:panelGrid>
</h:body>
</html>

２．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを再起動します。
３．ブラウザで以下のURLにアクセスします。
http://localhost:8080/kakitori/faces/index.xhtml

４．以下の様に表示されれば成功です。







































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。



以上です。
投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(001)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※001ではまず、Webアプリケーションの雛形を作成します。



【手順１】
１．「RichFaces4プロジェクトの作成方法」の手順で、「kakitori」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。


動的
Web
プロジェクト		プロジェクト名kakitori

ターゲット・ランタイムApache Tomcat v7.0
動的 web モジュール　バージョン3.0
構成Apache Tomcat v7.0 デフォルト構成
EARメンバーシップチェックなし
ワーキング・セットチェックなし
Javaビルド・パス上のソース・フォルダーsrc
デフォルト出力フォルダーbuild\classes
Web
モジュール		コンテキスト・ルートkakitori

コンテンツ・ディレクトリーWebContent
web.xml デプロイメント記述子の作成チェックあり


２．「WebContent/WEB-INF/web.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
    id="WebApp_ID" version="3.0">
    <display-name>kakitori</display-name>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>

    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>

</web-app>

３．「任意のファイルの作成方法」の手順で、「WebContent/WEB-INF/」ディレクトリに「faces-config.xml」というファイルを作成。
４．「faces-config.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>

<faces-config 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 http://java.sun.com/xml/ns/javaee/web-facesconfig_2_1.xsd"
    version="2.1">
</faces-config>

５．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
６．「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
７．「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
<h:head>
</h:head>
<h:body>
    <h:outputText value="トップページ" />
</h:body>
</html>

８．「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
９．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
１０．ブラウザで以下のURLにアクセスします。
http://localhost:8080/kakitori/faces/index.xhtml

１１．以下の様に表示されれば成功です。








































以上です。

投稿者 0 コメント
ラベル:

Selenium IDE1.8.1の起動方法

【目的】
Selenium IDE1.8.1をインストールし、Webアプリケーションのテストの自動化を行う。



【手順１】
１．「Selenium IDE1.8.1のインストール方法」の手順でSelenium IDEをインストールしておく。
２．「Firefoxの起動方法」の手順でFirefoxを起動。
３．「Altキー」を押し、メニューから「ツール」⇒「Selenium IDE」をクリック。




【手順２】
１．以下の様にSelenium IDEが起動すれば性向です。













































以上です。

投稿者 0 コメント
ラベル:

Selenium IDE1.8.1のインストール方法

【目的】
Selenium IDE1.8.1をインストールし、Webアプリケーションのテストの自動化を行う。



【手順１】
１．「Firefoxのインストール方法」の手順でFirefoxをインストールしておく。
２．「Firefoxの起動方法」の手順でFirefoxを起動。
１．「Seleniumのサイト」にアクセス。
２．「Download」をクリック。




【手順２】
１．「Selenium IDEの1.8.1のリンク」をクリック。




【手順３】
１．「許可ボタン」をクリック。




【手順４】
１．ダウンロードされるのを待ちます。




【手順５】
１．「今すぐインストールボタン」をクリック。




【手順６】
１．左上のFirefoxメニューから「アドオン」をクリック。




【手順７】
１．「拡張機能」を選択。
２．下記の様になっていれば、インストールは成功です。
３．「Firefox」を再起動します。




【手順８】
１．「Firefox」の再起動後、再び「アドオン」を確認し、以下の様になっていればインストールは完了です。











































以上です。

投稿者 0 コメント
ラベル:

Firefoxの起動方法

【目的】
Firefoxを起動する。



【手順１】
１．デスクトップのショートカットを実行。




【手順２】
１．以下の様にFirefoxが起動すれば成功です。













































以上です。
投稿者 0 コメント
ラベル:

2012年6月29日金曜日

Firefoxのアンインストール方法

【目的】
Firefoxをアンインストールする。



【手順１】
１．「Windowsのスタートメニュー」から「コントロールパネル」をクリック。




【手順２】
１．「プログラムのアンインストール」をクリック。




【手順３】
１．「Mozilla Firefox (任意のバージョン)」を選択。
２．「アンインストール」をクリック。




【手順４】
１．「次へボタン」をクリック。。




【手順５】
１．「ユーザの設定とデータも削除する」を選択。
２．「削除」ボタンをクリック。




【手順６】
１．「完了」ボタンをクリック。






























以上です。
投稿者 0 コメント
ラベル:

Firefoxのインストール方法

【目的】
Firefoxをダウンロードし、インストールする。



【手順１】
１．「Firefoxのダウンロード方法」の手順でダウンロードした、「Firefox Setup 13.0.1.exe」を実行。




【手順２】
１．「実行ボタン」をクリック。




【手順３】
１．「次へボタン」をクリック。




【手順４】
１．「カスタムインストール」を選択。
２．「次へボタン」をクリック。




【手順５】
１．「次へボタン」をクリック。




【手順６】
１．「次へボタン」をクリック。




【手順７】
１．「次へボタン」をクリック。




【手順８】
１．「Firefoxを規定のブラウザとして使用する」を選択しない。
２．「インストール」をクリック。




【手順９】
１．「完了」ボタンをクリック。




【手順１０】
１．「設定をインポートしない」を選択。
２．「次へボタン」をクリック。




【手順１１】
１．「いいえ」ボタンをクリック。




【手順１２】
１．以下の様にFirefoxが起動すれば成功です。















































以上です。
投稿者 0 コメント
ラベル:

Firefoxのダウンロード方法

【目的】
Firefoxをダウンロードし、インストールする。



【手順１】
１．「Mozilla Firefoxのサイト」にアクセス。
２．「Firefox無料ダウンロード」をクリック。





【手順２】
１．保存場所を選択。
２．「保存」ボタンをクリック。




























以上です。

投稿者 0 コメント
ラベル:

PostgreSQL9.1.4(解凍版)のユーザの削除方法

【目的】
PostgreSQLのデータベースのユーザを削除します。



【手順１】
１．「コマンドプロンプトの起動方法」の手順でコマンドプロンプトを起動。
２．以下のコマンドを入力。
> c:\devel-pgsql\pgsql\bin\dropuser.exe user01
※user01は削除したいのユーザ名













































以上です。
投稿者 0 コメント
ラベル:

PostgreSQL9.1.4(解凍版)のユーザの作成方法

【目的】
PostgreSQLのデータベースのユーザを作成します。



【手順１】
１．「コマンドプロンプトの起動方法」の手順でコマンドプロンプトを起動。
２．以下のコマンドを入力。
> c:\devel-pgsql\pgsql\bin\createuser.exe user01
※user01は作成したいのユーザ名













































以上です。
投稿者 0 コメント
ラベル:

PostgreSQL9.1.4(解凍版)のユーザ一覧の確認方法

【目的】
PostgreSQLのデータベースのユーザ一覧を取得します。



【手順１】
１．「コマンドプロンプトの起動方法」の手順でコマンドプロンプトを起動。
２．以下のコマンドを入力。
> c:\devel-pgsql\pgsql\bin\psql.exe -c "\du" postgres
※postgresはシステムのデータベース名




































以上です。
投稿者 0 コメント
ラベル:

PostgreSQL9.1.4(解凍版)のコマンドラインからのSQLの実行方法

【目的】
PostgreSQLのデータベースにコマンドラインからSQLを実行します。



【手順１】
１．「コマンドプロンプトの起動方法」の手順でコマンドプロンプトを起動。
２．以下のコマンドを入力。
> c:\devel-pgsql\pgsql\bin\psql.exe -c "SELECT 1" postgres
※postgresはSQLを実行したいデータベース名




























以上です。
投稿者 0 コメント
ラベル:

Android 4.1 (API 16)のインストール方法

【目的】
Android開発を行うため開発環境を準備します。



【手順１】
１．「SDK Managerの起動方法」の手順で「Android SDK Manager」を起動。
２．「Android 4.1 (API 16)」を選択。
３．「Install 2 package」をクリック。





【手順２】
１．ライセンスを確認。
２．「Accept All」ボタンをクリック。
３．「Install」ボタンをクリック。




【手順３】
１．インストールが完了するのを待ちます。（下）





【手順４】
１．以下の様に、「Android 4.1 (API 16)」以下の項目の「Status」が「Installed」になっていれば成功です。




【手順５】
１．以下の様に「android-16」というディレクトリが作成されていれば成功です。








































以上です。
投稿者 0 コメント
ラベル:

PostgreSQL9.1.4(解凍版)のplpgsqlのアンインストール方法

【目的】
PostgreSQL(解凍版)のデータベースにPL/pgSQLをアンインストールします。



【手順１】
１．「コマンドプロンプトの起動方法」の手順でコマンドプロンプトを起動。
２．以下のコマンドを入力。
> c:\devel-pgsql\pgsql\bin\droplang.exe plpgsql sampledb001
※sampledb001はPL/pgSQLをアンインストールしたいデータベース名













































以上です。
投稿者 0 コメント
ラベル:

PostgreSQL9.1.4(解凍版)のplpgsqlのインストール方法

【目的】
PostgreSQL(解凍版)のデータベースにPL/pgSQLをインストールします。



【手順１】
１．「コマンドプロンプトの起動方法」の手順でコマンドプロンプトを起動。
２．以下のコマンドを入力。
> c:\devel-pgsql\pgsql\bin\createlang.exe plpgsql sampledb001
※sampledb001はPL/pgSQLをインストールしたいデータベース名













































以上です。
投稿者 0 コメント
ラベル:

ADT Plugin for Eclipseリビジョン20への更新方法

【目的】
Androidの開発環境のADT Plugin for Eclipseをリビジョン20に更新する。



【手順１】
１．Eclipseを起動する。
２．Android SDKをリビジョン20へ、先に更新している場合は以下のメッセージが表示される。
３．「更新の確認」をクリック。




【手順２】
１．更新情報が読み込まれる（右下）。




【手順３】
１．使用可能な更新が表示される。
２．「Android DDMS」、「Android 開発ツール」、「Android 階層 Viewer」、「Android トレースビュー」のみにチェックを入れる。
３．「次へ」ボタンをクリック。




【手順４】
１．「次へ」ボタンをクリック。




【手順５】
１．ライセンスを確認し、「使用条件の条項に同意します」を選択。
２．「完了」ボタンをクリック。




【手順６】
１．「OK」ボタンをクリック。




【手順７】
１．ソフトウェアが更新されるのを待つ（右下）。




【手順８】
１．「今すぐ再起動」ボタンをクリック。




【手順９】
１．確認のため、「HelloAndroid」プロジェクトを起動してみる。
２．プロジェクトを選択し、メニューから「実行」⇒「実行」⇒「Androidアプリケーション」を選択。




【手順１０】
１．以下のダイアログが表示された場合は「OK」ボタンをクリック。
２．「Logcatビュー」がエラーで表示されてしまいましたが、再度表示しなおせば問題ありませんでした。




【手順１１】
１．無事に起動すれば成功です。










































以上です。

投稿者 0 コメント
ラベル:
登録: 投稿 (Atom)

関連記事

loading..