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

如果您不打算为每个图像设置一个按钮，您可以利用 Galleria 标题来捕捉选定的图像标题。该解决方案基于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 回答