2012-12-12 36 views
1

Richfaces 4.2.2Richfaces 4彈出編輯器困境

我在rich:datatable中添加了一個按鈕,導致出現rich:popup面板。彈出窗口包含一個<rich:editor/>和2 <h:commandButton/> s

datatable中的按鈕調用backing bean中的方法來設置要編輯的字符串,並將編輯器映射到此屬性 - 我知道該按鈕正在設置後臺bean中的字符串。

我還添加一個<h:outputText/>到彈出面板以顯示字符串的要被編輯

值的問題是:

  1. 當編輯器顯示,編輯面板不能被使用,直到源按鈕已被按下幾次以使其進入和退出源模式
  2. 在編輯器中不顯示backing bean屬性的值
  3. 將commandButton映射到ba中的方法盛泰豆不調用方法
  4. 我們將outputText顯示正確的價值第一次,但如果在數據表中不同行使用

它不會在彈出的面板中的後續用途改變我與嘗試彈出並以相同的數據表並在分開的形式,並嘗試內部和彈出面板

這裏外側的單獨的表格是頁

<h:html xmlns="http://www.w3c.org/1999/xhtml" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:a4j="http://richfaces.org/a4j" 
     xmlns:rich="http://richfaces.org/rich"> 

. 
. 
. 
    <h:form id="blogForm" prependId="false"> 

     <rich:popupPanel id="mp" minHeight="600" minWidth="450" height="600" width="800" resizeable="true"> 
     <f:facet name="header"> 
      <h:outputText value="Modal Panel Title" /> 
     </f:facet> 

     <rich:editor id="editor" toolbar="full" value="#{blogBean.currentEntry}" skin="office2003" viewMode="visual"> 
      <f:param name="auto_focus" value="editor" /> 
     </rich:editor> 

     <h:outputText escape="false" value=")))#{blogBean.currentEntry}(((" /> 

     <h:commandButton value="Save" action="#{blogBean.save}"> 
      <rich:componentControl target="mp" operation="hide" /> 
     </h:commandButton> 
     <h:commandButton value="Cancel" > 
      <rich:componentControl target="mp" operation="hide" /> 
     </h:commandButton> 
     </rich:popupPanel> 


    <a4j:commandButton value="Add new post" rendered="true" > 
     <rich:componentControl target="mp" operation="show" /> 
    </a4j:commandButton> 

    <h:panelGrid columns="1"> 
     <a4j:outputPanel id="panel" layout="block">     
     <rich:dataTable value="#{blogBean.entries}" columns="1" var="entry" rows="20" id="repeat" > 
       <rich:column width="800"> 
        <rich:panel> 
         <f:facet name="header"> 
          <a4j:commandButton value="Edit" rendered="true" oncomplete="#{rich:component('mp')}.show()"> 
          <f:setPropertyActionListener value="#{entry}" target="#{blogBean.currentEntry}" /> 
          </a4j:commandButton> 
         </f:facet> 
         <h:outputText escape="false" value="#{entry}" /> 
        </rich:panel> 
      </rich:column> 
     </rich:dataTable>    
     </a4j:outputPanel>    
    </h:panelGrid> 
    </h:form> 
    </h:body> 

</h:html> 

回答

0

(2)和(4)是最有可能是因爲你不是 實際上通過ajax更新它們的值。

  1. 添加id屬性您<h:outputText/><rich:editor/>,幷包括命令按鈕,像這樣在render屬性這些ID:

    <a4j:commandButton value="Edit" render="editorId,outputTextId" rendered="true" oncomplete="#{rich:component('mp')}.show()"> 
        <f:setPropertyActionListener value="#{entry}" target="#{blogBean.currentEntry}" /> 
        </a4j:commandButton> 
    

    也擺脫標記你在<h:outputText/>和刪除escape屬性以確保不會導致編輯器窒息。

  2. 將您的託管bean設置爲@ViewScoped,以確保安心。

  3. 您在彈出窗口中使用了<h:commandButton/>。除非這是由設計決定的,否則您在此處的選擇會適得其反,因爲此命令按鈕將觸發完整的生命週期請求/回發,並且您嵌入的所有JavaScript都沒有實際意義。將其更改爲<a4j:commandButton/> s。我建議您從該表單中刪除彈出窗口,並從長遠來看,在的彈出窗口中放置一個表格。如果這不會改變事情,請在此處發佈您的修改,讓我們確切地看到您如何做。

+0

非常感謝@kolossus,這並與編輯的伎倆,現在顯示的值,並在編輯模式一出現。 – MGB

+0

有趣的是,我現在已經在三種不同的瀏覽器中嘗試過這種方式,並且有三種不同的效果。 Opera按預期工作,主面板被渲染,屏幕中間彈出對話框,並顯示編輯器中的值。對於Chrome主面板並彈出呈現OK,但該值未在編輯器中顯示。 IE9的行爲應該像它應該的那樣,只不過它在屏幕頂部顯示空白麪板輪廓,並且當彈出窗口被渲染時它低於灰色區域 – MGB

+0

@MGB,IE不算作瀏覽器:)。在Chrome中,你可以檢查JavaScript控制檯是否有任何警告,並且服務器實際上是否將響應標記中的值發送回來? – kolossus

-1

要 例固定點無(2)使用domElementAttachment =「父」:

+0

謝謝勝利 - 我會試一試 – MGB