1. アプリケーションの計画

目的

このチュートリアルでは、スキーマ・ダイアグラムを作成して既存のデータベース・スキーマを検証します。 また、ページ・フロー・ダイアグラムを作成してアプリケーションの計画を構築します。

所要時間

約30分

トピック

このチュートリアルでは、以下のトピックについて説明します。

 

スクリーンショットの表示

Show all images

このアイコンの上にカーソルを置くか、[Alt]を押しながら[A](Firefoxでは[Alt]と[Shift]を押しながら[A])を押すと、すべ てのスクリーンショットがロードし、表示されます。 各手順に関連したスクリーンショットのみを表示する場合は、それぞれの手順にあるアイコンの上にカーソルを置いてください。 スクリーンショットをクリックすると、非表示になります。

概要

Oracle FormsやOracle Designerの開発者としてアプリケーションを構築する前に、アプリケーションが使用する表またはビュー、構築する画面、それらの連携動作について知 ることは有用です。 Oracle JDeveloperのモデリングやページ・フロー・ツールは、こうしたアプリケーションの要素を構築の際に視覚化します。

このチュートリアルでは、このワークショップで使用する表のダイアグラムを素早く作成します。 表を確認し、DDLを生成したら、 開発するアプリケーションのナビゲーションや動作を制御するページ・フロー・ダイアグラムにアプリケーションの流れを描き出します。

トピック・リストに戻る

シナリオ

すでに存在するスキーマ内の表を元に、小さなOrder Entryアプリケーションを作成することになったとします。 問合せページ、更新ページ、データ取得ページはすでに存在し、完成画面として期待されるラフ・スケッチを渡されています。 まず、タスクに対してスキーマが適切であるかを検証する必要があります。そのためにも、開発を進める前に全スキーマを検証したいと考えました。 また、アプリケーションのさまざまなコンポーネントを構築するために、高水準のダイアグラムでアプリケーションの流れを捉えたいと考えています。

前提条件

このチュートリアルを始める前に次のことを確認してください。

  1. Oracle JDeveloperのバージョン11.1.1にアクセスできるか、またはインストール済みであること。

  2. Oracle Database 11gにアクセスできるか、またはインストール済みであること。

  3. OEサンプル・スキーマにアクセスできるか、またはインストール済みであること。 Oracle 10gからサンプル・スキーマを削除した場合、あるいははじめからインストールしていなかった場合は、 Oracle Database Sample Schemas 10g Release 1 (10.1)の 指示に従ってインストールしてください。

    警告:セキュリティ上の理由により、 本番データベースに サンプル・スキーマをインストールすることは推奨されません。 どうしてもインストールする場合は、デフォルト・パスワード以外のパスワードを使用してください。ただし、このチュートリアル内で提供されている例では、 デフォルト・パスワードが使用されています。 チュートリアルやデモにおけるサンプル・スキーマの使用が終了した場合は、次のOracle SQL*Plusコマンドを発行して、インストールしたサンプル・スキーマを削除する必要があります。

    DROP USER <schema_name> CASCADE;

  4. サンプル・スキーマを初めて使用する場合、OEサンプル・スキーマのユーザーをアンロックしてから、 CONNECTお よび RESOURCEロールを付与する必要があります。 この作業は、Oracle Databaseに含まれるOracle Enterprise Managerを使用して実行できます。

    または、次のSQL*Plusコマンドを発行することもできます。

    ALTER USER oe IDENTIFIED BY OE ACCOUNT UNLOCK;
    GRANT CONNECT, RESOURCE to OE;

トピック・リストに戻る

1. データベース接続の作成

Java Database Connectivity(JDBC)は、Javaアプリケーションをリレーショナル・データベースに接続するために使用される標準的な Application Program Interface(API)です。 OEスキーマへのJDBC接続を作成するには、以下の手順を実行します。

  1. View」→「 Database Navigator」を選択 します。

    Hover to see image

  2. IDE Connections」ノードを右クリックし、コンテキスト・メニューから「 New Connection」を選択します。

    Hover to see image

  3. Create Database Connectionダイアログが表示されます。

    Hover to see image

    Connection Nameフィールドに、接続名を入力します。 今回は、接続名を oeconn とします。

    Hover to see image

    UsernamePasswordフィールドに、それぞれ oe と入力します。

    Deploy password」を選択します。

    Hover to see image

    Host nameフィールドに、データベースが置かれているマシン名(またはIPアドレス)を入力し ます。 データベースが使用しているPC上にある場合、値はデフォルト( localhost) のまま使用します。

    JDBC Portおよび SIDフィールドに、データベースの接続 情報を入力します。 これらの値が不明である場合は、データベース管理者にお問い合わせください。 デフォルト値は 1521ORCLです。

    Hover to see image

    Test Connection」をクリックします。

    データベースが使用可能な状態にあり、接続情報が正しい場合は、ステータス・ウィンドウにSuccess!と表示されます。

    エラーが発生した場合、データベース管理者に接続設定を確認します。必要に応じて変更を加え、接続を再度テストします。

    Hover to see image

  4. OK」をクリックします。 データベース・ナビゲータのConnectionノードの下に、接続が表示されます。

    Hover to see image

トピッ ク・リストに戻る

2. データベース・スキーマの検証

Webアプリケーションは、データベース・スキーマをモデリングすることなく作成できます。 スキーマの構造について理解している場合は、この手順は不要です。 ただし、表が1つも用意されていない場合は、スキーマをモデリングしてDDLを生成する必要があります。または、単にスキーマを視覚的に捉えることもあり ます。

このチュートリアルでは、既存のスキーマを使用して作業します。また、データベース・ダイアグラムを使用してす べての表のDDLを生成します。 既存のスキーマ表をモデリングしてDDLスクリプトを生成するには、以下の手順を実行します。

 

2.1. 新規アプリケーションおよびプロジェクトの作成

Oracle JDeveloperを使用してWebアプリケーションを作成するには、まずアプリケーションの作成から始めます。 アプリケーションは制御構造の最上位レベルで、1つ以上のプロジェクトで構成されます。 JDeveloperのプロジェクトは、関連するファイルを論理的にグループ化する構成となっています。 プロジェクトを使用してソース・コードを編成できます。 Oracle JDeveloperは、テンプレートを使用して、特定の処理に必要なテクノロジーの選択肢のみを公開します。Web Application[JSF, ADF BC]テンプレートを適用すると、2つのプロジェクト(ModelとViewController)が作成されます。 この例では、データベース・スキーマ内の表を確認するために、追加のプロジェクトを作成します。

それには、以下の手順を実行します。

  1. File」メニューから「 New...」を選択します。 New galleryで、 Generalノードの下にある「 Applications」 を選択し、「 Fusion Web Application (ADF)」を選択します。

    Hover to see image

  2. アプリケーションの作成ダイアログで、アプリケーション名として OrderEntryを入力します。 アプリケーション名を入力すると、ディレクトリ名が自動的に変更されることを確認してください。

    残りの手順のデフォルト値を受け入れます。 「 Finish」をクリックします。

    Hover to see image

    アプリケーション・ナビゲータに、OrderEntryアプリケーションと2つのデフォルトのプロジェクトのModelと ViewControllerが表示されます。

  3. 次に、ダイアグラムで使用する追加プロジェクトを作成します。

    New GalleryのNew「 New button」アイコンをクリックして「 General」を 展開し、Categoriesリストから「 Projects」を選択します。 そして、 Itemsリ ストから「 Generic Project」を選択し、「 OK」をクリックしま す。

    Hover to see image

  4. Create Projectダイアログで、プロジェクト名として OESchemaを 入力します。

    Hover to see image

    Available Technologiesリストから「 Database (Offline)」を 選択します。 AddAdd button」をクリックして、それらを Selectedリ ストに移動します。

    Finish」をクリックします。

    これを実行することで、OESchemaプロジェクトで作業する際にデータベース関連の情報のみが表示されるようになります。 この設定は、どの段階でも利用可能なオプションすべてを表示するよう変更できます。

  5. これで、 アプリケーション・ナビゲータにはOrderEntryアプリケーションにModel、 ViewController、およびOESchemaの3つのプロジェクトがあると表示されるようになります。

    Hover to see image

  6. Save AllSave All button」をクリックするか、「 File」 →「 Save All」を選択して作業内容を保存します。

トピックに戻る

2.2. スキーマ・ダイアグラムの作成

この項では、ダイアグラム上のOEスキーマから表の一覧を表示します。 単一ダイアグラム上のオンライン・スキーマからオブジェクトを表示するには、以下の手順を実行します。

  1. アプリケーション・ナビゲータで、「 OESchema」プロジェクトを右クリックして、コンテキス ト・メニューから「 New」を選択します。

    Hover to see image

  2. New GalleryのCategoriesリストで、「 General」を開いて「 Diagrams」 を選択します。

    プロジェクトのテクノロジー・スコープのため、Itemsリスト内にある利用可能なアイテムは限定されます。 「 Database Diagram」を選択して、「 OK」をクリックします。

    Hover to see image

  3. Create Database Diagramダイアログで、 OESchemaという名前を入力し て、パッケージ名として OEを入力します。

    OK」をクリックします。

    Hover to see image

    データベース・ダイアグラムはビジュアル・エディタ内に開きます。また、右側にデータベース・コンポーネント・パレットが表示されます。

  4. Connectionsタブに切り替えて、コネクション・ナビゲータを表示します (利用できない場合は、メニューの「 View」 →「 Database Navigator」から開きます)。

    oeconn」接続、「 OE」スキーマ、「 Tables」 ノードを展開します。

    CUSTOMERS」表、「 ORDERS」表、「 ORDER_ITEMS」 表、および「 PRODUCT_INFORMATION」表を選択してページへドラッグします。

    Specify Locationダイアログで、デフォルトをそのまま受け入れます。

    Hover to see image

  5. Save AllSave All button」をクリックするか、「 File」→ 「 Save All」を選択して作業内容を保存します。

トピックに戻る

2.3. 表の確認(オプション)

注:この項では、ダイアグラムの視認性を強化するため、表や Oracle JDeveloperで利用可能な機能を検証します。 時間がない場合は、この項の一部だけを実施するか、2.4にスキップしてください。

注:表をオンライン接続からダイアグラムへド ラッグすると、2つのことが発生します。 1つは、すべての表がオフライン表としてプロジェクト内に作成されることで、もう1つはダイアグラム上に描画されることです。

構造は、いくつかの方法で確認できます。 構造を確認するには、以下の手順を実行します。

  1. アプリケーション・ナビゲータで「 OESchema」プロジェクトを展開し、「 Offline Database Sources」ノードおよび「 OE」パッケージを開きます。

    Hover to see image

  2. 表の1つを選択して、アプリケーション・ナビゲータの下にあるStructureウィンドウに列、制約、および索引が表示されたことを確認します。

    ヒント: Structureウィンドウが表示されない場合は、メニューから「 View」 →「 Structure」を選択します。

    Hover to see image

  3. サムネイルが表示されない場合、Thumbnailビューをクリックするか、メニューから「 View」 →「 Thumbnail」を選択します。

    サムネイルの周りに小さな黒い四角形を、メイン・データベース・ダイアグラムの周りの領域までドラッグし、サイズを変更します。 マウスにホイールが搭載されている場合は、ホイールを回してダイアグラムにズームイン、ズームアウトします。

    Hover to see image

  4. ダイアグラムの表示を単純化し、簡単に作業できるようにするには、ダイアグラム内のオブジェクトをいくつか選択して、メイン・メニューから 「 Diagram」→「 View As」→「 Compact」 の順に選択します。 これにより、列名と制約名が表示されなくなります。

    Hover to see image

    この操作は、ダイアグラムを右クリックして、メイン・メニューから「 Diagram」→「 View As」→「 Symbolic」を選択することで元に戻すことができます。

  5. StandardからCompactへ形を変更した場合、レイアウトの再構成が必要な場合があります。 ダイアグラム内の空白部分を右クリックして、コンテキスト・メニューから「 Lay Out Shapes」→「 Hierarchical (Bottom to Top)」を選択します。

    Hover to see image

  6. ダイアグラム・エディタの左上にあるZoomコントロールを使用して、小さくなったダイアグラムを拡大表示できます。

    Hover to see image

  7. ダイアグラム上の表を視覚的に区別するには、色を使用できます。 例として、 CUSTOMERを視覚的 に分離してみましょう。

    ダイアグラム内の「 CUSTOMER」表を選択し、右クリックしてコンテキスト・メニューの「 Visual」 プロパティを選択します。 そして新しい色を選択します。 これはスクリーンショットにあるとおり、Graphical Optionsの下にあるPropertiesペインでも同様の作業ができます。

    Hover to see image

  8. 好みに応じて、ダイアグラム上に表を配置します。 ガイドラインとして、図をご利用ください。 1つの表、複数の表、またはダイアグラム上の任意の場所を右クリックすることで、複数の描画機能が提供されます。

    Hover to see image

    たとえば、ダイアグラム上に外部キー名を表示するには、 [Ctrl]+ [A]を 押してすべてのオブジェクトを選択し、「 View」メニューから「 Properties Inspector」 を起動します。

    Hover to see image

    Show Namesのドロップダウン・リストでTrueを設定します。

    Hover to see image

    表、ライン、ラベルをダイアグラム上の別の場所へドラッグできます。

  9. Save AllSave All button」をクリックするか、「 File」→ 「 Save All」を選択して作業内容を保存します。

トピックに戻る

2.4. DDLスクリプトの生成(オプション)

注:既存のアプリケーションを拡張する場合、スキーマの修正が必要な場合があります。これは、表または列を 追加して構造を再生成しておこないます。 このチュートリアルでは表を修正せず、代わりに詳細を確認してCREATE DDLスクリプトを作成します。 時間がない場合は、この項の一部を実施するか3項にスキップしてください。

表の定義を起動するには、さまざまな方法があります。 表を確認してDDLを生成するには、以下の手順を実行します。

  1. データベース・ダイアグラム内で「 CUSTOMERS」表をダブルクリックします。またはアプリケー ション・ナビゲータで(「 OESchema」プロジェクトを開き、 OEパッケージ を開いて)表をダブルクリックします。

    表をダブルクリックすると、Edit Tableダイアログが起動します。 さまざまなオプションがある中で、とくに主キーと外部キーのカテゴリを確認します。

    Hover to see image

  2. このほか、列も視覚的に確認できます。 データベース・ダイアグラム内の「 CUSTOMERS」表を右 クリックし、「 View As」→「 Standard」を選択して表示された列を 確認します (すべての列が表示されない場合、ダイアグラム内の表の高さや列の表示区画を広げてみてください)。

    Hover to see image

  3. すべてのCREATE TABLE DDLスクリプトが手元にあると、多くのケースで役立ちます。 これは、ダイアグラム内の表 す べてを選択して右クリックし、コンテキスト・メニューから「 Synchronize with Database」 →「 Generate To」→「 SQL Script」の順に選択します。

    Hover to see image

  4. Offline Database ObjectsウィザードのGenerate SQLのWelcomeページが開いたら、「 Next」 をクリックします。

    ウィザードのObject Pickerページには、すでにSelectedリスト内に4つの表が表示されています。 「 Next」 をクリックします。

    Hover to see image

  5. ウィザードのChoose Operationページで、「 CREATE」を選択して「 Next」 をクリックします。

    Hover to see image

  6. SQL Script Optionsページで、SQLファイル名に create_tables.sql と 入力します。

    Next」をクリックします。

    Hover to see image

  7. Finishページで設定内容を確認し、「 Finish」をクリックします。

    Hover to see image

  8. このチュートリアルではこのスクリプトを実行しませんが、コード・エディタで右クリックして「 Run in SQL*Plus」を選択して、コンテキスト・メニューから目的の接続を選択すれば、SQLスクリプトを実行できます。 スクリプトは、決してoeconnに対して実行しないでください。

    注:Oracle JDeveloperの新規設定で初めてスクリプトを実行する場合、SQL*Plus実行可能ファイルへのパスを尋ねられます。

トピックに戻る

トピック・リストに戻る

3. ビジュアル・ページ・フローの作成

Oracle Formsの開発者であれば、フォームを作成するにあたり、何らかの計画が頭の中にあると思われます。 さらに、フォームでどのような表を使用するかを把握している以外にも、ユーザーが参照する画面や移動方法のアイデアをもっているとします。 これらのアイデアを、次のようなラフ・スケッチとして書き起こしたとしましょう。

Page Flow

多くの開発者は、開発サイクルの初期段階でページ・フローを構築しません。その代わりに、ビジネス・サービスの 開発を先に進めてしまいます。 このチュートリアルでは、別のアプローチを取ります。これは、ラフ・スケッチで各ページの表示を知るだけでなく、ページ間で想定される流れを見ることは有 意義と考えられるからです。 Oracle JDeveloperは、アプリケーションのページ・フローをダイアグラム化するためのビジュアル・ツールです。 後続のワークショップ・セッションでわかるとおり、このビジュアル・ツールの裏ではさまざまなことが実行され、ダイアグラムを描画する以上の機能を提供し ます。 ただし、ここでは構築を計画するアプリケーションの概要を把握するだけにとどめます。

構築予定のアプリケーションのページ・フロー・ダイアグラムを作成するには、次の手順を実行します。

  1. アプリケーション・ナビゲータで、「 ViewController」 プロジェクトを選択します。 プロジェクトのノード、「 Web Content」ノード、「 WEB-INF」ノードを展開し ます。 「 adfc-config.xml」を検索し、ダブルクリックします。

    Hover to see image

    エディタ上にページ・フロー・ダイアグラムが開きます。

  2. ビジュアル・ページ・フロー・エディタの右にあるコンポーネント・パレットで、上部のドロップダウン・リストから「 ADF Task Flow」が選択されていることを確認します。 「 View」アイテムをダイアグラムの 空いている場所にドラッグします。 新規ページの名前を browseCustomers と 入力します。

    Hover to see image

    関連するページが構築されていないため、/browseCustomersのページ・アイコンに黄色いアラートが表示されることを確認して ください。

  3. ダイアグラムに editCustomersbrowseCustomerOrdersの 2つのページを追加作成します。

    Hover to see image

  4. 次に、ページ間のJSF Navigation Caseを作成します。 この重要性は、あとで判明します。現時点では、アプリケーション・フローのビジュアル・インジケータとして理解してください。

    ナビゲーションを追加するには、コンポーネント・パレットの「 Control Flow Case」を クリックし、ソースとして「 browseCustomers」、目的の場所として「 browseCustomerOrders」 の順にクリックします。

    Hover to see image

  5. ナビゲーションのプロパティを修正するには、作成したばかりの「 Control Flow Case」 を選択して、プロパティ・インスペクタからFrom Outcomeプロパティを customerOrdersに変更 します (プロパティ・インスペクタが表示されていない場合、Viewメニューから選択するか、[Ctrl]と[Shift]を押しながら[I]を押します)。 これで、ダイアグラム上のナビゲーション・フロー名がcustomerOrdersに変更されたことを確認してください。 次のダイアグラムにあるような四角い角を表示したい場合は、スクリーンショット内でハイライトされている緑色の「 Orthogonal」 アイコンをクリックします。

    Hover to see image

  6. browseCustomerOrdersから browseCustomersに 戻るナビゲーション・ケースを作成します。 ここでも、ナビゲーション・フローの名前を変更します。 今回は、フロー名を選択して 直接ダ イアグラム上で変更をおこないます。 ナビゲーション・ケースの browseCustomersをコールします。

    Hover to see image

  7. ここで、browseCustomersとeditCustomersのページ間に、3つのJSFナビゲーション・ケースを作成します。ま ず browseCustomersから editCustomersへのケースを作 成するため、From Outcomeプロパティを editCustomersに設定します。

    次の2つのケースは editCustomersから browseCustomersに 対するものを作成するため、 From Outcomeプロパティをそれぞれ cancelお よび commitに設定します。

    Hover to see image

    プロパティの設定には、フローをダブルクリックしてプロパティ・インスペクタを起動し、From Outcomeプロパティを編集する方法もあります。

  8. Save AllSave All button」をクリックするか、「 File」→ 「 Save All」を選択して作業内容を保存します。

トピック・リストに戻る

まとめ

このチュートリアルでは、このワークショップで使用する既存スキーマのダイアグラムを作成しました。 また、表の関係を確認し、DDLを生成しました。 これらの表は、今後のワークショップ・セッションで使用します。

このほか、いくつかのページでページ・フロー・ダイアグラムを作成しました。

Hide all images このアイコンの上にカーソルを置くか、または[Shift]と[Alt]を押しながら[h]を押 すと、すべてのスクリーンショットが非表示になります。 アイコンをクリックして、ナビゲーション・バーを表示させます。