「Java EE开发指南」如何使用MyEclipse的可视化JSF编辑器设计JSP?(二)

Visual JSF Designer(可视化JSF设计器)的目标是使创建JSF应用程序的特定于组件工作更容易可视化,在本教程中,您将使用可视化设计器设计JSF登录页面。您将学习如何:

  • 创建一个JSF项目
  • 创建一个新的JSF页面
  • 设计JSF页面

该功能在MyEclipse中可用。在上文中(点击这里回顾>>),我们为大家介绍了如何用JSF Facet创建一个Web项目、创建一个JSF页面等,本文将继续介绍如何设计一个登录表单,欢迎下载最新版MyEclipse体验!

MyEclipse v2025.1离线版下载

三、设计一个登录表单
  1. 单击Expand按钮打开Visual Designer中的工具调色板,调色板从构建路径读取标记库并加载它们,这样您就可以使用拖放功能来构建页面。

展开工具面板

需要注意的一些重要标签组如下所示。在设计页面时,有一些最常用的标签集,使用这些项可将登录表单拖放到页面上。

  1. 选择默认文本并将其更改为Welcome to My Application. Please Login

  2. 在调色板中展开JSF HTML,并将Form(表单)拖到文本下面的页面上。

添加表单和编辑文本

典型登录表单的布局由用户名、密码和登录按钮组成。为了很好地布局这些项,似乎需要一个3×2表,但是如果希望为登录错误消息提供空间,则可以使用3×3表,Panel Grid组件以表格形式布局内容。

  1. 将Panel Grid拖到表单中,并在Properties视图的Columns字段中输入3,面板网格包含四个示例项目。当您添加/删除项目时,布局将进行调整。

添加一个面板网格

将Panel Grid(面板网格)添加到页面时,设计器会自动向其添加四个示例组件。

  1. 将Output Text组件从工具栏拖到第一列、第一行,并在Properties视图的Value字段中输入Username:。

  2. 将Text Input组件从工具栏拖到第二列第一行,并在Properties视图的ID字段中输入username。

  3. 将Message组件从工具栏拖到第三列第一行,并在For字段中输入username。

  4. 将Output Text组件从工具栏拖到第一列第二行,并在Properties视图的Value字段中输入Password:。

  5. 将Secret Input组件从工具栏拖到第二列第二行,并在Properties视图的ID字段中输入password。

  6. 将Message组件从工具栏拖到第三列第二行,并在For字段中输入password。

  7. 从网格中删除示例项目。

按钮还没有添加,但到目前为止,表单看起来是这样的:

渲染没有按钮的登录页面

注意:消息组件只有在具有要显示的消息时才会呈现。

给定登录表单的布局,您可能希望将输入框下的按钮左对齐,来使表单看起来更美观。如果您在每个单元格中放置一个按钮(一个在密码下,一个在秘密输入下),它们将不均匀间隔。然而,Panel Grid接受直接添加到它的组件,并将它们逐个单元格地放在一个表中。要将两个按钮组合在一起并将它们放置在输入字段下,需要使用panelGroup。

首先,在Password标签下需要一个空组件。其次,您需要在输入字段下添加一个panelGroup,然后在panelGroup中添加两个按钮。

  1. 将Output Text组件拖到密码标签下面的单元格中,并删除Properties视图中Value字段的内容,这将创建一个空单元格。

  2. 将Panel Group组件拖到输入字段下面的单元格中,将两个Command Button组件拖到Panel Group中,并在Properties面板中各自的Value字段中输入Login和Clear。

添加Panel Group 和按钮

注意:没有必要在消息组件下添加空组件。

页面的设计部分已经完成,并且让您对设计器的工作方式有了一个很好的了解。当然,如果您正在构建一个完整的JSF应用程序,则需要将操作处理程序分配给按钮,并将值绑定分配给输入字段,以确保托管bean正确地支持本页上的值。

四、资源
相关推荐
我命由我123452 小时前
Kotlin 数据容器 - List(List 概述、创建 List、List 核心特性、List 元素访问、List 遍历)
java·开发语言·jvm·windows·java-ee·kotlin·list
白-胖-子4 小时前
深入剖析大模型在文本生成式 AI 产品架构中的核心地位
人工智能·架构
武子康4 小时前
Java-80 深入浅出 RPC Dubbo 动态服务降级:从雪崩防护到配置中心秒级生效
java·分布式·后端·spring·微服务·rpc·dubbo
想要成为计算机高手5 小时前
11. isaacsim4.2教程-Transform 树与Odometry
人工智能·机器人·自动驾驶·ros·rviz·isaac sim·仿真环境
静心问道6 小时前
InstructBLIP:通过指令微调迈向通用视觉-语言模型
人工智能·多模态·ai技术应用
宇称不守恒4.07 小时前
2025暑期—06神经网络-常见网络2
网络·人工智能·神经网络
小楓12017 小时前
醫護行業在未來會被AI淘汰嗎?
人工智能·醫療·護理·職業
YuTaoShao7 小时前
【LeetCode 热题 100】131. 分割回文串——回溯
java·算法·leetcode·深度优先
数据与人工智能律师7 小时前
数字迷雾中的安全锚点:解码匿名化与假名化的法律边界与商业价值
大数据·网络·人工智能·云计算·区块链
chenchihwen7 小时前
大模型应用班-第2课 DeepSeek使用与提示词工程课程重点 学习ollama 安装 用deepseek-r1:1.5b 分析PDF 内容
人工智能·学习