phongcanhdep mĩ thuật 4 nguyễn văn toại thư viện tư liệu giáo dục

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (309.49 KB, 39 trang )

<b>THIẾT KẾ GIAO DIỆN</b>

<b>(Form - Biểu mẫu)</b>

- Một công cụ thiết kế giao diện cho người

sử dụng phần mềm

</div>
<span class='text_page_counter'>(2)</span><div class='page_container' data-page=2>

<b>Các vấn đề cần nghiên cứu</b>

• <sub>Các khái niệm về Forms</sub>

• <sub>Sử dụng Form wizard</sub>

• Sử dụng Form designview

• <sub>Kỹ thuật Sub-form</sub>

</div>
<span class='text_page_counter'>(3)</span><div class='page_container' data-page=3>

<b>Nội dung cần nắm</b>

<sub>Các khái niệm về Form, về thiết kế giao diện, </sub>
về lập trình trực quan, hướng đối tượng

<sub>Kỹ năng tạo các dạng Form:</sub>
- Form nhập dữ liệu

</div>
<span class='text_page_counter'>(4)</span><div class='page_container' data-page=4>

<b>1. Khái niệm về Forms</b>

<sub>Khi sử dụng một ứng dụng, đa phần công </sub>
việc của người dïng làm trên các hộp thoại

(dialogue), cửa sổ (windows) cả 2 thành phần
này trong lập trình đều được gọi là form.

<sub>Với người sử dụng form là giao diện để sử </sub>
dụng phần mềm

</div>
<span class='text_page_counter'>(5)</span><div class='page_container' data-page=5>

Công dụng của Form

Cơng dụng của Form

• <sub>Thể hiện việc cập nhật dữ liệu cho các </sub>

bảng

</div>
<span class='text_page_counter'>(6)</span><div class='page_container' data-page=6>

Nguồn dữ liệu cho Form

• <sub>Với Form cần nguồn dữ liệu: nguồn dữ </sub>

liệu là bảng (table) hoặc truy vấn (query)

• Với Form dạng để tổ chức giao diện

</div>
<span class='text_page_counter'>(7)</span><div class='page_container' data-page=7>

Cấu trúc một Form

• <sub>Form có nhiều loại điều khiển:</sub>

– Hộp văn bản (Text)

– Nhãn (Label)

</div>
<span class='text_page_counter'>(8)</span><div class='page_container' data-page=8>

<b>Có hai mơi trường tạo Form</b>

• <b>- Sử dụng trình Form Wizard. Đây là cách rất </b>
đơn giản, nhanh chóng, dễ dàng giúp tạo

nhanh một Form. Tuy nhiên Form được tạo
ra có nhiều hạn chế, không gần gũi với yêu
cầu của người sử dụng

</div>
<span class='text_page_counter'>(9)</span><div class='page_container' data-page=9>

<b>2. Sử dụng FORM WIZARD</b>

• <sub>Form wizard là cơng cụ trên Access giúp </sub>

người sử dụng nhanh chóng và dễ dàng

tạo ra một Form làm giao diện nhập dữ

liệu cho các bảng trên CSDL.

</div>
<span class='text_page_counter'>(10)</span><div class='page_container' data-page=10>

<b>2. Sử dụng FORM WIZARD</b>

• <b><sub>Bước 1: </sub></b>

• <sub>Kích hoạt trình Form Wizard</sub>

<b>Ở thẻ Forms, nhấn nút New, chọn Form </b>

</div>
<span class='text_page_counter'>(11)</span><div class='page_container' data-page=11>

<b>Hình 1: Chọn Form Wizard</b>

</div>
<span class='text_page_counter'>(12)</span><div class='page_container' data-page=12>

Chọn bảng nào, truy vấn nào

• Chọn bảng:

Nơi các trường cần đưa lên form để nhập dữ liệu
<b>ở hộp: Tables/Queries, </b>

</div>
<span class='text_page_counter'>(13)</span><div class='page_container' data-page=13>

<b>Hình 2: Chọn bảng hoặc query</b>

</div>
<span class='text_page_counter'>(14)</span><div class='page_container' data-page=14>

• <b><sub>Bước 2:</sub></b>

• <b><sub> Chọn những thông tin cần đưa lên </sub></b>

<b>Form </b>

<b>2. Sử dụng FORM WIZARD </b>

(tiếp)

</div>
<span class='text_page_counter'>(15)</span><div class='page_container' data-page=15>

<b>Hình 3: Chọn những thơng tin cần đưa lên </b>

<b>Hình 3: Chọn những thông tin cần đưa lên </b>

<b>Form</b>

</div>
<span class='text_page_counter'>(16)</span><div class='page_container' data-page=16>

<b>• Từ danh sách Available Fields: sang </b>

<b>danh sách Selected Fields: bằng các </b>

<b>nút lệnh: >, >>, <, <<;</b>

• Hãy làm lần lượt đến khi chọn được

đủ các trường cần nhập dữ liệu lên

form.

<b>Để tiếp tục nhấn Next;</b>

Đưa các trường cần nhập thông tin lên form

</div>
<span class='text_page_counter'>(17)</span><div class='page_container' data-page=17>

<b>Bước 3: </b>

Chọn bố cục (Layout) cho

<sub>Chọn bố cục (Layout) cho </sub>

form.

• <sub>Có 4 kiểu bố cục có thể thiết lập được</sub>

cho form là:

• <i> Columnar</i>

• <i><sub> Tabular</sub></i>

</div>
<span class='text_page_counter'>(18)</span><div class='page_container' data-page=18>

Chọn kiểu bố cục

• Hãy lần lượt nhấn lên từng kiểu bố cục

(hình dưới)

• Xem kết quả minh hoạ (Preview) ở hộp

chữ nhật bên trái hộp thoại, quyết định

nên chọn loại nào

</div>
<span class='text_page_counter'>(19)</span><div class='page_container' data-page=19></div>
<span class='text_page_counter'>(20)</span><div class='page_container' data-page=20>

<b>Bước 4: </b>

<b>Chọn kiểu dáng (Style) cho form</b>

• Có một danh sách các kiểu dáng để

chọn.

• Hãy thử từng kiểu dáng và chọn cho

form một phong cách phù hợp

</div>
<span class='text_page_counter'>(21)</span><div class='page_container' data-page=21>

Xem, chọn kiểu dáng mong muốn

</div>
<span class='text_page_counter'>(22)</span><div class='page_container' data-page=22>

Bước 5: Hồn thiện cơng việc:

• Có thể gõ vào tên gọi cũng như tiêu đề cho
<b>form ở hộp What title do you want for your </b>

Có thể tuỳ chọn kích hoạt ngay Form vừa tạo
<b>nếu chọn Open the form to view or enter </b>

<b>information </b>

• Hoặc mở form ra ở chế độ Design view để
sửa

<b>cấu trúc nếu chọn mục Modify the forms </b>

<b>design</b>

</div>
<span class='text_page_counter'>(23)</span><div class='page_container' data-page=23>

<b>Chú ý</b>

• Quan trọng nhất là bước 1, 2.

</div>
<span class='text_page_counter'>(24)</span><div class='page_container' data-page=24>

<b>Sử dụng form đã tạo được </b>

<b>vào việc nhập dữ liệu:</b>

• <b>Chọn form, nhấn nút Open. Nếu form đang ở </b>
chế độ thiết kế có thể nhấn nút View trên thanh

công cụ. Lúc này có thể sử dụng form để cập
nhật dữ liệu:

</div>
<span class='text_page_counter'>(25)</span><div class='page_container' data-page=25>

Thanh định hướng (Navigator bar)

• <sub>- Nút để chuyển đến bản ghi kề sau;</sub>

</div>
<span class='text_page_counter'>(26)</span><div class='page_container' data-page=26>

<b>3. Sử dụng FORM DESIGN VIEW</b>

• <sub>Để tạo ra được form mang tính </sub>

</div>
<span class='text_page_counter'>(27)</span><div class='page_container' data-page=27>

• <sub>Nói như vậy khơng có nghĩa là</sub>

</div>
<span class='text_page_counter'>(28)</span><div class='page_container' data-page=28>

Sử dụng Form Design View.

<i><b>3.1 Thiết kế Form nhập dữ liệu đơn giản</b></i>

• <sub>Chúng ta sẽ tìm hiểu cách thiết kế </sub>

một form nhập dữ liệu đơn giản thông

qua yêu cầu:

– Tạo form dùng làm mẫu nhập dữ liệu

cho bảng.

</div>
<span class='text_page_counter'>(29)</span><div class='page_container' data-page=29>

<b>Có 3 thành phần quan trọng để làm việc:</b>

• <sub>Cửa sổ Form</sub>

• <sub>Thanh cơng cụ ToolBox</sub>

</div>
<span class='text_page_counter'>(30)</span><div class='page_container' data-page=30>

<b>Tool Box</b> <b>Cửa sổ Form</b> <b>Cửa sổ Properties</b>

</div>
<span class='text_page_counter'>(31)</span><div class='page_container' data-page=31>

(1) Cửa sổ

<b>Form</b>

• Nơi sẽ thiết kế và xây dựng các thông tin

cần thiết cho Form

• Tồn bộ các thơng tin trên form đều được

chứa trong các đối tượng điều khiển

(Control)

</div>
<span class='text_page_counter'>(32)</span><div class='page_container' data-page=32>

(2) Thanh công cụ

<b>Toolbox </b>

<b>(nhấn View / (nhấn View / </b>
<b>ToolBox)</b>

<b>ToolBox)</b>

• Là nơi chứa những đối tượng, những công cụ cụ thể
đưa lên form với mục đích thiết kế giao diện và điều

khiển dữ liệu theo bài tốn. Ví dụ: muốn tạo mục nhập
Họ tên trên form có thể dùng đối tượng Textbox,

• Muốn đưa một chú thích (nhãn hiển thị) có thể dùng
Label, muốn tạo một nút lệnh có thể dùng

CommandButton,

• Mỗi đối tương sẽ có tập các thuộc tính (Properties) và
tập các sự kiện (Events). Thuộc tính để mơ tả tính

chất cho đối tượng đó, ví dụ như: màu sắc, kích

thước, tính chất dữ liệu,.. Sự kiện- nơi có thể gắn các
mã lệnh VBA hoặc gắn các Macro lệnh để xử lý

</div>
<span class='text_page_counter'>(33)</span><div class='page_container' data-page=33>

<b>(3) Cửa sổ Properties</b>

(nhấn nút Properties hoặc nhấn đúp ô vuông giao giữa hai thước)

</div>
<span class='text_page_counter'>(34)</span><div class='page_container' data-page=34>

<b>Bước 2: Thiết lập nguồn dữ liệu cho form </b>

ở thuộc tính Record Source.

• Form đang thiết kế là loại để nhập dữ liệu, bước này
để xác định nguồn dữ liệu để form làm việc. - Chọn
<i>thuộc tính form bằng cách chọn tên đối tượng Form </i>
<b>ở hộp chọn Object trên thanh cơng cụ Formatting:</b>
• Hoặc nhấn chuột lên ô vuông – vị trí giao giữa 2

thước kẻ ngang-dọc của form đang thiết kế. Làm sao
<i>khi tiêu đề cửa sổ Properties là Form .</i>

</div>
<span class='text_page_counter'>(35)</span><div class='page_container' data-page=35>

<b>a. Sửa thuộc tính</b>

Mở form để sửa ở chế độ thiết kế (Design view)

• <b>Ví dụ:</b>

<b>– Sửa nhãn (Label): thuộc tính Caption</b>
<b>– Thay đổi kích thước đối tượng (Resize):</b>

<i>Kích thước của đối tượng thường được mơ tả ở thuộc tính: Height - chiều </i>
<i>cao và With - chiều rộng. Tuy nhiên ta hồn tồn có thể thay đổi kích thước </i>
đối tượng

một cách trực quan bằng chuột.
<b>– Di chuyển đối tượng:</b>

Mỗi đối tượng nằm trên form đều được xác định bởi một toạ độ, toạ độ này
được

<i>thể hiện qua 2 thuộc tính: Top - khoảng cách từ tiêu đề form đến đối tượng </i>
<i>và Left </i>

<i>BackColor. Tuy nhiên hồn tồn có thể thiết lập màu nền một cách nhanh </i>

</div>
<span class='text_page_counter'>(36)</span><div class='page_container' data-page=36>

<b>Bước 3: Mở cửa sổ Field List (nhấn vào nút Field List)</b>

<i>3.2 Tinh chỉnh cấu trúc Form</i>

• Khi thiết kế một form, địi hỏi lập trình
viên khơng những phải tạo ra được
form đáp ứng đầy đủ các yêu cầu về
xử lý dữ liệu của bài toán,

• <sub>Đáp ứng tính thẩm mỹ. Tuỳ thuộc vào </sub>

bài toán, vào đối tượng người sử
dụng mà thiết kế những kiểu giao
diện thân thiện.

Thanh công cụ Toolbox và cửa sổ

</div>
<span class='text_page_counter'>(37)</span><div class='page_container' data-page=37>

<b>Bước 4: </b>Đưa những trường cần nhập dữ liệu từ cửa sổ Đưa những trường cần nhập dữ liệu từ cửa sổ
Field List lên Form đang thiết kế

Field List lên Form đang thiết kế

• Dùng chuột kéo từng trường muốn thiết kế lên form từ
cửa sổ Field List thả lên vị trí hợp lý trên form (với bài
này phải kéo tồn bộ các trường lên form).

• <sub>Lúc này cửa sổ thiết kế form có dạng:</sub>

Mỗi khi kéo một trường từ Field List lên form, Access sẽ
tự động tạo một đối tượng gắn kết tới trường dữ liệu

tương ứng, đối tượng này có thể là Textbox, Combobox
hay đối tượng khác tuỳ thuộc vào kiểu dữ liệu của

</div>
<span class='text_page_counter'>(38)</span><div class='page_container' data-page=38>

Cửa sổ Field List

• <b>Cửa sổ Field List có chứa danh sách các trường trên </b>

CSDL có trong nguồn dữ
liệu của Form.

• Nó hỗ trợ việc đưa những trường dữ liệu này lên form để

nhập và hiển thị dữ liệu rất tốt. Trong trường hợp này ta
dùng để đưa những trường cầp nhập dữ liệu từ bảng
Sanpham lên form.

• Nếu chưa thấy cửa sổ này xuất hiện, hãy thực hiện hiển

thị nó bằng cách mở thực

<i><b>đơn View | Field List hoặc nhấn nút Field List trên thanh </b></i>
công cụ chuẩn.

</div>
<span class='text_page_counter'>(39)</span><div class='page_container' data-page=39>

<b>b. Sử dụng Command Button Wizard</b>
<b>(tạo nút lệnh cho Form)</b>

• Nút lệnh (Command Button) thường được dùng để lập trình xử lý các cơng việc
nào đó.

• Ví dụ: khi nhấn lên nút - một Bảng lương, Bảng San pham sẽ được in ra hoặc
khi nhấn nút - form đang làm việc sẽ được đóng lại. Muốn vậy, người

lập trình phải viết các lệnh phía sau nút đó, để làm sao khi nhấn lên nút, các
lệnh sẽ được thi hành để điều khiển công việc như yêu cầu. Control Button
Wizard sẽ giúp

tạo một số loại nút lệnh mà khơng cần biết đến lập trình. Dưới đây là các bước
sử

dụng:

</div>