Untuk mulai menjalankan contoh yang diberikan dalam artikel ini, Anda memerlukan JDK 1.2 atau lebih tinggi ( http://java.sun.com ). Anda juga memerlukan server web yang mendukung JSP. Saya menguji contoh ini di Tomcat, di mana saya menggunakan kelas com.sun.image.codec.jpeg (dirilis di Sun Java 2 SDK) untuk menyandikan data grafik.
Karena Anda ingin memiliki latar belakang yang dapat digunakan kembali, Anda harus membuat kelas Java untuk mengelola tata letak, termasuk area judul dan batas luar. Seperti yang ditunjukkan pada Gambar A.
Gambar A
Seperti yang bisa kamu lihat, saya telah membuat bayangan pada area judul dan batas luarnya. Judulnya memiliki batas putih dengan lebar satu piksel, dan area grafis memiliki batas hitam tipis. Perbatasan ini menambah definisi pada bayangan.
Batasan mudah dibuat. Gunakan metode Fill() pada objek Graphics2D untuk mengisi persegi panjang judul berwarna biru, lalu gunakan metode draw() untuk menggambar batas dengan warna lain.
Membuat efek bayangan juga sangat sederhana. Pertama, gunakan metode fill() untuk menggambar bayangan. Kemudian, gambarkan judul dengan offset tujuh piksel. Offset ini menciptakan efek tiga dimensi, yang menghasilkan efek bayangan.
Misalkan ada perusahaan yang menjual produk pertanian dan membutuhkan histogram untuk menunjukkan penjualan. Dalam aplikasi praktisnya, kita perlu memperoleh data ini dari database atau file XML, namun untuk mempermudah, mari kita asumsikan bahwa data penjualan disimpan dalam dua array berikut:
String nama data[] = {"apel", "jeruk", "persik", "lemon", "jeruk bali"};
int nilai data[] = {11, 62, 33, 102, 50};
Array pertama menampung item berbagai produk pertanian yang dijual oleh perusahaan. Array kedua adalah volume penjualan yang terkait dengan setiap produk pertanian.
Histogram akan ditampilkan dan disimpan dalam format JPEG, jadi kita perlu mengatur MIME, tipe konten, dengan benar. Browser menggunakan tipe MIME untuk memutuskan bagaimana bereaksi. Kode berikut menetapkan tipe MIME:
respon.setContentType("gambar/jpeg");
Selanjutnya kita membutuhkan sebuah objek yang mewakili gambar tersebut. Java 2D API mendukung kelas BufferedImage , yang menyediakan cara untuk menyimpan dan mengelola data piksel dalam memori. Kita ingin grafisnya berwarna, jadi kita menggunakan tipe grafis TYPE_INT_RGB . Dua data integer WIDTH dan HEIGHT digunakan untuk menentukan lebar dan tinggi gambar dalam piksel:
BufferedImage bi = BufferedImage baru(LEBAR, TINGGI, BufferedImage.TYPE_INT_RGB);
Sekarang kita memiliki objek BufferedImage, kita dapat mengatur konten Graphics2D dengan memanggil metode createGraphics() objek tersebut:
Graphics2D biContext = bi.createGraphics();
Pemrogram yang membuat grafik perlu mengatur parameter WIDTH berdasarkan pentingnya grafik dan tata letak halaman secara keseluruhan. Elemen grafis secara otomatis mengubah ukurannya sesuai dengan perubahan lebar grafis.
Lebar dan batas judul, serta persegi lurus terpanjang dari grafik, perlu dihitung berdasarkan parameter WIDTH . Tujuannya adalah untuk memastikan bahwa semua elemen grafis tidak melebihi lebar grafik dan melewati batas kanan grafik.
Jumlah item data yang perlu ditampilkan menentukan parameter HEIGHT pada grafik. Jika elemen baru ditambahkan ke array datavalues[] dan datanames[] , tinggi grafik harus bertambah untuk mengakomodasi ukuran area tampilan yang diperlukan.
Parameter maksimum digunakan untuk persegi lurus terpanjang. Kemudian, lebar balok persegi panjang lainnya dihitung relatif terhadap maksimum :
int barWidth = (innerWIDTH * CurrentValue) / maksimum;
Algoritma di atas menggunakan dua nilai maksimum dan innerWIDTH (area grafis) dari grafik untuk memastikan bahwa persegi panjang akan secara otomatis melebar dan menyusut seiring dengan perubahan nilai WIDTH .
Untuk menampilkan grafik, kita perlu membuat gambar latar belakang dan kemudian menambahkan data grafik. Pertama, buat objek graphBG dan panggil metode draw()- nya:
graphBG gr = grafikBG baru();
gr.draw(biContext, LEBAR, TINGGI, "Hasil Pertanian", "Rata-Rata Keseluruhan: " + rata-rata);
Parameter metode draw() mencakup konten grafis, biContext , WIDTH dan HEIGHT , yang digunakan kelas graphBG untuk menentukan lebar dan tinggi judul dan area grafik. Terakhir, nilai rata-rata data dihitung dan ditambahkan ke teks yang ditampilkan di judul.
Posisi koordinat vertikal (sumbu y) setiap blok persegi panjang dihitung berdasarkan rumus berikut: y_pos = i * displayHeight + headerOffset . displayHeight sama dengan tinggi teks pada persegi lurus ditambah tinggi persegi lurus, dan headerOffset mewakili jarak vertikal dari bagian atas grafik, termasuk tinggi area judul dan bayangan.
Saya membuat persegi panjang ini dan batasnya menggunakan teknik yang sama seperti yang saya gunakan untuk membuat batas judul sebelumnya. Saya mengurangi satu piksel dari lebar dan tinggi batas persegi panjang sehingga setiap persegi panjang tampak memiliki batas merah, dan membuat efek pengurangan menjadi mudah dengan menggambar batas dalam pada latar belakang putih.
Kita telah membuat gambar di memori, sekarang kita mengkodekannya dan menampilkannya kepada pengguna. Kita tidak bisa menggunakan aliran keluaran JSP default untuk memproses JPEG, jadi kita perlu menggunakan respon.getOutputStream() untuk mendapatkan aliran dari objek respons. Kita dapat menggunakan aliran keluaran untuk membuat objek JPEGImageEncoder dan memanggilnya encode() , meneruskan objek BufferedImage yang kita buat sebelumnya:
Encoder JPEGImageEncoder = JPEGCodec.createJPEGEncoder(keluaran);
encoder.encode(bi);
Gambar yang dihasilkan relatif kecil, hanya menempati kapasitas 13,7 kilobyte. Gambar B memberikan efek akhir:
Gambar B
Dalam kedua kasus tersebut, output dari index.jsp adalah gambar JPEG. Anda dapat menyimpannya ke desktop Anda atau menekan tombol PrintScreen untuk mengambil tangkapan layar. Jika Anda perlu menampilkan beberapa grafik pada halaman yang sama atau memasukkan grafik ke dalam konten lain, Anda dapat menggunakan tag img HTML (< img src = ”index.jsp"> ), lalu menempatkan grafik tersebut bila diperlukan, seperti Gunakan a membentuk.
Mungkin salah satu teknologi Internet tertua untuk grafik yang dihasilkan secara dinamis dapat melakukan tugas selain menampilkan gambar. Bayangkan Anda perlu mencatat jumlah pemirsa gambar ini (mirip dengan mencatat jumlah klik pada iklan), lalu Anda perlu menerapkan tugas seperti penghitungan klik, akses database atau file di index.jsp , dan Anda dapat memproses tugas-tugas ini di latar belakang. Tidak perlu menggunakan pengalihan halaman buffer ke pengguna.
Dalam makalah ini kami menguji sebuah metode yang menghasilkan histogram yang rapi dan tampak menyenangkan. Kami dengan terampil menangani perubahan ukuran grafik dan menyandikannya ke dalam format JPEG, dan mendiskusikan modifikasi kode HTML untuk menempatkan gambar yang dihasilkan di lokasi berbeda pada halaman.