lesson12 - text field
TRANSCRIPT
Lesson12 : TextFields
1. Giới thiệu TextField
2. Tạo, hiển thị và thay đổi nội dung văn bản
3. Giới thiệu các kiểu của TextField
4. Cách sử dụng và các thuộc tính căn bản cua Textfield
5. TextFormat và cách trình bày nội dung văn bản
6. Embed font và anti – aliasing.
Giới thiệu TextField
• Class TextField được sử dụng để tạo, hiển thị, xử lý và thay đổi nội dung và cách trình bày các đoạn văn bản (dynamic text và input text).
Tạo, hiển thị và thay đổi nội dung đoạn văn bản
• Tạo:
Sử dụng TextField() constructor.• Gán và hiển thị nội dung văn bản
Sử dụng thuộc tính text, thuộc tính này có kiểu là String và đối tượng String được gán cũng là nội dung văn bản mà đối tượng textfield sẽ hiển thị.
• Thay đổi nội dung văn bản
Thay đổi giá trị chuỗi String gán cho thuộc tính text.
Ví dụ:
var txt:TextField = new TextField();
txt.text = “Hello World !!!”;
addChild(txt);
txt.text = “The world is changing !!!”; // nội dung văn bản sẽ thay đổi
Giới thiệu các kiểu của TextField
• TextField có 3 kiểu chính là Static Text, Dynamic Text và Input Text.– Static Text : được tạo và sử dụng trong Flash IDE, không thể tạo bằng
code– Dynamic Text : được tạo và sử dụng bằng cả Flash IDE và actionscript,
được sử dụng để hiển thị các đoạn văn bản mà người dùng không thể chỉnh sửa nội dung
– Input Text : được tạo và sử dụng bằng cả Flahs IDE và actionscript, được sử dụng để tạo các các khung nhập văn bản (như username, password…)
Sử dụng Textfield
Bước 1: Khai báo 1 đối tượng thuộc kiểu TextField
var txt:TextField = new TextField();
Bước 2:Xét các thuộc tính cho đối tượng
(Các thuộc tính căn bản)
txt.type = TextFieldType.INPUT; // kiểu của text, mặc định là dynamic
Hoặc có thể khai báo txt.type = “input”;
txt.border = true; // Đường bao, true là có, false là ko, mặc định fasle
txt.borderColor = 0x00ff00; // Màu đường bao
txt.background = true; // Có backgound hay ko , true là có, false là ko,
mặc định fasle
txt.backgroundColor = 0x0000ff; // màu xanh lá
// màu font và có thể lựa chọn đoạn văn bản hay không
txt.textColor = 0x000000;
txt.selectable = false; // true là có thể lựa chọn, quét, copy, false thì ko, mặc định là true
Sử dụng Textfield
//Hạn chế ký tự nhập
txt.maxChars = 20;
// giới hạn ký tự
txt.restrict = "^aA123456789"; Những ký tự sau ^ sẽ bị hạn chế
//hiển thị theo kiểu password
_input.displayAsPassword = true; Hiển thị kiểu ***** dành cho textinput,mặc định là false;
//Căn chỉnh text
txt.autoSize = TextFieldAutoSize.LEFT; // có 4 thuộc tính LEFT, RIGHT, NONE, CENTER
//multiline và wordwrap
txt.multiline = true; // nhiều dòng hay 1 dòng
txt.wordWrap = true; // true là tự động xuống dòng, false là ko xuống dòng
Bước 3: Hiện thị nội dung của text
txt.text = “Tôi là ngọc anh”; //add text vào
addChild(txt); //add text lên màn hình
Trên đây là 1 số thuộc tính căn bản hay dùng, h chúng ta sẽ thực hành vs chúng
TextFormat và cách trình bày nội dung văn bản
• Class TextFormat thiết lập cách trình nội dung văn bản của đối tượng text field như font, size , text color, align, marign, indent ….ví dụ:
var format:TextFormat = new TextFormat();
format.font = “Arial”;
format.size = 12;
format.color = 0;
format.align = “left”; • Bản thân text format chỉ là đối tượng trung gian, mọi thuộc tính, quy ước
trình bày văn bản mà ta đã gán cho nó sẽ không có giá trị cho đến khi nó được áp dụng cho một nội dung văn bản nào đó(ở đây là đối tượng text field).
TextFormat và cách trình bày nội dung văn bản
• Để gán giá trị textformat cho một đối tượng text field ta có 2 cách:
1. Sử dụng thuộc tính defaultTextFormat, thuộc tính này mang giá trị kiểu TextFormat. Khi đối tượng text field được gán giá trị text format, mọi nội dung văn bản được thêm vào sau đó sẽ áp dụng các quy ước trình bày được sử dụng trong đối tượng text format đó
2. Sử dụng hàm setTextFormat(format:TextFormat, beginIndex:int, endIndex:int) – trong đó format là đối tượng text format có các thuộc tính cần thiết, beginIndex và endIndex lần lượt là vị trí index của ký tự đầu tiên và cuối cùng của đoạn văn bản muốn áp dụng format.
Các thuộc tính cơ bản của Textformat
var format:TextFormat = new TextFormat();
format.font = “Arial”; //kiểu font
format.size = 12; //size font chữ
format.color = 0x000000; //màu chữ
format.bold = true; //chữ in đậm
format.underline = true; //chữ có gạch chân
format.font = “Arial”;
format.size = 12;
format.align = “left”; //căn lề trái
format.indent = 30; //dòng đầu tiên cách lề 30 pixel
format.leading = 4; //khoảng cách giữa các dòng là 12 + 4 =16 (cộng với size //font)
format. leftMarign = 20; //nội dung văn bản cách lề trái 20 pixel
format . rightMarign = 20; //nội dung văn bản cách lề phải 20 pitxel
var txt:TextField = new TextField();
txt.defaultTextFormat = format; //áp dụng đối tượng text format
txt.text = “Apply a format for text field object”;
addChild(txt);
Embed font và anti - aliasing
• Embed font (font nhúng) được sử dụng cho một số trường hợp đặc biệt như– kiểu font sử dụng là custom font(font đặc biệt hoặc không thông dụng)– muốn áp dụng một số hiệu ứng đặc biệt biệt như anti – alias , alpha…
cần sử dụng embed font.• Sử dụng embed font có 2 bước chính:
1. Tạo font symbol trong library flash ide và linkage. Lưu ý font symbol chỉ chưa một font style nên nếu muốn sử dụng cả style bold và italic cần nhúng 2 font symbol.
2. Gán giá trị true cho thuộc tính embedFonts của đối tượng text field.
Embed font và anti - aliasing
• hình minh họa
Thực hành và bài tập
• Tạo 1 form đăng ký diễn đàn sử dụng những gì đã học đc ở những bài trên
• Tìm hiểu về các component của text, ví dụ như text area…..