1

xhtmlの仕組みについてお聞きしたいです。

これは私の tablero.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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value="Dak's Hangman"></h:outputText>
        </ui:define>
        <ui:define name="body">
            <h:panelGroup id="messagePanel" layout="block">
                <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
            </h:panelGroup>
            <h:head  id="demo" >Opportunities: </h:head>            
            <h:outputText value="#{partidaController.getRemainingOp()}"/>    
            <br/>
            <h:outputText value="#{partidaController.getNombreJugador()}"/>                   
            <br/>
            <c:forEach var="x" items="#{partidaController.getLetrasColocadas()}" >
                <h:inputText disabled="true" size="1" value="${x}"/>
            </c:forEach>
            <br/>
            <h:panelGrid>
                <h:form>
                    <p:commandButton id="b1" style="height: 30px; width: 30px;" value="a" action="#{turnoController.createTurno('a')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b2" style="height: 30px; width: 30px;" value="b" action="#{turnoController.createTurno('b')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b3" style="height: 30px; width: 30px;" value="c" action="#{turnoController.createTurno('c')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b4" style="height: 30px; width: 30px;" value="d" action="#{turnoController.createTurno('d')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b5" style="height: 30px; width: 30px;" value="e" action="#{turnoController.createTurno('e')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b6" style="height: 30px; width: 30px;" value="f" action="#{turnoController.createTurno('f')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b7" style="height: 30px; width: 30px;" value="g" action="#{turnoController.createTurno('g')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b8" style="height: 30px; width: 30px;" value="h" action="#{turnoController.createTurno('h')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b9" style="height: 30px; width: 30px;" value="i" action="#{turnoController.createTurno('i')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b10" style="height: 30px; width: 30px;" value="j" action="#{turnoController.createTurno('j')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b11" style="height: 30px; width: 30px;" value="k" action="#{turnoController.createTurno('k')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b12" style="height: 30px; width: 30px;" value="l" action="#{turnoController.createTurno('l')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b13" style="height: 30px; width: 30px;" value="m" action="#{turnoController.createTurno('m')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b14" style="height: 30px; width: 30px;" value="n" action="#{turnoController.createTurno('n')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b15" style="height: 30px; width: 30px;" value="o" action="#{turnoController.createTurno('o')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b16" style="height: 30px; width: 30px;" value="p" action="#{turnoController.createTurno('p')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b17" style="height: 30px; width: 30px;" value="q" action="#{turnoController.createTurno('q')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b18" style="height: 30px; width: 30px;" value="r" action="#{turnoController.createTurno('r')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b19" style="height: 30px; width: 30px;" value="s" action="#{turnoController.createTurno('s')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b20" style="height: 30px; width: 30px;" value="t" action="#{turnoController.createTurno('t')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b21" style="height: 30px; width: 30px;" value="u" action="#{turnoController.createTurno('u')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b22" style="height: 30px; width: 30px;" value="v" action="#{turnoController.createTurno('v')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b23" style="height: 30px; width: 30px;" value="w" action="#{turnoController.createTurno('w')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b24" style="height: 30px; width: 30px;" value="x" action="#{turnoController.createTurno('x')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b25" style="height: 30px; width: 30px;" value="y" action="#{turnoController.createTurno('y')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <p:commandButton id="b26" style="height: 30px; width: 30px;" value="z" action="#{turnoController.createTurno('z')}" onclick="document.getElementById(this.id).disabled=true;"/>
                    <br />
                </h:form>
            <h:graphicImage value="../resources/images/hangman.jpg" width="480" height="400" />
            <h:link outcome="/index" value="#{bundle.CreateJugadorIndexLink}"/>        
        </h:panelGrid>
        </ui:define>
    </ui:composition>
</html>

これは、buttonCommand をクリックするたびに呼び出す Bean です。

public String createTurno(String s) {
    try {
        Map<String, Object> sesionMap = FacesContext.getCurrentInstance().getExternalContext().getSessionMap();
        Integer id = (Integer) sesionMap.get("id_partida");

        Partida p = new Partida();
        p.setIdPartida(id);
        current= new Turno();
        current.setIdPartida(p);
        current.setLetraTurno(s);
        ejbFacade.create(current);
        return "tablero";
    } catch (Exception e) {
        JsfUtil.addErrorMessage(e, ResourceBundle.getBundle("/Bundle").getString("PersistenceErrorOccured"));
        return null;
    }
}

これは、アイテムを更新するために呼び出したいメソッドです...

public List getLetrasColocadas()
{
    String lc = getFacade().letrasColocadasById(current.getIdPartida());

    ArrayList<String> lista = new ArrayList<String>();
    int i;
    for (i=0; i<lc.length(); i++){
        String h = "" + lc.charAt(i) + "";
        lista.add(h);
    }
    return lista;
}

partidaController.getLetrasColocadas() は正常に動作します (私はそれをデバッグしましたが、それは私が望むことを行います)。問題は、inputText の値が一度表示されると、コマンド ボタンをクリックしても更新されないことです。たとえば、この xhtml ファイルの名前の文字列を返す Bean を呼び出すと、値は更新されません。常に同じままです。

xhtmlについて知っておくべき魔法はありますか???

4

2 に答える 2

2

現在のコードにはいくつかの問題があります。

  1. ビューにコンポーネント<c:forEach>を追加するために使用しています。<h:inputText>今後これらのコンポーネントを ajax 操作を使用して更新すると、問題が発生します。これを解決するには、<ui:repeat>代わりに使用します。JSF2 Facelets の JSTL を参照してください...理にかなっていますか? トピックの詳細については。

  2. あなた<p:commandButton>の はサーバーに送信された後に無効になっていますが、再び有効になることはないため、1 回実行すると動作しなくなります。oncomplete="document.getElementById(this.id).disabled=false;"ajax 呼び出しの完了後に追加して有効にします。デフォルトでは、<p:commandButton>hasajaxプロパティが に設定されていることに注意してくださいtrue

  3. お気づきではないかもしれませんがgetLetrasColocadas、ページ内でメソッドが複数回呼び出されています。この動作については、JSF が getters を複数回呼び出す理由 で詳しく説明されています。これを解決するには?ビジネス ロジックをこのメソッドから別のメソッドに移動loadLetrasColocadasし、 の最後でこれを呼び出しcreateTurnoます。このようにして、getter を活用してシンプルにします (この変数がマネージド Bean のフィールドになるとreturn lista仮定します)。lista

さて、現在の設計に関するいくつかの警告

  1. <h:form>要素のみが含まれて<p:commandButton>いるため、フォームデータをサーバーに送信するときにコンポーネントは何も送信されません。たとえば、上記の情報サーバーに送信されません。UIInput<h:inputText>

  2. "tablero"常にメソッドに戻るcreateTurnoため、ajax 呼び出しを実行することはなく、ページ全体が静かにリロードされます(舞台裏では、応答は同じビューへの転送であるため、ブラウザーからの完全なリダイレクトの効果は得られません)。createTurnoをa からに変更することをお勧めしStringますvoid

@ViewScopedまた、ajax 呼び出しのみを使用するため、マネージド Bean を少なくともに変更することをお勧めします。マネージド Bean スコープの詳細: Communication in JSF 2: BalusC からのマネージド Bean スコープ (JSF および Java EE エキスパート)。

于 2013-06-03T01:10:39.467 に答える
1

うーん...コマンド ボタンの onclick プロパティが項目の値の更新と互換性がないことを発見しました...

于 2013-06-02T23:01:46.733 に答える