第四章-Oracle JDeveloper 範例導覽

經過前三章的說明，相信對於 Oracle JDeveloper 有了基本的認識，在本章會先行帶領大家來做兩個簡單的範例，其中包括兩大部分：

第一部份是 Java Client，也就是Client / Server的架構，其中底層是使用Java Swing來實作，而在Oracle的部分成為 JClient。

第二部分是JSP相關技術，以就是整個J2EE的開發環境都可以涵蓋在Oracle JDeveloper，所以此部分是Web端的技術。

在這兩個例子中，我們會使用Oracle ADF（Application Development Framework），

也就是BC4J加強版，我們會提供一個ADF的Model架構，示範如何使用Oracle JClient和JSP來做User Interface，我們都會在稍後為大家介紹。

範例需求：

1. Oracle資料庫 或是其餘可以取代的資料庫。

2. Oracle Sample：可以打開兩個Sample User：HR，OE（或是自行準備資料）。 
3. Oracle JDeveloper 10g。 
4. 請自行先行建立 HR 的Database Connection（請參閱 CH3）。

首先，我們先建立一個Application Workspace，所以可以點一下Application 按一下右鍵，並選擇 New。

選一下 Application Workspace：

輸入 Application Name：DeptEmpWS，在 Application PackagePrefix 中輸入：dew，並選擇 Application Template：Java Application [Default]。

按下存檔
 

在 Model 上，按下右鍵，並選擇 New。

並選擇 Business Components 的分類，並選擇 Business Components from Tables 這個選項。

選擇 HR_HOME 的 Connection

並且輸入帳號密碼

接著啟動 Create Business Components from Tables 的 Wizard：

選擇DEPARTMENTS和EMPLOYEES這兩個TABLE作為ADF的Entity Object，有關於Oracle ADF Framework將會於後面的章節作介紹：

將需要建立的Entity Object的Table或是View，選擇到另一邊：

接著會進入設定View Object的相關設定：

將所需要建立View Object的Entity Object，選擇到另一邊，在此，我們將兩個Entity Object選擇到另一邊。

接著建立Application Module，我們將Name設定為：DeptEmpModule。

當Wizard已經完成設定過後，Wizard會將相關的結果進行Sunnary，在此，共建立了兩個Entity Object、兩個View Object和一個Application Module。

正在產生DeptEmpModule的相關CLASS檔和相關的XML FILES等等的檔案。

Oracle ADF相關的檔案和設定檔，都已經成功的建立在 Application Navigator，其中包括Entity Object、Assocation、View Object、View Link和Application Module共相關檔案，會於下面章節再好好進行說明。

選擇DeptEmpModule按下右鍵，並選擇Test，並且執行Connect等等。

此時，已經打開ADF BC的Oracle Business Components Browser，可以使你去檢查你所建立的ADF是否正確，可以透過他，進行ADF的正確性檢查。

可以針對左邊的Data Model來點取，可以看到這兩個Table的Master-Detail的狀況，可以點選下一筆或是新增資料的按鈕，也可以進行相關的Data Entry。

當點下一筆後，可以很明顯看到從Oracle DB，將相關的資料顯示在 Browser上.。

進行Application存檔，並在View的Node，按下右鍵並選擇 New：

先行建立其中第一種 User Interface：JClient。

可以在 Client Tier的分類下，選擇 Swing/JClient for ADF的分類，並選擇相關的Item：Form。

此部分會啟動JClient的Create Wizard，可以一步一步建立一個 JClient。

選擇建立一個 Master-Detail 的 JClient，並以 JClient 方式建立。

選擇 Master和 Detail 的相關 Template。

在此，使用預設選項即可。

可以自行研究相關的選項，也會在往後章節提起。

Wizard需要為ADF BC建立一個Client Data Model，可以選擇 New來產生，將會在後面介紹 ADF 相關的 Component。

緊接中，會啟動 Client Data Model建立Wizard，也就是為 ADF BC和 JClient之間建立一個 Client Data Model，換言之，好像建立一座橋樑。

Wizard 會幫你建立一個 Client Data Model，在此會幫你帶出 ADF BC 的相關Information，在此可以利用Default設定值，來建立 Client Data Model。

按下完成，可以成功建立 Client Data Model，並返回 JClient 的 Wizard。

Wizard 會將 Client Data Model 的設定名稱帶回以下此欄，就繼續按下一步。

在此部分，必須選擇哪一個 Panel 要呈現哪一個 View Object，因為 DepartmentView1 是整個 Master-Detail 的 Master，而 EmployeesView3則是整個 Master-Detail 的 Detail ，繼續按下一步。

選取 Master 的相關 Attribute 屬性，我只選了 DepartmentId和DepartmentName這兩個 Attribute。

同理，下一個我選 Detail 的部份，以下面圖為主，繼續按下一步。

進行 File Name的設定，一般來說可以更改名稱，在此就採用 Default，繼續按下一步。

這是 JClient 的完成畫面，可以直接按下完成。

因為 Template 的 JClient 已經建立，你可以先執行【Make】來進行相關的Java檔案的編譯。

將 Java 檔編譯成 Class 檔後，就可以開始準備 Run，你當然也可以直接 Run，因為 JDeveloper 會幫你進行事前編譯。

以下是一個 Master-Detail 的 JClient已經建立，包括兩個 Panel，你可以點選前後來瀏覽資料。

以下是按下一筆後，所呈現的畫面。

關於 JClient 的相關細節，或是相關的設定說明，將會於後面慢慢詳述，本部分僅說明如何快速 Create 一個 JClient。

以下將為大家示範如何建立一個 JSP Web Application 的 Project，可以先按下右鍵來 Create 一個新的 Project。

在此選擇 Web Project，在你所選的 Project 中會因為你所選的屬性而不同，所以我們現在要建立一個 Web Application，我們會建立一個 Web Project。

會先行出現 Create Web Project 的 Wizard，在此先按下一步。

在此部分，將 Project Name 改成 ViewController當作你的 Project Name，且下面的 Directory Name將會一併的進行更改，你只需要改 Project Name。

在此部分，會進行基本的 Web Project 的 Setting，你只需要將【Add JSP Page】

這個選項的框框打勾即可，其餘可以用 Default。 

可以按下完成，完成 Web Project 的設定和建立。

會立即跳出一個新的 JSP 的建立畫面，可以將 File Name輸入 DeptEmp.jsp，其餘部分利用 Default 的選項。

你可以在 Application Navigator 中看到一個 DeptEmp.jsp 的檔案建立。

首先進入 DeptEmp.jsp 的編輯畫面，我先行輸入【瀏覽部門】，這些字在編輯畫面中。

為了使字變大，可以將這些字全選，然後進行變大或變小，如下圖選Heading 3。

可以利用 Oracle JDeveloper 所提供的調色盤來進行相關字的調色，如下圖，我選擇了藍色。

緊接著可以加入 CSS 支援，所以右邊選擇 Component Palette 中的 Component 中選擇，可以選到 CSS 的分類。

備註：如果沒有 Component Palette 的話，可以去上面的功能列中的【View】中去選擇到。

你可以點選 JDevloper 的 CSS 並將其拖曳到主要的編輯區，會將這個 JSP Page 支援 JDevloper 的 CSS，在此不多示範。

右邊的 Component Palette 中有另一個是 Data Control，當你點到 Data Control 後，你可以選到 Oracle ADF 所產生或 Support 的元件，以下將會慢慢說明。

 

你可以將之前的其中一個 View Object：EmployeesView1，選取後，並在 Drag and Drop As 這個選項上選擇【Read-Only Form】，並且拖曳到主要編輯區。

如下圖，你可以將 EmployeesView 的相關資訊拉到DeptEmp.jsp的主要編輯區。

同樣的方式，你可以將下面選項選成 Navigator Buttons，並再將 EmployeesView1拉到剛剛的 Form 的最前面。

上述如下圖所示：

將剛剛拉過去的 Navigator Button 拉到整個 Form 的中央。

接者可以將 DeptEmp.jsp 進行編譯，選擇右鍵， Make。

可以緊接者選擇 Run，Oracle JDeveloper 會自動啟動 Embedded OC4J Server 來執行這支 JSP Page。

以下是 OC4J Server 啟動的 URL，Oracle JDevleoper 將會自動幫你帶一個新的 IE 的視窗來顯示 JSP Page。

以下是已經成功的執行，會將整個 Employees Table 的第一筆資料顯示出來，你可以點選相關的 Navigator Button 去操控資料。

你可以點 Next，將可以瀏覽到下一筆資料，由此可以觀看相關資料，點選 Last 可以看到最後一筆資料。

在本章中，我們學到兩個基本的範例，有關於 Oracle JClient和 Oracle JSP Web Application，可以看到都很快開發 Application，在此不是強調有多快，而是強調這樣可以對於我們的開發提供一定的幫助，在整個範例中，我們都一直基於 Oracle ADF Framework，因為我們有一個 ADF，可以提供我們一種整合式的開發，相信你對 Oracle JDevloper 已經又多認識一點，雖然還有很多都沒有解釋，但是在下面幾章，我將為大家一一解釋 ADF，在最後幾章，將為大家介紹相關的 User Interface，繼續加油喔。