从Java Bean调用javascript文件

我有三个文件:

index.xhtml:我使用JSF创建了一个带有提交按钮的2个字段的表单(x: int, y: int)。
map.js:包含Js函数
MbZoomtoXy.java:调用前面的Js函数。

我要做的是当我在表单中输入x和y时。提交按钮应该给我x+y的"警告"。

index.xhtml

<?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">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
       <h:form id="form">
        <h:panelGrid columns="2" cellpadding="5">
            <p:outputLabel for="x-coor" value="X : " />
            <p:inputText id="x-coor" value="#{MbZoomtoXy.x}" required="true"/>
            <p:outputLabel for="y-coor" value="Y : " />
            <p:inputText id="y-coor" value="#{MbZoomtoXy.y}" required="true"/>
        </h:panelGrid>
        <p:commandButton value="Save" actionListener="#{MbZoomtoXy.save}"/>
        </h:form>
    </h:body>
</html>

map.js

function zoomToXy(x,y){
    var s = x + y;
    alert("x+y = "+s);  
}

MbZoomtoXy.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.context.RequestContext;
@ManagedBean
@SessionScoped
public class MbZoomtoXy {
    private MbZoomtoXy() {
        }
    public int getX() {
        return x;
    }
    public void setX(int x) {
        this.x = x;
    }
    public int getY() {
        return y;
    }
    public void setY(int y) {
        this.y = y;
    }
       int x,y;
    public MbZoomtoXy(int x, int y) {
        this.x = x;
        this.y = y;
    }
     //Here I don t know how to call zoomToXy(x,y) function of map.js
    public void save(){
        RequestContext requestContext = RequestContext.getCurrentInstance();  
        requestContext.execute("...");
    }
}

您需要将map.js放在src/main/webapp/resources/js/map.js中，并包含在index.html中

index . html

<?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">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Facelet Title</title>
    <h:outputScript library="js" name="map.js" />
</h:head>
<h:body>
    <h:form id="form">
        <h:panelGrid columns="2" cellpadding="5">
            <p:outputLabel for="x-coor" value="X : " />
            <p:inputText id="x-coor" value="#{MbZoomtoXy.x}" required="true"/>
            <p:outputLabel for="y-coor" value="Y : " />
            <p:inputText id="y-coor" value="#{MbZoomtoXy.y}" required="true"/>
        </h:panelGrid>
        <p:commandButton value="Save" actionListener="#{MbZoomtoXy.save}"/>
    </h:form>
</h:body>
</html>

MbZoomtoXy.java

package com.test;
import org.primefaces.context.RequestContext;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.component.html.HtmlSelectOneMenu;
import javax.faces.context.FacesContext;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.ActionEvent;
import javax.faces.event.AjaxBehaviorEvent;
import java.io.Serializable;
import java.util.Date;

@ManagedBean(name = "MbZoomtoXy")
@SessionScoped
public class MbZoomtoXy implements Serializable {
    public MbZoomtoXy() {
    }
    public int getX() {
        return x;
    }
    public void setX(int x) {
        this.x = x;
    }
    public int getY() {
        return y;
    }
    public void setY(int y) {
        this.y = y;
    }
    int x,y;
    public MbZoomtoXy(int x, int y) {
        this.x = x;
        this.y = y;
    }
    //Here I don t know how to call zoomToXy(x,y) function of map.js
    public void save(){
        RequestContext requestContext = RequestContext.getCurrentInstance();
        requestContext.execute(String.format("zoomToXy(%1$d, %2$d)", x, y));
    }
}

相关内容

最新更新

热门标签：