6

このコードでは、

<p:galleria value="#{Bean.images}" var="image" panelWidth="500" panelHeight="313" showCaption="true"
<p:graphicImage value="/images/galleria/#{image}" alt="Image Description for #{image}" title="#{image}"/ 
</p:galleria>

どうやって手に入れselectedImageますか？で表されるように 

<p:carousel id="carousel" value="#{tableBean.carsSmall}" var="car" itemStyleClass="carItem" headerText="Cars"> 
    <p:graphicImage id="image" value="/images/cars/#{car.manufacturer}.jpg"/>   

    <h:panelGrid columns="2" style="width:100%" cellpadding="5"> 
        <h:outputText value="Model: " /><h:outputText id="model" value="#{car.model}" /> 
    </h:panelGrid> 

    <p:commandLink id="view" update=":form:carDetail" oncomplete="carDialog.show()" title="View Detail"> 
        <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />   
        <f:setPropertyActionListener value="#{car}"   
                target="#{tableBean.selectedCar}" /> 
    </p:commandLink> 
</p:carousel>

ランタイム データに基づいて関数のオーバーロードを選択していますか?

boost msm ライブラリを使用して有限状態マシンを作成しました。イベントとその遷移は、コンパイル時に宣言的に定義されます。ただし、実行時には、入力データに基づいて適切なイベントを選択するコードが必要です。現在、コードは次のようになっています。

enum : unsigned {
    fin = (1 << 0),
    syn = (1 << 1),
    ack = (1 << 4)
    // etc...
};

// events
struct receive_syn {};
struct receive_syn_ack {};
struct receive_fin {};
struct receive_fin_ack {};
struct receive_ack {};
// etc..

void receive(const Segment& segment)
{
    switch (segment.getFlags())
    {
        case syn|ack: state_machine.process_event(receive_syn_ack{}); break;
        case syn:     state_machine.process_event(receive_syn{}); break;
        case fin|ack: state_machine.process_event(receive_fin_ack{}); break;
        case fin:     state_machine.process_event(receive_fin{}); break;
        case ack:     state_machine.process_event(receive_ack{}); break;
        // etc..
    }
}

それは動作し、おそらく高速です。しかし、これはもっと宣言的なスタイルで書かれるべきだと思います。

追加のランタイム オーバーヘッドを導入することなく、より高度なスタイルのプログラミングでこれを実装するにはどうすればよいでしょうか?

参考までに、boost::msm の例を次に示します。

4

2 に答える 2

3

現在表示されている各画像に詳細ボタンがあるとします (alt 属性が画像ファイル名に設定されています)。

<p:galleria value="#{Bean.images}" var="image">
  <p:graphicImage value="/images/galleria/#{image}"/>

  <f:facet name="content"> 
    <p:graphicImage value="/images/galleria/#{image}" alt="#{image}" />
    <span style="position:absolute;right:0;top:0;">
      <p:commandButton styleClass="ui-icon ui-icon-search" onclick="jsCallRemote(this);" />
    </span>
 </f:facet>
</p:galleria>

検索ボタンは、現在の画像ファイル名を見つけるためのヒントとしてボタン自体を渡す js 関数を呼び出し、次にファイル名を要求パラメーターとして渡すリモート コマンドを呼び出すことができます。

<script>
function jsCallRemote(btn) {
    var imageFileName = btn.parentNode.parentNode.getElementsByTagName('img')[0].alt;
    selectImage([{name:'imageFileName', value:imageFileName}]);
}
</script>

<p:remoteCommand name="selectImage" actionListener="#{tableBean.selectImage}" />

そして、Bean のメソッドは、要求パラメーター imageFileName を通じて実際の選択を行います。

public void selectImage() {
  String fileName = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("imageFileName");
  // find image by filename...
}
于 2016-03-10T23:14:52.087 に答える
0

各画像にボタンを配置するつもりがない場合は、ガレリアのキャプションを利用して、選択した画像のタイトルをキャッチできます。このソリューションは、 andreea mの回答に基づいています。

        <p:commandButton action="#{controller.preview}" value="Preview" onclick="checkSelectedImage();" oncomplete="PF('previewDialog').show();"/>

JS 関数

      function checkSelectedImage() {
            var caption = document.getElementsByClassName("ui-galleria-caption");
            selectImage([{name:'imageFileName', value:caption[0].getElementsByTagName("h4")[0].innerHTML}]);
        }

リモートコマンド

    <p:remoteCommand name="selectImage" actionListener="#{controller.selectImage}"/>
于 2019-03-18T07:51:02.973 に答える