Sebuah aplikasi dikatakan suspended(atau bisa dibilang paused) ketika aplikasi tersebut dialihkan atau ketika perangkat yang digunakan untuk menjalankan aplikasi tersebut tenaga baterainya hampir habis. Namun aplikasi tersebut masih berjalan di memory supaya pengguna dapat menyalakan aplikasinya lagi dengan cepat(atau di-resume).
Ketika aplikasi di-close, aplikasi tersebut akan ter-suspend selama 10 detik lalu kemudian terhenti(terminated). Data-data yang telah kita masukkan ke dalam variabel-variabel pada aplikasi tersebut akan hilang ketika aplikasi berhenti. Bagaimana membuat suatu aplikasi yang dapat menyimpan data yang kita masukkan seolah aplikasi tersebut tidak pernah berhenti? Disini kita akan menggunakan apa yang disebut dengan Roaming Settings. Roaming Settings memudahkan kita menyimpan data yang dapat diakses pada beberapa perangkat lain.
Percobaan menggunakan Roaming Settings
Pada percobaan ini kita menggunakan Visual Studio dengan Template Javascript Windows Store Apps Blank Template .
1. Pertama, buat New Project lalu pilih Template Javascript -> Store Apps -> Windows Apps, lalu pilih Blank App.
Ketika memilih Blank App, secara default akan tersedia file default.html dan default.js.
2. Buka file default.html. Lalu copy kode berikut ini di antara tag body
<div id="container"> <h1>Demo menggunakan Roaming Settings - <a href="http://arliansyahazhary.blogspot.com">arliansyahazhary.blogspot.com</a></h1><br/> <h3><label for="InputNama">Masukkan namamu disini:</label></h3> <input type="text" id="InputNama" /> <button id="TampilNama">Click</button><button id="Hapus">Hapus Nama</button><br/> <h2>Nama yang disimpan: <span id="SimpanNama"></span></h2><br/> <h2>Output: <span id="OutputNama"></span></h2><br/> </div>
Agar kelihatan lebih rapi, kita atur margin pada #container dan display pada label dengan CSS. Copy kode berikut ini diantara tag head di bawah script default.js
<style> #container{ margin: 32px; } label{ display: block; } </style>
Aplikasi ini akan tampil seperti ini
3. Lalu kita akan membuat sebuah Event Handler yang meng-handle nama yang dimasukkan lalu ditampilkan dan disimpan. Kita akan membuat fungsi dalam javascript untuk melakukan hal tersebut.
Buat tag <script></script> di bawah tag <style> tadi lalu copy kode berikut di antara tag script tersebut
function ShowAndSave() { // ambil nama yang dimasukkan pada textbox var TextboxInput = document.getElementById("InputNama").value; // tampilkan nama tadi pada tag span yang memiliki id OutputNama var OutputNama = document.getElementById("OutputNama"); OutputNama.innerText = "Hello " + TextboxInput + ". Apa kabar?"; // mengakses roaming settings var AppData = Windows.Storage.ApplicationData.current; var RoamingSettings = AppData.roamingSettings; // simpan nama yang dimasukkan tadi pada roaming settings dengan kunci "Nama" RoamingSettings.values["Nama"] = TextboxInput; // load nama yang disimpan dengan kunci "Nama" tadi // lalu ditampilkan pada tag span yang memiliki id SimpanNama var LoadNama = document.getElementById("SimpanNama"); LoadNama.innerText = RoamingSettings.values["Nama"]; }
Fungsi tersebut akan menampilkan nama yang kita masukkan tadi, lalu menyimpannya ke dalam Roaming Settings dengan kunci "Nama".
4. Agar dapat menggunakan fungsi tersebut, kita harus register terlebih dahulu fungsi tersebut dengan Event Listener. Buka file default.js, maka akan terdapat kode seperti ini
// For an introduction to the Blank template, see the following documentation: // http://go.microsoft.com/fwlink/?LinkId=232509 (function () { "use strict"; var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; app.onactivated = function (args) { if (args.detail.kind === activation.ActivationKind.launch) { if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { // TODO: This application has been newly launched. Initialize // your application here. } else { // TODO: This application has been reactivated from suspension. // Restore application state here. } args.setPromise(WinJS.UI.processAll()); } }; app.oncheckpoint = function (args) { // TODO: This application is about to be suspended. Save any state // that needs to persist across suspensions here. You might use the // WinJS.Application.sessionState object, which is automatically // saved and restored across suspension. If you need to complete an // asynchronous operation before your application is suspended, call // args.setPromise(). }; app.start(); })();
Perhatikan kode yang di-highlight warna kuning, kode tersebut akan memproses semua yang diinisialisasi ketika aplikasi baru dijalankan. Edit baris kode tersebut menjadi seperti ini
args.setPromise(WinJS.UI.processAll().then(function completed() { // TODO }));
Setelah semuanya diproses, aplikasi akan mengeksekusi kode yang berada pada TODO. Copy kode berikut ini pada TODO
// register event click pada tombol dengan id TampilNama // tombol click tersebut akan menjalankan fungsi ShowAndSave var TombolTampil = document.getElementById("TampilNama"); TombolTampil.addEventListener("click", ShowAndSave, false); // akses roaming settings var AppData = Windows.Storage.ApplicationData.current; var RoamingSettings = AppData.roamingSettings; // load data yang disimpan dengan kunci "Nama" tadi // lalu tampilkan pada tag span yg ber-id SimpanNama var LoadNama = document.getElementById("SimpanNama"); if (RoamingSettings.values["Nama"]) LoadNama.innerText = RoamingSettings.values["Nama"]; else // jika tidak ada nama yang disimpan, tampilkan kosong LoadNama.innerText = "";
5. Jalankan aplikasi tersebut dengan CTRL + F5. Masukkan nama kamu, lalu klik tombol Click untuk menampilkan dan menyimpan nama. Kemudian tutup aplikasinya, lalu jalankan lagi dengan CTRL + F5 dan lihat.. nama yang kamu masukkan tadi masih tersimpan.
Menghapus nama yang disimpan
6. Untuk menghapus nama yang disimpan, kita akan membuat suatu fungsi untuk menghapus nama yang disimpan tersebut lalu di-register pada tombol "Hapus Nama". Buka lagi default.html, lalu copy kode berikut di bawah function ShowAndSave() tadi
function HapusNama() { // akses roaming settings var AppData = Windows.Storage.ApplicationData.current; var RoamingSettings = AppData.roamingSettings; // hapus nilai yang disimpan dengan kunci "Nama" tadi RoamingSettings.values.remove("Nama"); // tampilkan kosong var LoadNama = document.getElementById("SimpanNama"); LoadNama.innerText = ""; }
Lalu buka default.js, pada WinJS.UI.processAll().then() tadi tambahkan kode berikut untuk register fungsi HapusNama pada tombol Hapus
// register event hapus pada tombol dengan id Hapus // tombol hapus nama tersebut akan menjalankan fungsi HapusNama var TombolHapus = document.getElementById("Hapus"); TombolHapus.addEventListener("click", HapusNama, false);
7. Jalankan aplikasi dengan CTRL + F5, lalu klik tombol Hapus Nama. Kemudian tutup aplikasinya, lalu jalankan lagi dan lihat.. nama yang disimpan tadi telah terhapus.
Source Code percobaan Roaming Settings
default.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>WinControl</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.2.0/js/base.js"></script> <script src="//Microsoft.WinJS.2.0/js/ui.js"></script> <!-- WinControl references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> <style> #container{ margin: 32px; } label{ display: block; } </style> <script> function ShowAndSave() { // ambil nama yang dimasukkan pada textbox var TextboxInput = document.getElementById("InputNama").value; // tampilkan nama tadi pada tag span yang memiliki id OutputNama var OutputNama = document.getElementById("OutputNama"); OutputNama.innerText = "Hello " + TextboxInput + ". Apa kabar?"; // mengakses roaming settings var AppData = Windows.Storage.ApplicationData.current; var RoamingSettings = AppData.roamingSettings; // simpan nama yang dimasukkan tadi pada roaming settings dengan kunci "Nama" RoamingSettings.values["Nama"] = TextboxInput; // load nama yang disimpan dengan kunci "Nama" tadi // lalu ditampilkan pada tag span yang memiliki id SimpanNama var LoadNama = document.getElementById("SimpanNama"); LoadNama.innerText = RoamingSettings.values["Nama"]; } function HapusNama() { // akses roaming settings var AppData = Windows.Storage.ApplicationData.current; var RoamingSettings = AppData.roamingSettings; // hapus nilai yang disimpan dengan kunci "Nama" tadi RoamingSettings.values.remove("Nama"); // tampilkan kosong var LoadNama = document.getElementById("SimpanNama"); LoadNama.innerText = ""; } </script> </head> <body> <div id="container"> <h1>Demo menggunakan Roaming Settings - <a href="http://arliansyahazhary.blogspot.com">arliansyahazhary.blogspot.com</a></h1><br/> <h3><label for="InputNama">Masukkan namamu disini:</label></h3> <input type="text" id="InputNama" /> <button id="TampilNama">Click</button><button id="Hapus">Hapus Nama</button><br/> <h2>Nama yang disimpan: <span id="SimpanNama"></span></h2><br/> <h2>Output: <span id="OutputNama"></span></h2><br/> </div> </body> </html>
default.js
// For an introduction to the Blank template, see the following documentation: // http://go.microsoft.com/fwlink/?LinkId=232509 (function () { "use strict"; var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; app.onactivated = function (args) { if (args.detail.kind === activation.ActivationKind.launch) { if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { // TODO: This application has been newly launched. Initialize // your application here. } else { // TODO: This application has been reactivated from suspension. // Restore application state here. } args.setPromise(WinJS.UI.processAll().then(function completed() { // register event click pada tombol dengan id TampilNama // tombol click tersebut akan menjalankan fungsi ShowAndSave var TombolTampil = document.getElementById("TampilNama"); TombolTampil.addEventListener("click", ShowAndSave, false); // akses roaming settings var AppData = Windows.Storage.ApplicationData.current; var RoamingSettings = AppData.roamingSettings; // load data yang disimpan dengan kunci "Nama" tadi // lalu tampilkan pada tag span yg ber-id SimpanNama var LoadNama = document.getElementById("SimpanNama"); if (RoamingSettings.values["Nama"]) LoadNama.innerText = RoamingSettings.values["Nama"]; else // jika tidak ada nama yang disimpan, tampilkan kosong LoadNama.innerText = ""; // register event hapus pada tombol dengan id Hapus // tombol hapus nama tersebut akan menjalankan fungsi HapusNama var TombolHapus = document.getElementById("Hapus"); TombolHapus.addEventListener("click", HapusNama, false); })); } }; app.oncheckpoint = function (args) { // TODO: This application is about to be suspended. Save any state // that needs to persist across suspensions here. You might use the // WinJS.Application.sessionState object, which is automatically // saved and restored across suspension. If you need to complete an // asynchronous operation before your application is suspended, call // args.setPromise(). }; app.start(); })();
Reference: MSDN Manage App Lifecycle and State (HTML) - Windows App Development
Post a Comment