PENGENALAN JAVA FX (Syarifuddin) Apa itu Java FX adalah teknologi yang mulai dikembangkan oleh SUN Microsystems sebelum diakuisi oleh Oracle. pada awalnya Java FX adalah scripting language, seperti javascript tetapi dengan banyak sekali fitur canggih, terutama untuk pembuatan UI yang dilengkapi dengan animasi yang begitu mengesankan. Sayangnya pada wakytu itu Java FX kurang berkembang, kurang bisa bersaing dengan platform dari microsoft (waktu itu adalah Windows Presentation Framework atau WPF). Setelah Java diakuisi oleh Oracle Java FX mengalami banyak sekali perubahan, termasuk yang paling fundamental adalah dengan dihapuskannya Java FX Script dari daftar produk yang disupport oleh Oracle. Sebagai lanjutannya, Java FX menjadi bagian dari Java SE, yaitu pustaka tambahan yang berfokus pada pengembangan User Interface, dengan banyak sekali tambahan fitur seperti data binding, support styling dengan css, dan scene builder untuk desain UI Java FX. Sekarang JavaFX menambahkan fitur baru untuk developmenta yaitu FXML. Apa itu FXML? FXML adalah salah satu alternatif untuk pembuatan aplikasi di JavaFX atau pembuatan SceneGraph. Sepertinya memang tidak mau kalah dengan RIA lain yang populer seperti Adobe Flex/Adobe Flash Builder, ZKoss dan lain-lain. Mereka sama-sama menggunakan XML sebagai alternatif pembuatan layout atau GUI, begitu juga pada Android Kesimpulannya Java FX akan menjadi salah satu pilihan para pengemban software dalam mewujud kan impiannya, misalkan programmer web akan merasakan hasil programmnya seakan berbasis desktop. Seperti komentar di website netbeans.org dibawah ini:
Saat ini JavaFx sudah rilis versi 2.0 dengan falat form Java 8.0 yang sudah di masukkan pada sejak rilis Netbeans 7.3, 7.4 hingga saat tulisan ini sudah pada versi 8.0
Untuk memulai membuat aplikasi dengan Java FX, berikut beberapa komponen yang harus kita siapkan :
Mac/Linux/PC Java SE7 SDK (with FX Library) - > http://www.oracle.com/technetwork/java/javafx/downloads/index.html Java FX Sample -> http://www.oracle.com/technetwork/java/javafx/downloads/index.html Scene Builder ->http://www.oracle.com/technetwork/java/javafx/downloads/index.html Netbeans IDE -> https://netbeans.org
Pada sebuah aplikasi Java FX, secara umum akan kita kenal 3 buah bagian, yaitu : 1. Application Application adalah class yang berfungsi sebagai launcher aplikasi yang kita buat. Pada Java SE, class launcher ini adalah class yang mempunyai “public static void main(String[] args)”, yaitu fungsi yang akan dipanggil pertama kali ketika aplikasi mulai dijalankan. Perlu diketahui, fungsi ini sudah tidak digunakan pada Java FX, sebagai gantinya adalah fungsi init() dan start(Stage stage). 2. Controller Controller adalah class yang berhubungan langsung dengan UI (sama dengan konsep MVC -> Model, View, Controller). Controller adalah class yang bertugas untuk menangani segala macam event yang ada pada UI (misalkan klik pada tombol, merubah text dari label, dll). pada file class controller ini, kita dimungkinkan untuk mendefinisikan variabel yang secara langsung terhubung dengan object UI yang didefinisikan dalam layout (.fxml), sehingga akan memudahkan kita dalam membangun aplikasi yang kita inginkan. 3. UI-Layout File ini merupakan file dimana kita mendefinisikan bagaimana bentuk UI kita serta komponen kontrol apa saja yang digunakan. pendekatan MVC seperti ini memungkinkan pengembangan perangkat lunak lebih cepat karena pengembang UI bisa bekerja secara paralel dengan pengembang controller, yang artinya proses kolaborasi bisa dilakukan dengan paralel, tidak perlu menunggu satu dengan yang lainnya. 4. Model-(additional) Model adalah representasi sebuah proses/behaviour, atau memang secara umum class model adalah class yang berhubungan dengan interaksi data (bisa juga dengan database).
Untuk memulai membuat contoh program JavaFX maka terlebih dahulu penuhi syarat-syarat aplikasi diatas, yakni dengan menginstall program Netbeans 7.3.1 yang sudah termasuk [latform javaFx 2.2 Jalankan Aplikasi hingga tampil seperti dibawah ini: Pilih JavaFX pada jendela Categories dan JavaFX Application pada Projects.
Selanjutnya klik tombol Next
Ketikkan Nama Project : JavaFX dan Lokasi disesuaikan dengan folder tempat program latihan anda ini, Netbeans akan membuatkan Project sesuai yang anda tuliskan pada Project Folder.
Klik tombol Finish: Selanjutnya ketik listing file class JavaFX2.java seperti dibawah ini:
package javafx2; import import import import import import import import
java.net.URL; javafx.application.Application; javafx.scene.Scene; javafx.scene.layout.HBox; javafx.scene.layout.Region; javafx.scene.web.WebEngine; javafx.scene.web.WebView; javafx.stage.Stage;
/** * * @author din */ public class JavaFX2 extends Application { private Scene scene; MyBrowser myBrowser; @Override public void start(Stage primaryStage) { primaryStage.setTitle("twitSyarifuddin.co"); myBrowser = new MyBrowser(); //Definis jendela Grafik scene = new Scene(myBrowser, 640, 480); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } class MyBrowser extends Region { HBox toolbar; WebView webView = new WebView(); WebEngine webEngine = webView.getEngine(); public MyBrowser() { //Broweser membuka file BukaMapCuaca.html final URL urlGoogleMaps = getClass().getResource("BukaMapCuaca.html"); webEngine.load(urlGoogleMaps.toExternalForm()); getChildren().add(webView); } } } //--------------------
Selanjutnya buat file html dengan nama “BukaMapCuaca.html” dan ketik listing dibawah ini:
Map Cuaca (Weather Map) <script src="http://openweathermap.org/js/OpenLayers.js"> <script src="http://openweathermap.org/js/OWM.OpenLayers.1.3.6.js">
<script type="text/javascript"> function init() { // Osmaneli Turki // var lat = 4885341; // var lon = 3348800; var lat = 4885341; var lon = 3348800; var lonlat = new OpenLayers.LonLat(lon, lat); var map = new OpenLayers.Map("basicMap"); // Create overlays // OSM var mapnik = new OpenLayers.Layer.OSM(); // Stations var stations = new OpenLayers.Layer.Vector.OWMStations("Stations"); // Current weather var city = new OpenLayers.Layer.Vector.OWMWeather("Weather"); //Addind maps map.addLayers([mapnik, stations, city]); map.setCenter( lonlat, 10 ); }
Setelah disimpan coba Run program, maka jika computer yang digunakan terhubung ke Internet maka akan hasilnya seperti dibawah ini:
Sebuah peta cuaca yang ditampilkan pada daerah Osmaneli di Negara Turki, untuk mendapatkan nilai variable lat (Latitude ) dan lon (Longitude ) silakan masuk pada website: http://www.openweathermap.org/maps lalu pada kotak pencarian kota dibawah ketik “Osmaneli” lalu klik tombol (Find), maka hasilnya akan seperti dibawah ini:
Lalu sorot Url menu “Share current view of the map, maka nilai lat dan lon akan ditampilkan disitu, perlu konversi untuk mendapat nilai tepat sesuai metode GIS. Perhatikan gambar dibawah ini:
Pada program Nilan Lat dan Lon seperti dibawah ini:
var lat = 4885341; var lon = 3348800; Terima kasih selamat mencoba untuk sesuai daerah yang anda inginkan dengan mengganti nilai variable lat dan lon nya , dan tentu saja meski daerahnya sama tetapi jika hari dan cuaca sudah berbeda maka hasil cuaca juga akan berbeda, bukan lagi 31° seperti pada saat program ini kami jalankan. Untuk konversi data lat dan lon hingga tepat dengan menggunakan MS. Excel yang familiar silakan lihat disini: http://www.gistutorial.net/software/ms-excel-konversi-decimal-degree-dd-ke-derajat-menit-detik-dms.html atau dibawah ini: http://ekaprayudha.blogspot.com/2012/06/ms-excel-konversi-decimal-degree-dd-ke.html Terima kasih untuk semua member yang sudah follow di Academia.edu Wassalam Syarifuddin // Forum : Bakul.megadata.co
