0

私は8つの画像があるJSFページを持っています。

* jquery ビューアのみ: JSf 構文と混同しないでください。バックグラウンドで、すべてプレーンな HTML に変換されます。h:panelGrid のように table 要素に変換します。p:graphicImage を img 要素に変換します。 実は jQuery ajax を使って画像を読み込むロジックが知りたいです。jQueryを使用するのと同じように、サーバーを呼び出し、データベースから画像を取得し、画像がパスに完全にロードされたら、img src属性を変更して、ロードされた画像でデフォルトの画像を変更します. ページがデフォルト パスにロードされると、/resources/images/no-preview.jpg のようなデフォルト イメージが存在します。だから私は、画像がロードされたら、 /resources/images/Image1.jpg 、 /resources/images/Image2.jpg などに置き換えたい *。

<h:panelGrid columns="5" width="10%" style="position: relative; top: 50px; "
             columnClasses="asteriskColumns, nameColumns" >

    <h:outputText value="*" />
    <h:outputText value="Map: " />
    <p:fileUpload id="cityMap" widgetVar="uploader" description="Image"
                  update="city" allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
                  auto="true" fileUploadListener="#{cityDetail.imageUpload}"
                  style="position: relative;"  >

    </p:fileUpload>

    <p:graphicImage id="city" value="#{cityDetail.imagePath}" width="80"
                    height="50" cache="false" style="position: relative;">

        <f:event type="preRenderComponent" listener="#{cityDetail.putImage}" />

    </p:graphicImage>

    <h:commandLink value="remove" title="Remove Picture"
                   style="color: #0d5b7f;text-decoration: underline;"
                   onclick="if (! confirm('Are you sure, you want to remove picture?') ) { return false;}; return true; ">

        <f:ajax event="click" render="city" listener="#{cityDetail.removeImage}"/>

    </h:commandLink>
    .....
    7 more images in same format

</h:panelGrid>

コンストラクターで、データベースから画像を取得するためにこのようなものを訴えています

public class CountryPages_Detail {
    private String imagePath = "/resources/images/no-preview.jpg";
    String path = externalContext.getRealPath("/resources/images") + "/" ;
    public CountryPages_Detail() {
        ....
        String cityMapQuery = "SELECT citymap From city Where cityid='" + cityID + "'";
        String countryMapFileName = "countryMap_" + saarcCountryId;
        // 7 more queries in same format

         ArrayList countryMapQueryArray = addCredentialsToList(externalContext, countryMapQuery, countryMapFileName, response);
         //7 more

         ArrayList mainArray = new ArrayList();
         mainArray.add(countryMapQueryArray);
         ...
         ArrayList result = ConnectionUtil.showImagesFormDatabase(mainArray);
    } //end of constructor     
} //end of class CountryPages_Detail

public static ArrayList showImagesFormDatabase(ArrayList list) {
    for (int i = 0; i < list.size(); i++) {
        ArrayList fileCredentialsList = ((ArrayList) list.get(i));
        String query = fileCredentialsList.get(0).toString();
        sqlStatement = conn.createStatement();
        resultSet = sqlStatement.executeQuery(query);
        if (resultSet != null) {
            while (resultSet.next()) {
                imageBytes = resultSet.getBytes(1);
                setResponceForDatabaseImages(fileCredentialsList);
                imageName = createFile(fileCredentialsList, imageBytes);
                if (imageName != null) {
                    imageNameList.add(imageName);
                }
            } //end of while()
        } //end of if()
    } //end of for()

    return imageNameList;

} //end of showImagesFormDatabase()

ご覧のとおり、ページの読み込み時にデータベースから画像を取得します。データベースから画像バイトを取得し、そのバイトからのパスに画像ファイルを作成します。しかし、私は8枚の画像を持っています。画像サイズのいずれかが大きい場合、イライラするのを待つ必要があります。

ページが読み込まれるときに、データベースから画像をロードする代わりに、ajax を使用したいと考えています。ページの残りの部分が読み込まれ、画像が舞台裏から読み込まれることを意味し、すべての画像が読み込まれると、p:graphicImage に表示される画像が読み込まれます。画像の読み込み中は読み込みアイコンが p:grahicImage に表示され、画像が完全に読み込まれるとアイコンが消えて画像が表示されます。

どうすればできますか？

ありがとう

編集： - - - - - - - - - - - - - - - - - - - - - - - - ------------------------------------

 <ui:define name="content">
     <h:form id="faqAddUpdateForm" prependId="false">
         <h:panelGrid columns="5" width="10%" style="position: relative; top: 50px; "
             columnClasses="asteriskColumns, nameColumns" >
         ....
         </h:panelGrid>
     </h:form>

     <h:form id="hidden" style="display:none">
                <h:commandLink id="link">
                    <f:ajax event="click" listener="#{countryPages_Detail.loadImagesUsingAjax}" />
                </h:commandLink>
     </h:form>

     <script>
         window.onload = function() {
             document.getElementById('hidden:link').onclick();
          }
      </script>
 </ui:define>
4

1 に答える 1

0

ドキュメントの準備ができたら、画像をロードできます。ただし、オンロードh:bodyは機能しません ( BalusC の回答 hereで報告されているように)。

参照された回答は、それを機能させる方法を提供します。commandLinkajaxリスナーがアタッチされたhiddenをトリガーする必要があります。リスナーは画像を生成するメソッドを呼び出す必要があり、ajax 呼び出しは画像を含むコンポーネントを更新する必要があります。

ajax 呼び出しでページを部分的に更新するには、次のrender属性を使用しますf:ajax。

<h:commandLink id="link">
   <f:ajax event="click" 
           render=":faqAddUpdateForm"
           listener="#{countryPages_Detail.loadImagesUsingAjax}" />
</h:commandLink>

render=":faqAddUpdateForm"フォーム全体をレンダリングします。それが多すぎる場合panelGroupは、画像を含む id (例: "imageGroup") を指定し、この id をrender属性で使用します。

render=":faqAddUpdateForm:imageGroup"
于 2012-04-23T07:13:45.503 に答える