简化用户体验设计

3 简化用户体验设计#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/simplifying-user-experience-design.html

Oracle APEX 让开发者可以用声明式方式设计应用体验。你可以从向导或空白页开始，在页面设计器（Page Designer）中配置页面元素，随时运行页面查看最终用户看到的效果。保存后的页面定义会由 APEX 运行时直接解释执行，因此没有额外的代码生成、编译或部署等待。

本章的主线是“快速生成页面，再持续调整”。APEX 把应用创建、页面创建、页面设计器、动态操作、通用主题、报表列、表单项、LOV、响应式布局和 PWA 安装体验串在一起，让开发者在不编写底层前端代码的情况下完成专业界面。

学习时建议准备一个个人 APEX 工作区和一张小型示例表。每读完一个小节，都在 App Builder 中找到对应入口，做一次最小复现：创建、运行、观察、返回页面设计器调整，再刷新运行页面验证。

3.1 创建新应用#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/starting-new-application.html

App Builder 是工作区内应用开发的起点。首页可以用列表视图查看应用详情，也可以通过 Search 旁边的 View Icons 按钮切换为图标视图。要新建应用，点击顶部的 Create。

最简单的路径是输入应用名称并点击 Create Application。每个 APEX 应用都有数字 ID；你可以手工指定，也可以接受 App Builder 建议的可用 ID。需要更完整的起步方式时，可以选择 Use Create App Wizard、Create App Using Generative AI、Create App from a File，或 Create Fusion Integration。

只输入名称创建的应用默认包含 Home、Global Page 和 Login Page。Home 是运行应用时的初始页面；Global Page 上的组件默认会出现在其他页面；Login Page 负责用户登录。若只希望某个全局组件在部分页面显示，应给该组件添加条件（Condition）。

应用中的每个页面都有页面编号和页面别名（alias）。编号用于唯一标识页面，别名会出现在浏览器地址栏中。页面列表同样可以在列表视图和图标视图之间切换；页面很多时会出现分页链接。

3.2 快速创建页面#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/creating-pages-quickly.html

进入已有应用后，Create Page 向导会显示常用页面类型图库。选择页面类型后，向导可让你使用示例数据或选择实际数据源，也可同时创建面包屑和应用菜单项。

报表类页面还能在向导中顺带创建关联表单页，用于新增、编辑或删除行。生成出的页面不是一次性模板，而是可继续在 Page Designer 中细调的运行页面。

常见做法是先用向导生成可工作的最小版本，再回到 Page Designer 调整区域、列、页面项、按钮、导航和动态行为。

3.3 使用页面设计器#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/working-page-designer.html

Page Designer 是创建和增强页面的主要工具。它包含 Rendering、Layout、Dynamic Actions、Processing 等选项卡，并通过 Property Editor 配置当前选中的组件。

组件面板、页面搜索和帮助面板提供即时辅助：你可以在树中选择区域、页面项、按钮、动态操作、处理或分支，Property Editor 会同步显示相关属性；点击属性名称时，Help 选项卡会显示上下文帮助。

理解 Page Designer 的关键，是把“组件树中的定义”“布局面板中的位置”和“属性编辑器中的配置”关联起来。后续小节分别展开这些区域。

3.4 运行并迭代编辑页面#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/running-and-iteratively-editing-pages.html

页面可以随时在浏览器中运行，运行页通常会在 App Builder 旁边的新标签页打开。这样可以直接观察最终用户体验，包括不同设备或窗口宽度下的显示效果。

示例中的 Patients 页面包含 Smart Filters、Search Results 卡片区域和 Map 区域。筛选 Status 为 Approved、Initial Procedure 为 Lasik Laser Vision Correction 后，筛选条件会以 chip 形式显示，卡片区域只剩匹配患者；但地图仍显示全部患者，这暴露出需要进一步配置交互。

从 App Builder 运行页面时，底部会显示开发者工具栏。点击 Page 8 可回到对应页面设计器；点击 Quick Edit 后再点运行页上的区域或页面项，可以直接跳到该组件的定义位置。

3.5 为页面增加交互#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/adding-interactivity-pages.html

动态操作（Dynamic Actions）用于响应用户在页面上的事件。按钮和菜单点击可使用 Triggered Actions；页面项值变化、列表选择、模态对话框关闭、区域刷新等其他事件，则通过 Dynamic Actions 事件处理程序处理。

APEX 提供大量原生动作，例如显示、隐藏、启用、禁用、设置值、清空值、刷新区域、提交页面、执行客户端 JavaScript、执行服务器端代码等。涉及服务器请求的动作可用 Items to Submit 把页面项或报表列的最新值送到服务器；Execute Server-side Code 若修改页面项值，则用 Items to Return 把新值带回浏览器。

在 Patients 搜索页中，卡片区域刷新后应刷新 Map 区域。做法是选中 Search Results 区域，创建 Dynamic Action，事件选择 Page Change [Cards]，将动作类型设为 Refresh，目标区域设为 Map。

若希望地图自动缩放并居中到筛选后的患者点位，可再为 Map 区域创建 After Refresh 动态操作，动作类型使用导入的 Center & Zoom Map Around Points 插件。运行时，卡片和地图会共同反映当前筛选结果。

3.6 Universal Theme 设计系统#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/universal-theme-design-system.html

APEX 应用默认使用 Universal Theme。它由 HTML 模板、CSS 规则、图标、图片和 JavaScript 库组成，但开发者通常通过声明式模板、模板选项和主题样式使用它。

Universal Theme 的价值在于一致性：桌面和移动端都能保持专业、响应式、可访问的界面，不要求业务开发者先成为前端框架专家。

本节后续内容会介绍 Theme Styles、Universal Theme Reference App，以及在需要自定义数据呈现时 HTML 与 CSS 各自承担的角色。

3.7 报表列与表单页面项#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/report-columns-and-form-items.html

多数区域类型都有数据源，APEX 会根据数据源自动推断列。Page Designer 让你在组件树中直接配置报表区域、网格区域的列，以及表单区域中的页面项。

当业务场景要求更新数据模型时，页面可以跟随数据源变化。SQL Query 数据源会在 SELECT 列表变化后自动发现新列；表或其他数据源通常通过 Synchronize Columns 或 Synchronize Page Items 手工同步。

不需要展示的列可以删除，也可以注释（Comment Out）。表单页面项则可以在保持 Source 中 Form Region 关系不变的前提下，移动到页面上不同区域中，从而实现更灵活的表单布局。

3.8 级联与列表驱动页面项#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/cascading-list-driven-items.html

应用经常需要用户从有效选项列表中选择一个或多个值。例如，先选择部门，再选择该部门下的员工。APEX 提供多种列表驱动页面项，并简化了级联列表的配置。

列表项的核心概念是显示值（Display Value）和返回值（Return Value）。显示值面向用户，返回值进入页面项会话状态并参与查询、DML 或业务逻辑。

当一个列表的可选值依赖另一个页面项时，可以在子项 LOV 查询中引用父项，并在 Cascading List of Values 中配置 Parent Item(s)。父项变化后，子项会自动清空并刷新选项。

3.9 适配任意屏幕尺寸的简单布局#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/simple-layout-any-screen-size.html

APEX 的页面布局不是以像素级绝对定位为中心，而是把区域和页面项安排到灵活的行列网格中。运行时，页面元素会根据设备屏幕宽度自动调整位置和尺寸。

开发者通过运行页面直接测试布局。改变浏览器宽度或在不同设备上打开页面，可以马上看到布局如何响应，再回到 Page Designer 调整 Start New Row、Column、Column Span、模板和嵌套区域。

本节后续内容围绕三个能力展开：12 列网格、Universal Theme 模板与选项、嵌套区域。

3.10 像原生应用一样启动#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/launching-native-apps.html

启用应用的 Progressive Web App 设置中的 Installable 开关后，用户可以把 APEX 应用安装到手机或桌面设备。应用图标会出现在 iPhone Home Screen、Mac Dock 或 Windows Taskbar，点击后以接近原生应用的全屏体验启动。

PWA 与传统原生应用的一个重要差异是：APEX 应用始终由服务器提供最新版本。修复和功能上线后，用户打开的就是最新页面定义。

可以访问 Universal Theme Reference App（https://oracleapex.com/ut）体验安装流程，也可以查看 APEX Progressive Web App reference app（https://oracleapex.com/pwa）和 APEX To Go 示例应用（https://apex.oracle.com/go/apextogo）。APEX 应用还可使用移动设备定位、前置摄像头，以及针对搜索、数字、邮箱、电话、URL 优化的移动键盘。

3.3.1 Page Designer 的关键区域#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/key-page-designer-areas.html

配置页面时最常用的区域包括 Property Editor，以及 Rendering、Layout、Dynamic Actions、Processing、Page Search 选项卡。无论在哪个选项卡中选择一个或多个组件，Property Editor 都会显示对应设置。

Help 选项卡的工作方向相反：先在 Property Editor 中点击某个属性名称，Help 面板会显示该属性的上下文说明、可用选项和示例。

因此，Page Designer 的学习顺序可以是：先会在 Rendering 树中定位组件，再看 Layout 中的位置，再用 Property Editor 改属性，最后用 Page Search 和 Help 提高定位与理解效率。

3.3.2 基于模板插槽的页面布局#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/page-layout-based-template-slots.html

页面模板定义页面有哪些具名插槽（slots），这些插槽决定区域、页面项、按钮等视觉组件可以放到哪里。Page Designer 会显示模板提供的插槽，帮助你理解各区域的相对位置。

在 Layout 面板的上下文菜单中，可以使用 Hide Empty Slots 切换是否显示空插槽。调布局时显示空插槽有助于理解模板结构；内容稳定后隐藏空插槽能让视图更清爽。

3.3.3 在 Page Designer 中添加区域#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/adding-regions-page-designer.html

区域面板列出可拖放到页面插槽的区域类型。拖入后，用 Property Editor 为区域命名，并设置影响外观和行为的属性。如果区域默认使用内置示例数据，应将 Location 改为 Local Database 或其他实际数据源。

区域既可以从 palette 拖到插槽，也可以在 Rendering 树的上下文菜单中选择 Create Region，再设置 Region Type 和目标 Slot。

Patients 搜索页示例中，可以先把 Cards 区域拖到页面 BODY，命名为 Search Results，并绑定 patients 表；再把 Smart Filters 区域放到 BEFORE NAVIGATION BAR，命名为 Search，用它过滤卡片区域；最后把 Map 区域放到 BODY 中卡片区域旁边，显示筛选后的患者位置。

完成后，左侧组件树显示页面组件层级，中间 Layout 面板显示区域相对位置：Search 位于导航栏顶部，breadcrumb 位于对应栏位，Search Results Cards 和 Map 并排位于页面主体。

3.3.4 在 Page Designer 中添加页面项#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/adding-items-page-designer.html

Page Items 面板提供页面控件，例如 Select List。继续 Patients 搜索页示例，添加区域后，可以为 Search Results 卡片区域增加排序选择项，让用户决定结果排序。

做法是将 Select List 拖到 Search Results 区域的 SORT ORDER 插槽，命名为 P8_ORDER_BY，配置静态选项，然后在 Search Results 区域中把该 Select List 设置为 Order By item，对应不同 ORDER BY 子句。

Smart Filters 区域开始时通常只有一个文本搜索筛选器。可以在组件树中选中 Filters 节点，通过 Create Filter 新增 City、State、Postal Code、Insurance Provider、Status、Initial Procedure 等筛选维度。

3.6.1 主题样式#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/theme-styles.html

Universal Theme 包含多种预定义样式。Redwood Light 与 Fusion Applications 风格一致，使用自然感色彩且视觉间距更舒展；Vita 系列更紧凑，并提供不同实色方案；Iris 融合两者的一些常用特点。

这些样式都考虑了可访问性。开发者工具栏中的 Theme Roller 可以即时切换主题样式，观察页面效果，也可以调整主题元素颜色，并以自定义主题样式名称保存。

3.6.2 Universal Theme Reference App#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/universal-theme-reference-app.html

建议收藏 Universal Theme Reference App：oracleapex.com/ut。Components 区域列出 APEX 原生视觉组件，点击组件可查看实时示例和添加步骤。Icons 区域可浏览或搜索预定义图标，帮助用户理解按钮、菜单和状态含义。

Reference 下的各小节记录 UI 开发中常用的 CSS 变量、声明式类、模板指令语法、按钮生成器等。先在参考应用里试模板选项，再回到 Page Designer 配置，可以减少试错。

Calendar 参考页会给出组件所需数据形状，例如事件标签、开始时间、结束时间，以及可用于 tooltip 或自定义事件文本的其他列。参考应用还可切换书写方向和主题样式，例如查看 Vita - Dark 下的 Map 区域。

3.6.3 HTML 与 CSS 在数据格式化中的作用#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/role-html-and-css-play-format-data.html

Universal Theme 能让你在不了解底层 Web 技术的情况下得到好结果，但理解 HTML 和 CSS 的基本角色，有助于进行数据格式化定制。HTML 用标签表达结构和语义，例如 ul 表示无序列表，li 表示列表项，strong 表示强调。

标签可以带属性，例如 class="is-selected" 用于标记某个列表项被选中。CSS 则根据标签、类名或其他选择器定义页面元素的显示方式。

下面的示例把四个部门标记为列表，并用 class 标出 RESEARCH 被选中。浏览器收到 HTML 后，再应用 CSS，把选中项显示为浅蓝背景和深色文字，并把 strong 内容放大。

<ul>
  <li><strong>ACCOUNTING</strong> -> NEW YORK</li>
  <li><strong>OPERATIONS</strong> -> BOSTON</li>
  <li class="is-selected"><strong>RESEARCH</strong> -> DALLAS</li>
  <li><strong>SALES</strong> -> CHICAGO</li>
</ul>

/* Color selected list items differently */
li.is-selected {
  background-color: lightblue;
  color: midnightblue;
}

/* Increase font size of strong elements in list items by 20% */
li strong {
  font-size: 120%;
}

3.7.1 配置报表区域列#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/configuring-report-region-columns.html

如果区域允许配置数据源列，这些列会显示在 Page Designer 组件树中。例如 Employees List 区域下可以看到各列。

选中 HIREDATE 这样的列后，Property Editor 会显示它的 Heading、Format Mask、对齐、链接、可见性等设置。修改属性后，Page Designer 会在属性名称左侧显示竖条，表示该属性有未保存更改；保存页面后标记消失。

3.7.2 同步列变化#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/synchronizing-column-changes.html

当区域数据源需要新增列或调整列集合时，页面可以适配。若区域基于 SQL Query，编辑 SELECT 语句后，Page Designer 会自动把检测到的新列加入列列表。

若区域基于表或其他数据源，则由开发者决定何时同步。开发中如果在 Object Browser 给 EMP 表新增列，可以在区域上下文菜单中选择 Synchronize Columns。APEX 会把新增列追加到列表末尾，之后可拖放调整列顺序。

3.7.3 删除或注释列#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/deleting-or-commenting-columns.html

表中经常包含当前区域不需要显示的列。可以把列从区域列列表中删除，也可以 Comment Out。被注释列会在组件树中以删除线显示。

仍在快速迭代数据模型时，Comment Out 更稳妥：后续执行 Synchronize Columns 时，该列会继续保持注释状态。若此前是 Delete，下一次同步可能会把它重新带回。被注释列的上下文菜单会出现 Uncomment，可随时恢复显示。

3.7.4 表单区域中的页面项#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/page-items-form-region.html

页面包含 Form 区域时，Page Designer 会为数据源中的每个列在 Region Body 插槽中检测并显示一个页面项。页面项命名通常以 P 加页面号作为前缀，例如 P4_HIREDATE。

选中页面项后，Property Editor 显示 Label、Format Mask 等设置。数据模型变化时，表单区域与报表区域类似：SQL Query 数据源会自动为新增 SELECT 列添加页面项；表或其他数据源可通过 Synchronize Page Items 纳入新增列。

表单区域页面项同样支持 Comment Out、Uncomment 和 Delete。

3.7.5 灵活的表单页面项布局#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/flexible-form-page-item-layout.html

报表区域通常控制列的布局，而表单区域页面项可以更灵活地分布在页面上。默认情况下，表单页面项位于表单区域的 Region Body 插槽，但它们可以移动到页面的其他区域。

关键是区分两个属性：Source 中的 Form Region 决定页面项属于哪个表单数据源；Layout 中的 Region 决定页面项显示在哪个视觉区域。表单查询主键行或保存修改时，会处理所有 Source 指向该 Form Region 的页面项。

示例中，Employee 表单的数据项被分布到 Identity 静态内容区域，以及 Organization、Role & Pay 两个 Tabs 区域中。运行时，Employee Id 和 Name 并排显示在上方，其他字段按选项卡组织。

3.8.1 可用的列表驱动页面项#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/list-driven-items-available.html

APEX 提供十类列表驱动页面项。Select List、Select One、Radio Group 都用于单选；其中 Select One 支持输入搜索、图标和更可控的下拉项呈现。

Checkbox Group、Combobox、Popup LOV 可支持单选或多选。Combobox 允许用户输入列表之外的值，并支持图标和样式控制；Popup LOV 可显示额外列并跨列搜索，单选模式下还可把额外列值返回到页面项或网格列。

Select Many、List Manager、Shuttle 只支持多选。List Manager 通过搜索弹窗和 Add 按钮添加选项；Select Many 支持输入过滤和选项样式控制；Shuttle 提供移动和重排选中项的控件。

Text Field with Autocomplete 是自由文本输入，同时可从预定义列表自动完成。Select List、Radio Group、Popup LOV 还可包含代表 null 的选项，并给它自定义显示文本，例如在可选查询条件中用 All 表示不筛选部门。

3.8.2 定义值列表#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/defining-list-values.html

创建列表驱动页面项时，可以在页面项本地定义有效选项，也可以引用共享组件中的 List of Values（LOV）。首次使用某个选项集合时，本地定义最快；需要复用时，可把本地 LOV 转换为共享 LOV。

每个选项都包含 Display Value 和 Return Value。Display Value 是用户界面显示的文本；Return Value 是用户选择后写入页面项的值。单选页面项的值就是所选项返回值；多选页面项的值是返回值按分隔符拼接的字符串，默认分隔符为冒号。

例如部门 LOV 可定义为 ACCOUNTING -> 10、RESEARCH -> 20、SALES -> 30、OPERATIONS -> 40。单选项 P5_SELECTED_DEPARTMENT 选择 SALES 后值为 30；多选项 P5_SELECTED_DEPARTMENTS 选择 ACCOUNTING 和 RESEARCH 后值为 10:20。

Display Value    Return Value
ACCOUNTING       10
RESEARCH         20
SALES            30
OPERATIONS       40

3.8.3 配置级联列表#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/configuring-cascading-lists.html

当一个页面项的值需要影响另一个列表页面项的可选值时，配置级联列表。示例中，Only Show Employees Select Many 的员工选项取决于左侧 Department Select List 的当前值。

配置只需两步：首先在子页面项 LOV 查询中用绑定变量引用父页面项；然后在子页面项 P2_ONLY_EMPLOYEES 的 Cascading List of Values 区域中，把 Parent Item(s) 设置为 P2_DEPARTMENT。

设置 Parent Item(s) 后，父项变化会自动清空子项当前值并刷新可选列表。如果 LOV 查询还依赖其他页面项，应把它们列入 Items to Submit；这些值会随刷新请求提交，但只有 Parent Item(s) 的变化会触发自动清空与刷新。

若列表项需要图标或额外列，应定义共享 LOV。相同思路也适用于多级级联和可编辑 Interactive Grid 中的列级级联，网格列通过 Parent Column(s) 指定父列。

select ename as d, empno as r
  from emp
 where deptno = :P2_DEPARTMENT
 order by ename

select ename as d,
       empno as r,
       case job
         when 'PRESIDENT' then 'fa-badgerine'
         when 'ANALYST'   then 'fa-line-chart'
         when 'CLERK'     then 'fa-user-headset'
         when 'SALESMAN'  then 'fa-badge-dollar'
         when 'MANAGER'   then 'fa-user'
       end as icon
  from emp
 where deptno = :P2_DEPARTMENT
 order by ename

3.9.1 灵活的行列网格#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/flexible-grid-columns-and-rows.html

APEX 页面布局遵循三条简单规则：每个区域宽度被分为 12 个等宽逻辑列；元素的起始列和列跨度可以自动计算，也可以手工设置；除非设置 Start New Row，否则元素会与布局顺序中前一个元素保持在同一行。

12 列网格提供多种均分方式，便于默认形成视觉均衡的布局。患者登记页示例中，Patient 区域和 Map 区域各自的 REGION BODY 插槽都使用 12 列。P4_FIRST_NAME 从第 1 列开始并跨 6 列，P4_LAST_NAME 从第 7 列开始并跨 6 列；地址行中的四个页面项各跨 3 列。

P4_USERNAME、P4_INSURANCE_PROVIDER、P4_ADDRESS 的 Start New Row 为 true，其他页面项为 false，因此同一行内按组件树顺序排列。Patient 区域的 NEXT 插槽包含按钮，但按钮插槽不使用完整网格，而是按按钮自身宽度和间距布局。

组件树顺序决定布局顺序。拖动组件或修改 Sequence 属性会立即反映在 Layout 面板中。隐藏页面项像不可见变量，不出现在 Layout 面板。若某按钮在 NEXT 插槽中，Property Editor 不会显示 Start New Row；如果放在使用网格的 BODY 插槽中，该属性才会出现。

Column Start 和 Column Span 默认为 Automatic。同一行内元素会尽量均分可用空间，并从前一个元素之后的下一可用列开始。需要特定宽度时，可手工设置 Column 为 1 到 12 的起始列，并设置 Column Span。APEX 只允许合法组合，例如从第 10 列开始时，跨度最多只能是 3。

示例中把 P4_ADDRESS 和 P4_CITY 的 Column Span 设为 4 后，同一行剩余 4 列由 P4_STATE 和 P4_ZIP 自动平分，各占 2 列。随着浏览器变窄，APEX 会尽量保留逻辑布局；更窄时会把页面项拆到独立行，以保持可用性。

相同网格也作用在页面级别。Patient 和 Map 区域同处页面 BODY，若 Map 的 Start New Row 为 true，它会位于 Patient 下方；改为 false 后，Map 与 Patient 同行。两个区域 Column Span 都为 Automatic 时会平分页面宽度；若将 Map 的 Column Span 设为 4，它会占 12 列中的三分之一。

3.9.2 模板与选项决定外观#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/templates-and-options-set-look-and-feel.html

Universal Theme 提供页面模板、区域模板和页面项模板。选择模板并配置模板选项，就能用声明式方式得到专业外观。

Universal Theme Reference App（https://oracleapex.com/ut）适合作为实时试验场：先查看页面模板提供的插槽、区域模板的装饰与按钮位置、页面项模板的标签呈现，再在 Page Designer 中配置相同选项。

3.9.3 嵌套区域创建任意布局#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/nest-regions-create-any-layout.html

区域除了主内容外，还可以包含其他区域。Layout 面板和组件树都会显示这种父子关系；子区域的 Parent Region 属性可在 Property Editor 中查看和修改。

常见布局做法是使用空的 Static Content 区域作为容器。示例中，页面 Body 插槽中有 Start、Center、End 三个顶层静态内容区域，它们使用 Blank with Attributes 模板，不显示标题或边框。三个顶层区域在同一网格行中，通过 Column Span 分配 12 列空间：Start 跨 2 列，Center 跨 6 列，End 占用剩余空间。

Start 区域包含页面项和 Search 按钮；Center 嵌套 Tabs 与 Departments 区域；End 嵌套 Help 和 Chart 两个上下排列的区域。Tabs 中又包含 Subordinates 和 Managers 两个 Cards 区域，Departments 中嵌套两个并排的 Content Row 区域。运行时，这些嵌套关系按网格规则呈现为复杂但可维护的响应式布局。

3.3.1.1 Rendering、Layout 与 Property Editor#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/rendering-layout-and-property-editor.html

默认 Page Designer 布局中，Rendering 与 Dynamic Actions、Processing、Page Shared Components 等选项卡分组在一起，都以树形结构展示各自内容。Rendering 树显示页面上的区域、页面项和按钮层级，树中的分组反映页面模板和区域插槽。

在 Rendering 中选择组件，会在 Layout 中高亮该组件，并让 Property Editor 显示它的属性。面板较窄时，选项卡名称会收缩为图标。可以拖动分隔条调整面板宽度，点击分隔条箭头折叠或展开侧栏，也可以把选项卡拖到其他位置。需要恢复默认排列时，从 Utilities 下拉菜单选择 Reset Layout。

3.3.1.2 使用 Property Editor 配置设置#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/configuring-settings-property-editor.html

Property Editor 用于查看和修改页面组件设置。某些组件的设置分布在多个分组或标签中。它支持多选、搜索属性，以及固定搜索结果以跨组件检查同一属性。

在 Rendering、Dynamic Actions 或 Processing 树中多选组件后，Property Editor 会显示它们共有的设置。可以先选中一个组件，再 Shift 选中另一个组件形成范围选择；也可以用 Control 或 Command 选择任意多个组件。共有属性值相同则显示值，不同则显示 delta 符号并留空；此时填写值会同时应用到所有选中组件。

Filter 搜索框可按属性名或属性分组名过滤设置。输入 ic 时，会显示包含该字符的 Identification 分组或 Icon 属性。按 Escape 可清空搜索。若需要跨多个组件检查同一设置，点击搜索框中的 Pin 固定过滤条件，再逐个选择组件即可只看匹配属性；再次点击 Pin 取消固定。

3.3.1.3 配置动态行为#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/configuring-dynamic-behavior.html

按钮和菜单这类用户点击动作，可以直接在 Rendering 选项卡中配置 Triggered Actions。例如 Refresh 按钮触发刷新 Results 区域；Invoice Complete 菜单项设置所选发票 ID，并提交页面以执行业务逻辑。

其他用户界面事件通过 Dynamic Actions 选项卡中的事件处理程序处理。该选项卡会显示页面上所有事件处理程序，以及每个事件发生时按顺序执行的 Dynamic Action 步骤。例如模态对话框关闭后，页面可处理该事件并刷新 Results 区域。

3.3.1.4 验证、处理与分支#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/validation-processing-and-branching.html

Processing 选项卡用于查看并声明式配置最终用户提交页面后发生的事情。

Validations 用来确保数据正确；Page Processes 用来执行 DML、调用 PL/SQL 或完成更复杂的验证与业务逻辑；Branches 决定没有验证错误时用户接下来看到哪个页面。选中任一验证、处理或分支后，Property Editor 会显示其设置。

3.3.1.5 搜索页面#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/searching-your-page.html

Page Search 选项卡可以搜索页面中的对象、属性和值。点击搜索结果后，Property Editor 会立即显示对应组件或属性。

示例中，在 Review Invoices 页面搜索 patient，点击第二条结果后，相关属性立即显示在 Property Editor 中。复杂页面中，这比手工展开组件树更快。

3.3.1.6 随手可得的属性帮助#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/help-any-setting-your-fingertips.html

Help 选项卡显示 Property Editor 中所选属性的详细说明。点击 Type 这样的属性标签后，Help 会解释该设置、可用选项和使用示例。

对于支持替换字符串的设置，Help 会说明允许哪些替换、语法如何书写、是否支持模板指令，并经常提供示例。遇到陌生属性时，先看 Help 面板通常比外部搜索更快。

3.8.2.1 定义本地值列表#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/defining-local-list-values.html

列表驱动页面项的可选值可以用静态值定义，也可以用 SQL 查询定义。静态 LOV 中，每个条目填写 Display Value 和 Return Value；旁边按钮可删除或重排条目。

Sort at Runtime 默认会按 Display Name 字母顺序排序；如果必须按输入顺序显示，应关闭该开关。

非静态选项通常使用 SQL 查询。查询 SELECT 列表应包含两列：第一列是显示值，第二列是返回值。常见但非强制的别名是 d 和 r。LOV 查询也可以引用页面项绑定变量。

select dname as d, deptno as r
  from dept
 order by dname

select ename as d, empno as r
  from emp
 where deptno = :P5_DEPARTMENT
 order by ename

3.8.2.2 共享 LOV 的更多能力#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/additional-shared-lov-features.html

如果预计一个 LOV 会被多次复用，应定义为共享组件中的 List of Values。共享 LOV 相比页面项本地 LOV 支持更多数据源和能力。

静态共享 LOV 的每个条目可以配置条件，决定该条目何时出现。非静态共享 LOV 称为 Dynamic List，数据可以来自 SELECT 语句或远程数据源。

动态 LOV 除显示值和返回值外，还可以提供额外列。例如某一列可指定每行显示的图标；Select One、Select Many、Combobox 可以用额外列定制列表项显示；Popup LOV 可以展示额外列、在这些列上搜索，并把额外列值返回到其他页面项。

3.8.2.3 将本地 LOV 转换为共享 LOV#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/converting-local-lovs-shared.html

Shared Components 的 List of Values 页面包含 Locally Defined 选项卡，可快速把页面项中本地定义的 LOV 转换为命名共享 LOV。

列表中每个本地 LOV 在 Action 列都有 Convert 按钮。点击后，App Builder 会创建共享组件，并调整原页面项改为引用新共享 LOV。

3.9.2.1 页面模板奠定场景#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/page-template-sets-scene.html

页面模板把页面空间组织为可放置内容的插槽。不同页面模板提供不同插槽集合，并决定是否显示应用导航菜单。

Standard 是默认模板，也是会显示应用导航菜单的五个模板之一。需要比较各模板插槽和导航行为时，可在 Universal Theme Reference App 的 Design > Page Templates 中查看详情。

3.9.2.2 区域模板塑造区块#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/region-template-styles-section.html

区域模板组织页面中一个区块的布局。Universal Theme Reference App 中有多种区域模板，但默认 Standard 模板适合大多数常见场景。

Standard 模板的 Region Body 插槽使用 12 列网格显示主内容，并提供九个按钮插槽。简单模板选项可控制标题、边框和间距；需要只显示内容时，可隐藏标题并移除 UI 装饰。

如果区域没有按钮或边框需求，Blank with Attributes 模板是一键替代方案。需要在页面其他位置创建工具栏，但页面模板或 Standard 区域按钮插槽不合适时，可使用 Buttons Container 模板。

3.9.2.3 页面项模板控制标签#

官方来源：https://docs.oracle.com/en/database/oracle/apex/26.1/apxdc/item-template-controls-label.html

页面项模板控制页面项标签和必填标记如何呈现。Hidden 模板不显示标签；Optional 或 Required 模板把标签显示在页面项前方，此时 Label Column Span 决定标签占用多少网格列，标签在自己的列宽内靠末端对齐，页面项靠起始端对齐。默认字段不会填满自身列跨度，但可通过选项启用拉伸。

Optional - Above 或 Required - Above 会把标签放在页面项上方，不再设置 Label Column Span。示例中三个查询字段都为 Automatic column span，因此同一行三个页面项各占 4 列。

Optional - Floating 或 Required - Floating 会把标签放在输入框内；字段有值时，标签缩小并上移。Floating 模板会把页面项拉伸填满列跨度。Required 模板会显示视觉必填标记，也可通过模板选项显示内联 Required 文本。