Hướng dẫn lập trình framework mobile titanium FULL

Việc phát triển ứng dụng đa nền tảng như vậy đòi hỏi rất nhiều kiến thức và công sức để hỗ trợ cho từng nền tảng. Để giải quyết nhu cầu này, có nhiều bộ công cụ phát triển phần mềm (SDK Software Development Kit) hỗ trợ đa nền tảng (crossplatform) ra đời. Titanium chính là một SDK như vậy .Xây dựng ứng dụng một lần có thể chạy trên các nền tảng di động khác nhau như Android, iOS, Blackberry,… giúp giảm thiểu thời gian, tối ưu năng suất lao động so với việc phải xây dựng từng ứng dụng cho từng nền tảng di động. Tận dụng được khả năng truy cập vào các thuộc tính của thiết bị trong ứng dụng kiểu Native App.Titanium chạy mã native nên ứng dụng sẽ chạy với hiệu năng tốt, gần như không hề thua kém so với khi lập trình Native App.Ngôn ngữ Java Script viết code ngắn gọn và đã khá quen thuộc với các lập trình viên tại trung tâm.Hỗ trợ framework xây dựng ứng dụng phía client là Alloy Framework, một framework lập trình theo mô hình MVC.

1

MỤC LỤC

MỤC LỤC 1

I GIỚI THIỆU 3

1 Mục đích và ý nghĩa của Tài liệu 3

2 Phạm vi tài liệu 3

3 Các thuật ngữ và từ viết tắt 3

4 Cấu trúc Tài liệu 4

II TỔNG QUAN 4

2.1 Giới thiệu tổng quan Titanium 4

2.1.1 Lợi ích của Titanium 5

2.1.2 Lựa chọn ứng dụng phát triển bằng Titanium 6

2.2 Nội dung khác 8

2.2.1 Hướng dẫn cài đặt 8

2.2.1.1 Cài đặt Oracle JDK 8

2.2.1.2 Cài đặt Python 9

2.2.1.3 Cài đặt Studio 10

2.2.1.4 Cài đặt Titanium Studio 10

2.2.1.5 Thiết lập biến môi trường 12

2.2.2 Hướng dẫn sử dụng Titanium Studio 15

2.2.2.1 Tạo mới Project 16

2.2.2.2 Cấu trúc thư mục ứng dụng trong Titanium 18

2

2.2.2.3 Tạo mới một trang view 18

2.2.2.4 Tạo mới models 19

2.2.3 Hướng dẫn Alloy Framework 19

2.2.3.1 Giới thiệu về Alloy Framework 19

2.2.3.2 Form Control 23

2.2.3.2.1 Label 23

2.2.3.2.2 Button 23

2.2.3.2.3 TextField 24

2.2.3.2.4 Alert Dialog 25

2.2.3.2.5 Datetime picker 27

2.2.3.2.6 Listview 28

2.2.3.2.7 Tableview 29

3

I GIỚI THIỆU

1 Mục đích và ý nghĩa của Tài liệu

Tài liệu này được xây dựng nhằm hướng dẫn nhân viên lập trình trong trung tâm xây dựng ứng dụng hybrid mobile

2 Phạm vi tài liệu

Tài liệu này áp dụng cho nhân viên phát triển, không hướng dẫn end-user

3 Các thuật ngữ và từ viết tắt

Hybrid mobile Một ứng dụng có thể chạy trên nhiều nền tảng

(như android, ios, blackberry,…) Titanium Studio Phần mềm dùng để lập trình mobile

SDK Software Development Kit : bộ công cụ để

phát triển phần mềm Thường bao gồm công

cụ, tiện ích, tài liệu và thư viện các hàm hoặc class để lập trình

Titanium SDK Là SDK của Titanium

Alloy Framework Một framework để xây dựng ứng dụng phía

client trên thiết bị mobile

Native App Ứng dụng được xây dựng bằng SDK của một

nền tảng xác định và được cài đặt trên mobile

4

4 Cấu trúc Tài liệu

Tài liệu này gồm 3 phần, được bố trí như sau:

Phần 1:Giới thiệu: Giới thiệu chương trình, nêu mục tiêu, phạm vi, các thuật ngữ và cấu trúc tài liệu , đối tượng sử dụng Tài liệu

Phần 2:Tổng quan: ghi nhận các thông tin tổng quát về chương trình hiện hành

Phần 3:Giới thiệu các chức năng của chương trình.ghi nhận trong tài liệu này

2.1 Giới thiệu tổng quan Titanium

Khi bắt đầu bước chân vào lĩnh vực lập trình ứng dụng cho di động, chắc hẳn bạn đã phải đứng trước lựa chọn nền tảng nào để phát triển ứng dụng của mình: iOS, Android hay Windows Phone Mỗi hệ điều hành di động đều có thị trường với ưu và nhược điểm riêng đầy cạnh tranh nhưng cũng nhiều tiêm năng

Một ứng dụng thành công trên một hệ điều hành nào, sớm muộn gì cũng có mặt trên các hệ điều hành còn lại do nhu cầu của thị trường Tuy nhiên việc phát triển ứng dụng đa nền tảng như vậy đòi hỏi rất nhiều kiến thức và công sức để hỗ trợ cho từng nền tảng

Để giải quyết nhu cầu này, có nhiều bộ công cụ phát triển phần mềm (SDK - Software Development Kit) hỗ trợ đa nền tảng (cross-platform) ra đời Chúng ta chỉ cần viết và quản lý một bộ code thống nhất, ứng dụng sẽ được biên dịch và chạy được trên nhiều platform khác nhau Đây hoàn toàn không phải là một khái niệm mới, chắc hẳn ai cũng đã biết đến khẩu hiệu

"Write once, Run anywhere" của Sun khi nói về Java

Titanium chính là một SDK như vậy :

 TI cho phép ta xây dựng ứng dụng cho hầu hết các nền tảng mobile phổ biến hiện nay:

 iOS (iPhone, iPod Touch, iPad)

 Android (phone & tablet)

 Mobileweb

 Blackberry 10

5

 Tizen

 Windows 8 cũng đang nằm trong kế hoạch hỗ trợ của TI

 Titanium không phải là một ngôn ngữ lập trình mới, nó là một high-level Javascript SDK ở cấp độ cao

 Trong TI, bạn sẽ code bằng Javascript (như Alloy Framework), và sử dụng XML cho layout, khá phổ biến và quen thuộc với đa số lập trình viên, vì vậy việc làm quen với TI không quá khó khăn, chỉ cần biết cơ bản về javascript, HTML và CSS là bạn có thể bắt tay vào tìm hiểu TI

 Các ứng dụng viết bằng Titanium sau khi biên dịch sẽ trở thành native app, không phải là dạng HTML5 app được đóng gói cho từng platform như một số công cụ khác, nên về mặt hiệu năng, TI app tương đương với các app viết bằng native code

2.1.1 Lợi ích của Titanium

- Xây dựng ứng dụng một lần có thể chạy trên các nền tảng di động khác nhau như Android, iOS, Blackberry,… giúp giảm thiểu thời gian, tối ưu năng suất lao động so với việc phải xây dựng từng ứng dụng cho từng nền tảng di động

2.1.2 Lựa chọn ứng dụng phát triển bằng Titanium

Các ứng dụng được xây dựng có thể sử dụng framework native (dành cho từng nền tảng Android, iOS, WinPhone…) hoặc framework Hybrid – Cross Platform Bảng sau so sánh các

ứng dụng viết bằng framework native, hybrid và các khuyến cáo khi lựa chọn:

- Mobile Development Framework

Đa phần

(Camera,microphone,GPS,cảm ứng vận động,upload file, gyroscope (con quay hồi chuyển)… ) Truy cập

7

Ưu điểm

Cho phép tạo ứng dụng với giao diện phong phú hoặc đồ họa phức tạp, nặng

Là sự kết hợp của những ưu điểm trong việc phát triển ứng dụng nhanh của mobile web với khả năng truy cập vào các thuộc tính của thiết

bị trong ứng dụng kiểu native

- Không thể xử lý được những đồ họa nặng, phức tạp

- Yêu cầu phải làm quen được với framework mobile (phải học hoặc đào tạo)

- Các ứng dụng yêu cầu truy cập thiết bị ở mức cao

- Dành cho khách hàng yêu cầu giao diện ở mức độ trung bình

- Các ứng dụng yêu cầu chạy trên nhiều nền tảng, thời gian phát triển ngắn

- Các ứng dụng không đòi hỏi hiệu năng cao hoặc truy cập thiết bị ở mức trung bình

- Các ứng dụng nội dung như mạng

xã hội, trình chiếu đa phương tiện, tin tức

- Các ứng dụng quản lý, danh mục, tìm kiếm

Qua thời gian nghiên cứu và thử nghiệm, P.KTCN đưa ra quy định về việc sử dụng framework

và ngôn ngữ lập trình như sau:

- Cài đặt Titanium Studio

- Cấu hình các biến môi trường

Điều kiện đảm bảo:

- Mở kết nối internet cho máy tính để phần mềm Titanium_studio.exe tự động download thêm các gói ứng dụng

- Cài đặt và chạy ứng dụng bằng quyền admin

Chi tiết như sau :

2.2.1.1 Cài đặt Oracle JDK

Chỉ được cài đặt JDK của Oracle Với Windows thì chỉ cài bản JDK 32-bit và phiên bản 6 trở lên (xem phụ lục ở dưới)

Titanium hỗ trợ các phiên bản sau của JDK cho mỗi hệ điều hành tương ứng:

 Tại cửa sổ cài đặt chọn như sau:

9

 Chờ quá trình cài đặt JDK hoàn thành JRE sẽ được cài đặt tự động

 Tại bước Java Setup > Destination Folder Chắc chắn rằng tool sẽ được cài đặt vào đúng

Folder Nếu không cần chỉnh sửa lại cho đúng

 Cài đặt toàn tất

2.2.1.2 Cài đặt Python

 Download từ trang chủ https://www.python.org/download

 Cài đặt

10

2.2.1.3 Cài đặt Studio

Yêu cầu hệ thống

Hệ thống phải đáp ứng các yêu cầu sau đây để chạy Titanium Studio

Theo tiêu chuẩn chung, 4GB Ram là đủ để chạy toàn bộ môi trường Titanium

Operating System

Titanium được hỗ trợ trên các hệ điều hành sau:

Nếu bạn đang chạy Mac OS X 10.9 (Mavericks) hoặc cũ hơn, bạn phải sử dụng Titanium Studio 3.1.4 hoặc cũ hơn

2.2.1.4 Cài đặt Titanium Studio

Ngoài việc cài đặt Titanium Studio, trình cài đặt cho Windows cũng tải và cài đặt phần mềm cần thiết của bên thứ ba để chạy, bao gồm Java Development Kit, Git, và Node.js

Cài đặt Studio trên window:

1 Cài đặt bằng quyền Administrator

2 Chạy trình cài đặt Studio, nhập password administrator's nếu được yêu cầu

3 Nhập email và password đã đăng ký trên trang chủ Titanium

11

4 Nhấp chọn I Agree trên màn hình License Agreement

5 Chọn vị trí cài đặt trên màn hình kế tiếp Theo mặc định, Studio được cài đặt vào ~ \

AppData \ Local của người dùng hiện hành.(Bạn có thể chọn tại thư mục khác)

Không nên cài đặt ứng dụng vào folder hệ điều hành phổ biến như Program Files vì có thể gây ra lỗi khi chạy ứng dụng

6 Chọn một thư mục Start Menu cho Titanium, hoặc chọn Don't create a start menu

Click Next

7 Chọn những loại tập tin bạn muốn liên kết với Studio, và kích Next

8 Trên màn hình tiếp theo bạn sẽ được thông báo của các thành phần phần mềm cần thiết - Java Development Kit, Git, hoặc Node.js - mà sẽ được tải về và cài đặt Click Next trên mỗi màn hình tùy chọn

12

9 Click Install trên màn hình Confirm Install để bắt đầu quá trình cài đặt Bất kỳ phần mềm nào thiếu đều sẽ được tải về cà cài đặt trước, sau đó là cài đặt Studio

2.2.1.5 Thiết lập biến môi trường

 Thêm dòng sau vào biến Path

% SystemRoot% \ system32;% SystemRoot%;% SystemRoot% \ System32 \ wbem;

 Thiết lập các biến môi trường cho ứng dụng :

Debug Bridge) executable

(default installation path by Studio)

(default installation path by Studio)

%PROGRAMFILES%\Java\jdk<version> Location of the JDK (default

installation path by Studio)

Location of Titanium projects

Với các đường dẫn thông thường như sau :

%PROGRAMFILES% C:\Program Files (x86) Windows 64-bit systems

%PROGRAMFILES% C:\Program Files Windows 32-bit systems

%PROGRAMDATA% C:\ProgramData

Để chạy tất cả các thành phần Appcelerator, bạn phải có Node.js 0.10.13 hoặc mới hơn

Trên Mac OS X và Windows, nếu bạn đã chọn để cài đặt bản cập nhật Titanium, Studio sẽ nhắc bạn cài đặt Node.js Trên Linux, bạn cần phải tự cài đặt Node.js

Titanium CLI

Studio phụ thuộc vào Titanium CLI (giao diện dòng lệnh) để cung cấp cho nó những thông tin về môi trường phát triển và xây dựng các ứng dụng bằng cách sử dụng nền tảng SDK Mỗi phiên bản của Studio hỗ trợ một loạt phiên bản cụ thể của CLI Theo nguyên tắc chung, cả hai thành phần được được nâng cấp với nhau và các số phiên bản lớn và nhỏ phải phù hợp

Nếu bạn cập nhật Titanium, Studio sẽ tự động nhắc nhở bạn cần cài đặt CLI mới nhất

2.2.2 Hướng dẫn sử dụng Titanium Studio

Chạy ứng dụng bằng quyền administrator

2.2.2.1 Tạo mới Project

 Tại Studio, chọn File -> New Mobile App Project

Tại panel bên trái có 2 lựa chọn :

17

- Alloy: là lựa chọn sử dụng Alloy Framework để xây dựng ứng dụng Trong đó có :

 Default Alloy Project : Tạo ứng dụng sử dụng Alloy MVC framework

 Two-tabbed Alloy Application : Tạo ra ứng dụng với phần giao diện có sẵn 2 tab

và sử dụng Alloy MVC framework

- Classic: lựa chọn xây dựng ứng dụng không theo framework nào Xây dựng ứng dụng

hoàn toàn bằng code javascript (kể cả phần giao diện) Trong đó có :

 Default Project : Tạo project thông thường không có template

 HTML-based Application : Tạo ứng dụng chỉ sử dụng một trang hiển thị HTML

sử dụng webview hay ứng dụng như kiểu một trang HTML

 Master/detail application : Tạo ra ứng dụng hiển thị thông tin chi tiết với phần

giao diện đã được tối ưu hóa cho từng nền tảng

 Single Window Application : Tạo ứng dụng với một màn hình chính (đã được

dựng sẵn cho từng nền tảng)

 Tabbed Application :Tạo ứng dụng kiểu các tab hiển thị

 Chọn Alloy và default Alloy Project

 Đặt tên cho project và đặt App Id theo quy tắc com.yourDomain.yourAppname

2.2.2.2 Cấu trúc thư mục ứng dụng trong Titanium

 Asset : thư mục riêng cho từng nền tảng (như ảnh nền)

 Controllers : Thư mục chứa phần xử lý cho views (MVC)

 Models : Thực mục chứa model của database

 Styles: thư mục chứa file thiết lập giao diện (giống như css)

 Views : thư mục chứa phần giao diện hiển thị

 Tiapp.xml : file cấu hình chung cho Titanium như cấu hình SDK build, icon ứng dụng, các module bổ sung

2.2.2.3 Tạo mới một trang view

19

Click chuột phải vào project và chọn Alloy Controller và đặt tên, ví dụ đặt tên demo.Khi đó nó

sẽ tự động tạo ra 3 file : demo.js , demo.tss và demo.xml tương ứng với từng thư mục

2.2.2.4 Tạo mới models

Click chuột phải vào project và chọn Alloy Model :

- Đặt tên cho model

- Lựa chọn Adapter tạo model cho dữ liệu tương ứng với dữ liệu được lưu (trong sqlite, bộ nhớ localStorage hay trong file properties)

- Ấn vào dấu (+) để thêm mới các trường (Name) và chọn loại (Type) dữ liệu cho nó

2.2.3 Hướng dẫn Alloy Framework

2.2.3.1 Giới thiệu về Alloy Framework

20

 Framework xây dựng theo mô hình MVC

 Xây dựng giao diện bằng các thẻ xml

 Là một open source miễn phí

 Xây dựng ứng dụng dễ dàng

Sau đây, chúng ta sẽ xây dựng một ứng dụng cơ bản để hiểu về luồng xử lý này

Mô tả : Xây dựng ứng dụng hiển thị trên màn hình di động chữ “I’m window 1” và khi ấn vào

chữ này thì sẽ hiển thị ra một màn hình khác trên đó ghi “I’m window 2”

Cách tiến hành:

Bước 1: Tạo mới ứng dụng Alloy Framework và viết code cho trang index như sau :

22

Từ trang index gọi tới win2 như sau :

class false String Tên class của control được sử dụng để chỉnh

style trong file tss onClick false String Tên sự kiện sẽ gọi tới khi click vào control

 Các phương thức

24

addEventListener(name,callback) void Name là tên sự kiện, callback là hàm sẽ gọi về

sau khi thực hiện xong sự kiên

fireEvent(name,event) Void Name là tên sự kiện, event là giá trị kiểu json Các phương thức set, get cho các

thuộc tính

 Các sự kiện

<TextField id="textField" borderStyle="Ti.UI.INPUT_BORDERSTYLE_ROUNDED"

color="#336699" top="10" left="10" width="250" height="60" />

 Thuộc tính

borderStyle false String

 Phương thức

<AlertDialog id="dialog" onClick="doClick" title="Delete"

message="Would you like to delete the file?" cancel="1">

message false String Nội dung thông báo hiển thị trên alert dialog

Thêm view vào trong alert nhưng chỉ dành cho Andoid

<AlertDialog id="alertDialog" title="title" message="This is my message" cancel="1">

27

<View layout="horizontal" platform="android">

<ImageView id="avImage" image="/appc4.png" height="40dp"

minDate false date Giá trị date nhỏ nhất trong datetime picker

 Phương thức

addEventListener(name,callback) void

touchmove Ngay khi có sự di chuyển của một chạm (quẹt)

<ListItem title = "List item 1" ></ListItem>

<ListItem title = "List item 2" ></ListItem>

<ListItem title = "List item 3" ></ListItem>

29

 Phương thức

noresults Sự kiện xảy ra khi sử dụng searchView hoặc searchText mà

không có kết quả nào

showVerticalScrollIndicator false boolean Có hiển thị thanh cuộn dọc hay không

 Phương thức

noresults Sự kiện xảy ra khi sử dụng searchView hoặc searchText mà

không có kết quả nào