Datepicker Menggunakan JQuery

Datepicker merupakan salah satu solusi untuk memilih/input tanggal yang biasanya digunakan dalam suatu form, misalnya form pengisian tanggal lahir. Solusi yang lain mungkin dapat dengan menggunakan combo box yang menampilkan tanggal (1-31), semua bulan, dan range tahun. Menurut saya solusi yang kedua kurang elegan dan kurang enak dilihat :-P. Jika menggunakan datepicker, dari segi tampilan jauh lebih menarik. Datepicker dapat dibuat dengan menggunakan Javascript. Akan tetapi saat ini sudah ada yang lebih mudah, yaitu dengan menggunakan JQuery ;-). Oleh karena itu kali ini saya akan menulis bagaimana membuat datepicker menggunakan JQuery.

Pertama-tama Anda download terlebih dahulu JQuery UI [di sini]. Jangan lupa untuk memilih theme yang Anda suka ya ;-). Di sini saya menggunakan theme UI Lightness. Yup, setelah Anda download, ekstrak file *.zip tersebut. Berikut ini adalah tampilan dari theme UI Lightness :

Langkah selanjutnya adalah :
1. Buat sebuah folder di dalam dokumen root web Anda, misalkan saja nama foldernya adalah kalender.
2. Lalu buat folder css dan js di dalam folder kalender. Kemudian copykan file jquery-1.4.4.js dan folder ui dari folder development-bundle ke dalam folder js Anda.
3. Copykan juga file jquery.ui.all.css, jquery.ui.base.css, jquery.ui.datepicker.css, dan jquery.ui.theme.css dari folder development-bundle\themes\ui-lightness serta file demos.css dari folder development-bundle\demos ke dalam folder css Anda.
4. Dan yang terakhir copy folder images dari folder development-bundle\themes\ui-lightness ke dalam folder css Anda.

Sekarang kita mulai menuliskan kodenya, tapi sebelumnya buat file misalkan dengan nama index.html di dalam folder kalender. Kemudian ketikkan baris kode berikut ini ke dalam file index.html tersebut :

Menampilkan JFrame di Tengah Layar

Tulisan ini saya buat karena masih banyak yang bingung bagaimana caranya agar aplikasi Java yang telah dibangun dapat ditampilkan di tengah layar monitor. Secara default, JFrame memang akan ditampilkan di pojok kiri atas layar monitor Anda.

Oleh karena itu kali ini saya akan membahas bagaimana caranya agar JFrame yang telah kita buat dapat tampil di tengah-tengah layar monitor. Disini akan saya berikan 2 cara untuk melakukan hal tersebut. Langsung ke contoh source code saja mungkin ya 🙂

Buat sebuah project terlebih dahulu, kemudian tambahkan sebuah JFrame untuk mengimplementasikan baris kode di bawah ini.

Cara I ini memanfaatkan Class Dimension :

import java.awt.Dimension;
import java.awt.Toolkit;

public class View extends javax.swing.JFrame {
     private Dimension screensize;

     public View() {
          initComponents();

          // Baris kode ini yang membuat JFrame tampil di tengah layar
          screensize = Toolkit.getDefaultToolkit().getScreenSize();
          setLocation((screensize.width / 2) - (getSize().width / 2), (screensize.height / 2) - (getSize().height / 2));
     }

     public static void main(String args[]) {
          java.awt.EventQueue.invokeLater(new Runnable() {
               public void run() {
                    new View().setVisible(true);
               }
          });
     }
}

Cara II ini jauh lebih ringkas, berikut ini adalah baris kodenya :

public class View extends javax.swing.JFrame {
     public View() {
          initComponents();

          // Baris kode ini yang membuat JFrame tampil di tengah layar
          setLocationRelativeTo(this);
     }

     public static void main(String args[]) {
          java.awt.EventQueue.invokeLater(new Runnable() {
               public void run() {
                    new View().setVisible(true);
               }
          });
     }
}

Sekarang clean&build project Anda, dan jalankan…..

…Tarraaaa…

Sekarang aplikasi Anda sudah tampil di tengah layar monitor Anda bukan 😉 Anda tinggal pilih saja dari kedua cara tersebut di atas yang menurut Anda paling efisien, hehehe 😛

Semoga Bermanfaat 🙂

Full Screen View di J2ME

Dalam tulisan [sebelumnya] telah saya tulis tentang cara membuat splash screen menggunakan J2ME. Pada tulisan tersebut, splash screen yang ditampilkan tidak full screen. Rasanya kurang sreg kalo membuat aplikasi untuk ponsel tapi tidak tampil penuh pada layar (full screen).  😛

Untuk membuat aplikasi Anda dapat tampil full screen pada layar ponsel, caranya sangat mudah, Anda hanya perlu menambahkan baris kode berikut ini pada konstruktor Class Canvas Anda :

setFullScreenMode(true);

Lalu clean and build project Anda, dan jalankan,,,,  taarraaaaa,, sekarang tampilan aplikasi Anda menjadi 1 (satu) layar penuh pada ponsel Anda  🙂

Semoga Bermanfaat 🙂

Membuat Splash Screen di J2ME

SplashScreen,, biasanya saya gunakan untuk mempercantik tampilan agar ketika program pertama kali dijalankan,, program tidak langsung terbuka,, tetapi ada sesuatu gambar atau animasi.. Bisa juga untuk memberikan informasi kepada user apa yang terjadi ketika program dijalankan sebelum akhirnya program terbuka.. 🙂

Buat terlebih dahulu sebuah Class Canvas, beri nama Class-nya misal dengan SplashTimerCanvas.. Kemudian ketikkan baris kode berikut ini :

import javax.microedition.lcdui.*;

public class SplashTimerCanvas extends Canvas {
     private MidletSplashTimer midletTT;
     int w, h, hImg;
     private Image img;

     public SplashTimerCanvas(MidletSplashTimer midlet) {
          w = getWidth();
          h = getHeight();
          midletTT = midlet;
          try {
               img = Image.createImage(getClass().getResourceAsStream("/image/icy.png"));
          } catch (java.io.IOException e) {
          }
          hImg = img.getHeight();
     }

     public void paint(Graphics g) {
          g.setColor(255, 255, 255);
          g.fillRect(0, 0, w, h);
          g.drawImage(img, w / 2, h / 2, Graphics.HCENTER | Graphics.VCENTER);
     }

     protected void hideNotify() {
          midletTT.stopTimer();
     }

     protected void showNotify() {
          midletTT.startTimer();
     }

     public void commandAction(Command command, Displayable displayable) {
     }
}

class SuccesCanvas extends Canvas implements CommandListener {
     MidletSplashTimer midlet;

     public SuccesCanvas(MidletSplashTimer midlet) {
          this.midlet = midlet;

          try {
               // Set up this canvas to listen to command events
               setCommandListener(this);
               // Add the Exit command
               addCommand(new Command("Exit", Command.EXIT, 1));
          } catch (Exception e) {
               e.printStackTrace();
          }
     }

     protected void paint(Graphics g) {
          g.setColor(255, 255, 255);
          g.fillRect(0, 0, getWidth(), getHeight());
          g.setColor(255, 0, 0);
          g.drawString("BERHASIL", getWidth() / 2, (getHeight() / 2) - 10, Graphics.TOP | Graphics.HCENTER);
          g.drawString("Silakan Masuk", getWidth() / 2, (getHeight() / 2) + 10, Graphics.TOP | Graphics.HCENTER);
     }

     public void commandAction(Command c, Displayable d) {
          if(c.getLabel().equalsIgnoreCase("Exit")){
               this.midlet.notifyDestroyed();
          }
     }
}

Di dalam Class SplashTimerCanvas, terdapat method showNotify() dan hideNotify(). Kedua method tersebut akan dijalankan secara otomatis ketika Class SplashTimerCanvas dijalankan (showNotify) dan ditutup (hideNotify). Di dalam Class SplashTimerCanvas juga terdapat Class SuccesCanvas. Class tersebut berfungsi untuk menampilkan suatu tulisan sesaat setelah splash screen selesai ditampilkan..  Oh iya, sebelumnya Anda siapkan sebuah gambar dulu ya, karena pada baris kode tersebut di atas, yang akan dijadikan splash screen adalah sebuah gambar. Pada baris kode di atas, nama file gambarnya saya beri nama icy.png 🙂

Vibrate dan Flashing Backlight Menggunakan J2ME

Yup, sesuai judulnya, sekarang saya akan coba buat suatu aplikasi yang dapat membuat ponsel Anda bergetar dan mengedipkan lampu ponsel Anda. Kedua hal ini biasanya digunakan untuk efek dalam pembuatan aplikasi game mobile. 😉

Langsung saja ke source code saja mungkin ya 🙂

Sebelumnya, buat dulu sebuah MIDlet, kemudian ketikkan baris source code berikut ini :

import javax.microedition.lcdui.Command;
import javax.microedition.lcdui.CommandListener;
import javax.microedition.lcdui.Display;
import javax.microedition.lcdui.Displayable;
import javax.microedition.lcdui.Form;
import javax.microedition.midlet.*;

public class FlashingBacklight extends MIDlet implements CommandListener {
     public void startApp() {
          Displayable d = new Form("Belajar Vibrate dan Flashing Backlight");

          d.addCommand(new Command("Exit", Command.EXIT, 0));
          d.addCommand(new Command("Vibrate", Command.SCREEN, 0));
          d.addCommand(new Command("Flash Backlight", Command.SCREEN, 0));
          d.setCommandListener(this);

          Display.getDisplay(this).setCurrent(d);
          Display.getDisplay(this).flashBacklight(2000);
     }

     public void pauseApp() {
     }

     public void destroyApp(boolean unconditional) {
     }

     public void commandAction(Command c, Displayable d) {
          if(c.getLabel().equalsIgnoreCase("Exit")){
               notifyDestroyed();
          }else if(c.getLabel().equalsIgnoreCase("Vibrate")){
               // Menangani Vibrating Ponsel Anda
               Display.getDisplay(this).vibrate(2000);
          }else if(c.getLabel().equalsIgnoreCase("Flash Backlight")){
               // Menangani Flashing Backlight Ponsel Anda
               Display.getDisplay(this).flashBacklight(2000);
          }
     }
}

Yupz, jangan lupa clean and built dulu project Anda, kemudian jalankan project yang barusan Anda buat tadi 🙂
Berikut ini saya sertakan beberapa screenshotnya :  😉
1. Tampilan Awal MIDlet.

Tekan tombol Options untuk menampilkan menu Vibrate dan Flash Backlight 🙂

2. Tampilan Menu.

Dari kedua menu tersebut, pilih salah satu dan tekan tombol select untuk dapat melihat efeknya 😉

Semoga Bermanfaat 🙂