<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>OGNL / 参数绑定实验室 - Struts2</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 1000px; margin: 40px auto; padding: 20px; background:#f7f8fa; }
        h1 { color:#8e44ad; }
        .card { background:#fff; border-radius:12px; padding:20px; margin:18px 0; box-shadow:0 4px 14px rgba(0,0,0,.06); }
        .lab { background:#fff7e6; border-left:4px solid #fa8c16; padding:15px; border-radius:8px; margin:20px 0; }
        .form-row { display:flex; gap:12px; flex-wrap:wrap; margin:10px 0; }
        input, select { padding:10px; min-width:180px; }
        button { background:#8e44ad; color:#fff; border:none; padding:10px 18px; border-radius:6px; cursor:pointer; }
        table { width:100%; border-collapse:collapse; margin-top:12px; }
        th, td { border:1px solid #ddd; padding:10px; text-align:left; }
        th { background:#8e44ad; color:white; }
        code { background:#f0f0f0; padding:2px 6px; border-radius:4px; }
    </style>
</head>
<body>
    <h1>🧪 OGNL / 参数绑定实验室</h1>

    <div class="lab">
        <strong>实验任务卡</strong>
        <ul>
            <li>输入关键字和最小年龄，观察 Struts2 如何自动绑定请求参数到 Action 字段</li>
            <li>注意 <code>keyword</code>、<code>minAge</code>、<code>user.name</code> 这类命名会如何映射</li>
            <li>观察页面里 <code>&lt;s:property&gt;</code>、<code>&lt;s:iterator&gt;</code> 如何读取 Action 中的数据</li>
        </ul>
    </div>

    <div class="card">
        <h3>参数过滤实验</h3>
        <s:form action="ognl_bind" method="post">
            <div class="form-row">
                <s:textfield name="keyword" label="关键字" placeholder="例如：张 / example"/>
                <s:textfield name="minAge" label="最小年龄" placeholder="例如：20"/>
            </div>
            <div class="form-row">
                <s:textfield name="user.name" label="嵌套对象 user.name" placeholder="例如：测试用户"/>
                <s:checkboxlist name="tags" label="兴趣标签" list="{'MVC','OGNL','Interceptor','JSP'}"/>
            </div>
            <button type="submit">执行绑定与过滤</button>
        </s:form>
    </div>

    <div class="card">
        <h3>绑定结果观察</h3>
        <p>keyword = <code><s:property value="keyword" default="(空)"/></code></p>
        <p>minAge = <code><s:property value="minAge" default="(空)"/></code></p>
        <p>user.name = <code><s:property value="user.name" default="(空)"/></code></p>
        <p>tags = <code><s:property value="tags" default="[]"/></code></p>
    </div>

    <div class="card">
        <h3>过滤后的用户列表</h3>
        <table>
            <tr><th>姓名</th><th>邮箱</th><th>年龄</th></tr>
            <s:iterator value="filteredUsers" var="u">
                <tr>
                    <td><s:property value="#u.name"/></td>
                    <td><s:property value="#u.email"/></td>
                    <td><s:property value="#u.age"/></td>
                </tr>
            </s:iterator>
        </table>
    </div>

    <div class="card">
        <h3>学习点</h3>
        <ul>
            <li><code>keyword</code> → 直接绑定到 Action 同名字段</li>
            <li><code>user.name</code> → 绑定到嵌套对象属性</li>
            <li><code>tags</code> → 多选值绑定到 <code>List&lt;String&gt;</code></li>
            <li><code>&lt;s:iterator&gt;</code> 会遍历 Action 暴露出来的集合</li>
        </ul>
    </div>

    <p><a href="learn">← 返回学习中心</a></p>
</body>
</html>
