Portal dan PortalComponent merupakan kelas yang saya buat memudahkan user untuk membuat web-portal/start-up page layout. Kelas ini pula yang digunakan kelompok saya pada tugas PPL semester yang lalu. Sebagai contoh web-portal yang dapat dihasilkan, Anda dapat melihat situs seperti iGoogle, MyYahoo, PageFlakes, dan Netvibes.

Agar lebih mudah dipahami, dapat diibaratkan Portal merupakan “wadah” dan PortalComponent merupakan “pengisi wadah”-nya.

Bagaimana cara menggunakan class ini? Ikuti beberapa langkah berikut. Pada contoh ini, saya mengasumsikan Anda menggunakan Netbeans IDE 6.0 dengan plugin GWT4B sudah terinstall, dan framework GWT sudah terkonfigurasi dengan benar.

  1. Copy file Portal.java dan PortalComponent.java ke package client.
  2. Copy folder themes ke dalam folder Web Pages.
  3. Tambahkan kode
  4. <link rel="stylesheet" type="text/css" href="themes/portal-style.css">
    ke web host page di dalam tag <head></head>

  5. Pada Entry Point class, tambahkan kode berikut
  6. //Make layout composition consisted of three columns each 30% width
    //You can make less than 3 columns by setting "0" to the parameter
    public Portal portal = new Portal("30%", "30%", "30%");
    public PortalComponent portalComponent1 = new PortalComponent("Component 1",
    new HTML("This is content of Component 1"));
    public PortalComponent portalComponent2 = new PortalComponent("Component 2",
    new HTML("This is content of Component 2"));
    public PortalComponent portalComponent3 = new PortalComponent("Component 3",
    new HTML("This is content of Component 3"));
    public PortalComponent portalComponent4 = new PortalComponent("Component 4",
    new HTML("This is content of Component 4"));
    public PortalComponent portalComponent5 = new PortalComponent("Component 5",
    new HTML("This is content of Component 5"));
    public PortalComponent portalComponent6 = new PortalComponent("Component 6",
    new HTML("This is content of Component 6"));
    public PortalComponent portalComponentHeader = new PortalComponent("Header Component",
    new HTML("This is Header Component"));
    public PortalComponent portalComponentFooter = new PortalComponent("Footer Component",
    new HTML("This is Footer Component"));
    dan override method onModuleLoad menjadi sebagai barikut
    public void onModuleLoad() {
    RootPanel.get().add(portal);


    //Make portalComponent1 - 6 dragable
    portal.setDragable(portalComponent1);
    portal.setDragable(portalComponent2);
    portal.setDragable(portalComponent3);
    portal.setDragable(portalComponent4);
    portal.setDragable(portalComponent5);
    portal.setDragable(portalComponent6);

    //Add components to portal
    portal.addComponent(portalComponent1, DockPanel.WEST);
    portal.addComponent(portalComponent2, DockPanel.CENTER);
    portal.addComponent(portalComponent3, DockPanel.EAST);
    portal.addComponent(portalComponent4, DockPanel.WEST);
    portal.addComponent(portalComponent5, DockPanel.CENTER);
    portal.addComponent(portalComponent6, DockPanel.EAST);
    portal.addComponent(portalComponentHeader, DockPanel.NORTH);
    portal.addComponent(portalComponentFooter, DockPanel.SOUTH);

    //Make portalComponentHeader and footer's header not visible
    portalComponentHeader.setVisibleHeader(false);
    portalComponentFooter.setVisibleHeader(false);

    //Make portalComponent3 not closable
    portalComponent3.setClosable(false);
    }

Hasilnya, dapat Anda lihat pada Live-Demo, link alternatif: Live-Demo2

Download link:

  • Full example project (under construction)
  • Class files + stylesheet (under construction)