[carousel] dynamic id not possible & embedding problems

[Bexx]

Hi,

I'm trying to implement buttons into the carousel- component.
The buttons are used for navigation, so I forcedly need for every button an unique id.
Stack Trace is trying to tell me, that my button doesn't have an id...
But I can't use a static one for every button, cause I'm iterating a list with all button details (this would resolve in a duplicate id problem)
I'm not sure why it's not working the way I tried, but I hope you can help me out.

Second problem I've come across is that I embedded the component into a modal dialog.
Now when I load the page on which the dialog can be invoked via an onclick-event,
the carousel is already visible in the center.

Do you have any suggestions how to resolve this problem?

Code: Select all

<p:carousel vertical="true" var="button" value="#{navigationBean.buttonDetailList} ">
                            <p:commandButton update="searchContent" actionListener="#{navigationBean.makeSelection}"
                                             value="Agent" image="#{button.picturePath}" id="#{button.id}"
                             />
</p:carousel>

[Bexx]

oh I forgot the backingBean source!

Code: Select all

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package com.asc.search.web.search1;

import javax.faces.event.ActionEvent;
import java.io.Serializable;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;


/**
 *
 * @author r.sax
 */

@Named
@SessionScoped
public class NavigationBean implements Serializable {


    private List<ButtonDetails> buttonDetailList;
    private String selection;


    @PostConstruct
    public void init()
    {
        ButtonDetails bd = new ButtonDetails();
        ButtonDetails bd1 = new ButtonDetails();
        ButtonDetails bd2= new ButtonDetails();
        ButtonDetails bd3 = new ButtonDetails();

        bd.setPicturePath("some.png");
        bd.setId("something");
        this.buttonDetailList.add(bd);

        bd1.setPicturePath("some.png");
        bd1.setId("something");
        this.buttonDetailList.add(bd1);

        bd2.setPicturePath("some.png");
        bd2.setId("someting");
        this.buttonDetailList.add(bd2);

        bd3.setPicturePath("some.png");
        bd3.setId("something");
        this.buttonDetailList.add(bd3);
    }

    public String getSelection() {
        return selection;
    }

    public void setSelection(String selection) {
        this.selection = selection;
    }

    public void makeSelection(ActionEvent ae)
    {
        this.selection = new String();
        this.selection = ae.getComponent().getId();

        if(this.selection.contains("something"))
            this.selection = "some.xhtml";
        else if(this.selection.contains("something"))
            this.selection = "some.xhtml";
        else if(this.selection.contains("something"))
            this.selection = "some.xhtml";
        else if(this.selection.contains("something"))
            this.selection = "some.xhtml";
    }

    public List<ButtonDetails> getbuttonDetailList() {

        return buttonDetailList;
    }

    public void setButtonDetailList(List<ButtonDetails> buttonDetailList) {
        this.buttonDetailList = buttonDetailList;
    }

    public class ButtonDetails implements Serializable
    {
        private String picturePath;
        private String id;

        public String getId() {
            return id;
        }

        public void setId(String id) {
            this.id = id;
        }

        public ButtonDetails(){

        }

        public String getPicturePath() {
            return picturePath;
        }

        public void setPicturePath(String picturePath) {
            this.picturePath = picturePath;
        }

        public String getUrl() {
            return url;
        }
    }
}

[cagatay.civici]

Hi,

What do you mean by navigation, you want to click on a button in carousel item and want to navigate to another page based on that?

[Bexx]

Not directly.
The carousel will be used as a sidebar with Buttons.
Pushing one of those Buttons should trigger an update on an outputPanel (with the actual content of the page) within the same dialog the carousel is embedded in.
Simultaneously I want to set a new path via actionListener for a variable that is used in the outputPanel for an ui:include.

It is thought to be functioning like this:
Click on Button triggers an update on the outputPanel.
Over the actionEvent, triggered by the ActionListener I fetch the ID of the specific Button that was being pushed.
By this ID a path is assigned to String variable that will be used in the outputPanel as path for the ui:include.

[Bexx]

A little update:

as far as I can tell, there's no possibilty to work with dynamic ID's with this component.
Also I couldn't find a workaround with the carousel in my special case.
But as for the embedding problems I found a solution.
It's not a nice one, but still - it works.
you can hide and show the component with event attributes (onclick= component.show() || component.hide()).
i fire them simultaneously to those of the dialog and tadaaaaaaaa, it works

[oriolmartiribas]

I think my problem is similar. To open a dialog it's not working properly if I make it with a p:commandButton; then I'm opening the dialog with a h:outputLink (using onclick=dlg.show()). My problem is that I can't work with actionListener and update's.
Can you explain a little more about "event attributes"; problably is the solution I need.

[Bexx]

a piece of your source would be helpful to get it work in your case

so far:

when using a p:commandButton you just need following source

Code: Select all

<p:commandButton id="someID" value="Click me to open dialog" onclick="dlg.show();" />


<p:dialog id="modalPanel" widgetVar="dlg" visible="false" modal="true" >
          //......CONTENT.....
</p:dialog>

this is actually all it takes to display a dialog via p:commandButton.
But when you try to embed a carousel into the dialog, this is where the problem starts.
I fear the solution I was talking about refers only to my special case,
but still you can control the visibility of this component via rendering...

carousel has a 'rendered' attribute.

a solution for your case could look like this:

Code: Select all

    <p:commandButton id="someID" value="Click me to open dialog" onclick="dlg.show();#{backingBean.somePublicMethod}" />    
      <p:dialog id="modalPanel" widgetVar="dlg" visible="false" modal="true" >
              <p:carousel value="#{backingBean.someList}" var="some" rendered="#{backingBean.someBooleanVariable}">
                     <h:outputText value="#{some.picture}"/>
              </p:carousel> 
      </p:dialog>
      

Backing Bean would contain this:

Code: Select all

public class BackingBean implements Serializable {
    boolean someBooleanVariable = false;

    public void somePublicMethod(ActionEvent ae){
        someBooleanVariable = true;
}

of course you'll need a second public method that sets the boolean value to false when you close the dialog.
for that you just need to use the onclick event of your dialog-close-Button the same way you did when you opened the dialog.
I hope this solves your issue

[oriolmartiribas]

My problem is different.
I don't know why, but if I call the dlg.show() from inside a <h:form>...</h:form> it is not able to be MODAL.
Then if I reach to call the dlg.show() for examble in a h:outputLink (not inside a h:form) it works. The problem is that from there I don't know how to call the #{backingBean.somePublicMethod}" (or any other function).

[Bexx]

Well this should be easy,
you just use the onclose event of you dialog...

Code: Select all

    onclose="#{backingBean.somePublicMethod}"