我对JSF相对较新,并试图了解当前JSF 2应用程序的设计方式。我已经看到了使用ajax的单页面应用程序的引用。有人可以填写我使用的一些技术和/或指向我的模型或书籍吗?我见过的书(JSF Complete Reference等)对基本技术问题很有帮助,但我找不到当前设计技术的来源。
由于 戴夫
答案 0 :(得分:4)
为了实现单页应用程序,您应该说明应该呈现哪个页面。这可以通过使用布尔标志来完成,例如创建,编辑,列表等。例如,请参阅以下内容(仅相关代码)
<h:body>
<h:form rendered="#{userController.stateManager.create}">
<h:panelGroup rendered="#{not empty facesContext.messageList or userController.stateManager.failure}">
<!--render error message right here-->
</h:panelGroup>
<div>
<label>#{messages['br.com.spa.domain.model.User.name']}</label>
<h:inputText value="#{user.name}"/>
</div>
<h:commandButton action="#{userController.create}">
<f:ajax execute="@form" render="@all"/>
<f:actionListener type="br.com.spa.web.faces.listener.StateManagerActionListener" />
<f:setPropertyActionListener target="#{userController.stateManager.create}" value="true"/>
<f:setPropertyActionListener target="#{userController.user}" value="#{user}" />
</h:commandButton>
</form>
</h:body>
请注意,当标志创建为真时,我们的表单将被渲染 - 请参阅上面的第二行。为了包装我们的标志,我们创建一个名为StateManager的classe,如下所示
/**
* I am using lombok, which takes care of generating our getters and setters. For more info, please refer http://projectlombok.org/features/index.html
*/
@Setter @Getter
public class StateManager {
private boolean create;
private boolean edit;
private boolean list;
}
现在,因为我们只使用一个页面,所以我们应该使用一个ViewScoped托管bean,只要你在同一个视图上,它就会使我们的托管bean保持活动状态 - 它是一个单页面应用程序,对吧?所以,没有导航。考虑到这一点,让我们创建我们的托管bean。
@ManagedBean
@ViewScoped
public class UserController implements StateManagerAwareManagedBean {
private @Inject UserService service;
private @Getter @Setter stateManager = new StateManager();
private @Getter @Setter List<User> userList = new ArrayList<User>();
private @Getter @Setter User user;
@PostConstruct
public void initialize() {
list();
}
public void create() {
service.persist(user);
stateManager.setCreate(false);
stateManager.setList(true);
stateManager.setSuccess(true);
}
public void edit() {
service.merge(user);
stateManager.setEdit(false);
stateManager.setList(true);
stateManager.setSuccess(true);
}
public void list() {
userList = service.list();
stateManager.setList(true);
}
}
对于每个动作方法,我们定义应该呈现我们页面的哪一部分。例如,考虑我们的表单已经过处理,涵盖了所有JSF lyfecycle,这意味着他们的值已成功转换和验证,并且我们调用了我们的操作方法。通过使用我们的 create 操作方法(参见上文),我们将其create标志设置为false,因为我们的表单已经过转换和验证,所以我们不需要再次显示它(除非你想要)。此外,我们将list和success标志都设置为true,这表示应该呈现我们页面的列表并且我们的表单已成功处理 - 您可以使用此标志来显示类似&#34; User created&#34;如波纹管
<h:panelGroup rendered="#{userController.stateManager.success}">
#{messages['default.created.message']}
</h:panelGroup>
现在,让我们讨论第一次调用时应该呈现我们页面的哪一部分。也许你不知道,但是首先会调用@PostConstruct注释的void方法。所以我们定义应该呈现我们页面的哪一部分。在我们的示例中,我们调用list方法,将list标志设置为true并填充支持列表。
@PostConstruct
public void initialize() {
list();
}
最后,让我们查看嵌套在h:commandButton
中的以下顺序<h:commandButton action="#{userController.create}">
<f:ajax execute="@form" render="@all"/>
<f:actionListener type="br.com.spa.web.faces.listener.StateManagerActionListener" />
<f:setPropertyActionListener target="#{userController.stateManager.create}" value="true"/>
<f:setPropertyActionListener target="#{userController.user}" value="#{user}" />
</h:commandButton>
首先,你应该调用一个ActionListener - 这里叫做StateManagerActionListener - 它负责重置任何StateManager - 代码如下。在设计用于控制任何标志的任何其他setPropertyActionListener之前,必须首先调用必须,因为在h:commandButton中定义的顺序是它们将被调用的顺序。记住这一点。
public class StateManagerActionListener implements ActionListener {
public void processAction(ActionEvent e) throws AbortProcessingException {
Map<String,Object> viewMap = FacesContext.getCurrentInstance().getViewRoot().getViewMap();
for(Map.Entry<String,Object> entry: viewMap.entrySet()) {
if(entry.getValue() instanceof StateManagerAwareManagedBean) {
((StateManagerAwareManagedBean) entry.getValue()).setStateManager(new StateManager());
}
}
}
}
StateManagerAwareManagedBean - 在我们的ViewScoped Managed bean中使用 - 允许我们在ActionListener中重置任何ManagedBean 的任何StateManager而不是逐个重置,定义如下
public interface StateManagerAwareManagedBean {
StateManager getStateManager();
void setStateManager(StateManager stateManager);
}
其次,在定义ActionListener之后,我们使用setPropertyActionListener设置控制视图封闭片段的标志为true。这是必需的,因为我们的表单应该不被转换和验证。因此,在我们的action方法中,我们将此标志设置为false,如前所述。
几个笔记