IV. CÁC COMPONENT CỦA ASP:
GIỚI THIỆU VỀ VISUAL INTERDE
. Sự ra đời của Visual InterDev:
Microsoft Visual InterDev là công cụ được phát triển ứng dụng Web được mong chờ từ lâu xuất thân từ Microsoft cuối cùng đã xuất hiện, rất nhiều nhà phát triển phần mềm đã hoan nghênh những tính năng của Visual Interdev và giờ đây họ đãcó một công cụ phát triển như Visual Basic và Visual C++ để tạo ứng dụng Web. Chúng ta đã có trong tay một công cụ đã tích hợp từ nhiều công nghệ và thành phần tiên tiến.
Giới thiệu về Visual InterDev:
Tầm quan trọng trong việc tạo ra Visual InterDev là cung cấp một công cụ với phạm vi rộng, tương tác với các môi trường phát triển khác.
Những nhà phát minh Visual InterDev muốn cung cấp một công cụ cho phép các nhà phát triển triển khai nhiều công nghệ mới để tạo ra và triển khai những ứng dụng Web động. Microsoft cũng muốn nhấn mạnh đến một công cụ trực quan. Nhiều sản phẩm đã được tạo ra những đoạn code HTML hoặc kết nối đến cơ sở dữ liệu, tuy nhiên công cụ này chưa chú trọng đến sự tiện lợi trong sử dụng cho những nhà phát triển.
Sơ lược về Visual InterDev:
Visual InterDev thật sự là một hệ thống phát triển ứng dụng Web nó cung cấp tất cả những công cụ để tạo ra những ứng dụng Intranet Web và Dynamic Web, Nó hổ trợ cho những lập trình viên để tạo ra những ứng dụng Web như:
Data-Driven Web Application: Hỗ trợ việc kết nối cơ sở dữ liệu dùng ODBC hay OLEDB.
Broad-reach Web Pages: sử dụng ngôn ngữ HTML và các ngôn ngữ nhúng (Script) trong ứng dụng Web để tận dụng được những tiến bộ mới nhất trong công nghệ trình duyệt: Microsoft Internet Explorer, Dynamic HTML, Multimedia feature.
Robust development environment : Với mô hình (Script Object Mode)những phần tử thiết kế thời gian thực (Design-time controls )và những hộp công cụ có thể mở ( expandable toobox )giúp cho việc thiết kế nhanh, kiểm tra và thiết kế trang Web.
Intergrated Solution: Những giải pháp được tích hợp mà nó bao gồm những applets và components được tạo ra trong microsoft Visual C++, Visual J++, Visual Basic.
Định mẫu trước với ứng dụng Site diagrams , Thems và LayOuts:
Visual InterDev 6.0 bao gồm những công cụ giúp chúng ta dễ dàng hoạch định các trang, tổ chức các liên kết và dùng các mỗi trình bày(theme)thích hợp cho Web site của chúng ta .
Các mô hình Site Diagram : có thể sử dụng mô hình này để hoạch định cấu trúc tổng thể của một Web Site và để tận dụng các yếu tố thiết kế trực quan tổng quát một cách nhanh chóng và dễ dàng.
Trong mô hình Site Diagram, có thể tạo một mẫu Site có chứa nhều tập tin và đồng thời xác định những quan hệ có cấp bậc giữa các tập tin. Đó là cấp bậc được dùng để định nghĩa cấu trúc di chuyển của Sites.
Các mô hình Site Datagram: Có thể sử dụng mô hình này để hoạch định cấu trúc tổng thể của một Web Site và để tận dụng các yếu tố thiết kế trực quan tổng quát một cách nhanh chóng và dễ dàng.
Trong mô hình Site Datagram, có thể tạo một mẫu Site có chứa nhiều tập tin và đồng thời xác định những quan hệ có cấp bậc giữa các tập tin. Đ ó là cấp bậc được dùng để định nghĩa cấu trúc di chuyển của Site. Ví dụ: trang chủ được xem như là một tập tin cha và có thể gắn vào các trang khác dưới nó để tạo các tập tin con .Ví dụ trang chủ được xem như là một tập tin cha và có thể gắn vào các trang khác dưới nó để tạo các tập tin con.
Các Layouts: Một khi chúng ta đã thiết lập cấu trúc định hướng, chúng ta có thể thêm vào thanh định hướng (navigation bars) vào các trang Web. Sử dụng một Layouts, chúng ta có thể nhanh chóng định nghĩa các thanh định hướng bao gồm sự kết hợp giữa các tập tin cha, con, anh em. Ví dụ một trang chủ có thể liên kết tới một vài trang con mà những trang con này có thể liên kết tới những trang anh em khác …
Các Themes: Có thể dễ dàng thêm vào các trang Web một tác động trực quan phù hợp bằng việc dùng các Themes.
Themes và Layouts có thể mở rộng và tùy biến vì thế chúng ta có thể tạo ra nhiều kiểu khác nhau cho tất cả các trang trong ứng dụng Web hoặc dùng chúng vào các phần của Web Site.
Khi chúng ta dùng các Site Datagram, các Layouts, các Themes để phát triển các Web Site, những cấu trúc tập tin thực sự và những thanh định hướng sẽ tạo được tạo một cách tự động .Để đơn giản hóa một cách duy trì một khi chúng ta đã phát triển ứng
dụng Web các Site Datagram cho phép chúng ta giữ các thanh định hướng hiện hành khi chúng ta cập nhật Site Datagram.
Phát triển với khung nhìn trực quan và những đoạn mã được tô màu:
Visual InterDev 6.0 có ba cách để xem các trang HTML và ASP. Những cách này được xem nền tảng của Visual InterDev.
Chế độ DesignView: Tạo ra cho trang Web trong một khung nhìn trực quan (WYSIWYG View ). Chúng ta có thể nhập vào nội dung hoặc kéo các phần tử từ hộp công cụ (toolbox ) hoặc Data Environment trực tiếp vào trang Web. Sử dụng những công cụ như toolbox, toolbar và các menu để xây dựng các trang Web.
Chế độ Source View: Trình bày mã nguồn HTML hay ASP giống như Design View, chúng ta có thể nhập vào nội dung hoặc kéo các phần tử từ hộp công cụ (toolbox)hoặc data Environment trực tiếp.
Chế độ Quick View: hiển thị kết quả của những đoạn mã HTML va những đoạn mã Script bên phía Client trước khi những trang này được lưu.Việc sử dụng này không cần đến Web Server vì thế nó không thể sử lý được những đoạn mã Scriptbên phía Server.
. Các thành phần tạo nên giao diện Visual InterDev :
.1. Cửa sổ soạn thảo HTML: ( HTML Editor Windows )
Trình soạn thảo HTML (HTML Editor ) của Visual InterDev có ba kiểu hiển thị các tập tin riêng biệt nhau đó là : Design View, Source View và Quick View .
Design View: Trình soạn thảo hiển thị văn bản với các ký tự và đoạn văn định dạng rất giống một trình soạn thảo văn bản bình thường.
Source View: Trình soạn thảo cho thấy các HTML tag, văn bản (text) và các đoạn Script làm nổi bậc các HTML tag và văn bản (text).
Quick View: Trình soạn thảo hiển thị các tập tin *.htm hay *.html giống như chúng được hiển thị trên Microsoft Internet Explorer.
.2.Định hướng trong soạn thảo:
Khi sử dụng trình HTML Editor,Visual Interdev có thể hiển thị những kiểu phát thảo văn bản khác nhau giúp chúng ta di chuyển nhanh chóng và dễ dàng trong văn bản.
Chế độ Design và Source View cửa sổ HTML Outline hiển thị một khung nhìn phạn cấp của các phần tử HTML (HTMLElements) và những đối tượng trong văn bản.
Ơ trong chế độ Source View, cửa sổ Script Outline hiển thị một khung nhìn dạng cây (Tree View) của các phần tử có thể viết mã Script trên một trang và đối với mỗi phần tử khi ta nhấp đúp chuột trái lên nút mang tên chúng thì nó sẽ hiển thị tất cả các sự kiện -có thể xảy ra trên phần tử này – mà chúng ta có thể viết mã lệnh (Script) cho chúng. Những sự kiện đã được viết lệnh sẽ được tô đậm hơn.
.3.Hộp công cụ : (Toolbox)
Khi làm việc trong trình duyệt HTML Editor, chúng ta có thể thêm vào trang các đối tượng bằng cách kéo chúng từ hộp công cụ và thả chúng vào trong trang hoặc nhấp đúp vào chúng. Chúng ta có thể sử dụng hộp công cụ ở hai chế độ Design View
và Source View. Hộp công cụ hiển thị một một tập các phần tử điều khiển bao gồm cả các phần tử điều khiển HTML chuẩn (standard HTML controls), các phần tử điều khiển thời gian thiết kế (Design -time controls), ActiveX controls và các Server Object. Hộp công cụ bao gồm các nhóm công cụ để xây dựng các trang Web.
Tên và ý nghĩa của mỗi nhóm công cụ trong hộp công cụ mặc định được mô tả trong bảng dưới đây:
Nhóm công cụ Y nghĩa Ví dụ
Server Object Các đối tượng sẵn có trong Server. Dictionary ,Filesystem, My Info
ActiveX control Những thành phần có thể tái sử dụng cung cấp những tính năng được thêm vào cho trang Web.
Label, textbo, checkbox, Listbox ,Grid
HTML Những control đồ họa chuẩn sẵn có trong ngôn ngữ HTML.
General Một nơi tập trung các đối tượng mà chúng ta muốn truy xuất dễ dàng.
Những đoạn mã HTML(HTML code)
Mỗi Tab trên hộp công cụ đại diện cho một nhóm, khi ta muốn sử dụng nhóm công cụ nào thì nhấp chọn nó. Trong trường hợp muốn tạo ra Tab riêng, chúng ta thực hiện như sau .:
1.Nhấp chuột phải lên Toolbox và chọn Add Tab.
2. Nhập tên cho Tab.
Thêm Design –time control hay ActiveX control:
1. Nhấp chuột phải vào phần trống của Tab.
2. Chọn Customize Toolbox.
3.Chọn Tab thích hợp và các control mà chúng ta muốn thêm vào.
4.Chọn nó bằng cách nhấp chọn các Check Box.
5.Nhấn O.K.
Thêm vào Tab các đoạn mã HTML hay Script:
1. Chọn đoãn mã muốn lưu.
2. Kéo chúng vào đoạn mã thích hợp.
.4.Cửa sổ Project Explorer:
Cửa Sổ Project Explorer hiển thị một danh sách có cấp bậc của tất cả các Project trong một solution, tất cả các phần tử trong mỗi Project. Một cách cụ thể, cửa sổ Project Explorer dùng để:
Xem nội dung của một Project. Mở những tập tin trong một Project.
Đồng bộ hóa các tập tin cục bộ vối các tập tin ở Master Web Server.
Gở bỏ các tập tin từ một Project.
Sao chép các tập tin.
Hiển thị cửa sổ các thuộc tín cho một tập tin được chỉ định.
Để hiểu đầy đủ về kiến trúc của Visual InterDev và cửa sổ Project Explorer, chúng ta cần biết các khái niệm sau:
Thuật ngữ Định nghĩa
Solution
Một tập hợp những web project và những Project phụ thuộc mà chúng tạo thành một Project ( Web
application ).
Local Web
Tập hợp những trang Web ở trên máy trạm của nhà phát triển ( developer ). Những trang này được dùng để tạo ra, phát triển và kiểm tra trước khi truyền tới Master Web Server .
Master Web application
Tập hợp những trang Web được lưu trữ và chứa trên Web Server. Master Web application (ứng dụng Web chủ ) có thể truy cập được đối với các nhà phát triển và tác giả (author ). nó cũng được làm cho sẵn sàng sử dụng được đối với những người sử dụng Internet và Intranet .
Web application
Một tập hợp các yếu tố để tạo nên một Web Site hay một phần riêng biệt của một Web Site. Các ứng dụng Web được xây dựng từ các Web Project.
Web Project Một tập hợp các tập tin chỉ định các yếu tố của một ứng dụng Web.