Phần 2: Vòng đời của một Metro App
Ở phần 2 này mình sẽ nói tiếp về vòng đời của một metro app. Ứng với mỗi đoạn code thì một Metro App có những cách thức, thời điểm khác nhau để biểu diễn chúng. Cụ thể, vòng đời của một Metro App gồm những sự kiện như Start, Running, Suppend, Shutdown được biểu diễn theo sơ đồ như sau:
Mình vẽ không được đẹp cho lắm nhưng nói chung là cũng hiểu được. Trình tự của nó sẽ như sau:
- Khởi nguồn là khi ứng dụng đang tắt (Shut Down), chưa được ai mở lên.
- Khi có một người mở lên, ứng dụng sẽ từ trạng thái Shut Down sang trạng thái Running
- Khi ứng dụng Running (đang chạy), nó sẽ có hai lí do để dừng lại:
+ Một là khi máy bị quá tải, hoặc nó bị gì gì đó(Mình gọi là bị phê) thì ứng dụng sẽ từ Running chuyển sang Suppend (Dừng đột ngột).
+ Hai là khi người dùng tắt đi, cái này cũng gọi là dừng đột ngột (Suppend).
- Khi ứng dụng bị dừng đột ngột kiểu đó, nó sẽ có hai con đường, một lại trở lại chạy tiếp (Running), hai là tắt (Shut down) . Kết thúc một vòng đời.
Nghĩa là chỉ có Mở -> Chạy -> Đơ -> Tắt -> Mở ->Chạy…..
Vậy với cái vòng đời thế này thì code của ta nó sẽ chạy kiểu gì? Có rất nhiều trường hợp sẽ xảy ra khi code của chúng ta đang chạy. Giả sử, code của ta là code xem phim, nghe nhạc chẳng hạn, người dùng đang lần mò tìm bài hát họ thích, lần mãi mới mò ra, bỗng nhiên máy nó nổi điên và Shut Down mất cái ứng dụng. Nếu bây giờ người dùng mở lại ứng dụng lên mà phải lần mò tìm lại bài hát mình thích thì chắc ức cmn chế mà tắt máy luôn .Vậy cách đối phó tốt nhất với cái vòng đời bất ổn này chính là lưu các dữliệu người dùng đang làm ngay trước khi nó bị Suppend. Rồi sau khi người dùng mở lên, ta lại load lại cái dữ liệu vừa lưu đó cho họ. Các ví dụ điển hình là mấy ứng dụng cung cấp sẵn của Microsoft như Travel, Music, News, Sport…Có hai kiểu lưu dữ liệu, một là lưu Local vào máy, hai là lưu Sesson.Ta bắt đầu tìm hiểu về hai kiểu lưu dữ liệu này và áp dụng vào ứng dụng Hello World vừa viết nhé!
*Lưu Local
Mở file default.js lên, ta sẽ thêm đoạn mã sau:
var $khung = document.getElementById('name');
$khung.addEventListener("change", luu);
Đoạn mã này thêm cho chúng ta một event vào <input> có id là name. Cụ thể là nếu cái <input> có id là name đó nó bị thay đổi giá trị, lập tức function luu sẽ được chạy.
Thêm function luu vào bên dưới function chao ở đoạn 3:
function luu(eventInfo) {
var getControl = eventInfo.srcElement;
//Lấy dữ liệu hiện có của Apps
var duLieu = Windows.Storage.ApplicationData.current;
//Gọi một phương thức nào đó để lưu Local
var localSetting = duLieu.localSettings;
//Lấy nội dung của khung có id là name
var noi_dung = getControl.value;
//Phần tử "ten" của LocalSetting sẽ được đặt giá trị của biến noi_dung
localSetting.values["ten"] = noi_dung;
}
Function luu này có một tùy biến là eventInfo, nó đại diện cho khung đã được gán(addEventListener) function này. Ta dùng .srcElement để có thể truy cập các phần tử của tùy biến này của tùy biến. Mấy dòng sau thì bạn có thể đọc các chú thích ở trên để hiểu công dụng của chúng. Vậy là đã lưu xong, bây giờ lấy ra nếu nó bị Suppend thì kiểu gì? Ta dùng đoạn code này nhé.
else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
}
var $submit = document.getElementById('submit');
$submit.addEventListener("click", chao, false);
var $khung = document.getElementById('name');
$khung.addEventListener("change", luu);
//Lấy Data đã lưu
var localSetting = Windows.Storage.ApplicationData.current.localSetti ngs;
if (tra_lai_ten) {
//Gán giá trị của khung có id là name bằng với giá trị ta đã lưu
document.getElementById("name").value = localSetting.values["ten"];
}
};
Mình post thế này để các bạn biết đoạn code mới được để ở đâu. Đọc comment thì các bạn đã biết được công dụng của từng dòng đúng không!
*Lưu Sesson
Để lưu Sesson, ta dùng code sau:
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().
//Chọn khung có id là ket_qua
var kq = document.getElementById("ket_qua");
//Gán giá trị cho dữ liệu được lưu bằng với giá trị của khung kq
WinJS.Application.sessionState.ket_qua = kq.innerText;
};
Đoạn mã này được đặt ở đoạn 2 vì khi ứng dụng bị suppend, nó sẽ tự tạo một checkpoint(giống chơi game, khi chết thì sẽ quay lại checkpoint). Code bên trong checkpoint sẽ được gọi ra ngay lúc ứng dụng bị suppend.
Lấy giá trị được lưu Session thì đơn giản hơn Local.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
//Lấy dữ liệu vừa lưu xong
var ket_qua = WinJS.Application.sessionState.ket_qua;
//Gán giá trị cho khung có id là ket_qia bằng với giá trị lưu session
document.getElementById("ket_qua").innerText = ket_qua;
}
}
var $submit = document.getElementById('submit');
$submit.addEventListener("click", chao, false);
Bây giờ ta thử chạy rồi cho ứng dụng Suppend nhé! Khi chạy ứng dụng, nhập tên và nhấn nút, ta sẽ quay lại desktop và cho ứng dụng suppen bằng cách sau:
Sau đó ta nhấn F5 để chạy lại ứng dụng và thấy các dữ liệu đã được lấy lại
0 nhận xét:
Đăng nhận xét