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

Question

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

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

Answer 1

Если вы просто хотите создать модальное всплывающее окно и вызвать частичную передачу, я бы предложил использовать библиотеку тегов 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> 

Answer 2

Go проверить компонент витрины icefaces и richfaces, два Jsf кабельных библиотек AJAX.

Частичное представить через ICEfaces:

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

modal popup с ICEfaces вы можете прочитать здесь.

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

Answer 3

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

Answer 4

Вы должны загрузить библиотеку 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

Answer 5

Вот краткое изложение методов реализации, которые я нашел полезными при улучшении существующего шва (2.х) + JSF веб-страницы с UI виджетов из Javascript библиотек, как JQuery (поставил бы больше гиперссылок, но я был ограничен до 2):

• импортировать библиотеку Jquery JavaScript

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

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

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

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

  • диалоговое JQuery может быть вынесено с заголовком и текст из пучка Шов ресурсов:

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

  • EL может быть использован, как это, чтобы сделать какие-либо HTML или Javascript со значениями из Se am контекст. Это включает в себя восстановление состояния на стороне клиента - см. Ниже приведенный ниже компонент компонентов вкладки jQuery.

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

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

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

• Рассмотрите возможность использования Facelets быстро упаковать виджеты Jquery UI, как многоразовых пользовательских компонентов 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.