从bean传递变量到primefaces页面
另一个Primefaces新手在这里。从bean传递变量到primefaces页面
我想将数据从一个bean传递给XHTML页面以便在javascript中使用。让我明确指出,primefaces XHTML页面没有组件,因此不需要像“#{bean.property}”这样的常规绑定。
有没有办法在加载页面时将一个bean变量传递给一个页面,然后将它用作javascript中的参数。
正如你所看到的,我尝试使用RequestContext传递“selectedProject”,但无法使其工作。 我的场景代码:
豆:
@Named(value = "ganttBean")
@SessionScoped
public class GanttBean implements Serializable {
@EJB
ProjectService projectService;
private Long selectedProjectId;
private Project selectedProject = null;
public GanttBean() {
}
public void init(){
//get the actual project by ID.
this.selectedProject = projectService.findById(selectedProjectId);
//package all the tasks of the selected project in a JSON object
jasonifyProject(selectedProject);
RequestContext.getCurrentInstance().addCallbackParam("selectedProject", selectedProject);
//RequestContext.getCurrentInstance().execute("ggg()");
}
JSF页面:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="../../WEB-INF/templates/master/default.xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:em="http://java.sun.com/jsf/composite/ezcomp"
xmlns="http://www.w3.org/1999/xhtml">
<ui:define name="content">
<f:metadata>
<f:viewParam name="projectId" value="# {ganttBean.selectedProjectId}"/>
<f:event type="preRenderView" listener="#{ganttBean.init()}"/>
</f:metadata>
<h1 class="title ui-widget-header ui-corner-all">
Project Gantt View
</h1>
<h:outputScript library="jsGantt" name="jquery.1.8.js"/>
<h:outputScript library="jsGantt" name="jquery-ui.min.js"/>
<h:outputStylesheet library="jsGantt" name="jsgantt.css"/>
<h:outputScript library="jsGantt" name="jsgantt.js" target="head"/>
<div style="position:relative" class="gantt" id="GanttChartDIV">
The gantt chart container
</div>
<script type="text/javascript">
var ggg = function(datafrombean){
....do something with datafrombean....
};
//ionstantiate a gantt chart.
var g = new JSGantt.GanttChart('g',document.getElementById('GanttChartDIV'), 'day');
//add tasks.
g.AddTaskItem(new JSGantt.TaskItem(3, 'Define Chart API', '2/10/2008','25/10/2008','000ff2', 'http://help.com', 0, 'Brian', 0, 1, 0, 1));
g.AddTaskItem(new JSGantt.TaskItem(12, 'Chart Object', '2/10/2008', '25/10/2008', 'ff00ff', 'http://www.yahoo.com', 0, 'Shlomy', 100, 0,3, 1));
//draw the chart
g.Draw();
g.DrawDependencies();
</script>
<h:form id="test">
<h:inputHidden id="hiddenInput"
value="hidden"/>
<p:dialog id="editTaskDialog" widgetVar="editTaskDialog" header="Edit Task">
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
嗯....让我们想到一些关于它是如何工作的。
Javascript运行在客户端,纯粹是前端。 JSF在服务器端运行,并将它的组件呈现给HTML, ,因此它有利于读取服务器端属性,bean,然后呈现客户端的属性。
因此,需要在服务器端和前端之间架设一个JSF已经完成的工作。
你声称你的页面没有组件,所以普通的绑定不能满足你的需求,但是......一个看不见的组件呢?
JSF:
<h:form id="formTest">
<h:inputText style="display:none" id="idComp1" value="#{ganttBean.property}"></h:inputText>
</h:form>
JS:
<script type="text/javascript">
function(){
var datafrombean = document.getElementById('formTest:idComp1').value
};
</script>
我不知道你想多少次以及何时调用该函数,但您可能需要使用Ajax再次渲染不可见的组件,然后再次调用JS函数。
而且,我敢肯定有其他简单的选择,它仅仅是一个办法做到这一点
啊!这是一个很好的答案。我试过了,它似乎工作。谢谢。现在我只需要找出解析我发送的对象的方法。但那是另一个讨论。 – Elton 2015-03-13 13:17:37
如果你仍然需要解析对象(它是一个字符串?),请在评论中使用我的两个建议之一。两者自动产生对象 – Kukeltje 2015-03-13 13:20:12
不,它不是一个字符串。这是一个对象,是的,你的例子产生了一个对象。现在的问题是,我的JavaScript方法不知道这个对象,我必须找到解压缩它的方法。也许是JSON的一些东西。我想这也需要重新审视我传递给javascript方法的内容。 – Elton 2015-03-13 13:24:33
您可以简单地使用EL in javascript:
<script type="text/javascript">
function(){
var datafrombean = #{bean.data};
};
</script>
上你的bean的getData()
被调用时该页面已创建。
嗨Kukeltje,在JavaScript中使用EL不适合我;我刚刚尝试了上面的示例。我会检查链接,看看是否有东西导致它不工作。谢谢! – Elton 2015-03-13 13:35:11
ajax请求怎么办? http://api.prototypejs.org/ajax/Ajax/Request/ – 2015-03-13 10:54:22
HI Jordi,你能更清楚地表达你的意思吗?如何在页面加载时发送ajax请求,而无需实际按下按钮或对某些输入组件执行操作。 – Elton 2015-03-13 11:10:17
如果你想在页面加载时将它添加到'window.onload = function()'中,如果你想在点击一个按钮的时候这样做,只需将它添加到一个函数中并在按下按钮时调用它。 ajax调用点是你可以有一个请求到服务器,而无需重新加载视图来更新某个部分或在动作完成时得到结果, – 2015-03-13 11:14:18