目的	所要時間	アプリケーション
このチュートリアルでは、Mobile Application Frameworkでカスタムのスプリングボードを開発する方法について説明します。このチュートリアルで作成するアプリケーションの完成版を確認するには、「Download」ボタンをクリックして完成版アプリケーションのzipファイルをダウンロードし、JDeveloperのmyworkフォルダに解凍してください。	2時間

この最初の項では、チュートリアル用のスタータ・アプリケーションを起動して機能を調査します。

1. 任意のディレクトリにspringboard.zipアプリケーションをダウンロードして解凍し、抽出します。

2. JDeveloper 12.1.3を開きます。

3. アプリケーション・ナビゲータで「Open Application」をクリックします。

   

4. ダウンロードしたファイルを解凍したディレクトリにナビゲートし、「Springboard.jws」ファイルを選択します。「OK」をクリックします。

   

5. ViewController→Application Sources→META-INFの順にノードを開き、「maf-feature.xml」ファイルをダブルクリックしてエディタで開き、アプリケーションの機能を調査します。



6. 4つの機能、Emps、Help、GraphおよびPixがあることを確認します。各機能のIdをクリックし、スプリングボードのイメージを表示します。イメージの名前と機能の名前が一致していることに注意してください。これは、後で機能の名前とイメージを表示するときに重要になります。



7. このアプリケーションをデプロイして実行した場合、次の図のようなデフォルト・スプリングボードが表示されます。
   
   これでも問題はありませんが、欠点がいくつかあります。
   1ページには表示しきれないほど機能がある場合はどうすればよいでしょうか。表示されていない機能にアクセスするには、"More"ボタンを使用することが必要になります。
   イメージを追加するなど、ヘッダーに変化を持たせる必要がある場合はどうすればよいでしょうか。あいにく、このデフォルトのページやレイアウトは変更できません。



8. 求めているのはもっと柔軟性のあるもので、下の図のような、機能の行が複数あり、1行に複数の機能が表示され、ヘッダーにロゴが付いているスプリングボードです。

この項では、スプリングボードに新しい機能を作成し、その内容を保持するためのAMXページを追加します。このAMXページはこの後、起動時にアプリケーションで使用されるカスタム・スプリングボードとして追加できます。

1. maf-feature.xmlファイルで緑色のプラス記号「」をクリックし、新しい機能を追加します。機能の名前をSpringboardに設定し、デフォルト値はそのままにして「OK」をクリックします。



2. Springboard機能が反転表示されている状態で「Content」タブをクリックし、TypeプロパティがMAF AMXに設定されていることを確認します。



3. Contentの下、Fileプロパティの横にある緑色のプラス記号「」をクリックし、「MAF AMX Page...」を選択します。





4. ページの名前をSpringboard.amxに設定し、「Header」ファセットのみ選択します。



5. エディタにページが表示されます。headerファセット内のoutputTextを探し、値をMy Springboardに設定します。
   すべての作業内容を保存します。



6. 次は、アプリケーションをロードしたときにこのスプリングボード・ページがアプリケーションのスプリングボードとして使用されるように指定します。
   
   Application Resourcesウィンドウを探し、Descriptors→ADF META-INFの順にノードを開き、「maf-application.xml」ファイルをダブルクリックします。



7. Navigation領域で「Custom」ボタンをクリックし、Featureプロパティをmycomp.Springboardに設定します。



8. プロパティ値が赤い枠で囲まれます。これは、機能をスプリングボードのソースとスプリングボード内の項目の両方にすることができないためです。
   「Feature References」タブをクリックし、mycomp.Springboard機能のShow on Navigation BarプロパティとShow on Springboardプロパティをfalseに設定します。
   
   機能が表示される順序は、ここにリストした順番で決まります。Pix機能をGraphの上に移動します。



9. クリックしてApplicationタブに戻り、赤い枠がなくなっていることを確認します。
   すべての作業内容を保存します。

この項では、スプリングボード・ページを改良し、maf-feature.xmlの各機能が名前とイメージの両方で表示されるようにします。

1. まだ開いていない場合は、アプリケーション・ナビゲータで「Springboard.amx」をダブルクリックして、エディタで開きます。すでに開いている場合は、Springboard.amxタブをクリックできます。



2. Componentsウィンドウで、Layoutノードを展開します。「Table Layout」コンポーネントをStructureウィンドウにドラッグし、Panel Pageにドロップします。このコンポーネントを使用すると、機能を表形式で表示できます。



3. 次に、レコードをページに表示できるようにするために、すべての機能レコードを読み取るコンポーネントを追加します。
   
   Data Controlsウィンドウを開き、ApplicationFeaturesノードを開きます。「features」コレクションをStructureウィンドウにドラッグし、Table Layoutコンポーネント上にドロップします。



4. ポップアップ・ペインでid、name、およびimageを除くすべてのイテレータ・コンテンツを削除します。「OK」をクリックします。



必要なのはこれらの項目のバインディングのみであり、表示は独自に作成します。StructureペインでIteratorを展開し、3つのPanel LabelコンポーネントとMessageコンポーネントを削除します。



スプリングボード・ページで「Bindings」タブをクリックすると、featuresコレクションがバインディングとして追加されていることを確認できます。featuresバインディングを選択して鉛筆アイコンをクリックすると、イテレータの3つの属性のバインディングを確認できます。これらのバインディングにアクセスするのは、コンテンツをスプリングボード・ページに表示するときです。

バインディングを調査したら、エディタ・ペインを閉じます。




5. Springboardの「Source」タブをクリックして作業を続けます。
   ComponentウィンドウからRow Layoutコンポーネントを探し、Iterator内に2つ追加します。
   各Row Layout内にCell Formatを追加します。



6. 次は、機能をコールするためのリンクを追加します。
   Data ControlウィンドウからStructureウィンドウ内の1つ目のCell Formatに「gotoFeature()」操作をドラッグし、MAF Linkとしてドロップします。



7. Edit Action Bindingペインでは何も変更する必要がないため、「OK」をクリックします。



「Link」を選択し、Textプロパティの値を削除します。
すべての作業内容を保存します。


8. ComponentウィンドウでGeneral Controlsノードを開き、「Image」コンポーネントをStructureウィンドウにドラッグしてLinkコンポーネント上にドロップします。
   イテレータ#{row.image}から機能名が使用されるようにSourceプロパティを設定します。






9. ComponentウィンドウでOperationsノードを開き、「Set Property Listener」コンポーネントをStructureウィンドウにドラッグしてLinkコンポーネント上にドロップします。
   次のプロパティを設定します。
   From = #{row.id}
   To = #{pageFlowScope.FeatureId}
   Type = action





10. 次は、機能名を表示します。
    ComponentウィンドウでText and Selectionノードを開き、「Output Text」コンポーネントをStructureウィンドウにドラッグして2つ目のCell Formatコンポーネント上にドロップします。
    Valueプロパティを#{row.name}に設定し、機能名が表示されるようにします。





11. このアプリケーションをデプロイして実行したとすると、スプリングボードは次の図のようになります。イメージの下に名前がどのように表示されているか確認します。
    次は、もっと見栄えをよくします。



 

これで、このスプリングボード・ページが使用される状態になりました。名前とスプリングボード・イメージを含め、すべての機能が表示されます。今度は、UIにいくつかの変更を加え、使いやすさと柔軟性を高めます。

1. すべてのイメージを指定サイズでスプリングボード・ページに表示します。
   「Image」コンポーネントを選択し、Inline Styleクラスをwidth:65px;height:65pxに設定します。



2. Structureウィンドウで、2つ目のTable LayoutをPanel Pageに追加します。次に、その中にRow Layoutを追加し、さらにCell Formatを追加し、最後にPanel Group Layoutを追加します。これらのコンポーネントを使用すると、イメージの表示が一段とそろいます。



3. 先ほど追加した「Table Layout」コンポーネントを選択し、StyleノードでInline Styleプロパティをwidth:100%に設定します。



4. 先ほど追加した「Cell Format」コンポーネントを選択し、StyleノードでInline Styleプロパティをwidth:100%に設定します。



5. 先ほど追加した「Panel Group Layout」コンポーネントを選択し、CommonノードでLayoutプロパティをwrapに設定します。



6. 両方の「Cell Format」コンポーネントを選択し、Halignプロパティをcenterに、Valignプロパティをmiddleに設定します。



7. 次に、Structureウィンドウで、Iteratorを含む「Table Layout」をドラッグし、先ほど作成したPanel Group Layoutにドロップします。
   これで、レイアウトを展開すると次の図のように表示されます。



8. 次は、ページに表示される機能の間隔を少し広げるために、Iterator内にPanel Group Layoutを追加します。Layoutプロパティをwrapに、Halignプロパティをcenterに、Valignをmiddleに設定します。
   






9. 新しいPanel Group Layout内にTable Layoutコンポーネントをもう1つ追加します。



次に、2つのRow LayoutコンポーネントをTable Layout内に移動します。
すべての作業内容を保存します。



10. 次は、機能の間隔を少し広げるために、先ほど移動したTable Layoutの前後にSpacerを追加します。SpacerコンポーネントはComponentウィンドウのLayoutノードにあります。
    HeightプロパティとWidthプロパティをそれぞれ25と100に設定します。

    
    
    

    すべての作業内容を保存します。

11. 最後に、Iteratorが（Table Layoutと同じレベルで）Panel Group Layoutの子になるように移動します。
    
    続いて、Table Layoutを削除します。



最終的なStructureウィンドウは、次の図のようになります。




12. ツールバーの「Save All」をクリックして、作業内容を保存します。

13. ヘッダー・ファセットにTable Layout、Row Layout、Cell Formatをそれぞれ下の図のように追加します。



14. 「Table Layout」コンポーネントを選択し、Halignプロパティをcenterに設定します。



15. Output Text項目を2つ目のCell Formatに移動します。



16. 1つ目のCell Formatに「Image」をドラッグし、別のロゴ（/images/HR_Demo_logo.png）を使用するようにSourceプロパティを設定します。





17. すべての作業内容を保存します。

この項では、Deployment Profileを作成してアプリケーションをエミュレータにデプロイします。この例ではAndroidエミュレータを使用していますが、iOSシミュレータにデプロイすることもできます。

1. Applicationメニューから「Deploy」→「New Deployment Profile」を選択します。
   Create Deployment Profileで「MAF Android」プロファイル・タイプを選択し、名前をSpringboardに変更します。
   次に、「OK」を2回クリックしてプロセスグを完了します。



2. エミュレータが実行されていない場合は起動します。
   次に、JDeveloperに戻って、Applicationメニューから「Deploy」→「Springboard...」の順に選択します。
   デプロイが完了するまでDeploymentウィンドウを監視します。



3. エミュレータでSpringboardアプリケーションを探し、クリックします。



4. アプリケーションが起動したら、カスタム・スプリングボードが表示されます。
   次の2つのことを確認してください。
   1：イメージが同じサイズになっている
   2：各機能アイコンの間隔が少し広くなり、折り返して2行になっている



5. お疲れ様でした。これでチュートリアルは完了です。