Thứ Tư, 23 tháng 12, 2015

Senchatouch

12/23/2015 10:12:00 CH    No comments
Untitled Document

Bài 01: Cấu trúc một ứng dụng sencha touch

  0  


 Google +0  

   0
Đăng bởi: TheHalfHeart - Vào ngày: 07-08-2014 - Chuyên mục: Sencha Touch - View: 1411
Như các bạn biết Sencha Touch là một Framwork được viết bằng ngôn ngữ javascipt dùng để viết các ứng dụng chạy trên điện thoại di đông. Đây là một Framwork rất là mạnh mẽ được viết theo mô hình MVC và đương nhiên là sẽ có độ khó rất là cao. Khi các bạn làm việc với sencha touch thì các bạn phải liên tưởng nó giống y như bên Winform, tức là nó có sẵn tất cả các controls, events dùng để điều khiển và xây dựng giao diện, chúng ta chỉ việc gọi ra và xử lý các sự kiện trên nó.
Khi viết ứng dụng với Sencha Touch thì các bạn phải tạo các Service cung cấp dữ liệu cho nó bởi vì bản thân nó là JS nên không thể trực tiếp lên server để lấy thông tin được, các service này có thể được viết bằng ngôn ngữ php hoặc một ngôn ngữ khác.

Cấu Trúc Folder Sencha Touch

Khi các bạn download bộ source Sencha Touch về các bạn giải nén ra thì mặc định nó sẽ có những folder như hình bên dưới:

Với tất cả những files và folder trên thì chúng ta sẽ quan tâm đến 4 file js (sencha-touch.js, sencha-touch-all.js, sencha-touch-all-debug.js, sencha-touch-debug.js) và file sencha-touch.css nằm trong folder resources/css/sencha-touch.css. Các bạn xem bảng mô tả bên dưới:


sencha-touch.js

Thuộc bộ Core, dùng khi ứng dụng của các bạn ở dạng có thể tự xây dựng (custom), có dung lượng rất nhỏ so với các file khác nên thường dùng khi chúng ta đưa lên host để chạy.

sencha-touch-debug.js

Thuộc bộ Core, dùng khi ứng dụng đang build ở local, có đầy đủ comments cho các đoạn code nên có thể debug và dung lượng của nó lớn hơn các file khác.

sencha-touch-all.js

Chứa tất cả các file hệ thống sencha touch, dùng khi ứng dụng của bạn không ở dạng chỉnh sửa (custom). Vì dung lượng của nó rất là nhỏ nên được dùng để up lên host

sencha-touch-all-debug.js

Chứa tất cả các file hệ thống sencha touch, dùng khi ứng dụng của bạn không ở dạng chỉnh sửa (custom), có comments đầy đủ các đoạn code nên đương nhiên dung lượng của nó cũng rất là nặng và được dùng build ở local.

resources/css/sencha-touch.css

File css giao diện trong sencha touch

resources

Folder này chứa các file css, image của hệ thống sencha touch

src

Folder này chứa các file js của hệ thống sencha, và các bạn cũng không nên đụng vào nó làm gì nhé.


Đó là những file chúng ta quan tâm khi xây dựng ứng dụng Sencha touch. Tuy nhiên vẫn còn một số folders và files mà tôi không muốn giải thích ở bài này vì hơi dài dòng.

Chương Trình Hello World

Để các bạn dễ hình dung hơn chúng ta sẽ đi vào xây dựng chương trình hiển thị danh sách người dùng cho toàn bộ cho serie này và đương nhiên sẽ đi từng phần nhỏ. Trong bài này chúng ta sẽ xây dựng cấu trúc folder và in ra màn hình câu chào Hello World!.
Để dễ làm vệc tôi gọi folder www là folder chứa source của WebServer.
Bước 1: Các bạn tạo folder www/touch và giải nén thư viện Sencha Touch vào trong này.
Bước 2: Các bạn tạo folder www/user và tạo các files, folders tương ứng như trong hình sau (mô phỏng bằng editor netbeans)

Bước 3: Copy nội dung sau vào file index.html


1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html>
<head>
    <title>User Manager</title>
    <meta charset="UTF-8">
    <link href="../touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
    <script src="../touch/sencha-touch-debug.js" type="text/javascript"></script>   
    <script src="app.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

Bước 4: Copy nội dung sau vào file app.js


1
2
3
4
5
6
7

Ext.application({
    name: 'user',
    launch: function()
    {
        alert("Sencha Application");
    }
});


Các bạn ra trình duyệt gõ đường dẫn tới file index.html (localhost/user/index.html) và các bạn đợi khoảng 2,3 giây nó sẽ alert lên thông báo "Hello Sencha Touch" tức là ta đã làm thành công.

Giải thích cấu trúc folder

Cấu trúc folder trên chưa phải là chuẩn cho một ứng dụng sencha touch nhưng cũng đủ để các bạn có thể bắt đầu theo dõi serie này.
 - Folder app: chứa Controller, Model, View, Store (Vì Sencha touch hoạt động theo mô hình MVC)
 - Folder resources : Chứa các file css, images của ứng dụng
 - File app.js : Đây là file bootstrap của ứng dụng, nó khai báo thư viện, import thư viện cho các request.
 - File index.html : đây là file chạy ứng dụng, mỗi ứng dụng chỉ có duy nhất một file html này, nó sẽ import file touch/sencha-touch.js, file touch/resources/css/sencha-touch.css và file app.js

Giải Thích Quy Trình Chạy

Khi chạy file index.html nó sẽ import các thư viện sencha-touch.js, sencha-touch.css và file app.js. Ở file app.js ta sử dụng hàm Ext.application dể khai báo cho ứng dụng sencha touch. Hàm launch là hàm sẽ được gọi khi trang web được load, vì thế nó alert lên thông báo.

Kết Thúc Bài Học

Trong bài này các bạn đã biết được cấu trúc folder của một ứng ụng Sencha Touch và ở những bài sau nếu tôi code mà không nói rõ file nào thì mặc định các bạn hiểu là file app.js nhé. Bài tiếp theo chúng ta sẽ tìm hiểu Ext singleton nói chung và Ext.application nói riêng

0 nhận xét:

Đăng nhận xét