af:panelTabbed - 在选项卡切换时显示弹出窗口的问题

Posted 2023-03-21

【中文标题】af:panelTabbed - 在选项卡切换时显示弹出窗口的问题

【英文标题】：af:panelTabbed - Issue with displaying a popup on tab switching

【发布时间】：2013-10-12 21:14:55

【问题描述】：

我在使用 clientListener 处理公开事件时遇到问题。每当用户离开 panelTabbed 中的选项卡时，我都会尝试显示确定/取消弹出窗口。

以下是代码：（这与 Oracle ADF 代码角提供的完全相同的代码）

     <af:resource type="javascript">
    function alertTabSwitch(disclosureEvent)
        var tab = disclosureEvent.getSource();           
        if(tab.getDisclosed()==false)

           var popup = tab.findComponent('p1');
           popup.show();
           popup.setProperty("tabToOpen",tab.
           disclosureEvent.cancel();
                   
    

    function handlePopupOkCancel(actionEvent)      
        var popupButton = actionEvent.getSource();
        var butPressed = popupButton.getProperty('popupAction'); 
        var dialog = popupButton.getParent();
        var popup  = dialog.getParent();
        if(butPressed == 'OK')             
            var tabToFindAndFocusOnString = popup.getProperty("tabToOpen");
            if(tabToFindAndFocusOnString.length > 0)
              var tab = AdfPage.PAGE.findComponentByAbsoluteId(tabToFindAndFocusOnString);
              tab.setDisclosed(true);
              actionEvent.cancel();  
              popup.hide();       
            
        
        else
            //close popup and stay on page
            actionEvent.cancel();    
            popup.hide();               
        
    
</af:resource>





<af:panelStretchLayout id="psl1">
    <f:facet name="center">
        <af:panelTabbed id="pt1">
            <af:showDetailItem text="TAB 1" id="sdi1" disclosed="true" stretchChildren="first"
                               clientComponent="false">

                               First Tab
                <af:clientListener method="alertTabSwitch" type="disclosure"/>
               </af:showDetailItem>
            <af:showDetailItem text="TAB 2" id="sdi2" stretchChildren="first" clientComponent="false">
            Second Tab
            <af:clientListener method="alertTabSwitch" type="disclosure"/>
               </af:showDetailItem>
        </af:panelTabbed>
        <!-- id="af_one_column_stretched"   -->
    </f:facet>
    <f:facet name="start">
        <af:popup childCreation="deferred" autoCancel="disabled" id="p1" clientComponent="true"
                  contentDelivery="immediate">
            <af:dialog id="d1" title="Tab Switch Alert" type="none">
                <f:facet name="buttonBar">
                    <af:panelGroupLayout id="g1">
                        <af:commandButton text="OK" id="cb1" partialSubmit="true">
                            <af:clientAttribute name="popupAction" value="OK"/>
                            <af:clientListener method="handlePopupOkCancel" type="action"/>
                        </af:commandButton>
                        <af:commandButton text="CANCEL" id="cb2" partialSubmit="true">
                             <af:clientAttribute name="popupAction" value="CANCEL"/>
                            <af:clientListener method="handlePopupOkCancel" type="action"/>
                        </af:commandButton>
                    </af:panelGroupLayout>
                </f:facet>
                <af:outputText value="Do you really want to switch tabs?" id="ot1"
                               inlineStyle="font-size:medium; color:Red;"/>
            </af:dialog>
            <af:clientAttribute name="tabToOpen" value=""/>
        </af:popup>
    </f:facet>
</af:panelStretchLayout>

一切都在客户端完成。当我单击一个选项卡时，首先会为所选选项卡触发“取消选择”事件，并且该选项卡的公开值更改为 false。更改值后，将调用侦听器。 因此，在 javascript 中，单击 OK 按钮后会再次显示相同的选项卡。 如果在调用 af:clientListener 之前值没有改变，就不会发生这个问题。

谁能帮我解决这个问题？

我在这里更彻底地描述了这个问题。 https://forums.oracle.com/message/11227277#11227277

问候， 纳瓦尼特

【问题讨论】：

缺少某些代码，例如 popup.setProperty("tabToOpen",tab.

【参考方案1】：

将标签更改为以下，它会工作，这是针对 11.1.1.7 测试的

<af:resource type="javascript">

var theTabToClose;
var theTabToOpen;
function alertTabSwitch(disclosureEvent)
    var tab = disclosureEvent.getSource();   //This is the tab to close
    if(tab.getDisclosed()==false)
       theTabToClose = tab;
       theTabToOpen = disclosureEvent.getDisclosureCounterpart();
       var popup = tab.findComponent('p1');
       disclosureEvent.cancel();
       popup.show();
                


function handlePopupOkCancel(actionEvent)      
    var popupButton = actionEvent.getSource();
    var butPressed = popupButton.getProperty('popupAction'); 
    var dialog = popupButton.getParent();
    var popup  = dialog.getParent();

    if(butPressed == 'OK')     
        theTabToOpen.setDisclosed(true);
    else
        theTabToClose.setDisclosed(true);
    
        actionEvent.cancel();
        popup.hide();

</af:resource>