Form Layout - songgz/fastui GitHub Wiki

Layout

Define the layout of entity's members in the Tab.

The syntax for members is:

w.tab :m_list, title: '枚举', entity:'Fastui::MList', members:[
      {name:'id', title: 'ID', datatype:'VInteger', readonly: true},
      {name:'title', title: '标题', datatype:'VString'},
      {name:'print_text', title: '打印文本', datatype:'VString'},
      {name:'name', title: '标识', datatype:'VString'}
    ]

You can define several tabs for an entity using the tab name. By default all members are displayed in the order of the model, and one for each line.

Generates a view that looks like this:

Image Alt

You can choose the members to display and its order, with the members array:

w.tab :m_list, title: '枚举', entity:'Fastui::MList', members:[
      {name:'id', title: 'ID', datatype:'VInteger', readonly: true},
      {name:'name', title: '标识', datatype:'VString'},
      {name:'title', title: '标题', datatype:'VString'},
      {name:'print_text', title: '打印文本', datatype:'VString'}      
    ]

In this case name is second place.

Image Alt

Also you can use members for tunning the layout:

w.tab :m_list, title: '枚举', entity:'Fastui::MList', members:[
      {name:'id', title: 'ID', datatype:'VInteger', readonly: true},      
      [{name:'title', title: '标题', datatype:'VString'},
      {name:'print_text', title: '打印文本', datatype:'VString'}],
      {name:'name', title: '标识', datatype:'VString'}
    ]

You can observe that the member names are separated by array, this is used to indicate layout. With array the member is placed in a same line.

Hence the previous view is displayed in this way:

Image Alt

Groups

With groups you can lump a set of related properties and it has visual effect. For defining a group you only need define a member of datatype for 'VGroup'.

Just in this way:

w.tab :m_list, title: '枚举', entity:'Fastui::MList', members:[
      {name:'id', title: 'ID', datatype:'VInteger', readonly: true},
      {title:'描述', datatype:'VGroup', members:[
         {name:'title', title: '标题', datatype:'VString'},
         {name:'print_text', title: '打印文本', datatype:'VString'}
      ]},      
      {name:'name', title: '标识', datatype:'VString'}
    ]

In this case the result is:

Image Alt