Bài 2: Tạo Form Login Sử Dụng Blackberry Component
Các API BlackBerry bao gồm một framework phong phú để xây dựng giao diện người dùng cho các ứng dụng. Trong bài này, chúng ta cùng tìm hiểu cách sử dụng các thành phần giao diện người dùng BlackBerry để xây dựng một ứng dụng với một vài màn hình và một số điều khiển để đáp ứng với input của người dùng.
I. Các Thành Phần Của Blackberry UI
Tất cả các phần tử trực quan(visible) có thể hiển thị trên màn hình của Blackberry là một trong 3 kiểu sau:
- Fields: Đây là các khối xây dựng cơ bản của các UI. Nói chung, mỗi control, như một button hoặc text field, sẽ tương ứng với một thể hiện của một Field. Lớp Field sẽ vẽ các điều khiển và xử lý input người dùng.
- Managers: Chúng được sử dụng để sắp xếp các Field trên màn hình. Mỗi Field chỉ được chứa trong một và chỉ một Manager. Mỗi Manager thực chất cũng là một Field(lớp này kế thừa từ Field), có nghĩa là mỗi manager có thể chứa các manager khác.
- Screens: Chỉ có một screen được active trên một ứng dụng tại mọi thời điểm. Screens xử lý layout của Field thông qua manager và cung cấp các chức năng bổ xung, như
Fields được dẫn xuất từ net.rim.device.api.ui.Field. Có rất nhiều Field dựng sẵn hữu ích trong gói net.rim.device.api.ui.component.
Managers được dẫn xuất từ gói net.rim.device.api.ui.Manager, nó kế thừa từ lớp net.rim.device.api.ui.Field. Một số manager hữu ích được định nghĩa trong gói net.rim.device.api.ui.container.
Sreens được dẫn xuất từ gói net.rim.device.api.ui.Screen, nó kế thừa từ lớp Manager. Có một số screen hữu ích trong gói net.rim.device.api.ui.container.
Lưu ý Mặc dù Screen kế thừa từ Field, nhưng bạn không thể thêm một Screen vào một Manager.
1. Tạo Ứng Dụng
Giao diện mà chúng ta sẽ xây dựng như hình vẽ sau:
Bây giờ, ta tạo ra một project UiFun, sau đó tạo ra một package blog.mobileprogramming.uifun; tiếp theo tạo 2 lớp UiFunApplication và UiFunMainScreen.
package blog.mobileprogramming.uifun;
import net.rim.device.api.ui.UiApplication;
public class UiFunApplication extends UiApplication {
public UiFunApplication() {
UiFunMainScreen mainScreen = new UiFunMainScreen();
pushScreen(mainScreen);
}
public static void main(String[] args) {
UiFunApplication app = new UiFunApplication();
app.enterEventDispatcher();
}
}
package blog.mobileprogramming.uifun;
import net.rim.device.api.ui.container.MainScreen;
public class UiFunMainScreen extends MainScreen {
public UiFunMainScreen() {
}
}
2. Thêm Image Logo
Đầu tiên, ta thêm một thể hiện net.rim.device.api.ui.component.BitmapField thể show image lên đỉnh màn hình. Các thiết bị Blackberry có thể hiển thị các hình ảnh PNG, JPEG hay GIF, tuy nhiên hầu hết các ứng dụng sử dụng PNGs bởi chúng có kích thước nhỏ, chất lượng cao và hỗ trợ transparent.
3. Thêm Image Vào Project
Nếu bạn sử dụng JDE Plugin for Eclipse, thêm image vào project Eclipse bằng cách tạo một folder “res”cùng cấp với folder “src”.
4. Thêm Image Vào Screen
Tạo một thể hiện BitmapField để thêm vào Screen, trước khi tạo ra thể hiện này, tạo một đối tượng Bitmap để load image từ resource của project.
Bitmap logoBitmap = Bitmap.getBitmapResource(“res/apress_log.png”);
Trong Constructor của lớp UiFunApplication, ta làm như sau:
package blog.mobileprogramming.uifun;
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.component.BitmapField;
import net.rim.device.api.ui.container.MainScreen;
public class UiFunMainScreen extends MainScreen {
BitmapField bitmapField;
public UiFunMainScreen() {
Bitmap logoBitmap = Bitmap.getBitmapResource(“res/apress_logo.png”);
bitmapField = new BitmapField(logoBitmap, Field.FIELD_HCENTER);
add(bitmapField);
}
}
Bây giờ, nếu bạn chạy ứng dụng sẽ cho giao diện như sau:
5. Style Flags Của Field
Hầu như tất cả các Field và Manager đều có một constructor mà có chứa tham số style. Style được đánh dấu bởi các flags style, mỗi style sẽ được sử dụng kết hợp với nhau bởi toán tử “|”. Flags được định nghĩa trong API, mỗi style sẽ có tác động nhất định đến Field hoặc Manage, chẳng hạn như nó quy định vị trí, hành vi…
6. Tạo Các Field Usename Và Password
Ta sẽ sử dụng lớp EditField để thiết lập usename, PasswordEditField để thiết lập password. Chúng ta không cần sử dụng style đặc biệt cho các Field này.
EditField usernameField;
PasswordEditField passwordField;
…
usernameField = new EditField(“Username:”, “”);
passwordField = new PasswordEditField(“Password:”, “”);
add(usernameField);
add(passwordField);
7. Tạo Domain Và CheckBox Field
Tạo domain nên sử dụng drop-down list, trong Blackberry API, một giao diện net.rim.device.api.ui.component.ChoiceField sử dụng tương tự như một drop-down list. Bạn có thể thực thi gian diện này một cách trực tiếp, nhưng trong ví dụ này, ta chỉ sử dụng một component thực thi giao diện này, đó là net.rim.device.api.ui.component.
ObjectChoiceField, nếu bạn muốn list các số, sử dụng net.rim.device.api.ui.component.
NumericChoiceField để thay thế.
ObjectChoiceField domainField;
CheckboxField rememberCheckbox;
…
domainField = new ObjectChoiceField(“Domain:”, new String[] {“Home”, “Work”});
add(domainField);
rememberCheckbox = new CheckboxField(“Remember password”, false);
add(rememberCheckbox);
8. Tạo Button
Để tạo 2 button Clear và Login, ta tạo ra 2 thể hiện từ lớp ButtonField, đồng thời gán vào style là ButtonField.CONSUME_CLICK. Nếu không sử dụng style này, thì sự kiện click sẽ được truyền vào Screen, một menu sẽ được bật lên khi người dùng click vào button, mặc dù button vẫn làm cho action này thực hiện.
BitmapField bitmapField;
EditField usernameField;
clearButton = new ButtonField(“Clear”, ButtonField.CONSUME_CLICK);
loginButton = new ButtonField(“Login”, ButtonField.CONSUME_CLICK);
add(clearButton);
add(loginButton);
Tóm lại, code sau khi thêm các thành phần giao diện trong lớp UiFunMainScreen như sau:
package blog.mobilesprogramming.uifun;
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.component.BitmapField;
import net.rim.device.api.ui.component.ButtonField;
import net.rim.device.api.ui.component.CheckboxField;
import net.rim.device.api.ui.component.EditField;
import net.rim.device.api.ui.component.ObjectChoiceField;
import net.rim.device.api.ui.component.PasswordEditField;
import net.rim.device.api.ui.container.MainScreen;
public class UiFunMainScreen extends MainScreen {
BitmapField bitmapField;
EditField usernameField;
PasswordEditField passwordField;
ObjectChoiceField domainField;
CheckboxField rememberCheckbox;
ButtonField clearButton;
ButtonField loginButton;
public UiFunMainScreen() {
Bitmap logoBitmap = Bitmap.getBitmapResource(“res/apress_logo.png”);
bitmapField = new BitmapField(logoBitmap, Field.FIELD_HCENTER);
add(bitmapField);
usernameField = new EditField(“Username:”, “”);
passwordField = new PasswordEditField(“Password:”, “”);
add(usernameField);
add(passwordField);
domainField = new ObjectChoiceField(“Domain:”, new String[] { “Home”,”Work” });
add(domainField);
rememberCheckbox = new CheckboxField(“Remember password”, false);
add(rememberCheckbox);
clearButton = new ButtonField(“Clear”,ButtonField.CONSUME_CLICK);
loginButton = new ButtonField(“Login”,ButtonField.CONSUME_CLICK);
add(clearButton);
add(loginButton);
}
}
Bây giờ, nếu bạn chạy ứng dụng sẽ như hình vẽ sau:
9. Sắp Xếp Các Button Theo Chiều Ngang
Lớp UiFunMainScreen trong ví dụ này kế thừa từ MainScreen, nên nó có một trình quản lý layout mặc định là VerticalFieldManager để quản lý các Field. Khi thêm bất kỳ Field nào vào ứng dụng, trình quản lý này sẽ sắp xếp các Field theo chiều dọc. Tuy nhiên trong ví dụ này, ta muốn một số thành phần được sắp xếp theo chiều dọc, riêng các Button thì sẽ sắp xếp theo chiều ngang; để làm được như vậy, chúng ta sẽ sử dụng HorizonetalFieldManager với style là Field.FIELD_RIGHT(canh bên phải) để đẩy các Button vào màn hình.
HorizontalFieldManager buttonManager = new HorizontalFieldManager(Field.FIELD_RIGHT);
buttonManager.add(clearButton);
buttonManager.add(loginButton);
add(buttonManager);
Ngoài ra, ta sẽ sử dụng thêm một đối tượng SeparatorField để vẽ một thanh chắn ngang bên dưới image với các Field của ứng dụng.
Bitmap logoBitmap = Bitmap.getBitmapResource(“res/apress_logo.png”);
bitmapField = new BitmapField(logoBitmap, Field.FIELD_HCENTER);
add(bitmapField);
add(new SeparatorField());
add(new LabelField(“Please enter your credentials:”));
usernameField = new EditField(“Username:”, “”);
passwordField = new PasswordEditField(“Password:”, “”);
add(usernameField);
add(passwordField);
domainField = new ObjectChoiceField(“Domain:”, new String[] {“Home”, “Work”});
add(domainField);
rememberCheckbox = new CheckboxField(“Remember password:”, false);
add(rememberCheckbox);
add(new SeparatorField());
clearButton = new ButtonField(“Clear”, ButtonField.CONSUME_CLICK);
loginButton = new ButtonField(“Login”, ButtonField.CONSUME_CLICK);
HorizontalFieldManager buttonManager =
new HorizontalFieldManager(Field.FIELD_RIGHT);
buttonManager.add(clearButton);
buttonManager.add(loginButton);
add(buttonManager);
Bây giờ, nếu bạn chạy đoạn code trên, nó sẽ như hình vẽ sau:
Bài viết liên quan:
Lập trình với BlackBerry – Phần 1
Đang update các source demo cho các bạn, sẽ cập nhật trong thời gian sớm nhất!
Nguồn tham khảo: mobileprograming Blog và Beginning_BlackBerry_Development
