開発されたアプリケーションを使用する環境が多様化されて、各デバイスに最適化されたデザインと機能を提供しなければならない課題が発生しています。要求されるデバイスの数どおりアプリケーションを開発する場合、その費用と時間を従来のシステムで手におえません。nexacro platformでは、このようなニーズによって、1つのソースで様々な状況に合うデザインと機能を実装できるマルチレイアウトマネージャ機能をサポートします。

プロジェクト生成及び修正

プロジェクト生成

‘iPhone’, ‘iPad’, ‘GalaxyTab’の Layout情報を持つプロジェクトを生成する方法を例として説明します。nexacro studioで、File > New > Project メニューを呼出す場合、以下のようにプロジェクトを生成するウィザードが表示され、各ステップことに情報を入力して生成することができます。

New Project Wizard – ステップ1

生成されるプロジェクトの Frame Templateと生成されるパス及びプロジェクト名を入力するステップです。プロジェクト名は、必ず入力する必要がある必須項目であり、生成されるパスに同じプロジェクト名が存在している場合は、生成することができません。

New Project Wizard – ステップ2

TypeDefinition情報を設定するステップです。

New Project Wizard – ステップ3

プロジェクトで使用するスクリーン情報を入力するステップです。I-Phone, I-Pad, GalaxyTabを開発する目的のため、各項目を入力し、該当スクリーンで使用するテーマを指定します。‘Finish’をクリックして‘I-Phone’,‘I-Pad’,‘GalaxyTab’のスクリーン情報を持つプロジェクトを生成します。

スクリーン情報の修正

‘New Project Wizard’で入力したスクリーン情報を修正したり、新たなスクリーン情報を入力できるような Editor機能が追加されました。

‘Project Explorer’で、ADL Itemから提供されるポップアップメニューを使用して新たなスクリーン情報を追加したり、ADL Itemのサブ情報に表示される‘ScreenInfo’などを選択して編集することができます。

フォーム生成

‘I-Phone’, ‘I-Pad’, ‘GalaxyTab’ の3か所で使用するFDLファイルの作成方法を例として説明します。 File > New > Item > Form メニューを選択する場合、以下のように FDLを生成するウィザードが表示され、各ステップことに情報を入力して生成することができます。

New Form Wizard – ステップ1

生成されるフォームのパスと名を入力するステップです。フォーム名は、 必ず入力する必要がある必須項目であり、生成されるパスに同じフォーム名が存在している場合は、生成することができません。

New Form Wizard – ステップ2

生成されるフォームの‘Default’Layout Formのサイズを入力するステップです。初期入力値はオプションで変更することができます。

New Form Wizard – Step3

生成されるフォームでコンポーネントの生成時に適用するPosition単位を指定するステップです。

New Form Wizard – ステップ4

生成されるフォームでデザインする Layout情報を入力するステップです。スクリーンの種類別、横、縦サイズに合わせた Layout情報を設定します。

テンプレートボタンを押すと、下の図のようなScreen Templateダイアログが表示され、必要なタイプの情報を選択し、OKボタンを押すと、選択したScreenの情報がNew Form Wizardに適用されます。

InitValue

MLMを適用したアプリケーションが特定の値を持った状態で起動する場合があります。たとえば、各レイアウトごとに異なるデザインプロパティを持つ場合、レイアウトごとに異なるプロパティ値を指定する必要があります。

ただし、ユーザーが入力したり、変更可能なプロパティは、レイアウトが変わるとしても入力されたり、修正された値が最初に設定した値に変更されてはいけません。これらの項目にプロパティ値を直接指定せずにInitValueを宣言しておけば、最初にアプリケーションを呼び出すときにのみ、該当値を使用し、レイアウトの変更するにかかわらず、修正された値を保持できます。

• nexacro studioのプロパティ･ウィンドウにInit Infoという項目が追加されました。必要なときに下の図のようにInitValueを適用することができます。修正された値は、xfdlファイルに<InitValue>タグに追加されます。

• InitValueで指定された値は、フォームがロードされる前に適用され、プロパティ値は、フォームがロードされながら適用されます。InitValueとプロパティ値を一緒に指定する場合は、プロパティ値がInitValueを上書きします。

• レイアウトによって、InitValueを別々に指定することはできません。

• コンポーネントのプロパティ値がランダムに変更されていない状態(Default Value)であるときは、レイアウトの変更がプロパティ値に影響を与えません。

実行

• Quick Viewは、現在活性化された Layout Tabを基準に表示するようになっています。

• Launch Projectは、Standard Toolbarから選択したスクリーンの情報を基準に 表示するようになっています。

• スクリーンの情報を入力しないか、ADLにないスクリーンの場合、 Active ADLのテーマを適用して表示するようになっています。

XML追加 /変更事項

XADL

プロジェクト作成時またはScreenInfo Editで生成される情報は、XADLファイルに保存されます。

<?xml version="1.0" encoding="utf-8"?>
<ADL version="1.2">
  <TypeDefinition url="default_typedef.xml"/>
  <GlobalVariables url="globalvars.xml"/>
  <Application id="TEST2">
    <Layout>
...
    </Layout>
    <ScreenInfo>
      <Screen name="iphone" type="phone" screenwidth="1280" 
		sizeorientation="landscape" autozoom="false" 
		zoommin="100%" zoommax="" systemos="" 
		systemlocale="" formlayoutwidth="" 
		formlayoutheight="" themeid="default.xtheme"/>
    </ScreenInfo>
  </Application>
</ADL>

XFDL

フォームの Layout情報及びコンポーネントのプロパティ値は、XFDLに保存されます。

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="LayoutForm">
    <Layouts>
      <Layout width="1024" height="768"/>
      <Layout name="iPad_P" screenid="iPad" width="768" height="1024"/>
      <Layout name="iPad_L" screenid="iPad" width="1024" height="768"/>
    </Layouts>
  </Form>
</FDL>

‘Default’タブで、フォームのプロパティが変更された場合は <Form>タグに保存されます。

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="LayoutForm" style="background:red;">
    <Layouts>
      <Layout width="1024" height="768"/>
      <Layout name="iPad_P" screenid="iPad" width="768" height="1024"/>
      <Layout name="iPad_L" screenid="iPad" width="1024" height="768"/>
    </Layouts>
  </Form>
</FDL>

追加された Layoutタブで、フォームのプロパティが変更された場合は、該当する <Layout>タグに保存されます。

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="LayoutForm" style="background:red;">
    <Layouts>
      <Layout width="1024" height="768"/>
      <Layout name="iPad_P" screenid="iPad" width="768" height="1024" 
           style="background:yellow;"/>
      <Layout name="iPad_L" screenid="iPad" width="1024" height="768"/>
    </Layouts>
  </Form>
</FDL>

追加された Layoutタブでコンポーネントのプロパティが変更された場合、該当する<Layout>タグに下位に変更されたプロパティ値のみ保存されます。

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="LayoutForm">
    <Layouts>
      <Layout width="1024" height="768">
        <Button id="Button00" text="Button00" 
             left="20" top="20" width="120" height="50"/>
      </Layout>
      <Layout name="iPad_P" screenid="iPad" width="768" height="1024">
        <Button id="Button00" style="color:blue;"/>
      </Layout>
      <Layout name="iPad_L" screenid="iPad" width="1024" height="768"/>
    </Layouts>
  </Form>
</FDL>

InitValueが追加されると<InitValue>タグとして保存されます。フォームのInitValueを指定する場合には、InitValueタグ自体のプロパティとして処理され、各コンポーネントのInitValueは<InitValue>タグ内に変更されたプロパティ値が処理されます。

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="LayoutForm">
    <Layouts>
    </Layouts>
    <InitValue>
      <Button id="Button00" style="color:blue;"/>
    </InitValue>
  </Form>
</FDL>

サブレイアウトはフォームを構成するXMLと基本構造は同じです。対象コンポーネントの下位にdefaultレイアウトがあり、その下位にサブレイアウトが作成されます。各サブレイアウトで修正されたプロパティは、<Layout>タグの下位に変更されたプロパティ値のみが保存されます。

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="LayoutForm">
    <Layouts>
      <Layout width="1024" height="768">
        <Div id="Div00" taborder="0" left="20" top="20" width="300" height="300">
          <Layouts>
            <Layout width="300" height="300">
              <Button id="Button00" left="17" top="67" width="120" height="50"/>
            </Layout>
            <Layout name="SubLayout00" width="200" height="200">
              <Button id="Button00" style="color:blue;"/>
            </Layout>
          </Layouts>
        </Div>
      </Layout>
      <Layout name="iPad_P" screenid="iPad" width="768" height="1024"/>
      <Layout name="iPad_L" screenid="iPad" width="1024" height="768"/>
    </Layouts>
  </Form>
</FDL>