output Dynamic HTML with VisualForce component

Question

in my page I show a list of records along with pagination as below:

the navigation buttons at the top are output from a VF component in my controller:

// List Records pagination
public Component.Apex.pageBlockButtons getnavButtons() {

    //the reRender attribute is a set NOT a string
    Set<string> theSet = new Set<string>();
    theSet.add('navGroup');
    theSet.add('myButtons');

    integer totalPages;
    if (math.mod(total_size, list_size) > 0) {
        totalPages = total_size/list_size + 1;
    } else {
        totalPages = (total_size/list_size);
    }

    integer currentPage;        
    if (selectedPage == '0') {
        currentPage = counter/list_size + 1;
    } else {
        currentPage = integer.valueOf(selectedPage);
    }                           

    Component.Apex.pageBlockButtons pbButtons = new Component.Apex.pageBlockButtons();        
    pbButtons.style='align:center';
    pbButtons.location = 'top';
    pbButtons.id = 'myPBButtons';

    Component.Apex.outputPanel opPanel = new Component.Apex.outputPanel();
    opPanel.id = 'myButtons';

    //the Previous button will alway be displayed
    Component.Apex.commandButton b1 = new Component.Apex.commandButton();
    b1.expressions.action = '{!Previous}';
    b1.title = 'Previous';
    b1.value = 'Previous';
    b1.expressions.disabled = '{!disablePrevious}';        
    b1.reRender = theSet;

    opPanel.childComponents.add(b1);        

    for (integer i=0;i<totalPages;i++) {
        Component.Apex.commandButton btn = new Component.Apex.commandButton();

        if (i+1==1) {
            btn.title = 'First Page';
            btn.value = 'First Page';
            btn.rendered = true;                                        
        } else if (i+1==totalPages) {
            btn.title = 'Last Page';
            btn.value = 'Last Page';
            btn.rendered = true;                            
        } else {
            btn.title = 'Page ' + string.valueOf(i+1) + ' ';
            btn.value = ' ' + string.valueOf(i+1) + ' ';
            btn.rendered = false;             
        }

        if (   (i+1 <= 5 && currentPage < 5)
            || (i+1 >= totalPages-4 && currentPage > totalPages-4)
            || (i+1 >= currentPage-2 && i+1 <= currentPage+2))
        {
            btn.rendered = true;
        }

        if (i+1==currentPage) {
            btn.disabled = true; 
            btn.style = 'color:blue;';
        }  

        btn.onclick = 'queryByPage(\''+string.valueOf(i+1)+'\');return false;';

        opPanel.childComponents.add(btn);

        if (i+1 == 1 || i+1 == totalPages-1) { //put text after page 1 and before last page
            Component.Apex.outputText text = new Component.Apex.outputText();
            text.value = '...';        
            opPanel.childComponents.add(text);
        } 

    }

    //the Next button will always be displayed
    Component.Apex.commandButton b2 = new Component.Apex.commandButton();
    b2.expressions.action = '{!Next}';
    b2.title = 'Next';
    b2.value = 'Next';
    b2.expressions.disabled = '{!disableNext}';        
    b2.reRender = theSet;
    opPanel.childComponents.add(b2);

    //add all buttons as children of the outputPanel                
    pbButtons.childComponents.add(opPanel);  

    return pbButtons;

} 

what I'd like to do is have the dynamic component create buttons like th other ones you see on the page:

that button is created in my VF page by the below code:

<div align="center" class="WidthAuto HeightAuto" id="Buttons">
    <div class="block-link" id="NewButton" 
            onmouseover="ButtonMouseOver('NewButton');" 
            onmouseout="ButtonMouseOut('NewButton');" >
        <apex:outputLink style="color: rgb(255,255,255)" value="/apex/SystemChangeRequest_New?mode=new">New</apex:outputLink>
    </div>

</div>

so what I'd like to do is have my dynamic VF component create elements like that with the correct events on them...

so I tried this:

  //        b2.expressions.action = '{!Next}';
  //        b2.title = 'Next';
  //        b2.value = 'Next';
  //        b2.expressions.disabled = '{!disableNext}';        
  //        b2.reRender = theSet;
  //                                    
Component.Apex.OutputText htmlTxt = new Component.Apex.OutputText(); 
htmlTxt.value = '<div class="block-link" id="PrevButton" onmouseover="ButtonMouseOver(\'PrevButton\');" onmouseout="ButtonMouseOut(\'PrevButton\');" >';        
htmlTxt.escape = false; 

Component.Apex.outputLink pbLink = new Component.Apex.outputLink();     
pbLink.style='color: rgb(255,255,255)';
pbLink.expressions.action = '{!Next}';
pbLink.value='{!Next}';
pbLink.id = 'mynewButtons';

Component.Apex.OutputText htmlTxt2 = new Component.Apex.OutputText(); 
htmlTxt2.value = '</div>';      
htmlTxt2.escape = false; 

but I cannot get it to compile...

all I can see is error after error - the latest one is:

Save error: Expression of type ApexPages.expressions has no member named action

So what is the correct way to do what I want, have the dynamic VF component output custom div elements with the outputLink and events?

Answer 1

The compile error is because outputLink does not have action attribute .You can use Command Link Instead .

The below lines are causing issues

Component.Apex.outputLink pbLink = new Component.Apex.outputLink();     
pbLink.style='color: rgb(255,255,255)';
pbLink.expressions.action = '{!Next}';//Here is the issue .Get rid of this...
pbLink.value='{!Next}';
pbLink.id = 'mynewButtons';

Instead go with command link and the code will be as below

Component.Apex.CommandLink pbLink = new Component.Apex.CommandLink ();     
pbLink.style='color: rgb(255,255,255)';
pbLink.expressions.action = '{!Next}';//Here is the issue .Get rid of this...
pbLink.value='Next';
pbLink.id = 'mynewButtons';