As more and more user environments become available for applications, an issue has emerged of how to provide ideal design and functionality that is optimized for each and every device. If we have to develop applications for every device, the cost and time required will be enormous. To address this problem, Nexacro Platform supports the multi-layout manager (MLM) functionality that allows a variety of designs and functionalities depending on the situation with a single source.

Creating and Revising Projects

Creating Projects

In this section, a project with layout information of ‘iPhone’, ‘iPad’ and ‘GalaxyTab’ is created. When you use the [File > New > Project] menu on Nexacro Studio, the New Project Wizard which creates projects is displayed. You can create forms by entering the information in the following steps.

New Project Wizard – Step1: Set the frame template for a project to be created. You need to enter the project name. However if there is the same name in the path to be created, you cannot use that name.

New Project Wizard – Step2: Set the TypeDefinition information.

New Project Wizard – Step3: Enter the screen information which will be used for the project. Input the information for each item (iphone, ipad and Galaxy Tab) and designate a theme to be used on the screen. Click Finish to create the project containing the information about ‘iPhone’, ‘iPad’ and ‘GalaxyTab’.

New Project Wizard 3단계
Screen Properties	Description
name	Screen name (unique identifier)
type	type of a device - Many options including 'desktop', 'phone', and 'tablet'
screenwidth	Screen width (valid range: 0~65536)
sizeorientation	Specifies the direction of processing the screenwidth property - Selects either 'landscape' or 'portrait' - Default 'landscape' (when the type property includes 'desktop' or 'tablet') - Default 'portrait' (when the type property is 'phone')
autozoom	Specifies whether to use the auto-zoom function - Selects either true or false (default is false) - If type property is 'desktop,' autozoom is not applicable.
zoommin	Specifies the minimum value for autozoom - Unlimited if the value is a negative number. Default is -1.
zoommax	Specifies the maximum value for autozoom - Unlimited if the value is a negative number. Default is -1.
systemos	Information on an OS for the screen - Many options including 'windows', 'android', and 'ios' - The default values includes all the OS property values.
systemlocale	Information on locales used in the screen - Many options including 'af_ZA' and "zh_TW"' - The default values includes all the locale property values.
formlayoutwidth	Specifies the width of a form layout used in the screen
formlayoutheight	Specifies the height of a form layout used in the screen

Revising the Screen Information

You can revise the screen information you defined with the New Project Wizard or add new information by using the Project Explorer > ADL context menu. You can also edit ScreenInfo displayed as sub-information of ADL.

Creating Forms

In this section you will create a form to be used for ‘iPhone’, ‘iPad’ and ‘GalaxyTab’. When you use the [File > New > Item > Form] menu, the New Form Wizard which creates forms is executed. You can create forms by entering the information in steps.

New Form Wizard – Step1: Enter a path and name of a new project. You need to set the name of the form. However, if there is the same name in the path to be created, you cannot use the name.

New Form Wizard – Step2: Specify the size of the default layout of the new form. The initial values can be revised in the properties window.

New Form Wizard – Step3: Set up the units for measuring the position when generating a component in a form.

New Form Wizard – Step4: Enter the layout information for the form. Set the layout information for each screen, such as width and height.

When you click Template button, the Screen Template dialog will appear as shown in the picture below. Select the type of information you want, and click OK button. Then, the selected screen information will be reflected in New Form Wizard.

For detailed options related to the created form, please refer to the Nexacro Studio guide.

InitValue

Applications created using MLM may have to start with specific initial values. For example, if different layouts have different design properties, you need to designate different property values for each layout.

However, the properties you can specify or revise will not be entered even though you change the layout, or the revised values will not be changed to the initial values. In this case, you can declare InitValue instead of specifying property values for each item so that the relevant values can be used at the time of calling the application, and the values can be maintained regardless of layout change.

“Init Info” is added in the properties window on Nexacro Studio. You can apply InitValue if needed as seen in the picture below. The revised values will be added as a tag <InitValue> to the XFDL file.

The values designed as InitValue are be applied before loading the form. And the property values are applied while loading the form. When designating InitValue and property values at the same time, the InitValue will be overwritten by properties values.
InitValue cannot be designated separately for each layout.
In case a component's property value is not revised (Default Value), a change in layout does not affect the property value.

Execution

Quick View shows the active layout tab.
Launch Project shows the screen information selected in the standard toolbar.
In case the screen information is not entered or the screen does not have ADL, the active ADL's theme will be applied.

Adding/Revising XML

XADL

The information generated when creating projects or editing ScreenInfo is saved in the XADL file.

<?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

Form layout information and component property values are saved in the XFDL file.

<?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>

In case the form property on the Default tab is changed, it is saved in the <Form> tag.

<?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>

In case the form property on the added layout tab is changed, it is saved in the relevant <Layout> tag.

<?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>

In case the component property on the added layout tab is changed, only the changed property value is saved under the relevant <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>

Once InitValue is added, it is saved as the <InitValue> tag. When designating InitValue for a form, it is considered as the InitValue tag's property. For each component’s InitValue, the changed values will be within the <InitValue> tag.

<?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>

The basic structure of the sub-layout is the same with XML structure composing forms. The target component has the default layout below, and the sub-layout is created under the default layout. For the properties changed in each sub-layout, only property values revised below the <layout> tag will be saved.

<?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>