The existing media like Phone, GalaxyS, etc. have so different expression areas that the design work and source management must be matched with each medium. Accordingly, the Multi Layout Manager function is added and it makes the design expressed per a variety of situations.
The Structure of MLM
Select the Layout where ADL/FDL generated at UX-Studio is matched with XPLATFORM at Device and output it. XPLATFORM outputs ADL/FDL which are generated at UX-Studio by selecting the Layout which is fitted to Device.
Description about the terms used below:
Default Layout
It is a basic layout. It doesn’t have the information about Layout and has the same function as the existing V9.
Additional Layout
All of the other layouts except Default Layout
Sub Layout
The layout for the components which have the sub-contents like Div,PopupDiv, TabPage, etc.
Target Component
The Component which executes Sub Layout Editor
Project Generation and its Correction
Project Generation
With an example, the way to generate the Project which has the information about Layout of ‘iPhone’, ‘iPad’, ‘GalaxyTab’ is described. In case of calling File > New > Project menu at UX-Studio, Wizard which generates Project is indicated as below and by inputting the information per each stage, it can be generated.
New Project Wizard – Step1
It is the step to input the Frame Template of Project which will be generated, the generating path and the name of Project. The Project name is the compulsory item that must be input and when there is the same Project name in the generating path, it can’t be generated.
New Project Wizard – Step2
It is the step to set the information about Character Set and about TypeDefinition.
New Project Wizard – Step3
It is the step to input the screen information which will be used at Project. Since it has the purpose to develop I-Phone, I-Pad and GalaxyTab, each item is input and the Theme that will be used at the applicable Screen is designated. By clicking ‘Finish’, the Project which has the information about ‘iPhone’, ‘iPad’ and ‘GalaxyTab’ is generated.
Name : the Screen name
Theme : The Theme that will be used at Screen
System Type
Win32 : General Desktop
Wince : Window Mobile Phone
Android : Adroid Mobile Phone No Animation object
OS: Operation System used at the applicable device.
Device : the device kind
Description: Description about Screen (Description doesn’t influence to the operation of the function.)
Correction of the Screen Information
The Editor function is added and so the Screen information input at ‘New Project Wizard’ can be corrected or the new information can be input.
By using the Popup menu provided at ADL Item in ‘Project Explorer’, the new Screen information can be added or by selecting ‘ScreenInfo’ which is indicated as the sub-information of ADL Item, edition can be made.
‘ScreenInfo Editor’ provides the edit function with the same method as that of the existing ‘Widget Editor’ and ‘Variable Editor.
Registration of the Layout Template
Layout Template which is provided basically can be used. Also, the user can register the Layout information which is used often as the Template.
Layout Template Dialog is composed with the Templates provided basically, which are Device and Graphic Array Template and with three Tabs of User Template that the user registers directly and uses:
User Template: the Layout Template List that the user registers directly and uses.
Device: the main mobile device that is used at present
Graphic Array: the Graphic Array which is used as a resolution
Form Generation
With an example, the way to make the FDL file used at three of iPhone’, ‘iPad’ and ‘GalaxyTab’ is described. In case of selecting the File > New > Item > Form menu, Wizard which generates FLD is indicated as below and can generate by inputting information per each step.
New Form Wizard – Step1
It is the step to input the path of generating Form and the name. The name of Form is the compulsory item and when there is the same Form name at the generating path, it can’t be generated.
New Form Wizard – Step2
It is the step to designate Inheritance of Form.
When ‘UserForm’ is registered at TypeDefinition, the input control is activated.
New Form Wizard – Step3
It is the step to input the size of ‘Default’ Layout Form which will be generated. The initial input value can be changed at Option.
New Form Wizard – Step4
It is the step to input the Layout information to design at the generating Form. Set the Layout information matched with the Screen type and with the horizontal and vertical size.
When the Template button is pushed, Template Dialog comes up as below. When the wanted Layout and Layout Group are selected, push the OK button. Then the selected Layout information is added to New Form Wizard.
Layout
In order the Layouts information which is input at ‘New Form Wizard’ to be displayed with a form of Tab, the Form Design function is changed.
Layout Tab
The Layout which is used at the present Form is displayed with Tab. The location of Tab can be changed at Option by the user.
By transiting Tab, the screen can be changed with the Layout input at ‘New Form Wizard’ and the correction function for Layout is provided with the POPUP menu.
Add Layout: shows Dialog which generates the new Layout at the end of ‘Layout Tab’.
Copy & Add Layout : copy the currently selected Layout and 'Layouts' items will be added to the end of.
Delete Layout: deletes Layout which is selected at present from ‘Layouts’ (‘Default’ can’t be deleted.).
Layout List: shows Dialog which can correct the Layout information that is used at Form at present.
At ‘Default’ tap, all the functions are provided but at the added ‘Layout’ tap, some of Design functions are limited.
Design function | Default | Additional Layout |
|---|---|---|
Component Create, Delete | O | X |
Component Copy, Cut, Paste, Paste Special | O | X |
TabOrder Change | O | X |
Correction of The Size of Form | O | X |
Indication of the Size of Form with Guide Line | X | O |
Indication of Tracker of Form | O | X |
Correction of the Sub-Component like Div, Tab, Popup, etc. | O | X |
Addition, Deletion, and Selection of Invisible Object | O | X |
Correction of the Layout Information
The function which can correct the Layout information that is used at the present Form is added with the POPUP menu.
Name: the name of Layout
‘Default’ can’t be used as the Name of Layout without distinction of small letters or large letters.
The duplicated Layout Name can’t be used in the same Form.
Screen: the name of Screen that Layout will use
Width: the width of Layout
Height: the height of Layout
In case that the attribute value of Component is changed at the ‘Default’ tap, the message window is popped up to check if the changed contents are applied to other Layouts.
The above message window for checking is popped up only when all of the following conditions are satisfied:
condition | |
|---|---|
1 | in case that the properties which can be changed at the other Layouts exist at the Source |
2 | In case that the value for ‘Layouts Edit’ Option becomes ‘Ask whenever a property changed’ |
After being corrected at the ‘Default’ tap, check ‘Don’t ask me again’ at the message window where other Layout is applied or not. Select ‘Yes’ or ‘No’. Then, the value for Option is changed and after that, the message window is not popped up.
button | ‘Layouts Edit’ Option |
|---|---|
Yes | Change property Default Layout with other layouts |
No | Changed property is only Default Layout applied |
Properties Window
When the Form Design information is shown to Properties Windows, the way to display is different by the Layout tap.
At the Default Layout tap, when the information about ‘position’ among Form Properties is corrected and Multi Layout is used, its ‘height’ and ‘width’ is set with fitting to the present size. At the Default Layout tap, ‘height’ and ‘width’ are hidden properties. In case that the sized is changed by using Tracker, all of the information about ‘position’, height’ and ‘width’ is changed.
At the added Layout, among Form Properties, the information about ‘position’ can’t be changed but the sized can be changed by changing ‘height’ and ‘width’ which is the ‘Layout Information’ information. In case that the sized is changed by using Tracker, the information about ‘position’ is not saved and only the information about ‘height’ and ‘width’ is saved.
Properties shown at ‘Layout Information’ are the same as those at ‘Layout List Dialog’.
Property at the added Layout tap which has the different information from ‘Default’ tap of Form Design is intended to display with bold and blue color. Therefore, the information which indicates at Properties Window has the following meaning by its boldness and color :
color | boldness | information |
|---|---|---|
black | X | In case of having the default which applies Theme and css |
black | O | In case of having the different value which is different from the default that applies Theme and css by correcting at ‘Default’ tap |
blue | O | At the added Layout tap, the corrected value has the different value from the information about ‘Default’ tap. |
In case that at the added Layout tap of Form Design, Property are displayed, the following Property is handled to be disable in order not to be corrected.
Property name | description |
|---|---|
id | ID of all the components can’t be corrected at the added Layout tap. |
taborder | Taborder of all the components can’t be corrected at the added Layout tap. |
inheritanceid | Among Form Property, inheritanceid can’t be corrected. |
position | Among Form Property, position can’t be corrected. |
Sub Layout
Div, PopupDiv and TabPage which have Contents inside of Component have Multi Layout like Form and it is called as Sub Layout. Sub Layout is not matched with Form Layout by 1:1 but composes an individual Multi Layout. In case of Tab, it can compose different Multi Layout per TabPage.
The Component which has Sub Layouts displays automatically the optimized Sub Layout that is fitted for the size of the applicable Component among Sub Layouts.
When the size of Target Component is changed, automatically Sub Layout is changed and searches for the optimized Sub Layout that is fitted for the new size.
Edition at Default Layout
The sub-Contents of Component which has Sub Layout are possible for direct editing at Default Layout of Form (the same as the existing edition method).
The contents which are edited directly are saved at Sub Layout which the applicable Component displays.
But at the added Layout (for example: iPhoneW Layout as above) not Default Layout, Contents can’t be edited directly. Accordingly, sub-Contents can’t be selected nor corrected and when sub-Contents are selected, the top Component is selected. In order to edit Contents at the added Layout, it must be done with Sub Layout Editor.
Edition at Sub Layout
In order to edit Contents at the added Layout, editing must be done with Sub Layout Editor. Component that has Sub Layout provides two Popup Menus like Sub Layout Edit and Set Sub Layout.
When the Sub Layout Edit menu is selected, Sub Layout can be edited.
When the Set Sub Layout menu is selected, it is transited to the size of Sub Layout that selects the size of Component. The Set Sub Layout menu appears only when the Sub Layout except default Sub Layout exists.
When the Sub Layout Edit menu is selected, Sub Layout Editor comes up as follows:
Component which has Link Url can’t execute Sub Layout Editor.
By double clicking it can be executed as Contents Editor can.
When the initial Sub Layout Editor is executed, the Default Size of the present Target Component becomes the size of default Sub Layout.
The other components except the applicable Component and sub-Component can’t select nor edit.
The Components hidden by Scroll can edit.
The Ruler which is fitted to the size of the applicable Component is provided.
Sub Layout Editor is limited for its function to generate Component at Layout except Default as Form Layout is limited.
Popup Menu just only for Sub Layout Editor is provided.
Sub Layout List: shows Dialog which can correct the Sub Layout information that is used at the present Component
Apply Size & End Edit: It is the size of the sub Layout that is editing now and it sets the target component and by binding undo buffer that has been worked up to now at Sub Layout Editor to one, add it to the design undo list.
When Component is selected, Popup Menu is provided a little differently.
The Size of Sub Layout can be changed but the position of Target Component isn’t changed.
At each Sub Layout, the Style of Target Component and some properties can be set.
The changed contents of default Layout are saved at Tag like <Div>, etc.
The changed contents of the other sub-Sub Layouts are saved at the applicable <Layout>.
Operation related concerns about the other Sub Layout Editors
The Component that has the sub-Contents in each Sub Layout is possible to edit in default Layout as Form Design is.
Another Sub Layout Editor can be executed in Sub Layout Editor.
Contents Editor can be executed.
In case of operating the other Component, it is operated as the same as Form Design is.
Sub Layout Undo
Undo at Sub Layout Editor is managed separately from that at Form Design
Undo before the execution of Sub Layout Eidtor can’t be used in Sub Layout Editor.
Undo cumulated in Sub Layout Editor disappears upon Editor is finished or added to Form Design Undo List altogether. (The edited contents in Sub Layout Editor are recognized as one Undo.)
Step
Step means the function that can develop the page composed with several steps at one Form.
When the stepcount Property value for Form is adjusted, the step is displayed as in the following figure:
description | |
|---|---|
1 | Displays the Step that is edited now. The Step that is edited now is judged by the position of the mouse pointer. |
2 | Guide line between Step and Step |
There are many steps but the substantive Size of Form is not changed.
Only one Step is shown on execution.
The background of Form is applied per each Step.
Positionstep Property
To Component positionstep Property is added. positionstep Property represents the belonging Step of the applicable Component.
The Position of Component is applied to be positionstep + Position.
The Position of Component의 Position is set based on the designated positionstep.
button | positionstep + Position |
|---|---|
Button00 | positionstep="0" position="absolute 50 100 150 150" |
Button01 | positionstep ="1" position="absolute 50 100 150 150" |
Button03 | positionstep ="2" position="absolute 50 100 150 150" |
Button03 |
|
When Component gets out of all the Step areas, it is treated to positionstep 0.
In case that positionstep is -1, it is shown to all the Steps.
N/A
-1 positionstep Component can select and edit at all the Step areas.
In case that -1 positionstep Component is not the Step which is editing now, it is shown as a litter more transparent than real Component.
-1 positionstep Component can select Component which is shown at the applicable Step among all the Steps and edit.
Component Movement and Position Transition
The movement between Steps of Component can input Property directly or move directly at the Design screen.
Input Property– maintain input value, no adjustment for positionstep and Position (can get out of the present step)
Movement of Design – Readjustment by transiting the Position information that moves directly from the Design screen to be fitted to the present Step.
(before movement)
(in case of the movement by inputting Position Property directly)
(in case that Component moves directly from the Design screen.)
InitValue
Sometimes you must start when the application with MLM applied has a certain value. For example, When each layout has a different design property, you must specify a different property value for each layout.
However, the entered or modified values of the properties that users can enter or change should not be changed to the initial setting value even When the layout is changed. When you declare InitValuw without directly specifying the property value for such an item, the value will be used only when the application is called for the first time, and the modified value can be maintained regardless of layout change.
Init Info was added in the UXStudio property window. InitValue can be applied when necessary as shown in the following figure. The modified value will be added to the xfdl file as an <InitValue> tag.
The value specified as InitValue will be applied before the form is loaded, and the property value will be applied as the form is loading. When InitValue and the property value are specified at the same time, the property value will overwrite InitValue.
Depending on the layout, InitValue may not be designated separately.
Under a situation where a components’ property values are not revised (Default Value), a change in layout does not affect the values of properties.
Execution
Quick View is meant to show Layout Tab which is activated at present based on Layout Tab.
Launch Project is meant to be shown based on the Screen information which is selected at Standard Toolbar.
In case that the Screen information is not input or Screen doesn’t have ADL, it is meant to be shown by adjusting Theme of Active ADL.
XML Additions/Changes
XPRJ
The information generated by ‘Layout Template’ is meant to be saved at the XPRJ file.
XADL
The information generated at Project or by ScreenInfo Edit is saved at the XADL file.
XFDL
The Layout information of Form and the properties of Component are saved at XFDL.
In case that the property of Form at the Default’ tab is changed, it is saved at the <Form> tag.
In case that the property of Form at the added Layout tab is changed, it is saved at the applicable <Layout> tag.
In case that the property of Component at the added Layout tab is changed, only the changed value for the property is saved at the applicable <Layout> sub-tag.
When InitValue is added, it will be saved as an <InitValue> tag. When you specify InitValue for the Form, it will be processed as the property of the InitValue tag, and the InitValue of each component will be the changed property value in the <InitValue> tag.
Sub Layout
Basically, it has the same structure as the XML structure of Form. Below Target Component, there is default Layout and underneath that, there is the Tag of Sub Layout.
The contents that are corrected at each Sub Layout are saved at the applicable Sub Layout Tag with a form of Multi Layout Manger.