在实体设计器的工具条点击"Add"按钮添加实体成员，其中MemberType(成员类型)中的EntityField代表字段，EntityRef代表一对一引用，EntitySet代表一对多引用。
点击实体设计器工具条点击"Options"按钮切换至选项面板，用于设置实体的主键及索引。
上述操作完成后，点击主菜单Models->Save保存当前模型，并且点击Models->Publish发布当前实体模型，发布过程中会在数据库创建对应的数据表。
服务模型以伪代码的形式提供具体的业务逻辑服务，通过主菜单New->Service创建服务模型，并参考下图输入增删改查的方法。同样在操作完成后，点击主菜单Models->Save保存当前模型，并且点击Models->Publish发布当前模型，发布过程中会将伪代码转换为真正的运行时代码并编译为服务插件备用。
四、创建视图模型
视图模型有两种形式：一种是拖拽方式生成json配置并渲染的界面，适用于快速配置如大屏页面及简单的增删改查页面；另一种是代码的形式描述用户界面，百分百灵活且经过编译后运行性能高。这里只介绍代码形式，通过主菜单New->View新建视图模型，新建对话框的类型选择"Code"方式，参考以下代码分别建立一个表单视图及一个列表视图，并且保存发布。
CustomerForm视图using sys.Entities;namespace sys.Views;public sealed class CustomerForm : View{ public static Widget Preview() => new CustomerForm( new Customer { Code = "", Name = "", Phone = "", Address = "" } ); public CustomerForm(Customer obj) { Child = new Column { Spacing = 5, Children = { new Text("客户信息") { FontSize = 28 }, new Form { LabelWidth = 60, Children = { new ("编号:", new TextInput(obj.Observe(c => c.Code))), new ("名称:", new TextInput(obj.Observe(c => c.Name))), new ("电话:", new TextInput(obj.Observe(c => c.Phone))), new ("地址:", new TextInput(obj.Observe(c => c.Address))), } }, new Container { Padding = EdgeInsets.Only(70, 0, 5, 0), Child = new Button("保存", MaterialIcons.Save) { Width = float.MaxValue, OnTap = _ => Save(obj), } }, } }; } private async void Save(Customer obj) { try { await sys.Services.CustomerService.Save(obj); obj.AcceptChanges(); Notification.Success("保存成功!"); } catch (Exception ex) { Notification.Error($"保存失败: {ex.Message}"); } }}CustomerList视图
using sys.Entities;namespace sys.Views;public sealed class CustomerList : View{ public CustomerList() { Padding = EdgeInsets.All(10); Child = new Column { Spacing = 10, Children = { new Card { Padding = EdgeInsets.All(5), Child = BuildHeader() }, new Card { Child = BuildBody() } } }; } private readonly State<string> _searchKey = ""; private readonly DataGridController<Customer> _dgController = new(); private Widget BuildHeader() => new Row { Height = 30, Spacing = 10, Children = { new Expanded(), new TextInput(_searchKey) { Width = 100, Suffix = new Icon(MaterialIcons.Search) }, new Button("查询") { OnTap = _ => Fetch() }, new ButtonGroup { Children = { new Button("新增") { OnTap = _ => OnCreate() }, new Button("编辑") { OnTap = _ => OnEdit() }, new Button("删除") { OnTap = _ => OnDelete() } } } } }; private Widget BuildBody() => new Expanded(new DataGrid<Customer>(_dgController) { Columns = { new DataGridTextColumn<Customer>("编号", t => t.Code) { Width = 60 }, new DataGridTextColumn<Customer>("名称", t => t.Name), new DataGridGroupColumn<Customer>("联系方式") { Children = { new DataGridTextColumn<Customer>("电话", t => t.Phone), new DataGridTextColumn<Customer>("地址", t => t.Address), } } } }); protected override void OnMounted() => Fetch(); private async void Fetch() { try { var list = await sys.Services.CustomerService.Fetch(_searchKey.Value); _dgController.DataSource = list; _dgController.TrySelectFirstRow(); } catch (Exception ex) { Notification.Error($"查询客户列表失败: {ex.Message}"); } } private void OnCreate() => Dialog.Show("新建客户", d => new CustomerForm(new Customer { Code = "", Name = "", Phone = "", Address = "" } )); private void OnEdit() { var obj = _dgController.CurrentRow; if (obj == null) return; Dialog.Show("编辑客户", d => new CustomerForm(obj)); } private async void OnDelete() { var obj = _dgController.CurrentRow; if (obj == null) return; try { await sys.Services.CustomerService.Delete(obj); Fetch(); } catch (Exception ex) { Notification.Error($"删除客户失败: {ex.Message}"); } }}
Tip1: 可以点击视图模型编辑器上方工具条的"Preview"按钮实时预览效果，也可以点击左侧工具栏的大纲按钮查看预览视图的组件树及其布局，如下图所示：
Tip2: 另外可以在代码编辑器内光标位置右键菜单选择"Goto Definition"跳转至相应的模型定义内，如下动图所示光标定位实体属性然后跳转至实体设计器内：
五、设置路由并生成应用以上步骤完成后，我们需要修改HomePage视图注册客户列表视图的路由，先选择HomePage视图，然后主菜单Models->Checkout签出待修改，添加如下图高亮行所示代码，修改HomePage视图后同样需要保存发布，最后需要点击主菜单Apps->BuildApp生成Web应用。
这样我们就可以在浏览器地址栏直接输入localhost:5000/#/customers访问客户列表视图，如下图所示：
六、小结
作者个人能力实在有限，目前还有很多Bug待修复，还有工作流引擎及报表引擎待从旧版移植过来，如有问题请邮件联系或Github Issue，欢迎感兴趣的小伙伴们加入共同完善，当然更欢迎赞助项目或给作者介绍工作（目前找工作中）。
