Как интегрировать шов с JQuery - PullRequest
Новая
       10

Как интегрировать шов с JQuery

2 голосов
/ 09 июня 2009

Наш проект разработан со швом. Клиент изменяет пользовательский интерфейс и предоставляет прототип пользовательского интерфейса, используя jQuery. Теперь мы сталкиваемся с множеством проблем при интеграции jQuery в шов. Клиент хотел более богатый пользовательский интерфейс.

(1) Как мне создать модальное всплывающее окно в шве. Любой основной код ?? (2) Как я могу вызвать частичную отправку (или вызов ajax), используя jQuery? Другими словами, как мне вызвать действие шва из jQuery?

Ответы [ 5 ]

3 голосов
/ 10 декабря 2012

Ниже приведено описание методов реализации, которые я нашел полезными при расширении существующих веб-страниц Seam (2.x) + JSF с помощью виджетов пользовательского интерфейса из библиотек Javascript, таких как jQuery (я бы добавил больше гиперссылок, но я ограничился 2): 1001 *

  • Импорт библиотеки jQuery Javascript

    • Если вы, например, используете JSF (Apache MyFaces), вы можете сделать это так, как это делается в HTML внутри тега <f:verbatim>: 

      <f:verbatim>
    <source src="..path to jQuery.."></source>
</f:verbatim>

    • Или, библиотека компонентов JSF, такая как Trinidad или RichFaces, обычно имеет компонент для этой цели. См. <trh:script (Тринидад) или <aj4:loadScript> (RichFaces) .

  • Настройка текста (или поведения), отображаемого виджетами jQuery UI (диалоги, вкладки и т. Д.) Из Seam, с использованием EL

    • Можно отобразить диалог jQuery с заголовком и текстом из комплекта ресурсов Seam: 

      <div id="dialog" title="#{messages.dialogTitle}">
    <p>#{messages.dialogText}</p>
</div>

    • EL можно использовать таким образом, чтобы визуализировать любой HTML или Javascript со значениями из контекста Seam. Это включает в себя восстановление состояния на стороне клиента - см. Пример компонента вкладок пользовательского интерфейса jQuery ниже.

  • Обновление состояния в компонентах шва / Вызов действия JSF

    • Seam Remoting (http://docs.jboss.org/seam/2.2.2.Final/reference/en-US/html/remoting.html) позволяет использовать любой компонент Seam непосредственно в Javascript, как если бы это был объект Javascript. В документации есть инструкции о том, как запрос может быть выполнен даже в текущем диалоге Seam. Пример В сценарии использования сохраняется состояние вкладки пользовательского интерфейса jQuery, которая была выбрана пользователем, чтобы виджет вкладки снова открывал эту же вкладку при повторном доступе к странице в том же диалоге Seam. 

      // Get a reference to the Javascript proxy for the Seam component that
// stores the selected tab state in the current Seam conversation
var tabStateSeamComponent = 
    Seam.Component.getInstance("tabComponent");

// Bind the tab select event to a function that updates
// the selected tab in the Seam component
$(function(){
    // Select the previously selected tab (or default) on
    // page load using the state stored in the Seam component
    $('#tabsId').tabs('select', 
                      #{tabComponent.getSelectedTab('#tabsId')});  

    $('#tabsId').bind('tabselect', 
        function(e,ui){
            // Seam remote calls will be made within the 
            // current Seam conversation
            Seam.Remoting.getContext()
                .setConversationId( #{conversation.id} );

            tabStateSeamComponent.setState('#tabsId', ui.index);
        });
    });

    • При необходимости форму можно отправить с помощью действия JSF (например, для интеграции с правилами навигации Seam) из Javascript, выяснив, как кнопка отправки формы в библиотеке компонентов JSF реализует Форма отправки. Например, если вы используете Trinidad, используйте кнопку отправки формы <tr:commandButton action="actionString" ...> на странице и проверьте визуализированную кнопку HTML в исходном коде с помощью Firebug или аналогичного инструмента. Или вы можете просто визуализировать кнопку, чтобы она была невидимой (установите стиль CSS на display: none;), и использовать jQuery для отправки формы с помощью кнопки (например, $('#buttonId').click();). Ваша библиотека компонентов JSF может иметь Javascript API, чтобы сделать саммит программной формы менее уязвимым.

  • Рассмотрите возможность использования Facelets для быстрой упаковки виджетов пользовательского интерфейса jQuery в качестве повторно используемых пользовательских компонентов JSF

    • (https://www.ibm.com/developerworks/java/library/j-facelets/) - хороший (JSF 1.2) учебник.

    • Это позволит создать модальный диалоговый компонент с интерфейсом тегов, например 

      <custom:dialog title="#{message.title}" 
               text="#{messages.text}" 
               action="jsfActionString" />

      , где реализация определена в отдельном файле Facelet и использует API-интерфейсы jQuery.

2 голосов
/ 11 июня 2009

Если вы просто хотите создать модальное всплывающее окно и вызвать частичную отправку, я бы предложил использовать библиотеку тегов Richfaces, которую вы уже используете.

Чтобы создать модальное диалоговое окно, просто используйте тег для создания модальной панели: 

<rich:modalPanel id="myModalPanel" minHeight="100" height="100" minWidth="100" width="100" zindex="2000">
    Insert content for modal panel here
</rich:modalPanel>

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

<h:outputLink value="#" id="showLink">
    <rich:componentControl for="myModalPanel" attachTo="showLink" operation="show" event="onclick" />
</h:outputLink>


<h:outputLink value="#" id="hideLink">
        <rich:componentControl for="myModalPanel" attachTo="hideLink" operation="hide" event="onclick" />
</h:outputLink>

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

<h:inputText id="myField" value="#{myBean.myField}">
    <a4j:support ajaxSingle="true" event="onChange" reRender="list fields you want to rerender when the methods completes" action="#{myBean.methodToCall}" />
</h:inputText>
1 голос
/ 24 ноября 2009

Вы можете вызывать компоненты шва из jQuery через удаленное взаимодействие. Посмотрите на http://docs.jboss.org/seam/latest-2/reference/en-US/html/remoting.html для получения дополнительной информации.

0 голосов
/ 16 декабря 2011

Вам следует скачать библиотеку jquery и использовать тег <a:loadScript src="resource://jquery.js"/> на своих страницах xhtml. и самая импортируемая вещь пользователь "jQuery" вместо $ или вы можете использовать <rich:query компонент. например :http://livedemo.exadel.com/richfaces-demo/richfaces/jQuery.jsf;jsessionid=482C2B4F2C9C2DCE10573E0A02D468A9?c=jQuery&tab=usage

0 голосов
/ 11 июня 2009

Пойдите, проверьте демонстрации компонентов icefaces и richfaces , двух библиотек JJF AJAX-кабелей.

Частичная отправка через icefaces: 

  <ice:outputText value="#{myBean.myField}" />
  <ice:form>
     <ice:commandButton action="#{myBean.doSomethingToField()}" value="button" />
  <ice:form>

модальное всплывающее окно со льдом, вы можете прочитать больше о здесь.

Мой личный опыт работы с обоими: Richfaces лучше смешиваются с другими jsf-библиотеками, icefaces имеет более продвинутые возможности AJAX (такие как push-поддержка на стороне сервера, вроде кометы), основные функции AJAX проще в настройке и использовании, но иногда возникают трудности, когда Вы смешиваете это с другими JSF библиотеками. Оба имеют разные библиотеки компонентов, поэтому обязательно ознакомьтесь с ними; Вы не хотите смешивать эти библиотеки позже.

...