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)

Google Web Toolkit adalah framework yang ditawarkan Google untuk membuat aplikasi AJAX. Saya menggunakan framework ini dalam mengerjakan proyek sepanjang satu semester lalu di mata kuliah Proyek Perangkat Lunak (PPL).

Secara umum, kelebihan yang ditawarkan GWT ini yang dapat saya eksplorasi antara lain:

  • Anda dapat mengkode aplikasi AJAX dalam Java (yang tentunya lebih mudah dibanding JavaScript^^). Nanti compiler akan mengoversi client-side code ke dalam JavaScript. Sedangkan server-side code tetap dijalankan dalam kode biner Java.
  • Banyak kelas primitif yang disediakan (kelas Widget dan Panel) untuk membuat user interface. Nanti compiler akan mengonversi secara dinamis ke dalam tag-tag HTML. Mudah berkomunikasi client-server dengan mekanisme Remote Procedure Call (RPC) dengan fasilitas “GWT-RPC Service”. Anda tetap dapat menulis kode secara native untuk HTML, JavaScript, submit form, dsb.

Namun ada juga kekurangannya, yaitu:

  • Jika menggunakan Netbeans IDE, anda dapat menggunakan plugin GWT4NB untuk memudahkan membangun aplikasi dengan framework GWT. Tetapi, GWT4NB ini masih Beta Version sehingga terdapat bug-bug yang mengganggu.
  • Aplikasi yang dihasilkan relatif besar ukurannya.

Berikut ini ada beberapa panduan untuk mempermudah Anda jika ingin melakukan eksplorasi GWT.

Sekian dulu, semoga bermanfaat πŸ™‚