0

私はJsfが初めてで、私の要件は画像名のリストを取得することです（id = 1の場合はn1.jpg、n2.jpg ..など、id =の場合はn3.jpg、n4.jpg、n5.jpg ...など） 2) データベースからの特定の ID について、それを「resources/Images/」に追加し、ブラウザーに一時停止および再開ボタンを使用してスライド ショーを表示します。私はprimefaces 4.0、jsf 2.2、mojarra 2.2.0を使用しています。p:imageswitch を使用してスライド ショー タスクを実装していますが、画像が表示されません。誰でも私の間違いを追跡するのを手伝ってもらえますか?エラーも発生していません。以下は、xhtml コードです。

<h:selectOneMenu value="#{imageBean.selectedmp}" id="ulist">
      <f:selectItems value="#{imageBean.dropdownValues}"/>
 </h:selectOneMenu>
 <h:commandButton value="Display Images" action="#{imageBean.executeQueryImages}" />
    <div id="slider">
      <p:imageSwitch  widgetVar="switcher2" effect="none"         slideshowSpeed="100" slideshowAuto="false" >
         <ui:repeat value="#{imageBean.images}" var="image">
             <p:graphicImage value="/resources/images/#{image}" />
        </ui:repeat>
    </p:imageSwitch>  
  </div>

これは、クエリを実行して画像名のリストを取得するための私の Java コードです。リストを作成できます：

 public void executeQueryImages() {
      String query1 = "some query";
        ResultSet rs = null;
            try {
                connection = ConnectionFactory.getConnection();
                statement = connection.createStatement();
                rs = statement.executeQuery(query1);
                images = new ArrayList<String>();
                   while (rs.next()) {
                     Events ev = new Events();
                     ev.setImagename(rs.getString("simagename"));
                     String Imagename = ev.getImagename();
                     System.out.println("path:::"+Imagename);
                     images.add(Imagename);                 
                }
              }
            catch(Exception e)
            {
             e.printStackTrace();
            }
            finally
            {
                DBUtil.close(rs);
                DBUtil.close(statement);
                DBUtil.close(connection);
            }
        }
         public List<String> getImages() {
            return images;
        }
4

2 に答える 2

2

あなたがどのように見えるか分からないので、ここではただの推測ですImage。

ここでは、画像のリストを返します。

public List<Image> getImages() {
    return images;
}

しかし、ここでは次のように使用しますString。

<ui:repeat value="#{imageBean.images}" var="image">
     <p:graphicImage value="/resources/images/#{image}" />
</ui:repeat>

ご覧のとおり、 はyou return from をui:repeatループしますが、必要なのは (イメージ名) です。したがって、イメージ名を返すメソッドがない場合は、必要になる可能性があります。List<Image>getImages()StringImage

/* this assumes you have field imageName in your Image class */
public String getImageName() {
    return this.imageName;
}

次に、ページ コードを次のように変更します。

<ui:repeat value="#{imageBean.images}" var="image">
     <p:graphicImage value="/resources/images/#{image.imageName}" />
</ui:repeat>

アップデート

警告の言葉 - あなたのコードでは、JSF コンポーネントと PrimeFaces コンポーネントを組み合わせてページを構築していることがわかります。これは一般的に問題ではありませんが、動作にいくつかの違いがあります。たとえば、p:commandButtonPrimeFaces によって提供されるものは、デフォルトで Ajax リクエストを発行しますが、h:commandButton明示的に Ajax を有効にしない限り、ページ全体をリロードするだけです。

したがって、更新しないことに関するマラグナp:imageSwitchからのコメントは、使用した場合にのみ有効ですp:commandButton。さらに、ボタンのaction属性にタイプミスがあるようです - 左中括弧がありません。したがって、次のようになります。

<p:commandButton value="Display Images" update="switchComponent"
    action="#{imageBean.executeQueryImages}" />

更新 #2

PrimeFaces 4.0 に問題があるようです。ブラウザ コンソールを開いてページをリロードすると、Uncaught TypeError: Cannot read property 'msie' of undefined次のメッセージが表示されます。imageswitch.js

5.2 に切り替えることができれば、質問にあるコードは期待どおりに機能するはずです。スライドショーを開始/停止するための 2 つのボタンを追加するだけです。

<p:commandButton id="btnPlay" widgetVar="btnPlayWidget"
    type="button" value="Start"
    onclick="PF('switcher2').getJQ().cycle('fade'); PF('btnPlayWidget').disable(); PF('btnStopWidget').enable();" />

<p:commandButton id="btnStop" widgetVar="btnStopWidget"
    type="button" value="Stop" disabled="true"
    onclick="PF('switcher2').getJQ().cycle('stop'); PF('btnStopWidget').disable(); PF('btnPlayWidget').enable();" />

はcycle('fade')、指定された効果を使用してスライドショーを開始します (サポートされている任意の効果を指定できます)。

于 2015-09-24T13:25:38.353 に答える
0

明確なことが 1 つあります。commandButtonデフォルトで構成されています。つまり、ajax を使用していますが、imageSwitchコンポーネントは更新されていません。

コンポーネントに を指定してidからimageSwitch、 から更新する必要がありcommandButtonます。

何かのようなもの：

<h:commandButton 
   value="Display Images" update="switchComponent"
   action="#imageBean.executeQueryImages}" />

<div id="slider">
  <p:imageSwitch  id="switchComponent"
      widgetVar="switcher2" effect="none"
      slideshowSpeed="100" slideshowAuto="false" >

     <ui:repeat value="#{imageBean.images}" var="image">
         <p:graphicImage value="/resources/images/#{image}" />
    </ui:repeat>
  </p:imageSwitch>
</div>

次に、画像を正しく管理している場合は、そうする必要があります。あなたがどのようにやっているのかわからないので、提案されたようにコードを変更しても問題を解決するのに十分でない場合は、さらに情報を提供する必要があります.

于 2015-09-24T12:15:45.793 に答える