Tiny Interface Editor

The interface Editor, also known as UIML Designer, is the development tool for the layout of the editing interface of the tiny framework design, which is as follows:

Operation Flow

Interface design is a multi-role, multi-step development process:

• Interface Component Designer: Defines the metadata files for interface components and layouts (*.componenttype and *.layouttype).
• Interface developers: Import related components, layout metadata to business engineering, and use the interface Editor to generate layout files (*.UIML).
• General Developer: Call the Code generation tool to generate the development code for the corresponding platform based on the layout file.

The interface Editor is WYSIWYG and supports a variety of common operations.

The interface Editor currently supports the following 6 layouts, which can be nested infinitely between layouts:

Layout Chinese name	Layout English Name	Description
Border layout	BorderLayout	The border layout contains the following five areas: top, bottom, left, right, middle. Up to                                 &NBS P       &NBSP                         &N Bsp                       can only contain one component and is identified by the corresponding constants:      &N Bsp                                 &NBSP ; TOP, BOTTOM, left, right, CENTER.                          ,         &NB Sp      
card layout                                 &NBSP	cardlayout                  &NBSP ;               the	card layout can contain multiple components, but only one component at a time. It allows                                         &NBSP                         &N Bsp                       The user sequentially browses these components or displays the specified components.                          ,         &NB Sp
multiple column layouts                                 &NBSP	columnslayout                  &N Bsp              	Multi-column layouts the number of components per row is fixed, and the components that are exceeded are automatically assigned to the next column.                          ,         &NB Sp     &NBSP                           &N Bsp                     containers each row is divided into equal-sized rectangles, and one component is placed in a rectangle.                          ,         &NB Sp
table layout                                 &NBSP	gridlayout                  &NBSP ;               the	table layout lays out the container's components in a rectangular grid. Container is divided into size phase                                 &N Bsp       &NBSP                         &N Bsp              ,        , etc., place a component in a rectangle. Can be understood as a table in HTML.                          ,         &NB Sp
Paging layout                                 &NBSP,	tablayout                                  the	page layout can contain multiple pagination, one component per page. User can                                       &NBSP                         & nbsp                       To switch components by manipulating pagination.                          ,         &NB Sp
Coordinate layout	Xylayout	The coordinate layout shows the component by locating the coordinates of the component within the container with X, Y.

The plugin effect of the interface Editor is as follows:

qq%e6%88%aa%e5%9b%be20141223164105.jpg (20.13 KB, download number: 0)

Download attachments

2015-5-27 13:41 Upload

The interface Editor is similar to the process editor, which is also a sub-panel, property bar, and hierarchy relationship.

Introduction

• The panel provides a graphical control for the user to choose, mainly divided into three areas: layout area, the user operation is WYSIWYG, very intuitive; the component list on the right shows a list of layouts and components that users can use. The user can now extend the component.
• The property bar provides user-configurable layout, component-defined properties. Users can see the "Properties" view of Eclipse when they open it.
• For more complex, hierarchical nesting of a lot of layout, the hierarchical relationship is not intuitive; The interface Editor provides a hierarchical relationship that shows the relationship of layouts and components in a tree, and the user opens the Outline view of Eclipse.

Example diagram for the property bar:

qq%e6%88%aa%e5%9b%be20141224100152.jpg (16.88 KB, download number: 0)

Download attachments

2015-5-27 13:41 Upload

Example diagram of a hierarchical relationship:

qq%e6%88%aa%e5%9b%be20141224100343.jpg (10.42 KB, download number: 0)

Download attachments

2015-5-27 13:41 Upload

Tiny Interface Editor