xpages поиск по модулю внутри всплывающего окна

С вашей помощью я создал Xpage с FTsearch и экспортировал в функции Excel. Проблема заключается в том, что поиск выполняется на основе нескольких полей ввода (скажем,> 10), xpage имеет большой текст + учитывая тот факт, что есть также панель просмотра, где я перечисляю результаты поиска после нажатия кнопки «Поиск».

Это основная причина, по которой я пытался создать (после нажатия link to Search&Export) всплывающее диалоговое окно (которое, я думаю, содержит xpage), и это всплывающее диалоговое окно, содержащее все мои поля ввода + 2 уже созданные кнопки : поиск и экспорт. Итак, после того, как я нажму кнопку «Поиск» во всплывающем окне => всплывающее диалоговое окно закрывается, и результаты поиска отображаются на панели просмотра, то же самое для кнопки Excel: всплывающее окно закрывается, и я открываю Excel файл.

В настоящее время, когда я нажимаю link to Search&Export, я «вижу» всю панель ввода для поиска (все поля ввода + две кнопки) и, конечно же, панель просмотра. Это работает, но я думаю, что всплывающее диалоговое окно будет более удобным для пользователя и даст больше места для xpage.

Что я хочу сделать: переместить все поля ввода + кнопки search и export to excel в диалоговое окно, которое должно появиться при нажатии на ссылку.

Как создать диалоговое окно, которое открывается при нажатии на ссылку и содержит эту панель ниже (где находятся все поля ввода и кнопка для FTsearch)

Мой код для панели, которая содержит поля ввода и кнопку поиска и экспорта:

<xp:panel style="background-color:rgb(242,242,242);border-color:rgb(168,168,168);border-width:thin;border-style:solid">
    <xp:table><xp:tr><xp:td><xp:label value="Din" id="label3" style="font-size:8pt;font-family:Verdana;color:rgb(128,0,0)">
                </xp:label></xp:td>
            <xp:td><xp:inputText id="inputText1" value="#{sessionScope.searchDate1}">
                    // some extra code
                </xp:label></xp:td>
            <xp:td></xp:td>
            <xp:td>
                <xp:inputText id="inputText2" value="#{sessionScope.searchDate2}">
                // some extra code
                </xp:inputText></xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label value="Author" id="label1"
                    style="font-size:8pt;font-family:Verdana;color:rgb(128,0,0)">
                </xp:label>
                </xp:td>
            <xp:td>
                <xp:inputText id="searchAutor"
                    value="#{sessionScope.searchAutor}">
                </xp:inputText>
            </xp:td>
            <xp:td></xp:td>
            <xp:td></xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td style="font-family:Verdana;font-size:8pt">
                <xp:label id="label2" value="Titlu carte"
                    style="color:rgb(128,0,0);font-size:8pt;font-family:Verdana">
                </xp:label>
            </xp:td>
            <xp:td>
                <xp:inputText id="searchTitlu"
                    value="#{sessionScope.searchTitlu}">
                </xp:inputText>
            </xp:td>
            <xp:td></xp:td>
            <xp:td></xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:button value="Search" id="button6"
                    styleClass="lotusFormButton">
                    <xp:eventHandler event="onclick" submit="true"
                        refreshMode="complete" immediate="false" save="true"
                        id="eventHandler1">
                    </xp:eventHandler>
                </xp:button>
            </xp:td>
            <xp:td>
                <xp:text escape="true" id="computedField1"
                    rendered="false">
                    <xp:this.value><![CDATA[#{javascript:return "Query = " + sessionScope.queryString}]]></xp:this.value>
                </xp:text>
            </xp:td>
            <xp:td></xp:td>
            <xp:td>
                <xp:button value="Export" id="button1"
                    styleClass="lotusFormButton" style="float:right;">
                    <xp:eventHandler event="onclick" submit="true"
                        refreshMode="complete" immediate="false" save="true"
                        id="eventHandler2">
                        <xp:this.action>
                            <xp:openPage
                                name="/export_hidden.xsp">
                            </xp:openPage>
                        </xp:this.action>
                    </xp:eventHandler>
                </xp:button></xp:td>
        </xp:tr>
    </xp:table></xp:panel>

Я ценю ваше время.


person Florin M.    schedule 28.05.2014    source источник
comment
Каков ваш конкретный вопрос? Как создать диалог?   -  person Per Henrik Lausten    schedule 28.05.2014
comment
@PerHenrikLausten Как создать диалоговое окно, содержащее все мои входные данные, и отображать его при нажатии на ссылку   -  person Florin M.    schedule 28.05.2014
comment
Поместите свой диалог в настраиваемый элемент управления, создайте настраиваемые свойства и передайте их элементу управления.   -  person Steve Zavocki    schedule 28.05.2014
comment
Не могли бы вы привести пример? Я уже обновил свой вопрос с уже созданным кодом для пользовательского элемента управления, который содержит поля ввода и кнопки для поиска FT.   -  person Florin M.    schedule 29.05.2014


Ответы (1)


Вот пример диалога, в который вы можете добавить свои поля:

<xe:dialog id="exampleDialog" title="Example dialog">
    <xp:div styleClass="lotusDialogContent">
        <!-- Add your table here -->
    </xp:div>
    <div class="lotusDialogFooter">
        <!-- 
          add your buttons here
        -->

        <!-- example cancel link -->
        <xp:link id="link1" text="Cancel" styleClass="lotusAction">
            <xp:eventHandler event="onclick" submit="false">
                <xp:this.script><![CDATA[XSP.closeDialog('#{id:exampleDialog}')]]></xp:this.script>
            </xp:eventHandler>
        </xp:link>
    </div>
</xe:dialog>

Вы открываете диалоговое окно с помощью JS на стороне сервера следующим образом:

getComponent("exampleDialog").show();

Или вот так, используя JS на стороне клиента:

XSP.openDialog("#{id:exampleDialog}")

Вы также можете полностью стилизовать содержимое и область панели кнопок, используя библиотеку расширений. Тогда ваш диалог будет выглядеть так:

<xe:dialog id="exampleDialog">
    <xe:dialogContent id="dialogContent1">
        <!-- content here -->
    </xe:dialogContent>
    <xe:dialogButtonBar id="dialogButtonBar1">
        <!-- buttons here -->
    </xe:dialogButtonBar>
</xe:dialog>

Вот пример кнопки, которую вы можете использовать внутри диалогового окна, чтобы закрыть диалоговое окно и обновить панель просмотра на том же XPage (при условии, что панель просмотра называется «viewpanel1»):

<xp:button value="Search" id="searchButton">
    <xp:eventHandler event="onclick" submit="true" refreshMode="partial" immediate="false" save="false" refreshId="viewpanel1">
        <xp:this.action><![CDATA[#{javascript:
            getComponent('exampleDialog').hide()
        }]]></xp:this.action>
    </xp:eventHandler>
</xp:button>

Вы можете использовать XSP.addOnLoad(), чтобы открыть диалоговое окно после загрузки страницы. Добавьте это в свой XPage:

<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[
        XSP.addOnLoad(function(){
            XSP.openDialog("#{id:exampleDialog}")
        });
    ]]></xp:this.value>
</xp:scriptBlock>
person Per Henrik Lausten    schedule 01.06.2014
comment
Спасибо. ‹xe:dialog› - должен быть объявлен в источнике XPage, где я показываю его по ссылке? - person Florin M.; 02.06.2014
comment
Или в пользовательском элементе управления, который вы добавляете в файл XPage. - person Per Henrik Lausten; 02.06.2014
comment
Я получаю элемент xe для xe: диалог не связан. - person Florin M.; 02.06.2014
comment
Да, потому что вы не перетаскивали элемент управления диалоговым окном. Таким образом, исходный XML XPages не знает, что такое xe. Добавьте xmlns:xe=ibm.com/xsp/coreex в тег xp:view (или перетащите элемент управления библиотеки расширений на свой XPage) - person Per Henrik Lausten; 02.06.2014
comment
Спасибо за терпеливость. Код моей ссылки:facesContext.getExternalContext().redirect(server/XB.nsf/search.xsp); getComponent(примерDialog).show(); ---› Я перехожу на эту xpage, но диалоговое окно не отображается. - person Florin M.; 02.06.2014
comment
Зачем переходить на другую xpage и открывать там диалог? Почему бы не открыть диалог прямо на странице, с которой вы начинаете? - person Per Henrik Lausten; 02.06.2014
comment
Диалог, который я хочу, предназначен для модуля FTsearch. Итак, я хочу сначала перейти на эту xpage, где существует панель просмотра результатов FTsearch, а затем открыть диалоговое окно. После отправки полей ввода я хочу, чтобы диалоговое окно было закрыто, а результаты поиска отображались на этой панели просмотра из search.xsp. - person Florin M.; 02.06.2014
comment
Мой ответ дает вам код, необходимый для создания диалога и открытия диалога. Я не показывал вам, как закрыть диалоговое окно, так как ваша кнопка выполняет перенаправление на новую страницу. Вы должны иметь возможность использовать мой ответ, чтобы открыть диалоговое окно с вашей страницы xpage. Удачи. - person Per Henrik Lausten; 02.06.2014
comment
Хорошо, спасибо за ваши предложения, поскольку мой заглавный вопрос ясен, я подожду других ответов, прежде чем принять окончательный ответ. - person Florin M.; 02.06.2014
comment
Теперь я понимаю. На том же XPage вы хотите иметь возможность открыть диалоговое окно, ввести входные значения и нажать кнопку внутри диалогового окна, которое затем должно закрыть диалоговое окно и обновить ваш вид. Позвольте мне обновить мой вопрос - person Per Henrik Lausten; 02.06.2014
comment
Да, точно. Причина, по которой я сначала перенаправляю FaceContext, заключается в том, что я хочу перейти к этим XPages (потому что, когда я нажимаю эту ссылку, я как пользователь могу оказаться на других Xpages в приложении.) и сразу же открыть диалоговое окно для FTSearch. - person Florin M.; 02.06.2014
comment
Давайте продолжим обсуждение в чате. - person Florin M.; 02.06.2014