2

私たちのプロジェクトは縫い目で開発されています。お客様がUIを変更し、jQueryを使用してUIプロトタイプを提供しました。現在、jQueryをseamに統合する際に多くの問題に直面しています。顧客はよりリッチなUIを望んでいました。

（1）シームでモーダルポップアップを作成するにはどうすればよいですか。基本的なコードはありますか？（2）jQueryを使用して部分送信（またはajax呼び出し）を呼び出すにはどうすればよいですか？言い換えると、jQueryからseamアクションを呼び出すにはどうすればよいですか？

4

5 に答える 5

3

以下は、既存の Seam (2.x) + JSF Web ページを jQuery などの Javascript ライブラリの UI ウィジェットで拡張する際に役立つと思われる実装テクニックの内訳です (ハイパーリンクをさらに配置する必要がありましたが、2 つに制限されていました)。

  • jQuery Javascript ライブラリをインポートする

    • たとえば、JSF (Apache MyFaces) を使用している場合は、<f:verbatim>タグ内の HTML で行うのと同じようにこれを行うことができます。

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

    • または、Trinidad や RichFaces などの JSF コンポーネント ライブラリには、通常、この目的のためのコンポーネントがあります。<trh:script(Trinidad)または<aj4:loadScript>(RichFaces)を参照してください。

  • EL を使用して、Seam から jQuery UI ウィジェット (ダイアログ、タブなど) によって表示されるテキスト (または動作) をカスタマイズします。

    • jQuery ダイアログは、Seam リソース バンドルからのタイトルとテキストでレンダリングできます。

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

    • EL をこのように使用して、Seam コンテキストからの値を使用して任意の HTML または Javascript をレンダリングできます。これには、クライアント側での状態の復元が含まれます。以下の jQuery UI タブ コンポーネントの例を参照してください。

  • Seam コンポーネントの状態を更新する/JSF アクションを呼び出す

    • Seam Remoting (http://docs.jboss.org/seam/2.2.2.Final/reference/en-US/html/remoting.html) では、Seam コンポーネントを Javascript オブジェクトであるかのように Javascript で直接使用できます。 . ドキュメントには、現在の Seam 会話でリクエストを実行する方法についての指示があります。ユースケースの例として、ユーザーが選択した jQuery UI タブの状態を保存して、同じ 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 コンポーネント ライブラリのフォーム送信ボタンがフォーム送信を実装する方法を理解することで、Javascript からJSFアクション(Seam ナビゲーション ルールとの統合など) を使用してフォームを送信できます。たとえば、Trinidad を使用している場合は<tr:commandButton action="actionString" ...>、ページでフォーム送信ボタンを使用し、Firebug または同様のツールを使用して、ソースでレンダリングされた HTML ボタンを検査します。または、ボタンをレンダリングして非表示にし (CSS スタイルを に設定display: none;)、jQuery を使用してボタンを使用してフォームを送信することもできます (例: $('#buttonId').click();)。JSF コンポーネント ライブラリには Javascript API が含まれている場合があり、プログラムによるフォーム サミットを簡単にハックすることができます。

  • 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 ファイルで定義され、jQuery API を利用します。

于 2012-12-10T00:01:28.157 に答える
2

単にモーダルポップアップを作成して部分的な送信を呼び出したい場合は、すでに使用している可能性のある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>
于 2009-06-10T23:24:43.340 に答える
1

Seam Remoting を介して jQuery から seam コンポーネントを呼び出すことができます。詳細については、http://docs.jboss.org/seam/latest-2/reference/en-US/html/remoting.htmlを参照してください。

于 2009-11-24T19:57:19.387 に答える
0

2 つの jsf AJAX ケーブル ライブラリであるicefacesとrichfacesのコンポーネント ショーケースをチェックしてください。

icefaces による部分的な送信:

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

詳細については、こちらを参照してください。

両方の私の個人的な経験: Richfaces は他の jsf ライブラリとよりよく混合され、icefaces はより高度な AJAX 機能 (サーバー側のプッシュなど、コメットのようなもの) を備えています。基本的な AJAX 機能はセットアップと使用が簡単ですが、混合すると難しい場合があります他のjsfライブラリと。どちらも異なるコンポーネント ライブラリを持っているので、必ずチェックしてください。後でこれらのライブラリを混在させたくありません。

于 2009-06-11T17:19:39.713 に答える
0

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

于 2011-12-16T12:43:42.687 に答える