HashMap click counter increment

Question

I'm developing a web application using JSF 2.2. I have the following HTML code, an unordered list with articles, with links pointing to other pages:

<h:form>    
<div class="wrapper col3">
  <div class="container">
    <div class="gallery">
      <ul>
        <li>
          <p class="imgtitle">CorelDRAW Installation Problems</p>
          <a class="fb_image" href="contracts/resources/imagini/corel.jpg"><h:graphicImage library="imagini" name="corel.jpg"/></a>
          <p class="readmore" ><h:link value="Continue Reading &raquo;" outcome="contracts/resources/data/imag1_corel.html" /></p>

        </li>
        <li>
          <p class="imgtitle">Facebook down? Current problems and status</p>
           <a class="fb_image" href="contracts/resources/imagini/facebook.jpg"><h:graphicImage library="imagini" name="facebook.jpg"/></a>       
           <p class="readmore" ><h:link value="Continue Reading &raquo;" onclick="#counter.hitCount" outcome="contracts/resources/data/imag2_facebook.html" /></p>
        </li>
        <li class="last">
          <p class="imgtitle">Samsung Galaxy S7 review: a return to old ways</p>
          <a class="fb_image" href="contracts/resources/imagini/galaxy.jpg" ><h:graphicImage library="imagini" name="galaxy.jpg"/></a>
          <p class="readmore" ><h:link value="Continue Reading &raquo;" outcome="contracts/resources/data/imag3_s7.html" /></p>
        </li>
        <li>
          <p class="imgtitle">Samsung wants you to feel VR, not just see it</p>
          <a class="fb_image" href="contracts/resources/imagini/vr.jpg" title="Image 1 Link Title Tag"><h:graphicImage library="imagini" name="vr.jpg"/></a>
          <p class="readmore" ><h:link value="Continue Reading &raquo;" outcome="contracts/resources/data/imag4_vr.html" /></p>
        </li>
        <li>
          <p class="imgtitle">Instagram feed will no longer be in chronological order</p>
          <a class="fb_image" href="contracts/resources/imagini/instagram.jpg" title="Image 1 Link Title Tag"><h:graphicImage library="imagini" name="instagram.jpg"/></a>
          <p class="readmore" ><h:link value="Continue Reading &raquo;" outcome="contracts/resources/data/imag5_instagram.html" /></p>
        </li>
        <li class="last">
          <p class="imgtitle">Everything we expect at Apple's event on March 21</p>
          <a class="fb_image" href="contracts/resources/imagini/apple.jpg" title="Image 1 Link Title Tag"><h:graphicImage library="imagini" name="apple.jpg"/></a>
          <p class="readmore" ><h:link value="Continue Reading &raquo;" outcome="contracts/resources/data/imag6_apple.html" /></p>
        </li>
          <li>
          <p class="imgtitle">Apple's iCloud may get tighter encryption</p>
          <a class="fb_image" href="contracts/resources/imagini/icloud.jpg" title="Image 1 Link Title Tag"><h:graphicImage library="imagini" name="icloud.jpg"/></a>
          <p class="readmore" ><h:link value="Continue Reading &raquo;" outcome="contracts/resources/data/imag7_icloud.html" /></p>
        </li>
        <li>
          <p class="imgtitle">Getting started with Windows 10's Messaging app</p>
          <a class="fb_image" href="contracts/resources/imagini/win10skype.jpg" title="Image 1 Link Title Tag"><h:graphicImage library="imagini" name="win10skype.jpg"/></a>
          <p class="readmore"><h:link value="Continue Reading &raquo;" outcome="contracts/resources/data/imag8_windows10.html" /></p>
        </li>
        <li class="last">
          <p class="imgtitle">How PlayStation VR compares with Oculus Rift, Vive</p>
          <a class="fb_image" href="contracts/resources/imagini/playstationvr.jpg" title="Image 1 Link Title Tag"><h:graphicImage library="imagini" name="playstationvr.jpg"/></a>
          <p class="readmore" ><h:link value="Continue Reading &raquo;" outcome="contracts/resources/data/imag9_sonyvr.html" /></p>
        </li>
      </ul>
      <br class="clear" />
      <p id="back-to-top"><a href="#top"><span></span>Back To Top</a></p>
    </div>
  </div>
</div>
    </h:form>

And I have the folowing ManagedBean class which is not what I need.

@ManagedBean(name="displaymostviewed")
@SessionScoped
public class DisplayMostViewed {
    private int count=0; 
    private static HashMap<Integer,String> map = new HashMap<Integer,String>();
    private static BufferedReader reader;

public DisplayMostViewed() {
    map.put(incrementCounter() , "awala");
    writeToFile(map);

}
public int incrementCounter(){
    count++;
    return count;    
}

public void writeToFile(HashMap<Integer,String> map){
    try{
    File fileTwo=new File("C:\\Users\\Puchu\\Documents\\NetBeansProjects\\mavenandJSF\\counter.txt");
    FileOutputStream fos=new FileOutputStream(fileTwo);
        PrintWriter pw=new PrintWriter(fos);

        for(Map.Entry<Integer,String> m :map.entrySet()){
            pw.println(m.getKey()+"="+m.getValue());
        }

        pw.flush();
        pw.close();
        fos.close();
    }catch(Exception e){}
}

What I would like to do is to bind some how the anchor tag elements from the HTML list to the HashMap and increment the counter based on the clicks of a website visitor on the link.

I would like to memorize the counter values of each link , finally sort them and display the most accessed links in the web page. How can I achieve this?

Answer 1

you can create a loop to show links, with ui:repeat or dataTable whatever you want and then linked to action method for counting clicks (h:commandLink)...retrieve param name = param with key clicked and increase an specific counter...

To retrieve key clicked:

FacesContext.getExternalContext().getRequestParameterMap().get("param");

ex:

 <ul>
    <ui:repeat value="#{myBean.myMap.keySet().toArray()}" var="key">
     <h:commandLink action ="#{myBean.counterMethod}">
         <f:param name="param" value="#{key}" />
         <li>key:#{key}</li>
       <li>value:#{myBean.myMap[key]}</li>
    </h:commandLink>    
    </ui:repeat>
</ul>

but it's just an idea, hope it helps..