昨天我看到了一个关于Java Server Faces 2.0的演示文稿,虽然我现在是一个快乐的ASP.NET MVC/jQuery开发人员,但它看起来确实令人印象深刻.我最喜欢JSF的是大量支持AJAX的UI组件,这些组件似乎比ASP.NET MVC更快,特别是在AJAX重型站点上.集成测试看起来也很不错.
由于演示文稿只强调了JSF的优点,我也想听听另一方面的意见.
所以我的问题是:
JSF正在将输入字段的ID设置为search_form:expression.我需要在该元素上指定一些样式,但该冒号看起来像浏览器的伪元素的开头,因此它被标记为无效并被忽略.反正有没有逃过冒号或什么？
input#search_form:expression {
///...
}
问题:有时你会想要从javascript访问一个组件
getElementById,但是id是在JSF中动态生成的,所以你需要一个获取对象id的方法.我在下面回答你如何做到这一点.
原始问题: 我想使用下面的代码.如何在我的Javascript中引用inputText JSF组件？
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title>Input Name Page</title>
<script type="javascript" >
function myFunc() {
// how can I get the contents of the inputText component below
alert("Your email address is: " + document.getElementById("emailAddress").value);
}
</script>
</head>
<h:body>
<f:view>
<h:form>
Please enter your email address:<br/>
<h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>
</h:form>
</f:view>
</h:body>
</html>
更新:JSF2.0中的这篇帖子客户端标识符讨论了使用如下技术:
<script type="javascript" >
function myFunc() {
alert("Your email address is: " + …我正在尝试使用PrimeFaces和JSF组件实现jQuery,但它无法正常工作.当我尝试用HTML标签做同样的事情时,它正常工作.
以下是带有HTML标记的代码,它可以与jQuery一起使用:
<input type="checkbox" id="check2"></input>
<h:outputText value="Check the box, if your permanent address is as same as current address."></h:outputText>
<h:message for="checkbox" style="color:red" />
同
$("#check2").change(function() {
if ($("#check2").is(":checked")) {
$("#p2").hide();
} else {
$("#p2").show();
}
});
以下是使用PrimeFaces/JSF的代码,它与jQuery无法正常工作:
<p:selectManyCheckbox >
<f:selectItem itemLabel="1" value="one" id="rad" ></f:selectItem>
</p:selectManyCheckbox>
同
$("#rad").change(function() {
if ($("#rad:checked").val() == "one") {
$("#p2").hide();
} else {
$("#p2").show();
}
});
我正在学习jQuery.我想在我的jsf 2.0应用程序中使用jQuery.就像我有html文件,我在这里使用jQuery
<head>
<title>The Devil's Dictionary</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/06.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/06.js"></script>
</head>
我只是从jQuery官方网站下载了jquery-1.7.1.js文件,将其包含在我的目录中,然后开始使用jQuery.
我的06.js文件conatin代码是这样的
$(document).ready(function() {
$('#letter-a a').click(function(){
/**
* The .load() method does all our heavy lifting for us! We specify the target location for
* the HTML snippet by using a normal jQuery selector, and then pass the URL of the file to
* be loaded as a parameter to the method. Now, when the first link …我对这个事实背后的想法有一个疑问,即只有UIForm属性prependId.为什么NamingContainer界面中没有指定属性？你现在可能会说这是因为后向兼容性但我宁愿打破兼容性并让实现该接口的用户也实现prependId的方法.
从我对UIForm组件中的prependId的观点来看,主要的问题是它会破坏findComponent()
我希望如果我使用prependId,那么NamingContainer行为会改变,不仅与渲染有关,而且在想要在组件树中搜索组件时也是如此.
这是一个简单的例子:
<h:form id="test" prependId="false">
<h:panelGroup id="group"/>
</h:form>
现在,当我想获得panelGroup组件时,我希望将字符串传递"group"给方法findComponent(),但它不会找到任何东西,我必须使用"test:group".
具体问题是,当使用ajax时prependId="false".ajax标记在属性更新和处理中期望值关注命名容器.有点奇怪的是,当我使用它时prependId="false",我必须指定完整的id或路径,但没关系.
<h:form id="test" prependId="false">
<h:panelGroup id="group"/>
</h:form>
<h:form id="test1" prependId="false">
<h:commandButton value="go">
<f:ajax render="test:group"/>
</h:commandButton>
</h:form>
那么这段代码将呈现没有问题,但它不会更新panelGroup,因为它无法找到它.在PartialViewContext将只包含ID "group"为renderIds的元素.我不知道这是否是预期的,可能是但我不知道代码.现在我们到了方法findComponent()无法找到组件的位置,因为作为参数传递的表达式是"group"方法期望"test:group"找到组件的位置.
一种解决方案是编写自己的解决方案,findComponent()这是我选择处理此问题的方式.在这个方法中,我处理一个组件,它是一个NamingContainer并且具有属性prependId像正常一样设置为false UIComponent.我将不得不为每个UIComponent提供prependId属性的事情做到这一点,这很糟糕.反射将有助于绕过类型的静态定义,但它仍然不是一个非常干净的解决方案.
另一种方法是在NamingContainer接口中引入prependId属性,并改变行为,findComponent()如上所述.
最后提出的解决方案是改变ajax标记的行为以传递整个id,但这只能解决ajax问题而不是findComponent()实现背后的程序问题.
你怎么看待这个以及它为什么会这样实现呢？我不能成为第一个遇到这个问题的人,但是我找不到相关的主题？!
我想看一下使用JSF,但是我被许多组件的自由使用html表格布局所拖延.
你如何使用JSF开发基于CSS的布局？
我似乎在这里陷入了一种误解,但我见过的每一篇JSF教程最终都会产生基于表格的HTML布局.我还看了RichFaces和IceFaces的演示,并且那里还有很多表格用于布局.
有没有人知道开发基于CSS的布局的JSF教程？如果没有,是否有人想要制作一个？;)
有活跃的JSF(或Primefaces)用户可以解释为什么默认情况下会发生这样的原因:为什么没有人对此做任何事情:
<p:commandLink id="baz" update=":foo:boop" value="Example" />
哪个生成的标记在没有hacks的情况下无法在JavaScript或CSS中使用,通常应被视为无效:
<a href="javascript:void(0);" id=":foo:bar:baz">Example</a>
id=":bar:baz:foo"此处的属性包含冒号,这些冒号不是此属性的有效字符,至少从CSS角度来看.
虽然该属性可能根据规范有效,但它无法与真实的JavaScript和CSS实现一起使用.
简而言之,idJSF中的默认属性生成无法用于前端开发.
例如,以下代码段:
<h:form id="levelone">
<h:inputText id="leveltwo" value="Test" />
</h:form>
生成以下标记:
<form id="levelone" name="levelone" method="post" action="/test/testPage.html"
enctype="application/x-www-form-urlencoded">
<input id="levelone:leveltwo" type="text" name="levelone:leveltwo"
value="Test" />
</form>
是否可以更改自动生成的ID以使用与冒号不同的分隔符？
例如,我想改变
levelone:leveltwo
至
levelone-leveltwo
我们在webapp中使用Mojo JavaScript应用程序框架,它似乎不喜欢id中的冒号.
当我尝试通过ajax调用渲染panelGroup时,它会给出未知的id.
<h:form id="form1" prependId=false>
<h:panelGroup id="panel1">
<h:dataTable/>
<ui:repeat value="#{bean.page}" var="page">
<h:commandLink value="#{page}">
<f:ajax execute="@form" render="panel1" listener="#{bean.page}" />
</h:commandLink>
</ui:repeat>
</h:panelGroup>
</h:form>
当我尝试这段代码时,它会给出未知的id panel1.我尝试了id":panel1".我犯了同样的错误.
jsf ×8
jsf-2 ×4
html ×3
css ×2
java ×2
jquery ×2
ajax ×1
asp.net-mvc ×1
facelets ×1
forms ×1
javascript ×1
primefaces ×1