Dynamic Menu dengan Richfaces dan JSF 2

Beberapa waktu yang lalu, penulis dihadapkan dengan pembuatan dynamic menu untuk aplikasi web Project Akhir dari kampus. Butuh beberapa jam buat nyari tutorial mengenai pembuatan menu tersebut dengan menggunakan Richfaces. Dan setelah melalui beberapa jam, akhirnya tutorialnya ketemu. Untung aja ada mbah google. 😀

Menu dynamic yang digunakan pada aplikasi Project Akhir tersebut menggunakan rich:panelMenu. Karena menu yang terdapat di Project Akhir terlalu panjang, maka yang ditampilkan di sini adalah contoh sederhana aja.

Yang dibutuhkan dalam project ini :

  1. Netbeans IDE
  2. Richfaces 4
  3. Apache Tomcat
  4. JSF 2

Nah, langkah pertama tentu saja kita buat project java web terlebih dahulu dan juga memasukkan library yang dibutuhkan project tersebut.

Kemudian buat kelas DynamicMenu.java dengan source code sebagai berikut :


package achmad;

import javax.faces.application.Application;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;
import org.richfaces.component.UIPanelMenu;
import org.richfaces.component.UIPanelMenuGroup;
import org.richfaces.component.UIPanelMenuItem;

/**
*
* @author New
*/
@ManagedBean
@RequestScoped
public class DynamicMenu {
private UIPanelMenu menu = null;

private UIPanelMenuGroup panelMenuGroup =null;

public DynamicMenu() {
FacesContext fc = FacesContext.getCurrentInstance();
Application application = FacesContext.getCurrentInstance().getApplication();
menu = (UIPanelMenu) application.createComponent(fc, UIPanelMenu.COMPONENT_TYPE, "org.richfaces.PanelMenuRenderer");
UIPanelMenuGroup group = (UIPanelMenuGroup) application.createComponent(fc, UIPanelMenuGroup.COMPONENT_TYPE,"org.richfaces.PanelMenuGroupRenderer");

group.setLabel("group1");
group.setId("gr1");

UIPanelMenuItem item = (UIPanelMenuItem) application.createComponent(fc, UIPanelMenuItem.COMPONENT_TYPE,"org.richfaces.PanelMenuItemRenderer");
item.setLabel("item1");
item.setId("itm1");

group.getChildren().add(item);

item = (UIPanelMenuItem) application.createComponent(fc, UIPanelMenuItem.COMPONENT_TYPE,"org.richfaces.PanelMenuItemRenderer");
item.setLabel("item2");
item.setId("itm2");

group.getChildren().add(item);

menu.getChildren().add(group);

group = (UIPanelMenuGroup) application.createComponent(fc, UIPanelMenuGroup.COMPONENT_TYPE,"org.richfaces.PanelMenuGroupRenderer");

group.setLabel("group2");
group.setId("gr2");

item = (UIPanelMenuItem) application.createComponent(fc, UIPanelMenuItem.COMPONENT_TYPE,"org.richfaces.PanelMenuItemRenderer");
item.setLabel("item3");
item.setId("itm3");

group.getChildren().add(item);

item = (UIPanelMenuItem) application.createComponent(fc, UIPanelMenuItem.COMPONENT_TYPE,"org.richfaces.PanelMenuItemRenderer");
item.setLabel("item4");
item.setId("itm4");

group.getChildren().add(item);

menu.getChildren().add(group);

item = (UIPanelMenuItem) application.createComponent(fc, UIPanelMenuItem.COMPONENT_TYPE,"org.richfaces.PanelMenuItemRenderer");
item.setLabel("item5");
item.setId("itm5");

menu.getChildren().add(item);

}

public void setMenu(UIPanelMenu menu) {
this.menu = menu;
}

public UIPanelMenu getMenu() {
return menu;
}
}

Langkah terakhir yang dibutuhkan adalah membuat dokumen facelet.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<rich:panelMenu binding="#{dynamicMenu.menu}" />
</h:form>
</h:body>
</html>

Tinggal kita build dan kita deploy ke Tomcat ato glassfish.:D
Source code bisa didownload pada link ini : http://achmad-project.googlecode.com/files/DynamicMenu.7z

, , , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: