Question

我有3个文件：

index.xhtml：我使用JSF，用提交按钮创建一个2字段形式（x：int，y：int）。
map.js：包含Js函数。
MbZoomtoXy.java：调用之前的Js函数。

我尝试做的是当我在表单中输入x和y时。提交按钮应该给我＆＃34;警告＆＃34; of 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("...");

    }

}

Answer 1

您需要将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));
    }
}

从Java Bean调用javascript文件

1 个答案: