Xpage und Dialogbox

[pippo]

Hallo,
schlage mich schon seit Stunden mit einer Dialogbox herum 

habe dieses Beispiel gefunden:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="true"
   dojoTheme="true">
       <xp:this.resources>
        <xp:dojoModule name="dijit.Dialog"></xp:dojoModule>
    </xp:this.resources>
       
    <xp:button value="Dialog Popup" id="button2">
        <xp:eventHandler event="onclick" submit="false">
           <xp:this.script><![CDATA[dijit.byId("myDialogContainer").show()

]]></xp:this.script>
        </xp:eventHandler>
    </xp:button>
   
    <div id="myDialogContainer" dojoType="dijit.Dialog"
        style="display:none">
        <xp:panel style="width:90%;height:auto">
           Hier soll eine neue Anmeldung stattfidnen:
           <xp:br></xp:br>
           <xp:br></xp:br>
           <xp:br></xp:br>
           <xp:table>
              <xp:tr>
                 <xp:td style="width:15px"></xp:td>
                 <xp:td style="width:20%"></xp:td>
                 <xp:td style="width:24.5%"></xp:td>
                 <xp:td style="width:24.5%"></xp:td>
                 <xp:td style="width:100%"></xp:td>
                 <xp:td style="width:15px"></xp:td>
              </xp:tr>
              <xp:tr>
                 <xp:td></xp:td>
                 <xp:td>Wer soll angemeldet werden?</xp:td>
                 <xp:td>
                    <xp:comboBox id="comboBox1">
                       <xp:selectItem itemLabel="Sich selbst"></xp:selectItem>
                       <xp:selectItem
                          itemLabel="Familienmitglied">
                       </xp:selectItem>
                       <xp:selectItem itemLabel="Nichtmitglied"></xp:selectItem>
                       <xp:selectItem
                          itemLabel="Anderes Mitglied">
                       </xp:selectItem>
                    </xp:comboBox>
                 </xp:td>
                 <xp:td></xp:td>
                 <xp:td></xp:td>
                 <xp:td></xp:td>
              </xp:tr>
              <xp:tr>
                 <xp:td></xp:td>
                 <xp:td>terst</xp:td>
                 <xp:td>
                    <xp:inputText id="inputText1"></xp:inputText>
                 </xp:td>
                 <xp:td></xp:td>
                 <xp:td></xp:td>
                 <xp:td></xp:td>
              </xp:tr>
           </xp:table>
        </xp:panel>
    </div>
</xp:view>



möchte nun in der Dialogbox eine OK und ein Abbrechen machen
nach dem Klick auf OK möchte ich andere Felder der Dialogbox auslesen

kann mir bitte jemand einen Tipp geben, wie man sowas macht??


Beste Grüße

[Jens Winkelmann]

Bei Chancel muss man einfach wieder hide machen

Bei OK kann man unterschiedliche Techniken einsetzen

A) Du könntest die Werte einfach per CSJS auslesen und verarbeiten

B) Du schreibst die Dialogwerte in View-Scope Variablen und holst dir die Werte via SSJS und verabeitest sie anschließend.

Im Fall B musst du die Dialog-Controls an View-Scope Variablen binden.

Da gibt es jedoch ein Problem im Zusammenspiel mit XPage und Dojo.

Einfach gesagt: Dojo kopiert beim Laden der Seite die Dialogbox außerhalb des XPage Form Tags.
Hierdurch funktionieren die Controls in der Dialogbox nicht.

Da gibt es aber folgenden Trick:

http://xpagesblog.com/xpages-blog/2010/4/10/xpages-compatible-dojo-dialog-reusable-component.html

Diesen Trick benötigst du nicht, wenn du die Extension Library verwendest.

Nachfolgend habe ich das Beispiel mit Technik B erweitert:

Code

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="true"
   dojoTheme="true"><xp:scriptBlock id="scriptBlock1">
                    	<xp:this.value><![CDATA[dojo.provide('com.ZetaOne.widget.Dialog');
dojo.require('dijit.Dialog');
(function(){
        dojo.declare("com.ZetaOne.widget.Dialog", dijit.Dialog, {
                postCreate: function(){
                    this.inherited(arguments);
                    dojo.query('form', dojo.body())[0].appendChild(this.domNode);
                },
                _setup: function() {
                    this.inherited(arguments);
                    if (this.domNode.parentNode.nodeName.toLowerCase() == 'body')
                        dojo.query('form', dojo.body())[0].appendChild(this.domNode);                
                }                
        })
}());]]></xp:this.value>
                    </xp:scriptBlock>
       
    <xp:this.resources>
    	<xp:dojoModule name="dijit.Dialog"></xp:dojoModule>
    </xp:this.resources>
    <xp:button
    	value="Dialog Popup"
    	id="button2">
    	<xp:eventHandler
    		event="onclick"
    		submit="false">
    		<xp:this.script><![CDATA[dijit.byId("myDialogContainer").show()

]]></xp:this.script>
    	</xp:eventHandler>
    </xp:button>
    <div id="myDialogContainer" dojoType="com.ZetaOne.widget.Dialog"
        style="display:none">
        <xp:panel style="width:90%;height:auto">
           Hier soll eine neue Anmeldung stattfidnen:
           <xp:br></xp:br>
           <xp:br></xp:br>
           <xp:br></xp:br>
           <xp:table>
              <xp:tr>
                 <xp:td style="width:15px"></xp:td>
                 <xp:td style="width:20%"></xp:td>
                 <xp:td style="width:24.5%"></xp:td>
                 <xp:td style="width:24.5%"></xp:td>
                 <xp:td style="width:100%"></xp:td>
                 <xp:td style="width:15px"></xp:td>
              </xp:tr>
              <xp:tr>
                 <xp:td></xp:td>
                 <xp:td>Wer soll angemeldet werden?</xp:td>
                 <xp:td>
                    
                    <xp:comboBox id="comboBox1" value="#{viewScope.V_Familienmitglied}">
                       <xp:selectItem itemLabel="Sich selbst"></xp:selectItem>
                       <xp:selectItem
                          itemLabel="Familienmitglied">
                       </xp:selectItem>
                       <xp:selectItem itemLabel="Nichtmitglied"></xp:selectItem>
                       <xp:selectItem
                          itemLabel="Anderes Mitglied">
                       </xp:selectItem>
                    </xp:comboBox>
                 </xp:td>
                 <xp:td></xp:td>
                 <xp:td></xp:td>
                 <xp:td></xp:td>
              </xp:tr>
              <xp:tr>
                 <xp:td></xp:td>
                 <xp:td>terst</xp:td>
                 <xp:td>
                    <xp:inputText id="inputText1" value="#{viewScope.V_Terst}"></xp:inputText>
                 </xp:td>
                 <xp:td></xp:td>
                 <xp:td></xp:td>
                 <xp:td></xp:td>
              </xp:tr>
           </xp:table>
           
             <xp:br></xp:br>
             <xp:button
             	value="OK"
             	id="buttonOK">
             <xp:eventHandler
             	event="onclick"
             	submit="true"
             	refreshMode="complete" disableValidators="true">
             	<xp:this.action><![CDATA[#{javascript:var inputFamilienmitglied:com.ibm.xsp.component.xp.XspInputText = getComponent("inputFamilienmitglied");
var inputTerst:com.ibm.xsp.component.xp.XspInputText = getComponent("inputTerst");


inputFamilienmitglied.setValue(viewScope.get("V_Familienmitglied"));
inputTerst.setValue(viewScope.get("V_Terst"));

}]]></xp:this.action>
             </xp:eventHandler></xp:button>
             <xp:button
             	value="Cancel"
             	id="buttonCancel">
             <xp:eventHandler
             	event="onclick"
             	submit="false">
             	<xp:this.script><![CDATA[dijit.byId("myDialogContainer").hide();
return false]]></xp:this.script>
             </xp:eventHandler></xp:button>
             <xp:br></xp:br>
               
        </xp:panel>
    </div>
    
    
    <xp:br></xp:br>
    
    <xp:table>
    	<xp:tr>
    		<xp:td>
    			<xp:label
    				value="Familienmitglied"
    				id="label1">
    			</xp:label></xp:td>
    		<xp:td><xp:inputText id="inputFamilienmitglied"></xp:inputText></xp:td>
    	</xp:tr>
    	<xp:tr>
    		<xp:td>
    			<xp:label
    				value="terst"
    				id="label2">
    			</xp:label></xp:td>
    		<xp:td><xp:inputText id="inputTerst"></xp:inputText></xp:td>
    	</xp:tr>
    </xp:table>
    <xp:br></xp:br>
    </xp:view>