【问题标题】:XPages getComponent() doesn't work correctlyXPages getComponent() 无法正常工作
【发布时间】:2018-01-18 11:54:37
【问题描述】:

我有一个 XPage,它使用 JQuery 对话框和客户端验证来验证用户进程的输入。问题是,当我单击“添加”按钮时,客户端验证有效,但在服务器端“无法”找到这些字段的属性。当用户单击“打开对话框”按钮时,对话框会显示出来,这是我的按钮,魔法发生的地方(例如,只有一个属性):

<xp:button id="save_part_btn" value="+Add" style="float:right;">
             <xp:eventHandler event="onclick" submit="true"
                refreshMode="complete">
                <xp:this.action><![CDATA[#{javascript:
                    /*          
                    var estdoc:NotesDocument=database.getDocumentByUNID(doc_source.getDocument().getParentDocumentUNID())
                    var estPartdoc:NotesDocument=estdoc.getParentDatabase().createDocument()

                    Ignore it

                    estPartdoc.replaceItemValue('Form','Estimate_Cost_Part')
                    estPartdoc.replaceItemValue('Predoc',estdoc.getUniversalID())
                    estPartdoc.replaceItemValue('$OSN_IsSaved','1')
                    */

                    estPartdoc.replaceItemValue('TSNB_All',getComponent('input_tsnb_all').getValue())

                }]]></xp:this.action>

                        <xp:this.script><![CDATA[ 

                            var isValid = true;
                            var result = "";

                            function isStringEmpty(string2Check) 
                            {
                                return string2Check == "" || string2Check[0] == " ";
                            }

                            function isNumberCorrect(number2Check) 
                            {
                                return /^[1-9]\d*(,\d{1,3})?$/.test(number2Check.toString());
                            }


                            if(isStringEmpty(document.getElementById("#{id:input_tsnb_all}").value)) 
                            {
                                wholeValid = false;
                                result += '-The field cannot be empty\n'
                            }
                            else if(!isNumberCorrect(document.getElementById("#{id:input_tsnb_all}").value)) 
                            {
                                wholeValid = false;
                                result += '-The field is not correct\n'
                            }

                            if(!isValid)    
                            alert(result) 
                            return isValid;  

                ]]></xp:this.script>
            </xp:eventHandler>
</xp:button>

客户端验证完美运行 - 当用户输入不正确时,alert 消息会显示。但是,在服务器端找不到input_tsbn_all,无法创建具有此属性的文档。实际上确实如此,但 null 中的 input_tsbn_all 的值。有什么问题?

属性的标记是:

<xp:tr>
    <xp:td><xp:label value="All:"/></xp:td>
       <xp:td>
          <xp:inputText id="input_tsnb_all"
                            disableClientSideValidation="true"
                            styleClass="doc_field_textinput"  size="40" >
            <xp:this.converter>
                    <xp:convertNumber pattern="0.000"></xp:convertNumber>
            </xp:this.converter>
            </xp:inputText>
    </xp:td>
</xp:tr>

我的 JQuery 代码:

    var dialogAddPartDiv = $('.dialogAddPart'); 

      $('.addButton').click(function() 
      {
        dialogAddPartDiv.dialog('open');
      });

      dialogAddPartDiv.dialog(
      {
      create: function (event, ui) {


                    $(".ui-corner-all").css('border-bottom-right-radius','8px');
                    $(".ui-corner-all").css('border-bottom-left-radius','8px');
                    $(".ui-corner-all").css('border-top-right-radius','8px');
                    $(".ui-corner-all").css('border-top-left-radius','8px');

                    $(".ui-dialog").css('border-bottom-left-radius','0px');
                    $(".ui-dialog").css('border-bottom-right-radius','0px');
                    $(".ui-dialog").css('border-top-left-radius','0px');
                    $(".ui-dialog").css('border-top-right-radius','0px');

                    $('.ui-dialog-titlebar-close').css('margin', '-25px -20px 0px 0px').css('border', 'solid 2px').css('border-radius', '15px').css('border-color', '#05788d');
                    $('.ui-dialog-titlebar-close').css('width', '25px').css('height', '25px');
                },

        autoOpen: false,
        modal: true,
        beforeClose : function(event) 
        {
            if(!confirm("This won't be saved. Continue?"))
            {
            return false;
            }
            else 
            {

            }
        },
        width:600,
        resizable: false
      });
document.getElementsByClassName('ui-dialog-titlebar-close')[0].setAttribute('title', 'Close it?');

隐藏的 div 只是在页面上声明如下:&lt;xp:div styleClass="dialogAddPart"&gt;

【问题讨论】:

  • 组件 input_tsnb_all 的标记是什么样的?它与按钮在同一个 xpage 上吗?
  • 哦,对不起,我的错。我已经更新了问题
  • 代码看起来没问题。我认为您还需要提供显示对话框的方式以及对话框内的 xpage 部分。

标签: javascript jquery dialog xpages ssjs


【解决方案1】:

您需要将您的输入绑定到通过请求持续存在的对象属性。一个愚蠢的例子可能是利用作为 Map 的 viewScope 对象。

<xp:inputText id="input_tsnb_all" value="#{viewScope.myInput}">
    ...

您稍后将在代码中执行的操作是查找 viewScope.myInput 变量以执行您想要的操作,而不是在 ViewRoot 树中查找组件。

我对您的最佳建议是鼓励您建立一些 JSF 基础知识,以了解为什么会这样。

唉,XPages 使它成为了 JSF 最糟糕的迭代,以正确的方式学习事物。其中大部分都推动了一个底层概念——旧的 Notes 开发人员思维方式——阻止你按照预期的方式工作框架,即 MVC。

我不会告诉您避免这样做,因为您在 Internet 上看到的关于该主题的大部分内容都是老式的汤。但是,如果你在乎,哪怕是一点点,也可以拿一本不太新的 JSF 书,然后从那里学习。或者,您可能想免费查看here。当然,您需要将您阅读的内容与 XPages 中实际可用的内容进行协调,因为我很遗憾,XPages 本身就是对 JSF 的一种解释。

【讨论】:

  • #{viewScope.myInput} 在这种情况下是什么意思?我的意思是如何在服务器端访问它?
  • 使用可怕的 SSJS,您将按原样访问它:destPartdoc.replaceItemValue('TSNB_All', viewScope.myInput); 使用 Java 则不同:((UIViewRootEx) facesContext.getViewRoot()).getViewMap().get('myInput');
  • 为什么可怕?
  • 对于初学者来说,它会让人混淆服务器端可以做什么/可能做什么以及客户端可以做什么。它在语法上是 JavaScript,但在上下文中却不是。其次,它鼓励了将逻辑与表示混合的不良做法;以这种方式完成的 XPage 源代码看起来很丑陋,而且很难阅读。第三,它不是类型安全的,因此您更容易出现键入错误,并且仅在代码运行时而不是在编译时捕获它们。我会继续我的咆哮,但 cmets 的字符有限,所以我停止了
  • 嗯,有趣,即使是可怕的方式也行不通:)))))))))))))))))))))))))))) ))))))))))))
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-12-01
  • 1970-01-01
  • 2016-09-01
  • 2012-07-11
  • 2018-04-08
  • 2017-04-20
相关资源
最近更新 更多