JavanLabs http://javanlabs.com Just another WordPress site Fri, 02 Mar 2012 12:28:30 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Mengenal Jquery Mobile Framework http://javanlabs.com/mengenal-jquery-mobile-framework/ http://javanlabs.com/mengenal-jquery-mobile-framework/#comments Fri, 13 Jan 2012 02:53:52 +0000 wisnu http://192.168.1.230/javanlabs/?p=108 jqueryjQuery telah lama menjadi JavaScript library yang populer untuk menciptakan website interaktif yang kaya dan aplikasi web. Namun, karena ini dirancang terutama untuk browser desktop, jquery tidak memiliki banyak fitur yang khusus dirancang untuk membangun aplikasi web mobile.

jQuery Mobile adalah proyek baru yang membahas kekurangan ini. Ini adalah framework yang dibangun di atas jQuery yang menyediakan berbagai elemen User-interface dan fitur-fitur untuk digunakan dalam aplikasi mobile.

framework ini cukup canggih, versi alpha pertama dirilis bulan lalu – tapi sudah memungkinkan untuk melakukan beberapa hal besar.

Pada artikel ini saya melihat beberapa fitur kunci dan manfaat dari Jquery mobile dan menunjukkan beberapa contoh bagaimana framework baru ini dapat membantu Anda membangun aplikasi mobile berkualitas dan dalam waktu singkat.

Apa yang dapat jQuery Mobile lakukan?

  • jQuery Mobile memudahkan pengembangan user-interface untuk mobile web apps.
  • The interface configuration is markup-driven, yang berarti Anda dapat membuat seluruh aplikasi antarmuka dasar dalam HTML, tanpa perlu menulis satu baris JavaScript.
  • Menyediakan serangkaian custom events baru, mendeteksi events mobile device dan touchscreen seperti  tap, tap-and-hold, swipe, and orientation change (i.e. rotating the device).
  • Memastikan bahwauser-interfcae bekerja pada web browser.
  • Menggunakan theme untuk memudahkan untuk costumized tampilan aplikasi Anda.

Struktur halaman Jquery Mobile

Sebagian besar halaman web aplikasi dengan jQuery Mobile akan mengikuti basic template:

<!DOCTYPE html>
<html>
  <head>
  <title>Page Title</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>

<div data-role="page">

  <div data-role="header">
    <h1>Page Title</h1>
  </div>

  <div data-role="content">
    <p>Page content goes here.</p>
  </div>

  <div data-role="footer">
    <h4>Page Footer</h4>
  </div>
</div>

</body>
</html>

Untuk menggunakan jQuery Mobile, pertama anda perlu meng-include 3 file:

  • JQuery CSS Mobile file (jquery.mobile-1.0a1.min.css)
  • Perpustakaan jQuery (jquery-1.4.3.min.js)
  • Mobile perpustakaan jQuery (jquery.mobile-1.0a1.min.js)

Anda dapat mendownloadnya di website jQuerymobile

Seperti yang anda lihat, konten halaman disimpan dalam sebuah div dengan atribut data-role “page”. Hal ini memungkinkan jQuery mobile tahu di mana konten di markup. Dalam div “page”, ada  ”header”, “content” dan “footer” div.

  • <div data-role=”header”>
    div “header” ini berfungsi untuk membuat toolbar di bagian atas halaman, yang digunakan untuk menyimpan  title dan button. (terdapat tombol default “Back” dimana pengguna dapat menekan untuk kembali ke halaman sebelumnya.) Dengan menambahkan data-position = “fixed” untuk header,membuat header selalu tetap di bagian top screen.
  • <div data-role=”content”>
    Berisi konten utama halaman, seperti teks, images, button, list, form, dan sebagainya.
  • <div data-role=”footer”>
    Membuat toolbar di bagian bawah halaman, yang berguna untuk hal-hal seperti buttona. Untuk membuat header selalu tetap top screen. Dengan menambahkan data-position = “fixed” untuk footer.

Halaman di dalam halaman

Salah satu hal baik dari struktur halaman di atas adalah bahwa Anda  dapat membuat beberapa “page” dalam suatu satu halaman HTML. Ini berarti bahwa browser hanya meload 1 halaman. Berikut ini contohnya:

<!DOCTYPE html>
<html>
  <head>
  <title>jQuery Mobile: Pages within Pages</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>

<div data-role="page" id="home">

  <div data-role="header">
    <h1>Home</h1>
  </div>

  <div data-role="content">
    <p><a href="#about">About this app</a></p>
  </div>

</div>

<div data-role="page" id="about">

  <div data-role="header">
    <h1>About This App</h1>
  </div>

  <div data-role="content">
    <p>This app rocks! <a href="#home">Go home</a></p>
  </div>

</div>

</body>
</html>

Perpindahan Halaman (Page Transitions)

Kita dapat menerapkan salah satu dari beberapa efek transisi yang berbeda ke halaman baru yang muncul. Untuk membuat itu, cukup tambahkan atribut data-transition ke link. Value nya adalah:

  • slide Slide right to left (left to right if tapping the Back button). This is the default.
  • slideup Slide from the bottom to the top (top to bottom if tapping the Back button).
  • slidedown Slide from the top to the bottom (bottom to top if tapping the Back button).
  • pop Expand the new page (contract it if tapping the Back button). Great for dialogs and popups.
  • fade Fade the new page in (fade it out if tapping the Back button).
  • flip Flip the old page out and the new page in, like flipping a card.

Contoh penggunaanya:

<p><a href="#about" data-transition="flip">About this app</a></p>

Dialog

DialogDengan menambahkan data-rel = “dialog” pada link, Anda dapat membuat halaman yang muncul sebagai dialog, dengan rounded corners, margin dan dark background. kita juga bisa menambahkan transitions seperti slideup, pop atau flip. contoh:

<p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>

Dialog tidak akan bekerja jika berada di dalam satu halaman HTML yang sama seperti link, sehingga contoh diatas akan terlihat seperti halaman biasa, bukan dialog. (Remember, this is alpha version :) ) Jadi jika Anda ingin membuat dialog, Anda harus memasukkannya ke dalam halaman HTML terpisah.

Button

Button adalah bagian penting dari setiap aplikasi berbasis touchscreen. Button lebih baik daripada link, karena memberikan target yang lebih besar ketika melakukan navigasi (penting jika kita memiliki jari-jari gemuk!).

Untuk mengaktifkan link ke dalam button di jQuery Mobile, cukup menambahkan data-role = “button”:

code button:

<p><a href="#about" data-role="button">About this app</a></p>

Touch-optimized form elements

jQuery Mobile secara otomatis menggantikan bentuk kontrol standar HTML, seperti teks, checbox dan select, dengan kontrol custom yang bekerja lebih baik dengan interface touchscreen, dan lebih fleksibel.

Misalnya, checkbox yang dibuat jauh lebih besar sehingga mereka lebih mudah untuk digunakan. framework ini mendukung elemen bentuk baru HTML5 seperti searching (untuk pencarian) dan slider. Selain itu, Anda dapat membuat switch “on / off”  flip dengan menggunakan select dengan atribut data-role = “slider”, dan menempatkan 2 option dalam daftar.

Fitur lain yang lumayan bagus adalah pengelompokan radio button dan checkbox. Jika ada beberapa radio button atau checkbox pada elemen fieldset dengan  atribut data-role = “controlgroup”.

<!DOCTYPE html>
<html>
  <head>
  <title>jQuery Mobile Form Demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>

<div data-role="page" id="home">

  <div data-role="header">
    <h1>Ice Cream Order Form</h1>
  </div>

  <div data-role="content">
    <form action="#" method="get">

     <div data-role="fieldcontain">
       <label for="name">Your Name:</label>
       <input type="text" name="name" id="name" value=""  />
     </div>

     <div data-role="controlgroup">
       <legend>Which flavour(s) would you like?</legend>

       <input type="checkbox" name="vanilla" id="vanilla" />
       <label for="vanilla">Vanilla</label>

       <input type="checkbox" name="chocolate" id="chocolate" />
       <label for="chocolate">Chocolate</label>

       <input type="checkbox" name="strawberry" id="strawberry" />
       <label for="strawberry">Strawberry</label>

     </div>

     <div data-role="fieldcontain">
       <label for="quantity">Number of Cones:</label>
       <input type="range" name="quantity" id="quantity" value="1" min="1" max="10"  />
     </div>

     <div data-role="fieldcontain">
       <label for="sprinkles">Sprinkles:</label>
        <select name="sprinkles" id="sprinkles" data-role="slider">
          <option value="off">No</option>
          <option value="on">Yes</option>
        </select>
     </div>

     <div data-role="fieldcontain">
       <label for="store">Collect from Store:</label>
        <select name="store" id="store">
          <option value="mainStreet">Main Street</option>
          <option value="libertyAvenue">Liberty Avenue</option>
          <option value="circleSquare">Circle Square</option>
          <option value="angelRoad">Angel Road</option>
        </select>
     </div>

    <div>
      <fieldset>
        <div><button type="submit" data-theme="d">Cancel</button></div>
        <div><button type="submit" data-theme="a">Order Ice Cream</button></div>
      </fieldset>
    </div>

  </div>

</div>

</body>
</html>

List views: Lists on steroids

List view merupakan fitur yang powerful pada jquery Mobile. Jquery memungkinkan kita untuk membuat unordered lebih stylish. Untuk mengubah list biasa menjadi list view, kita tinggal menambahkan data-role = “ListView” untuk tag ul atau ol.

Berikut adalah beberapa hal yang dapat kita buat menggunakan listview:

  • Sebuah list teks sederhana, dengan kotak yang bagus di setiap item.
  • Sebuah daftar link. Menempatkan tag dalam list item, dan jQuery Mobile secara otomatis menambahkan ikon panah a ‘>’ di setiap sisi kanan dari setiap list item.
  • Nested List (List bersarang). Jika ada ul li di dalam suatu list item, jQuery secara otomatis membuat “halaman” kedua untuk list didalamnya, terkait dengan dari li asli. Ini sangat membantu apabila kita ingin membuat mentu Tree.
  • Split List Button. Dengan menempatkan 2 link dalam li, Anda dapat membuat daftar item dengan bar pemisah vertikal di sisi kanan item tersebut. kemudian kita dapat mengklik sisi kiri atau kanan list item.
  • Count Bubble. Jika Ada elemen class ui-li-count. Dalam list item Mobil jQuery menciptakan sebuah ikon “bubble” kecil  di sisi kanan berisi isi elemen list item. Ini berfungsi untuk menunjukan jumklah inbox atau notifikasi.
  • Search Filtering. Jika Anda menambahkan data atribut-filter = “true” untuk elemen ul atau ol secara otomatis akan muncul filtering list item di atas list view tersebut.

Berikut ini adalah halaman contoh beberapa tampilan list view di jQuery Mobile:

<!DOCTYPE html>
<html>
  <head>
  <title>jQuery Mobile Lists Demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>

<div data-role="page" id="home">

  <div data-role="header">
    <h1>Lists Demo</h1>
  </div>

  <div data-role="content">

    <h2 style="padding: 1em 0;">A list view</h2>

    <ul data-role="listview" data-inset="true">
      <li>Cat</li>
      <li>Dog</li>
      <li>Mouse</li>
      <li>Squirrel</li>
    </ul>

    <h2 style="padding: 1em 0;">A list of links</h2>

    <ul data-role="listview" data-inset="true">
      <li><a href="#">About this app</a></li>
      <li><a href="#">Buy ice cream</a></li>
      <li><a href="#">Find a store</a></li>
    </ul>

    <h2 style="padding: 1em 0;">Nested lists</h2>

    <ul data-role="listview" data-inset="true">
      <li>Play
        <ul>
          <li><a href="#">Easy</a></li>
          <li><a href="#">Medium</a></li>
          <li><a href="#">Hard</a></li>
        </ul>
      </li>
      <li>Settings
        <ul>
          <li><a href="#">Graphics</a></li>
          <li><a href="#">Sound</a></li>
          <li><a href="#">Device</a></li>
        </ul>
      </li>
      <li>Highscores
        <ul>
          <li><a href="#">View</a></li>
          <li><a href="#">Submit</a></li>
          <li><a href="#">Reset</a></li>
        </ul>
      </li>
    </ul>

    <h2 style="padding: 1em 0;">A split button list with filter</h2>

    <ul data-role="listview" data-inset="true" data-filter="true">
      <li>
        <a href="#">The Grapes of Wrath</a>
        <a href="#">Buy This Book</a>
      </li>
      <li>
        <a href="#">The Trial</a>
        <a href="#">Buy This Book</a>
      </li>
      <li>
        <a href="#">A Tale of Two Cities</a>
        <a href="#">Buy This Book</a>
      </li>
    </ul>

    <h2 style="padding: 1em 0;">A list with count bubbles</h2>

    <ul data-role="listview" data-inset="true">
      <li><a href="#">SuperWidgets</a> <span>14</span></li>
      <li><a href="#">MegaWidgets</a> <span>0</span></li>
      <li><a href="#">WonderWidgets</a> <span>327</span></li>
    </ul>

  </div>

</div>

</body>
</html>

Theming

Abu-abu, widget bulat hitam dan biru yang dibuat oleh jQuery Mobil terlihat cukup bagus, tetapi akan sangat membosankan jika kita semua harus menggunakan style yang sama untuk aplikasi mobile kita! Untuk tujuan ini, jQuery Mobile memungkinkan Anda membuat tema khusus yang mengatur hal-hal tersebut seperti:

  • Font family
  • Drop shadow
  • Corner radius values for buttons and boxes
  • Icon set

Selain itu, tema masing-masing dapat berisi hingga 26 swatch warna berbeda (berlabel dari ‘a’ sampai ‘z’), yang mengendalikan warna foreground, warna background, dan gradien. (Tema bawaan jQuery Mobile dilengkapi dengan 5 swatch.) Untuk membuatnya menggunakan attribut data-theme. Sebagai contoh:

<!DOCTYPE html>
<html>
  <head>
  <title>Page Title</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>

<div data-role="page" id="home">

  <div data-role="header">
    <h1>Home</h1>
  </div>

  <div data-role="content">
    <a href="#" data-role="button" data-theme="a">About this app</a>
    <a href="#" data-role="button" data-theme="b">About this app</a>
    <a href="#" data-role="button" data-theme="c">About this app</a>
    <a href="#" data-role="button" data-theme="d">About this app</a>
    <a href="#" data-role="button" data-theme="e">About this app</a>
  </div>

</div>

</body>
</html>

Untuk mengurangi waktu ketika load halaman, jQuery Mobile themes menggunakan CSS3 untuk hal-hal seperti rounded corner, drop shadow dan gradien, daripada menggunakan gambar.

Pada artikel ini kita telah menjelajahi library jQuery Mobile baru, dan melihat bagaimana hal itu bisa menghemat banyak waktu dan usaha ketika membangun aplikasi mobile web. Meskipun saat ini hanya baru ada alfa, dan masih agak kasar, tp ini sangat membantu untuk menciptakan sebuah aplikasi.
Anda dapat mempelajari lebih jauh lagi di situs Mobile jQuery. (jquerymobile.com) Have fun!
sumber: http://www.jquerymobile.com

]]> http://javanlabs.com/mengenal-jquery-mobile-framework/feed/ 0 Pemilihan Koneksi Data Blackberry Secara Otomatis http://javanlabs.com/pemilihan-koneksi-data-blackberry-secara-otomatis/ http://javanlabs.com/pemilihan-koneksi-data-blackberry-secara-otomatis/#comments Fri, 13 Jan 2012 02:49:42 +0000 wisnu http://192.168.1.230/javanlabs/?p=103 Dalam mengembangkan aplikasi Java (J2ME) yang membutuhkan koneksi data (internet) pada platform blackberry, terdapat penambahan sufiks pada URL-nya dimana hal ini tidak terdapat pada platform yang lain. Penambahan sufiks ini bertujuan untuk memberitahukan kepada sistem jalur / konfigurasi koneksi data yang akan dipakai. Adapun sufiks-sufiks tersebut seperti :

  1. http://[domain/alamatIP]{/sub_path};interface=wifi : Koneksi data yang dipakai adalah WiFi
  2. http://[domain/alamatIP]{/sub_path};deviceside=false : Koneksi data yang dipakai adalah melalui BES (Blackberry Enterprise Server)
  3. http://[domain/alamatIP]{/sub_path};deviceside=false;ConnectionType=mds-public : Koneksi data yang dipakai adalah melalui BIS (Blackberry Internet Service)
  4. http://[domain/alamatIP]{/sub_path};deviceside=true;apn=<apn_name> : Koneksi data yang dipakai adalah TCP (direct connection) dimana terdapat opsional parameter user authentication untuk APN (Access Point Name) terkait jika dibutuhkan (;tunnelauthusername=<username>;tunnelauthpassword=<password>)
  5. Sufiks konfigurasi yang lain dapat dilihat di dokumentasi API Blackberry.

Untuk menangani pemakaian jalur koneksi data tersebut terdapat dua cara yaitu secara manual, baik itu hard-coded maupun penyediaan fasilitas pemilihan koneksi pada aplikasi (misalnya berupa layar/dialog pengaturan), serta secara otomatis yaitu aplikasi menentukan sendiri koneksi data yang akan dipakai berdasarkan koneksi data yang tersedia pada saat runtime dengan prioritas tertentu. Pemilihan koneksi data secara otomatis oleh aplikasi tentu akan memberikan kemudahan bagi pemakai aplikasi nantinya dimana tidak dibingungkan oleh pengaturan-pengaturan koneksi data yang mungkin tidak dimengerti oleh pengguna awam.

Untuk mewujudkan hal tersebut maka terlebih dahulu kita mengimplementasikan fungsi untuk mengenali dan memeriksa ketersediaan koneksi-koneksi data yang ada pada perangkat blackberry. Yang pertama adalah fungsi untuk mengenali dan memeriksa koneksi WiFi, dimana terdapat 2 implementasi fungsi, yaitu fungsi untuk memeriksa apakah perangkat WiFi tersedia serta fungsi untuk memeriksa apakah ada koneksi WiFi yang aktif. Berikut implementasi fungsinya :

public static boolean isWifiAvailable()
// cek apakah ada koneksi wifi tersedia
{
	return RadioInfo.areWAFsSupported(RadioInfo.WAF_WLAN);
}
public static boolean isWifiActive()
// cek apakah koneksi wifi aktif
{
	return (RadioInfo.getActiveWAFs() >= RadioInfo.WAF_WLAN);
}

Kemudian fungsi untuk memeriksa apakah data bearer dalam kondisi offline. Fungsi ini nantinya digunakan untuk menentukan penggunaan koneksi data melalui BES maupun BIS dimana kedua koneksi tersebut dapat digunakan jika data bearer tidak offline. Adapun implementasi fungsinya adalah sebagai berikut :

public static boolean isDataBearerOffline() {
   return RadioInfo.getState()==RadioInfo.STATE_OFF || RadioInfo.getSignalLevel() == RadioInfo.LEVEL_NO_COVERAGE;
}

Fungsi pengenalan koneksi terakhir adalah untuk memeriksa apakah koneksi melalui BIS tersedia. Hal ini dilakukan dengan melakukan iterasi pada IPPP service book untuk memeriksa apakah terdapat koneksi BIS. Adapun implementasi fungsinya adalah sebagai berikut :

public static boolean isBISAvailable()
{
	boolean _bisSupport = false;
	// Iterasi IPPP service-book (merepresentasikan jalur data untuk MDS dan BIS-B)
	ServiceBook sb = ServiceBook.getSB();
	ServiceRecord[] records = sb.findRecordsByCid( "IPPP" );
	if( records == null ) {
		return _bisSupport;
	}
	int numRecords = records.length;
	for( int i = 0; i < numRecords; i++ ) {
		ServiceRecord myRecord = records[i];
		if( myRecord.isValid() && !myRecord.isDisabled() ) {
			// Cek apakah myRecord merupakan BIS
			int encryptionMode = myRecord.getEncryptionMode();
			if( encryptionMode == ServiceRecord.ENCRYPT_RIM ) {
			} else {
				_bisSupport = true;
			}
		}
	}
	return _bisSupport;
}

Setelah kita mengimplementasikan fungsi-fungsi yang menangani pemeriksaan ketersediaan koneksi-koneksi data pada Blackberry, maka terakhir adalah membuat fungsi untuk menentukan sufiks URL yang akan digunakan. Pada fungsi ini juga diterapkan urutan prioritas koneksidata yang akan digunakan sehingga sebenarnya implementasi fungsi ini berbeda-beda dimana bersesuaian dengan kebutuhan aplikasi / pembuat aplikasi. Adapun implementasi fungsi ini adalah sebagai berikut :

public static String DeviceConnectionExtension()
// Penentuan Sufiks URL
{
	// 1. SIMULATOR
	if(DeviceInfo.isSimulator()) {
		return "";
	}
	// 2. WiFi
	if (isWifiActive() && isWifiAvailable()) {
		return ";interface=wifi";
	}
	// 3. BIS
	if (!isDataBearerOffline() && isBISAvailable()) {
		return ";deviceside=false;ConnectionType=mds-public";
	}
	// 4. BES
	if (!isDataBearerOffline()) {
		return ";deviceside=false";
	}
	// 5. TCP (asumsi nama APN : something)
	return ";deviceside=true;apn=something";
}

Fungsi terakhir digunakan saat memberikan parameter URL pada objek HttpConnection, seperti yang dicontohkan pada cuplikan kode di bawah ini :

HttpConnection conn = null;
OutputStream out = null;
try
{
	conn = (HttpConnection) Connector.open(url + DeviceConnectionExtension());
	if (postData == null) {
		conn.setRequestMethod(HttpConnection.GET);
	} else {
// .... dan seterusnya

Dengan demikian maka penentuan koneksi data pada akhirnya akan otomatis ditentukan saat aplikasi berjalan (runtime) tanpa membutuhkan peran serta pengguna aplikasi dalam menentukannya.

]]> http://javanlabs.com/pemilihan-koneksi-data-blackberry-secara-otomatis/feed/ 0 Mencicipi PLAY Framework http://javanlabs.com/mencicipi-play-framework/ http://javanlabs.com/mencicipi-play-framework/#comments Fri, 13 Jan 2012 02:46:35 +0000 wisnu http://192.168.1.230/javanlabs/?p=100 Salah satu tantangan dalam pemrograman J2EE ataupun web menggunakan Java adalah proses build and deploy yang seringkali memakan waktu yang cukup lama, bahkan dalam beberapa kondisi harus melakukan restart server meskipun masih dalam proses development yang hanya mengubah beberapa file saja.

Beberapa framework dikembangkan bertujuan untuk semakin memudahkan dan mempercepat proses development aplikasi menggunakan java. Diantaranya play framework, yg bahkan bagi programmer yang belum terbiasa java asalkan menguasai konsep OOP maupun MVC akan sangat mudah untuk memanfaatkan framework ini. OK, mari kita lihat asyik dan mudahnya memanfaatkan play framework.

Getting Started

Langkah pertama yang harus dilakukan adalah mendownload Playframework. Kemudian letakkan ekstraksi hasil download, dan setting path pada sistem operasi mengarah pada folder hasil ekstrasi tersebut sehingga anda bisa mengakses file binary play. Untuk membuat aplikasi pertama ketikkan pada console

[code]play new myApp[/code

myApp adalah nama dari project yang akan kita buat. Otomatis play framework akan membuat susunan folder dan semua file yang diperlukan untuk menjalankan web. Untuk melakukan test bahwa semua berjalan lancar, maka masuk ke dalam folder myApp kemudian ketikkan

[code]play run[/code]

Selanjutnya aplikasi web yang baru saja kita jalankan dapat kita lihat pada browser dengan alamat http://localhost:9000

MVC - Model, View, Controller

Untuk memulai coding, kita akan banyak melakukan modifikasi pada folder “app”, dimana didalamnya akan terdapat 3 folder lagi yaitu :

  • Models : Berisi kelas-kelas yang dibutuhkan sebagai entity, merupakan suatu kelas java biasa yang mempunya annotation @Entity dan field-field yang akan bersesuaian dengan kolom pada database. Contohnya sebagai berikut:
[code]
package models;

import javax.persistence.Entity;

import play.db.jpa.Model;

@Entity
public class User extends Model{
	public String username="";
	public String password="";
	public User(String username, String password) {

		this.username = username;
		this.password = password;
	}
	public User() {
		// TODO Auto-generated constructor stub
	}

}
[/code]
  • Views : Folder ini akan berisi semua tampilan web dengan format html. Dalam file html, dapat digunakan variable-variable yang telah diset pada controller seperti layaknya jstl. Nama file yang dibuat disesuaikan dengana nama method pada controller yang bersangkutan, dan dimasukkan dalam folder sesuai dengan nama Controllernya.
  • Controllers : Folder ini akan berisi kelas-kelas java yang mendefinisikan action-action yang petama kali akan dipanggil ketika aplikasi web menerima request. Konfigurasi mapping dapat kita lihat pada file myApp/conf/routes, misalkan secara default didefinisikan sebagai berikut :
[code] *       /{controller}/{action}                  {controller}.{action}][/code]

maka untuk setiap request GET/POST (ditandakan dengan tanda *) dengan path /Users/list akan mengambil pada controller dengan nama Users dan method list(). Dan secara otomatis akan mengambil view pada myApp/app/views/Users/list.html.
Pada Controller ini kita berinteraksi antara model yang telah kita buat untuk mengambil data, dan passing isinya ke view yang telah kita buat.

Demikian sentuhan pertama kita menggunakan playframework, untuk mempelajari lebih mendalam dapat kita baca lebih lanjut padaDokumentasi yang disediakan.

]]> http://javanlabs.com/mencicipi-play-framework/feed/ 0