Portal: Membuat Web-Portal dengan GWT

Juni 12, 2008

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)

6 Responses to “Portal: Membuat Web-Portal dengan GWT”

  1. Dedy Says:

    Salam kenal,dit. Saya mau share dan tanya seputar GWT. kebetulan tugas akhir saya membuat web mneggunakan GWT sebagai user interface.Kemudian memakai javascript sebagai bahasa pemrogramannya. Yang mau saya tanyakan, apa yang dimaksud framework memakai hibernate?Kalau tidak salah frameworknya SPRING.
    Makasih ya…

  2. Aditya Says:

    @Dedy: Salam kenal juga, Ded. Kalo setahu saya, Hibernate dan Spring itu adalah framework java. Bisa dilihat di http://www.hibernate.org dan springframework.org

    Penggunaannya pun bisa digabungkan (menggunakan keduanya sekaligus). Misalnya pakai hibernate untuk modeller-nya dan spring untuk controller-nya (jika menggunakan konsep MVC).

  3. rischan Says:

    lam kenal ja…lagi nyari info tentang web portl malah mampir kesini..hehe

  4. fies Says:

    boleh minta source codenya ga mas?? buat belajar hehe
    thanks


  5. lagi belajar bikin portal ajarin dunk

  6. iank Says:

    kalo ada video tutorialnya bisa lebih menarik


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: