›

Bài giảng môn lập trình mạng - Chương 7: Lập trình web chạy trên client dùng activex control

pdf 58 trang huongle 7030
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng môn lập trình mạng - Chương 7: Lập trình web chạy trên client dùng activex control", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_mon_lap_trinh_mang_chuong_7_lap_trinh_web_chay_tre.pdf

Nội dung text: Bài giảng môn lập trình mạng - Chương 7: Lập trình web chạy trên client dùng activex control

  1. Môn học : Lập trình mạng Chương 7 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 bằng InterDev Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 241
  2. 7.1 Giới thiệu ActiveX Control ƒ Chúng ta ₫ã quen với các ₫iều khiển (control) ₫ược dùng trong các môi trường thiết kế trực quan giao diện phần mềm như TextBox, Button, ListBox, ComboBox, ƒ Microsoft ₫ưa ra công nghệ ActiveX Control ₫ể giúp người lập trình tự tạo thêm các ₫iều khiển theo nhu cầu riêng của mình. ActiveX là linh kiện phần mềm cấp hệ thống, nghĩa là mỗi khi nó ₫ược ₫ăng ký vào Windows thì bất kỳứng dụng nào cũng có thể dùng nó, ứng dụng ₫ócóthể là ứng dụng Windows truyền thống hay 1 trang Web. Cách thức sữ dụng 1 ActiveX giống y như cách dùng ₫iều khiển có sẵn. ƒ Xây dựng ActiveX gồm 2 bước chính : ₫ịnh nghĩa giao tiếp sử dụng và hiện thực chi tiết bên trong. ƒ Giao tiếp sử dụng ActiveX gồm 4 loại chân (pin, entry) : thuộc tính, tác vụ, sự kiện nhập, sự kiện xuất. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 242
  3. 7.2 Tạo ActiveX bằng VC++ Để thấy rõ qui trình xây dựng 1 ActiveX, chúng ta hãy thử dùng VC++ ₫ể xây dựng ActiveX có tên là MyStopLite, nó giả lập dàn ₫èn ₫iều khiển giao lộ với các thông số cụ thể nh ư sau : ƒ Hi ển thị : ₫ang ở trạ ng thái nào thì ₫èn tương ứng sẽ sáng, ₫èn còn lại tắt (dùng màu ₫en). Các events nhập Các events xuất ƒ tác vụ next() : cho phép dàn ₫èn chuyển về Caution Go trạng thái kế (₫ỏ → xanh → vàng) ƒ thuộc tính Color : cho phép thiết lập dàn ₫èn về màu tương ứng. Stop ƒ các events xuất : sẽ ₫ược kích hoạt khi dàn MyStopLite ₫èn hoàn thành việc chuyển về trạng thái mới (Go, Caution, Stop, Testing, Off). ƒ các events nhập ₫ược xử lý : LBUTTONDOWN, khi nhận ₫ược events này, Next Color → dàn ₫èn sẽ chuyển về trạng thái kế (₫ỏ Các method xanh → vàng). Các thuộc tính Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 243
  4. 7.2 Tạo ActiveX bằng VC++ 1. Để tạo 1 ActiveX Control bằng 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 của VC++ ₫ược hiển thị như sau : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 244
  5. 7.2 Tạo ActiveX bằng VC++ 2. Bước 1 : tạo project phần mềm bằng Wizard. Chọn menu File.New ₫ể tạo một Project VC++ chứa ActiveX Control, cửa sổ sau sẽ hiển thị : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 245
  6. 7.2 Tạo ActiveX bằng VC++ 3. 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 các file của project. Cuối cùng chọn button Ok ₫ể bắt ₫ầu các bước khai báo thông số cho Project. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 246
  7. 7.2 Tạo ActiveX bằng VC++ 4. Wizard cho Activex Control chỉ có 2 step, hãy trả lờ i cho từng step rồi chọn button Finish ở step 2 Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 247
  8. 7.2 Tạo ActiveX bằng VC++ 5. Cửa sổ tổng kết các thông số vừa xác lập sẽ hiện thị, kiểm tra chúng và quyết ₫ịnh Ok hay Cancel. Lư u ý nếu Cancel thì phải tạo Project lại từ ₫ầu vì các thông số của Project bị Cancel sẽ bị xóa hẳn. 6. Bước 2+3 : thiết kế giao diện cho chương trình và thiết lập thuộc tính cho các phần tử giao diện (không cần làm trong ActiveX Control cụ thể này vì giao diện sẽ do phầ n mềm tự vẽ lấy khi chạy) Bộ môn : Công ngh ệ ph ần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 248
  9. 7.2 Tạo ActiveX bằng VC++ 7. Bước 4 : ₫ịnh nghĩa interface của Activex Control, dùng menu View.Classwizard, cửa sổ sau sẽ hiển thị. Trước hết ₫ịnh nghĩa các chân input events (các hàm xử lý các sự kiện nhập mà Activex Control quan tâm). Để ₫ịnh nghĩa các hàm xử lý sự kiệnnhập, chọn page "Message Maps", chọn Project và class name tương ứng Activex control, danh sách các sự kiệncóthể xử lý sẽ hiện thị trong Message, chọn từng thông báo cần xử lý rồi ấn button "Add Function". Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 249
  10. 7.2 Tạo ActiveX bằng VC++ 8. Để ₫ịnh nghĩa các method và các thuộc tính data, chọn page "Automation", chọn button "Add Method" ₫ể tạo từng method, chọn button "Add Propertiy" ₫ể tạo từng property (trưâu tượng). Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 250
  11. 7.2 Tạo ActiveX bằng VC++ 9. Ứng với mỗi method ₫ược tạo, cửa sổ "Add Method" sẽ hiển th ị ₫ể ta thiết lập các tính chất c ủa nó : tên bên ngoài, tên bên trong, kiểu trả về, danh sách thông số hình thức Có 2 loại method : stock và customer. Method stock là method có sẵn của môi trường hay của class cha. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 251
  12. 7.2 Tạo ActiveX bằng VC++ 10. Ứng với mỗi property ₫ược tạo, cửa sổ "Add Property" sẽ hiển thị ₫ể ta thiết lập các tính chất của nó : tên bên ngoài, kiểu dữ liệu, tên hàm get và set tương ứng, danh sách thông số hình thức của từng hàm Có 3 loại property : stock, member variable và get/set. Property stock là property có sẵn của môi trường hay của class cha. Property "member variable" ₫ược hiện thực bằng 1 biến thành viên tương ứng của class. Property get/set tương ứng với 2 method get/set. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 252
  13. 7.2 Tạo ActiveX bằng VC++ 11. Sau khi tạo các method và property, chúng sẽ ₫ượ c hiện thị trong danh sách "External names" của cửa sổ Class Wizard. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 253
  14. 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 Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 254
  15. 7.2 Tạo ActiveX bằng VC++ 13. Cửa sổ "Add Event" cho phép thiết lập các thuộc tính của event : tên bên ngoài, tên bên trong (hàm tạo event), danh sách ₫ối số, loại event : stock hay custom. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 255
  16. 7.2 Tạo ActiveX bằng VC++ 13. Cửa sổ "Add Event" cho phép thiết lập các thuộc tính của event : tên bên ngoài, tên bên trong (hàm tạo event), danh sách ₫ối số, loại event : stock hay custom. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 256
  17. 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 Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 257
  18. 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 Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 258
  19. 7.2 Tạo ActiveX bằng VC++ 16. Bước 5 : viết code cho các hàm xử lý biến cố và các method. // Hiệu chỉnh lại hàm OnDraw của Activex Control ₫ể v ẽ nó theo yêu cầu riêng của nó. void CStopLiteCtrl::OnDraw( CDC* pdc, const CRect& rcBounds, const CRect& rcInvalid) { // 1. xóa background của ActiveX Control dùng màu background của container. CBrush brAmbientBack(TranslateColor(AmbientBackColor())); pdc->FillRect(rcBounds, &brAmbientBack); // 2. vẽ mép ActiveX Control dùng thuộc tính stock của control : BackColor + ForeColor // tính kích thước khoảng 40% ₫ộ cao CRect rcBezel(rcBounds); int nheight = rcBounds.height(); int nwidth = rcBounds.width(); Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 259
  20. 7.2 Tạo ActiveX bằng VC++ if (nheight >= nwidth) { int nBezelwidth = nheight * 40 / 100; if (nBezelwidth > nwidth) nBezelwidth = nwidth; // not more then width! int nDeflateBezel = (nwidth - nBezelwidth) / 2; rcBezel.DeflateRect(nDeflateBezel, 0); } else { int nBezelheight = nwidth * 40 / 100; if (nBezelheight > nheight) nBezelheight = nheight; // not more then width! int nDeflateBezel = (nheight - nBezelheight) / 2; rcBezel.DeflateRect(0,nDeflateBezel); } // create and select brush and pen CBrush brBack(TranslateColor(GetBackColor())); CBrush * pbrOld = pdc->SelectObject(&brBack); CPen pnFore(PS_SOLID, 2, TranslateColor(GetForeColor())); Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 260
  21. 7.2 Tạo ActiveX bằng VC++ CPen * ppnOld = pdc->SelectObject(&pnFore); pdc->Rectangle(rcBezel); // draw // select old brush, but not old pen pdc->SelectObject(pbrOld); // 3. vẽ 3 ₫èn dùng thuộc tính stock ForeColor. // already selected translate enum code to bits for red, green, yellow int nLights = TranslateLights(); // percentages are percentage of height // draw red light on top, 6% down, 27% diameter if (nheight >= nwidth) { DrawLight(pdc, rcBounds, 6, 27, (nLights & SLBIT_RED) ? SLCOLOR_RED : SLCOLOR_OFF); // yellow light in middle, 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); Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 261
  22. 7.2 Tạo ActiveX bằng VC++ } else { // Hien ngang DrawLight(pdc, rcBounds, 6, 27, (nLights & SLBIT_RED) ? SLCOLOR_RED : SLCOLOR_OFF); // yellow light in middle, 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 Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 262
  23. 7.2 Tạo ActiveX bằng VC++ void CStopLiteCtrl::FireRightEvent() { // called whenever the stoplight state changes to fire the // appropriate event–must call AFTER m_color set to new value! // Use the source browser to make sure you call each time // m_color changed! switch (m_color) { case SL_RED: FireStop(); break; case SL_YELLOW: FireCaution(); break; case SL_GREEN: FireGo(); break; case SL_NONE: FireOff(); break; case SL_TEST: FireTesting(); break; } } Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 263
  24. 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; 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 Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 264
  25. 7.2 Tạo ActiveX bằng VC++ void CStopLiteCtrl::DrawLight ( // draws an individual light centered in the control at // vertical position specified CDC* pdc, // DC in which to draw const CRect& rcBounds, // control's rectangle int nPercentDown, // top position as % of height int nPercentDiameter, // diameter as % of height COLORREF crColor // color to fill light) { // calculate diameter in drawing units int nheight = rcBounds.height(); int nwidth = rcBounds.width(); if (nwidth nwidth) nDiameter = nwidth; // but not greater than width! // create light's bounding rect int nLeftEdge = (rcBounds.left + rcBounds.right - nDiameter) / 2; int nTopEdge = rcBounds.top + nheight * nPercentDown / 100; Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 265
  26. 7.2 Tạo ActiveX bằng VC++ CRect rcLight( nLeftEdge, nTopEdge, nLeftEdge + nDiameter, nTopEdge + nDiameter); // make absolutely sure we're within bounds– // distort circle if necessary! rcLight.IntersectRect(rcLight, rcBounds); // create brush, draw, select old brush CBrush brColor(crColor); CBrush * brOld = pdc->SelectObject(&brColor); pdc->Ellipse(rcLight); pdc->SelectObject(brOld); } else { // ngang int nDiameter = nwidth * nPercentDiameter / 100; if (nDiameter > nheight) nDiameter = nheight; // but not greater than height! // create light's bounding rect int nTopEdge = (rcBounds.top + rcBounds.bottom - nDiameter) / 2; int nLeftEdge = rcBounds.left + nwidth * nPercentDown / 100; Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 266
  27. 7.2 Tạo ActiveX bằng VC++ CRect rcLight( nLeftEdge, nTopEdge, nLeftEdge + nDiameter, nTopEdge + nDiameter); // make absolutely sure we're within bounds– // distort circle if necessary! rcLight.IntersectRect(rcLight, rcBounds); // create brush, draw, select old brush CBrush brColor(crColor); CBrush * brOld = pdc->SelectObject(&brColor); pdc->Ellipse(rcLight); pdc->SelectObject(brOld); } } ///////////////////////////////////////////////////////////////////////////// // CStopLiteCtrl message handlers void CStopLiteCtrl::OnLButtonDown(UINT nFlags, CPoint point) { // TODO: Add your message handler code here and/or call default Next(); COleControl::OnLButtonDown(nFlags, point); } Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 267
  28. 7.2 Tạo ActiveX bằng VC++ short CStopLiteCtrl::GetColor() { // TODO: Add your property handler here return m_color; } void CStopLiteCtrl::SetColor(short nNewValue) { // TODO: Add your property handler here if (nNewValue >= SL_NONE && nNewValue <= SL_TEST) { m_color = nNewValue; InvalidateControl(); FireRightEvent(); SetModifiedFlag(); } else { ThrowError(CTL_E_ILLEGALFUNCTIONCALL, "Color parameter out of range"); } } Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 268
  29. 7.2 Tạo ActiveX bằng VC++ void CStopLiteCtrl::Next() { // TODO: Add your dispatch handler code here if (m_color >= SL_LAST || m_color < SL_FIRST) { m_color = SL_FIRST; } else m_color++; InvalidateControl(); FireRightEvent(); SetModifiedFlag(); } void CStopLiteCtrl::OnAmbientPropertyChange(DISPID dispid) { // TODO: Add your specialized code here and/or call the base class // Repaint if ambient background changed or if several changed if (dispid == DISPID_AMBIENT_BACKCOLOR || dispid == DISPID_UNKNOWN) { InvalidateControl(); } // passB ộonmôn to: Công base nghệ ph classần mềm Môn : Lập trình Mạng COleControl::OnAmbientPropertyChange(dispid);Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM } Slide 269
  30. 7.2 Tạo ActiveX bằng VC++ 17. Bước 6 : dịch và debug. Sau khi viết xong dùng menu Build.Rebuild all ₫ể dịch và tạo ActiveX Control, nếu có lỗi thì sửa. Cuối cùng dùng menu Tools.ActiveX Control Test Container ₫ể debug ActiveX Control. Lưu ý sau khi dịch thành công ActiveX, VC++ ₫ăng ký tự₫ộng ActiveX vào Windows, do ₫óActiveX sẵn sàng ₫ược dùng bởi bất k ỳứng dụng nào trên Windows. Khi copy ActiveX qua máy khác, bạn phải ₫ăng ký ActiveX vào Windows nhờ tiện ích regsvr32.exe (trong thư mục windows\system32) Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 270
  31. 7.3 Tạo Website dùng ActiveX Chúng ta sẽ xây dựng 1 trang Web demo việc ₫iều khiển ở 1 ngã tư (giao lộ của con ₫ường), trang Web này sẽ dùng 4 instance MyStopLite ₫ể làm 4 dàn ₫èn ₫iều khiển. Giao diện trang Web có dạng bên : Các dàn ₫èn tự hiệu chỉnh trạng thái theo timer 5s, user (₫óng vai trò công an) có thể thay ₫ổi trạng thái ₫iều khiển bằng cách ấn vào các button Green, Yellow, Red, Next, Test, Off. Khi các ₫èn chuyển trạng thái, 2 textbox kết hợp với 2 ₫èn L1, L2 sẽ hiển thị cảnh báo. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 271
  32. 7.3 Tạo Website dùng ActiveX 1. Chạy InterDev, cửa sổ sau sẽ hiển thị. Chọn page New, mục "Visual InterDev Projects", chọn icon "New Web project", chọn vị trí thư mục chứa Porject, nhập tên project (trờ thành thư mục chứa các file của project), chọn Ok. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 272
  33. 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 Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 273
  34. 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 Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 274
  35. 7.3 Tạo Website dùng ActiveX 4. Trong bước 3 của Wizard, chọn mẫu layout (td. ) cho project rồi chọn Next. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 275
  36. 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 Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 276
  37. 7.3 Tạo Website dùng ActiveX 6. Cửa sổ ban ₫ầu của project Web vừa ₫ược tạo ra. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 277
  38. 7.3 Tạo Website dùng ActiveX 7. Giả sử ta muốn dùng VBscript cho các trang Web trong Project, ta phải khai báo cho InterDev biết. Ấn phải chuột trên mục Project (cửa sổ chứa cây project trên phải) ₫ể menu pop-up hiển thị rồi chọn mục Properties : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 278
  39. 7.3 Tạo Website dùng ActiveX 8. Trong cửa sổ Properties, chọn page "Editor Defaults", chọn mục VBScript trong listbox "Client", chọn button Apply rồi Ok : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 279
  40. 7.3 Tạo Website dùng ActiveX 9. Vì trang Web demo có dùng 1 ₫ồ họa giao lộ, ta nên 'add' file ₫ồ họa này vào project. Ấn phải chuột vào mục Project trong cây project, chọn mục "Add" rồi "Add Item" : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 280
  41. 7.3 Tạo Website dùng ActiveX 10. Trong cửa sổ Add Item, duyệt cây thư mục và chọn file ₫ồ họa rồi ấn button Open ₫ể 'add' file náy vào projectWeb : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 281
  42. 7.3 Tạo Website dùng ActiveX 11. Bây giờ tạo 1 trang Web mới bằng cách ấn phải chuột vào mục Project trong cây project, chọn mục "Add" rồi "HTML Page" : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 282
  43. 7.3 Tạo Website dùng ActiveX 12. Trong cửa sổ "Add Item", nhập tên trang Web cần tạo (thí dụ : StopLite.htm) rồi chọn button Ok: Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 283
  44. 7.3 Tạo Website dùng ActiveX 13. Cửa sổ làm việc của trang web mới hoàn toàn trống. Hãy nhập dòng tiêu ₫ề chính của trang Web (và những dòng text nội dung khác nếu muốn), format văn bản giống như word : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 284
  45. 7.3 Tạo Website dùng ActiveX 14. Dùng chuột chọn tên file ₫ồ họa trong cây project bên phải, drag nó vào vị trí thích hợp trong trang Web : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 285
  46. 7.3 Tạo Website dùng ActiveX 15. Để project Web dùng ₫ược ActiveX Control, ₫ầu tiên phải 'add' nó vào thanh Toolbox của project. Hãy dời chuột vào Toolbox, ấn chuột phải rồi chọn mục "Customize Toolbox" trong pop-up menu : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 286
  47. 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 trong 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) rồi chọn button Ok. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 287
  48. 7.3 Tạo Website dùng ActiveX 17. Chọn icon "Absolute Mode" ₫ể có thể ₫ịnh vị chính xác vị trí các ₫iều khiển trong trang Web. Dùng chuột drag ActiveX Control từ Toolbox vào vị trí mong muốn 4 lần, mỗi lần cho 1 dàn ₫èn, nếu vị trí và kích thước chưa ₫úng thì dời và thay ₫ổi kích thước ₫ến lúc mong muốn rồi ấn vào icon "Absolute Positioning" ₫ể fix nó. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 288
  49. 7.3 Tạo Website dùng ActiveX 18. Tiếp tục cách làm này cho 6 button và 2 textbox như hình sau (lưu ý các button và textbox nên ₫ược chọn từ page HTML trong Tollbox). Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 289
  50. 7.3 Tạo Website dùng ActiveX 19. Bây giờ hãy thiếp lập ID cho từng control. Thí dụấn phải chuột vào button Yellow rồi chọn mục Properties, tìm mục Id trong cửa sổ properties rồi hiệu chỉnh lại giá trị Id theo muốn muốn (tên các button là GreenBt, YellowBt, RedBt, NextBt, TestBt, OffBt, tên các textbox là warning1, warning2, tên các Activex là DMyStopLite1, DMyStopLite2,Bộ môn : Công ngh ệ phần mềm Môn : Lập trình Mạng DMyStopLite3,Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 290 DMyStopLite4).
  51. 7.3 Tạo Website dùng ActiveX 20. Để lập trình hàm xử lý biến cố cho các control, ấn phải chuột trên 1 control rồi chọn mục Edit Script : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 291
  52. 7.3 Tạo Website dùng ActiveX 21. Để viết code xử lý biến cố Caution của ActiveX DMyStopLite1, nới rộng mục DMyStopLite1 trong cửa sổ Script Outline, ấn kép vào mục Caution, hàm xử lý sẽ ₫ược tạo ra tự ₫ộng như sau : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 292
  53. 7.3 Tạo Website dùng ActiveX 22. Sau khi viết code xưã lý biến cố Caution, Go, Stop cho 2 ₫èn kêt hợp với 2 warning ta có kết quả sau: Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 293
  54. 7.3 Tạo Website dùng ActiveX 23. Code xử lý biến cố cho các button như sau : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 294
  55. 7.3 Tạo Website dùng ActiveX 24. Code xử lý button Next : Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 295
  56. 7.3 Tạo Website dùng ActiveX 25. Thêm thuộc tính onload vào tag body của 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 Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 296
  57. 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 Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 297
  58. 7.3 Tạo Website dùng ActiveX 27. Chọn mục tên trang Web trong cây Porject bên phải, ấn phải chuột trên nó và chọn option "Set As Start Page" ₫ể khai báo trang Web này là trang bắt ₫ầu chạy của project : 28. Thử chạy trang web bằng cách chọn menu Debug.Start. Nếu có lỗi thì debug và sửa lỗi. Bộ môn : Công nghệ phần mềm Môn : Lập trình Mạng Khoa Công nghệ Thông tin Chương 7 : Lập trình Web chạy trên Client dùng ActiveX Trường ĐH Bách Khoa Tp.HCM Slide 298