Môn học : Lập trình mạng Chương LẬP TRÌNH WEB CHẠY TRÊN CLIENT DÙNG ACTIVEX CONTROL 7.1 Giới thiệu ActiveX Control 7.2 Qui trình xây dựng ActiveX dùng VC++ 7.3 Qui trình xây dựng Website dùng ActiveX InterDev Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 241 7.1 Giới thiệu ActiveX Control Chúng ta ₫ã quen với ₫iều khiển (control) ₫ược dùng môi trường thiết kế trực quan giao diện phần mềm TextBox, Button, ListBox, ComboBox, ƒ Microsoft ₫ưa công nghệ ActiveX Control ₫ể giúp người lập trình tự tạo thêm ₫iều khiển theo nhu cầu riêng ActiveX linh kiện phần mềm cấp hệ thống, nghĩa ₫ược ₫ăng ký vào Windows ứng dụng dùng nó, ứng dụng ₫ó ứng dụng Windows truyền thống hay trang Web Cách thức sữ dụng ActiveX giống y cách dùng ₫iều khiển có sẵn ƒ Xây dựng ActiveX gồm bước : ₫ịnh nghĩa giao tiếp sử dụng thực chi tiết bên ƒ Giao tiếp sử dụng ActiveX gồm loại chân (pin, entry) : thuộc tính, tác vụ, kiện nhập, kiện xuất ƒ Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 242 7.2 Tạo ActiveX VC++ Để thấy rõ qui trình xây dựng ActiveX, thử dùng VC++ ₫ể xây dựng ActiveX có tên MyStopLite, giả lập dàn ₫èn ₫iều khiển giao lộ với thông số cụ thể sau : ƒ ƒ ƒ ƒ ƒ Hiển thị : ₫ang trạng thái ₫èn tương ứng sáng, ₫èn lại tắt (dùng màu ₫en) tác vụ next() : cho phép dàn ₫èn chuyển trạng thái kế (₫ỏ → xanh → vàng) thuộc tính Color : cho phép thiết lập dàn ₫èn màu tương ứng events xuất : ₫ược kích hoạt dàn ₫èn hoàn thành việc chuyển trạng thái (Go, Caution, Stop, Testing, Off) events nhập ₫ược xử lý : LBUTTONDOWN, nhận ₫ược events này, dàn ₫èn chuyển trạng thái kế (₫ỏ → xanh → vàng) Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Các events xuất Các events nhập Caution Go Stop MyStopLite Next Các method Color Các thuộc tính Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 243 7.2 Tạo ActiveX VC++ Để tạo ActiveX Control VC++, trước hết chạy Visual C++ 6.0 từ Windows (thí dụ chọn mục Start.Programs.Mic rosoft Visual Studio 6.0/Microsoft Visual C++ 6.0) Màn hình VC++ ₫ược hiển thị sau : Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 244 7.2 Tạo ActiveX VC++ Bước : tạo project phần mềm Wizard Chọn menu File.New ₫ể tạo Project VC++ chứa ActiveX Control, cửa sổ sau hiển thị : Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 245 7.2 Tạo ActiveX VC++ Chọn mục MFC ActiveX ControlWizard, chọn vị trí thư mục chứa Project, nhập tên project Tên projrect trở thành thư mục chứa file project Cuối chọn button Ok ₫ể bắt ₫ầu bước khai báo thông số cho Project Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 246 7.2 Tạo ActiveX VC++ Wizard cho Activex Control có step, trả lời cho step chọn button Finish step Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 247 7.2 Tạo ActiveX VC++ Cửa sổ tổng kết thông số vừa xác lập thị, kiểm tra chúng ₫ịnh Ok hay Cancel Lưu ý Cancel phải tạo Project lại từ ₫ầu thông số Project bị Cancel bị xóa hẳn Bước 2+3 : thiết kế giao diện cho chương trình thiết lập thuộc tính cho phần tử giao diện (không cần làm ActiveX Control cụ thể giao diện phần mềm tự vẽ lấy chạy) Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 248 7.2 Tạo ActiveX VC++ Bước : ₫ịnh nghĩa interface Activex Control, dùng menu View.Classwizard, cửa sổ sau hiển thị Trước hết ₫ịnh nghĩa chân input events (các hàm xử lý kiện nhập mà Activex Control quan tâm) Để ₫ịnh nghĩa hàm xử lý kiện nhập, chọn page "Message Maps", chọn Project class name tương ứng Activex control, danh sách kiện xử lý thị Message, chọn thông báo cần xử lý ấn button "Add Function" Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 249 7.2 Tạo ActiveX VC++ Để ₫ịnh nghĩa method thuộc tính data, chọn page "Automation", chọn button "Add Method" ₫ể tạo method, chọn button "Add Propertiy" ₫ể tạo property (trưâu tượng) Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 250 7.3 Tạo Website dùng ActiveX 13 Cửa sổ làm việc trang web hoàn toàn trống Hãy nhập dòng tiêu ₫ề trang Web (và dòng text nội dung khác muốn), format văn giống word : Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 284 7.3 Tạo Website dùng ActiveX 14 Dùng chuột chọn tên file ₫ồ họa project bên phải, drag vào vị trí thích hợp trang Web : Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 285 7.3 Tạo Website dùng ActiveX 15 Để project Web dùng ₫ược ActiveX Control, ₫ầu tiên phải 'add' vào Toolbox project Hãy dời chuột vào Toolbox, ấn chuột phải chọn mục "Customize Toolbox" pop-up menu : Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 286 7.3 Tạo Website dùng ActiveX 16 Chọn page "ActiveX Control", tìm mục tên Activex Control cần dùng danh sách, dánh dấu chọn vào checkbox tương ứng (lập lại nhiều lần cho nhiều Activex Control cần dùng) chọn button Ok Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 287 7.3 Tạo Website dùng ActiveX 17 Chọn icon "Absolute Mode" ₫ể ₫ịnh vị xác vị trí ₫iều khiển trang Web Dùng chuột drag ActiveX Control từ Toolbox vào vị trí mong muốn lần, lần cho dàn ₫èn, vị trí kích thước chưa ₫úng dời thay ₫ổi kích thước ₫ến lúc mong muốn ấn vào icon "Absolute Positioning" ₫ể fix Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 288 7.3 Tạo Website dùng ActiveX 18 Tiếp tục cách làm cho button textbox hình sau (lưu ý button textbox nên ₫ược chọn từ page HTML Tollbox) Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 289 7.3 Tạo Website dùng ActiveX 19 Bây thiếp lập ID cho control Thí dụ ấn phải chuột vào button Yellow chọn mục Properties, tìm mục Id cửa sổ properties hiệu chỉnh lại giá trị Id theo muốn muốn (tên button GreenBt, YellowBt, RedBt, NextBt, TestBt, OffBt, tên textbox warning1, warning2, tên Activex DMyStopLite1, DMyStopLite2, Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin DMyStopLite3, Trường ĐH Bách Khoa Tp.HCM DMyStopLite4) Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 290 7.3 Tạo Website dùng ActiveX 20 Để lập trình hàm xử lý biến cố cho control, ấn phải chuột control chọn mục Edit Script : Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 291 7.3 Tạo Website dùng ActiveX 21 Để viết code xử lý biến cố Caution ActiveX DMyStopLite1, nới rộng mục DMyStopLite1 cửa sổ Script Outline, ấn kép vào mục Caution, hàm xử lý ₫ược tạo tự ₫ộng sau : Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 292 7.3 Tạo Website dùng ActiveX 22 Sau viết code xưã lý biến cố Caution, Go, Stop cho ₫èn kêt hợp với warning ta có kết sau: Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 293 7.3 Tạo Website dùng ActiveX 23 Code xử lý biến cố cho button sau : Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 294 7.3 Tạo Website dùng ActiveX 24 Code xử lý button Next : Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 295 7.3 Tạo Website dùng ActiveX 25 Thêm thuộc tính onload vào tag body trang Web ₫ể khai báo hàm khởi ₫ộng thông số cho ứng dụng Web : Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 296 7.3 Tạo Website dùng ActiveX 26 Viết code cho hàm khởi ₫ộng trang Web : Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 297 7.3 Tạo Website dùng ActiveX 27 Chọn mục tên trang Web Porject bên phải, ấn phải chuột chọn option "Set As Start Page" ₫ể khai báo trang Web trang bắt ₫ầu chạy project : 28 Thử chạy trang web cách chọn menu Debug.Start Nếu có lỗi debug sửa lỗi Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 298 [...]... Next Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Slide 275 7. 3 Tạo Website dùng ActiveX 5 Trong bước 4 của Wizard, chọn mẫu theme (td ) cho project rồi chọnFinish Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương 7 : Lập trình. .. Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Slide 272 7. 3 Tạo Website dùng ActiveX 2 Trong bước 1 của Wizard, chọn hay nhập tên Web server mà project Web sẽ ₫ược cài ₫ặt lên rồi chọnNext Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương. .. 37% down, 27% diameter DrawLight(pdc, rcBounds, 37, 27, (nLights & SLBIT_YELLOW) ? SLCOLOR_YELLOW : SLCOLOR_OFF); // green light on bottom, 68% down, 27% diameter DrawLight(pdc, rcBounds, 68, 27, (nLights & SLBIT_GREEN) ? SLCOLOR_GREEN : SLCOLOR_OFF); } pdc->SelectObject(ppnOld); } Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương 7 : Lập trình. .. Tp.HCM Môn : Lập trình Mạng Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Slide 253 7. 2 Tạo ActiveX bằng VC++ 12 Để tạo các output event, chọn page "ActiveX Event", chọn button "Add Event" ₫ể tạo từng event Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Slide 254 7. 2 Tạo ActiveX bằng... break; } } Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Slide 263 7. 2 Tạo ActiveX bằng VC++ int CStopLiteCtrl::TranslateLights() { // sets appropriate bits for stoplight state int nLights = SLBIT_RED; // safe default switch (m_color) { case SL_NONE: nLights = 0; break; case SL_RED: nLights = SLBIT_RED;... Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Slide 256 7. 2 Tạo ActiveX bằng VC++ 14 Sau khi ₫ã tạo các event, chúng sẽ hiển thị trong danh sách "External name" trong cửa sổ Classwizard Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương. .. Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Slide 273 7. 3 Tạo Website dùng ActiveX 3 Trong bước 2 của Wizard, nhập tên ứng dụng rồi chọn Next Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Slide 274 7. 3 Tạo Website dùng ActiveX 4 Trong bước 3 của... trình Mạng Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Slide 2 57 7.2 Tạo ActiveX bằng VC++ 15 Tùy theo yêu cầu thiết lập giá trị ₫ầu của các thuộc tính dữ liệu, thiết kế trang Property phù hợp cho ActiveX Control Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Slide 258 7. 2 Tạo ActiveX... light on bottom, 68% down, 27% diameter DrawLight(pdc, rcBounds, 68, 27, (nLights & SLBIT_GREEN) ? SLCOLOR_GREEN : SLCOLOR_OFF); Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Slide 261 7. 2 Tạo ActiveX bằng VC++ } else { // Hien ngang DrawLight(pdc, rcBounds, 6, 27, (nLights & SLBIT_RED) ? SLCOLOR_RED... SLBIT_RED; break; case SL_GREEN: nLights = SLBIT_GREEN; break; case SL_YELLOW: nLights = SLBIT_YELLOW; break; case SL_TEST: nLights = SLBIT_RED | SLBIT_YELLOW | SLBIT_GREEN; break; } return nLights; } Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Slide 264 7. 2 Tạo ActiveX bằng VC++ void CStopLiteCtrl::DrawLight ... Web vừa ₫ược tạo Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 277 7. 3 Tạo Website dùng... sổ Classwizard Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Lập trình Mạng Chương : Lập trình Web chạy Client dùng ActiveX Slide 2 57 7.2 Tạo ActiveX VC++... COleControl::OnLButtonDown(nFlags, point); } Môn : Lập trình Mạng Bộ môn : Công nghệ phần mềm Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Chương : Lập trình Web chạy Client dùng ActiveX Slide 2 67 7.2 Tạo ActiveX