使用openid4java實作Open ID RP (2)

本文接續上一篇，主要在實作程式碼的部份。

首先使用NetBeans建立一個新的Apache Wicket專案，並命名為myrp。依據原文所寫，作者將Web Application中負責和Open ID OP進行通訊的相關功能，放在model的套件中，其中分為兩個項目：

使用openid4java實作Open ID RP (1)

本文的原始出處是IBM技術文章！

為了要實作OpenID Provider的Java Web Application，我認為要先了解如何在Java Web Application中先實作Open ID RP，以了解Open ID的運作方式。

在OpenID的官網中，針對Java有提供了許多函式庫可以讓我們來使用，在原始文件中是使用openid4java的函式庫，目前可以取得的版本為0.9.6。

另外，為了要試驗Apache Wicket此framework的功能，我也改用Apache Wicket 1.5.3的版本，它和原始文章所使用的版本（1.3.3），在實作上有一些差異！

還有，本文主要說明概念的部份，實作則在下一篇。

Accordions

Accordions的功能和TabPane或是CardPane類似，都可以將用不到的元件先隱藏起來，只顯示目前要使用的元件。不過，Accordions是以類似手風琴的折疊方式，只顯示出標題（header）以供使用者點選。

本文的範例來源一樣是官網，它呈現了結帳的3個步驟。
要注意的是，預設狀況之下，Accordions能允許使用者任意選擇不同的panel，但是此範例則限制使用者只能按『下一步』的按鈕，以瀏覽下一個panel。

FlowPane

FlowPane是讓元件以水平線進行排列的容器，並且具有自動換行的功能。它可以讓元件靠左、靠右或置中對齊，也可以讓元件以垂直對齊基準線（baseline）進行排列。

本範例仍然取自官網，在範例中使用了BaselineDecorator（org.apache.pivot.wtk.effects）來顯示基準線，如果使用者未點選『對齊基準線』的選項，則會顯示出藍線，反之則顯示紅線。

Separators

Separators的作用如同網頁中的水平線一般，本範例一樣來看官網。

使用時很簡單，只要在ui.bxml中指定heading即可。

Text - TextArea

TextArea是被用來放置多行文字的WTK元件，它通常會使用ScrollPane包裏起來，以提供捲軸。本範例來自官網。

Text - Suggestion Popups

本範例（同樣來自官網）大致上和上一篇相同，主要的差別在於使用org.apache.pivot.wtk.SuggestionPopup類別來顯示自動完成（auto-complete）的功能。

text - TextInput

Pivot提供了兩種輸入文字的元件，TextInput→單行未格式化的文字，它也可以使用密碼的方式來呈現文字；另一個元件則是TextArea，可允許輸入多行且格式化的文字。本文先介紹TextInput元件。

本範例是由官網取得。它的功能是當使用輸入的字元足以判斷出唯一的值時，系統會自動幫使用者填入剩餘的字元（顯示台中市各區名稱）。

Repeatable List Buttons

Pivot支援repeatable list button，意思是使用者可以簡單的重複執行選定的項目。它適合用來執行像橡皮圖章（rubber stamp）的功能。

本範例由官網所取得，它展示的就是使用List Button來自動設定已選定之CheckBox元件的文字顏色。

List - ListButton

ListButton在畫面上會呈現下拉式的選單，本範例是使用者點選ListButton後，出現下拉式選單，當使用者選擇文字後，會在右方顯示圖片。本範例由官網取得。

List - ListView

Pivot的WTK元件中，List屬於可條列許多項目，並且允許使用者進行選擇的元件，它通常會搭配ScrollPane進行捲動顯示的效果。List包含了ListView及ListButton. ListView，ListButton則是按下後會跳出popup選單，讓使用者進行選擇。本文將先介紹ListView元件。

基本上ListView並不具備捲動功能，因此必須將之附屬於ScrollPane元件之中，ScorllPane會自動依據內容的多寡而調整元件的高度，UI設計人員無須介入。更詳細的ScrollPane介紹留待以後說明。本範例由官網取得。

LinkButton

本範例將結合CardPane以及Link Button達成圖片瀏覽的功能。CardPane就如同一疊卡片一般，同一時間只能顯示一張卡片，詳細留待往後說明。本範例由官網取得。

在此ui.bxml中，使用了另一種事件處理機制，用<buttonPressListeners></buttonPressListeners>，也就是將要進行的事件處理撰寫在<buttonPressListeners></buttonPressListeners>區塊中。在範例中所寫的處理機制是要設定選擇了在CardPane中的哪一個card。

CheckBox

本文將介紹CheckBox元件，當使用者按了CheckBox之後，會顯示出圖片。本範例由官網取得。

在ui.bxml中要特別一提的是，使用ButtonPressListener.buttonPressed的方式來定義事件處理機制，在bxml中是以java script來撰寫事件處理（當然，在Java原始碼中進行事件處理也可以）。同時，本範例是以TablePane來排列元件，詳細TablePane說明留待以後說明。

Radio Button

本範例和Push Button範例相同，都必須建立客制化的Window類別，並實作Bindable介面，在本文中它被稱為RBWindows，同時它也放置在myex的套件中（myex#RBWindows）。

在這個範例（由官網取得）中，我們針對3個RadioButton建立了一個群組（ButtonGroup）稱為numbers。同時在它們下方有一個PushButton，按下它會以Alert顯示出哪一個RadioButton是被選取的。

Toggle Button

Toggle Button顧名思義，表示它可以是某項行為的開關！當按下之後，按鈕本身會呈現凹陷的狀態，若再按一次則會回復成原狀！

在以下的範例（由官網取得）中，使用了org.apache.pivot.wtk.content.ButtonData物件來描述按鈕的文字及圖示（icon）。

PushButton、事件處理與中文

本篇文章將介紹如何使用BXML建立Push Button並且實作它的事件處理機制，同時也會對中文字的顯示有不同的處理方式。

本專案（由官網取得）可分成二個部份來說明，首先ui.bxml會利用到自訂的命名空間（namespace）-> myex，也因此會在專案中新增一個package名稱為myex，在myex中會建立一個類別PushButtons，它是自訂的Window類別，同時也繼承了Bindable介面，專門用來和使用者介面中的Push Button進行對應，包含了事件處理。

第二部份則是會將ui.bxml放在根目錄底下，它會引用到myex套件中所定義的自訂Window類別PushButtons。另外，程式的進入點仍是NewClass.java，此類別會讀取ui.bxml，並且經由序列化的處理將Window對應到PushButtons。

Lables及ImageView

在pivot專案（由官網取得）中撰寫如下bxml檔案，用來設計UI。

<!--ui.bxml-->
<Window title="Labels" maximized="true"
    xmlns:bxml="http://pivot.apache.org/bxml"
    xmlns="org.apache.pivot.wtk">
    <BoxPane styles="{padding:4, verticalAlignment:'center'}">
        <ImageView image="/clock.png"/>
        <Label text="現在的時間是?" styles="{font:'PMingLiU bold 24'}"/>
    </BoxPane>
</Window>

Apache Pivot 平台概論

Apache Pivot提供了許多基礎類別，以建立複雜及優美的使用者介面。主要分成四大類別：

1. Core：非UI的共同類別。
   
2. WTK：使用者介面（user interface development）相關類別，包括：windows dialogs buttons lists textinput layout drag and drop等等。
   
3. Web：和遠端服務（RestFul web service soap json）進行連線相關類別。
   
4. Charts：可以在Pivot應用程式中建立互動式圖表功能的類別。
   

使用BXML設定UI

Apache Pivot的另一個特色是可以使用BXML(bean xml)來設定使用者介面（UI）。
本文將介紹簡易的BXML使用法。在java原始碼中，必須使用BXMLSerializer來將bxml中的UI設定轉化為java中的UI物件，並且讀入bxml後必須再將物件進行強迫轉型，將物件轉為org.apache.pivot.wtk.Window物件。

Apache Pivot初探(2) - 使用JNLP

本篇文章將延續上一篇，相同的Pivot程式碼，並且使用JNLP來開啟專案。

Apache Pivot初探

Apache Pivot是用來建立IIA(Installable Internet Application)應用程式的java函式庫，它最大的特點是元件優美而且執行流暢，而且可以使用Java Web Start的方式進行啟動（也可以當成一般的桌面AP來啟動，或是使用Applet的方式內嵌入網頁中）。
Apache Pivot的位階等同於Java FX、Microsoft Silverlight或是Adobe Flash。本文將介紹三種不同啟動Pivot程式的方法。