AppML 案例原型
先用静态 HTML 把界面画出来，再交给 AppML 接数据。
Key Points原型阶段不碰 AppML：先用假数据把表格和表单的样子定下来，再换真数据。
为什么要先做原型
Going straight to AppML forces you to decide fields, layout and validation all at once in the model, and a rename touches model, data and template together. A static prototype is faster to iterate — you only edit HTML.
静态原型
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>客户管理（原型）</title>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem; }
table { border-collapse: collapse; width: 100%; max-width: 720px; }
th, td { border: 1px solid #d1d5db; padding: .45rem .8rem; text-align: left; }
th { background: #f3f4f6; }
.form { margin-top: 2rem; max-width: 420px; }
.form label { display: block; margin-top: .8rem; font-size: .9rem; color: #4b5563; }
.form input, .form select { width: 100%; padding: .4rem; box-sizing: border-box; }
.req { color: #dc2626; }
</style>
</head>
<body>
<h1>客户管理</h1>
<table>
<thead>
<tr><th>编号</th><th>公司</th><th>联系人</th><th>城市</th><th>额度</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>北京云图科技</td><td>张伟</td><td>北京</td><td>50,000</td></tr>
<tr><td>2</td><td>上海海联贸易</td><td>李娜</td><td>上海</td><td>80,000</td></tr>
<tr><td>3</td><td>广州南方物流</td><td>王强</td><td>广州</td><td>35,000</td></tr>
</tbody>
</table>
<div class="form">
<h2>编辑</h2>
<label>公司 <span class="req">*</span></label>
<input value="北京云图科技">
<label>联系人</label>
<input value="张伟">
<label>城市</label>
<select>
<option>北京</option><option>上海</option><option>广州</option>
</select>
<label>额度</label>
<input type="number" value="50000">
</div>
</body>
</html>Output
客户管理
编号 公司 联系人 城市 额度
1 北京云图科技 张伟 北京 50,000
2 上海海联贸易 李娜 上海 80,000
3 广州南方物流 王强 广州 35,000
编辑
公司 * [北京云图科技]
联系人 [张伟]
城市 [北京 v]
额度 [50000]从原型提炼字段
| From prototype | Becomes |
|---|---|
| Column header | label |
| Input type | type |
| Red asterisk | required="true" |
| Number formatting | type="number" |
| First column | primarykey="true" |
Every visual decision in the prototype maps to a model attribute. That is the point of prototyping: decide *what* you want first, then let the model record it.
接上 AppML
HTML
<body>
<h1>客户管理</h1>
<appml-app src="models/customers.xml">
<appml-view view="list"></appml-view>
<appml-view view="form"></appml-view>
</appml-app>
</body>Replace the prototype's <table> and form with two appml-view elements and override styling via CSS. The prototype CSS still applies; only the selectors need adjusting for AppML's generated markup.
AppML's generated DOM has no stable contract and class names can change between versions. Base prototype CSS on semantics (
table th, input) rather than AppML class names so upgrades do not break everything.原型要回答的问题
- 有哪些字段 —— 名字、类型、是否必填
- 怎么排 —— 表格几列、表单几行
- 怎么显示 —— 金额千分位、日期格式、长文本截断
- 怎么操作 —— 行内编辑还是弹窗、批量还是单条
为什么要先做原型
直接上 AppML 时，界面长什么样、有哪些字段、哪些必填，全都要在模型里一次想清楚。改一个字段名就要同时改模型、数据、模板三处，反馈很慢。先用静态 HTML 把样子定下来，改起来只是改 HTML。
静态原型
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>客户管理（原型）</title>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem; }
table { border-collapse: collapse; width: 100%; max-width: 720px; }
th, td { border: 1px solid #d1d5db; padding: .45rem .8rem; text-align: left; }
th { background: #f3f4f6; }
.form { margin-top: 2rem; max-width: 420px; }
.form label { display: block; margin-top: .8rem; font-size: .9rem; color: #4b5563; }
.form input, .form select { width: 100%; padding: .4rem; box-sizing: border-box; }
.req { color: #dc2626; }
</style>
</head>
<body>
<h1>客户管理</h1>
<table>
<thead>
<tr><th>编号</th><th>公司</th><th>联系人</th><th>城市</th><th>额度</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>北京云图科技</td><td>张伟</td><td>北京</td><td>50,000</td></tr>
<tr><td>2</td><td>上海海联贸易</td><td>李娜</td><td>上海</td><td>80,000</td></tr>
<tr><td>3</td><td>广州南方物流</td><td>王强</td><td>广州</td><td>35,000</td></tr>
</tbody>
</table>
<div class="form">
<h2>编辑</h2>
<label>公司 <span class="req">*</span></label>
<input value="北京云图科技">
<label>联系人</label>
<input value="张伟">
<label>城市</label>
<select>
<option>北京</option><option>上海</option><option>广州</option>
</select>
<label>额度</label>
<input type="number" value="50000">
</div>
</body>
</html>Output
客户管理
编号 公司 联系人 城市 额度
1 北京云图科技 张伟 北京 50,000
2 上海海联贸易 李娜 上海 80,000
3 广州南方物流 王强 广州 35,000
编辑
公司 * [北京云图科技]
联系人 [张伟]
城市 [北京 v]
额度 [50000]从原型提炼字段
| 原型里的东西 | 变成模型里的 |
|---|---|
| 列头 | label |
| 控件类型 | type |
| 红色星号 | required="true" |
| 数字格式 | type="number" |
| 第一列 | primarykey="true" |
原型里的每个视觉决策都能映射成模型属性。这也是原型阶段的价值：先把「要什么」想清楚，模型只是把决定记录下来。
接上 AppML
HTML
<body>
<h1>客户管理</h1>
<appml-app src="models/customers.xml">
<appml-view view="list"></appml-view>
<appml-view view="form"></appml-view>
</appml-app>
</body>把原型里的 <table> 和表单块换成两个 appml-view，样式通过外部 CSS 覆盖。原型的 CSS 可以继续用，只是要针对 AppML 生成的标签调选择器。
AppML 生成的 DOM 结构没有稳定契约，升级版本时标签和类名可能变。原型阶段定的 CSS 尽量基于语义（
table th、input）而不是具体的 AppML 类名，升级时不容易全崩。原型要回答的问题
- 有哪些字段 —— 名字、类型、是否必填
- 怎么排 —— 表格几列、表单几行
- 怎么显示 —— 金额千分位、日期格式、长文本截断
- 怎么操作 —— 行内编辑还是弹窗、批量还是单条