泰州网站制作软件,做网站的公司叫什么软件,wordpress文章与页面,网站浏览器JSF不是我们通常认为的那样。 这也是一个调试起来可能有些棘手的框架#xff0c;尤其是在初次遇到时。 在这篇文章中#xff0c;让我们继续探讨为什么会出现这种情况#xff0c;并提供一些JSF调试技术。 我们将讨论以下主题#xff1a; JSF不是我们经常想到的 JSF调试的难… JSF不是我们通常认为的那样。 这也是一个调试起来可能有些棘手的框架尤其是在初次遇到时。 在这篇文章中让我们继续探讨为什么会出现这种情况并提供一些JSF调试技术。 我们将讨论以下主题 JSF不是我们经常想到的 JSF调试的难点 如何系统地调试JSF JSF的工作原理– JSF生命周期 从浏览器调试Ajax请求到服务器再返回 调试JSF前端Javascript代码 最后的想法–替代方案 给读者的问题 JSF不是我们经常想到的 首先JSF看起来像一个企业Java / XML前端框架但实际上并不是 。 它实际上是一个多语言Java / Java脚本框架其中客户端Java脚本部分不可忽视并且理解它也很重要。 它还对直接使用HTML / CSS有很好的支持。 JSF开发人员正在使用ocasion而他们已经是多种语言的开发人员其主要语言是Java但仍需要使用本地语言的Javascript。 JSF调试的难点 在上一篇文章中将JSF与GWT和AngularJS进行比较时 我发现该框架从XML背后的开发人员那里提取HTML和CSS的最常用的方法增加了调试的难度因为它创建了一个额外的层次。间接。 也可以使用直接使用HTML / CSS的更直接的方法 但是似乎企业Java开发人员在大多数情况下倾向于使用XML因为它是一种更熟悉的技术。 另一个问题是框架/库的客户端Javascript部分没有很好的文档记录了解发生的事情通常很重要。 系统调试JSF的唯一方法 第一次遇到JSF时我首先尝试仅从JavaXML和文档中使用它。 虽然我可以那样做一部分工作但在很多情况下这种方法确实是不够的。 我得出的结论是为了能够有效地调试JSF应用程序需要了解以下内容 HTML CSS Java脚本 HTTP Chrome开发工具Firebug或同等功能 JSF生命周期 对于大多数使用Java / XML进行工作的开发人员来说这听起来可能令人惊讶但是这种以Web为中心的调试JSF的方法是我设法满足许多需要一些重要组件自定义或能够修复某些bug的唯一方法。 让我们首先了解JSF的内部工作原理以便我们可以对其进行更好的调试。 JSF接受MVC JSF处理MVC的方式是全部三个组件都位于服务器端 该模型是纯Java对象的树 视图是用XML定义的服务器端模板可以读取它以构建内存视图定义 Controller是一个Java Servlet它接收每个请求并通过一系列步骤处理它们 假定浏览器只是服务器端生成HTML的呈现引擎。 通过提交页面的一部分以进行服务器处理并请求服务器仅在不离开页面的情况下“重绘”屏幕的某些部分即可实现Ajax。 JSF生命周期 HTTP请求到达后端后将被JSF Controller捕获然后将对其进行处理。 该请求经历了称为JSF生命周期的一系列阶段这对于理解JSF的工作方式至关重要 JSF生命周期的设计目标 整个生命周期的重点是仅使用浏览器作为呈现平台在服务器端100管理MVC。 最初的想法是使呈现平台与服务器端UI组件模型脱钩以便通过交换“呈现响应”阶段来用替代标记语言替换HTML。 这是在2000年代初期当时HTML很快就可以被基于XML的替代方法取代但从未出现然后HTML5出现了。 浏览器的功能要比当今更加强大并且跨浏览器的Javascript库的想法尚未普及。 因此让我们遍历每个阶段看看如何从浏览器开始进行调试如果需要。 让我们以使用Ajax请求的简单示例为基础。 JSF 2 Hello World示例 以下是最小的JSF 2页面该页面接收来自用户的输入文本通过Ajax请求将文本发送到后端并仅刷新输出标签 h:body h3JSF 2.2 Hello World Example/h3h:formh:outputtext idoutput value#{simpleFormBean.inputText}/h:outputtext h:inputtext idinput value#{simpleFormBean.inputText}/h:inputtexth:commandbutton valueSubmit actionindexf:ajax executeinput renderoutput/f:ajax/h:commandbutton/h:form
/h:body 该页面如下所示 遵循一个Ajax请求–发送至服务器并返回 让我们单击提交以触发Ajax请求然后使用Chrome开发工具网络标签右键单击并检查页面上的任何元素。 这是我们在请求的“表单数据”部分中看到的 j_idt8:input: Hello World
javax.faces.ViewState: -2798727343674530263:954565149304692491
javax.faces.source: j_idt8:j_idt9
javax.faces.partial.event: click
javax.faces.partial.execute: j_idt8:j_idt9 j_idt8:input
javax.faces.partial.render: j_idt8:output
javax.faces.behavior.event: action
javax.faces.partial.ajax:true 该请求说 输入字段的新值是“ Hello World”仅将输出字段的新值发送给我请勿浏览此页面。 让我们看看如何从请求中读取它。 如我们所见表单的新值被提交到服务器即“ Hello World”值。 这是几个条目的含义 javax.faces.ViewState标识从其发出请求的视图。 该请求是一个Ajax请求如标志javax.faces.partial.ajax 该请求是由javax.faces.partial.event定义的单击触发的。 但是这些j_字符串是什么 这些是用空格分隔生成HTML元素标识符。 例如这是我们使用Chrome开发工具查看与j_idt8:input对应的页面元素的方式 还有3个额外的表单参数使用这些标识符这些参数链接到UI组件 javax.faces.source 发起此请求HTML元素的标识符在本例中为Submit按钮的ID。 javax.faces.execute 元素的标识符列表这些元素的值发送到服务器进行处理在这种情况下为输入文本字段。 javax.faces.render 页面上要“重画”的部分的标识符列表在这种情况下仅是输出字段。 但是当请求到达服务器时会发生什么呢 JSF生命周期–还原视图阶段 请求到达服务器后JSF控制器将检查 javax.faces.ViewState并标识它引用的视图。 然后它将构建或还原视图的Java表示该表示与浏览器端的文档定义在某种程度上相似。 该视图将附加到请求并在整个过程中使用。 通常在应用程序开发期间几乎不需要调试此阶段。 JSF生命周期–应用请求值 然后JSF控制器将通过请求接收到的新值应用于视图小部件。 该值此时可能无效。 在此阶段每个JSF组件都会调用其decode方法。 此方法将从HTTP请求中检索相关小部件的提交值并将其存储在小部件本身上。 为了调试它让我们在HtmlInputText类的decode方法中放置一个断点以查看值“ Hello World” 注意使用所需字段HTML clientId的条件断点。 这样即使在带有许多其他相似小部件的大页面中也可以仅快速调试所需组件的解码。 解码之后的下一个步骤是验证阶段。 JSF生命周期–流程验证 在此阶段将应用验证如果发现值有误例如日期无效则请求将绕过“调用应用程序”并直接进入“渲染响应”阶段。 要调试此阶段可以在processValidators方法上放置一个类似的断点或者如果您碰巧知道哪些是自定义的则可以在验证器本身上放置。 JSF生命周期–更新模型 在此阶段我们知道所有提交的值都是正确的。 JSF现在可以通过将请求中接收到的新值应用于视图模型中的纯Java对象来更新视图模型。 通过在相关组件的processUpdates方法中放置一个断点最终使用类似的条件断点仅在所需的组件上进行中断可以调试此阶段。 JSF生命周期–调用应用程序 这是最简单的调试阶段。 该应用程序现在具有更新的视图模型并且可以在其上应用一些逻辑。 这是在XML视图定义中定义的动作侦听器“动作”属性和侦听器标记执行的地方。 JSF生命周期–渲染响应 这是我最后调试最多的阶段为什么未按预期显示该值等等都可以在这里找到。 在此阶段视图和新模型值将从Java对象转换为HTMLCSS和最终的Javascript并通过电线发送回浏览器。 可以使用相关组件的encodeBegin encodeChildren和encodeEnd方法中的断点来调试此阶段。 组件将自己渲染或将渲染委托给Renderer类。 回到浏览器 这是一段漫长的旅程但我们回到了起点 这是浏览器收到JSF生成的响应后的样子 !--?xml version1.0 encodingUTF-8?--
partial-response changesupdate idj_idt8:outputspan idj_idt8:output/span/updateupdate idjavax.faces.ViewState-8188482707773604502:6956126859616189525/update/changes
/partial-response 框架的Javascript部分将要做的是获取部分响应的内容并逐个更新。 使用更新的ID客户端JSF回调将搜索具有该ID的组件将其从文档中删除然后将其替换为新的更新版本。 在这种情况下“ Hello World”将显示在“输入”文本字段旁边的标签上 因此这就是JSF在后台运行的方式。 但是如果我们需要调试框架的Javascript部分该怎么办 调试JSF Javascript代码 Chrome开发工具可以帮助调试客户端。 例如假设我们要在触发Ajax请求时暂停客户端。 我们需要转到“源”选项卡添加XHRAjax断点并触发浏览器操作。 调试器将停止并且可以检查调用堆栈 对于诸如Primefaces之类的某些框架可能会缩小Javascript源人类不可读因为它们针对大小进行了优化。 要解决此问题请下载该库的源代码并以最小的方式构建jar。 通常对此有说明否则请检查项目poms。 这将在您的Maven资源库中安装一个具有非最小化源的jar进行调试。 UI调试标签 ui:debug标记允许使用键盘快捷键查看许多调试信息有关更多详细信息请参见此处 。 最后的想法 JSF在企业Java世界中非常流行并且可以很好地处理许多问题特别是在UI设计人员考虑使用小部件库的可能性的情况下。 问题在于通常会有一些功能请求迫使我们深入研究小部件的内部实现以对其进行自定义这需要HTMLCSSJavascript和HTTP以及JSF生命周期知识。 杂音是替代品吗 我们想知道如果开发人员必须对Web技术有足够的了解以便能够有效地调试JSF那么使用这些技术直接构建企业前端仅是客户端部分会更简单。 可能会在不久的将来证明Java后端加上仅Javascript前端的多语言方法有效特别是使用某种客户端MVC框架例如Angular 。 这将需要学习更多的Javascript如果好奇的话可以看一下Java开发人员的Javascript 但是无论如何这对于在JSF中进行自定义小部件开发通常是必需的。 结论和一些疑问如果有时间的话 感谢您的阅读请花点时间在下面的评论中分享您对这些问题的看法 您是否认为多语种开发Java / Javascript通常是可行的选择尤其是在您的工作场所中 您是否发现基于GWT的框架之一普通GWTVaadinErrai或Play框架更易于使用且具有更高的生产率 翻译自: https://www.javacodegeeks.com/2014/09/how-jsf-works-and-how-to-debug-it-is-polyglot-an-alternative.html
