Danh mục : XML

Bài 9 : Dùng DOM để display XML trong TreeView

I nternet Explorer 5.0 cho ta Document Object Model (DOM) ActiveX gọi là MSXML.DLL mà ta có thể dùng trong VB6. Ðầu tiên là Microsoft XML, version 2.0, tiếp theo đó là Microsoft XML, v2.6 và mới nhất là Microsoft XML, v3.0. Cả ba DLL nầy đều có trong danh sách các References mà ta có thể include khi dùng IDE Menu command Project | References.

Dùng DOM để display XML trong TreeView

I nternet Explorer 5.0 cho ta Document Object Model (DOM) ActiveX gọi là MSXML.DLL mà ta có thể dùng trong VB6. Ðầu tiên là Microsoft XML, version 2.0, tiếp theo đó là Microsoft XML, v2.6 và mới nhất là Microsoft XML, v3.0. Cả ba DLL nầy đều có trong danh sách các References mà ta có thể include khi dùng IDE Menu command Project | References.
Khi ta Load một XML file vào DOM, nó tự động parse XML data để build một Tree gồm nhiều nodes với thứ bậc cha, con bên trong. Dựa theo đó ta có thể display cái DOM Tree ấy trong một TreeView để có thể hình dung được cấu trúc của XML data.

Trong thí dụ dưới đây, ta Load một XML file tên people.xml vào DOM. XML file nầy còn có một Data Type Definition file tên people.dtd. Khi DOM load XML file, ta có thể dặn nó kiểm (validate) xem XML data có theo đúng tiêu chuẩn đòi hỏi trong dtd file.
Content của people.xml như sau, lưu ý hàng thứ hai nhắc đến people.dtd mà DOM sẽ dùng để validate data trong XML file:

 
<?xml version="1.0"?>
<!DOCTYPE PEOPLE SYSTEM "people.dtd">
<PEOPLE>
        <PERSON PERSONID="p1">
                <NAME>Peter Greenway</NAME>
                <ADDRESS>234 King St, Newtown, NSW, Australia</ADDRESS>
                <TEL>(612) 97463534</TEL>
                <FAX>(612) 97463535</FAX>
                <EMAIL>[email protected]</EMAIL>
        </PERSON>
        <PERSON PERSONID="p2">
                <NAME>Sue Williams</NAME>
                <ADDRESS>72/324 John St, Cabramatta, NSW, Australia</ADDRESS>
                <TEL>(612) 9745 2263</TEL>
                <FAX>(612) 9745 2264</FAX>
                <EMAIL>[email protected]</EMAIL>
        </PERSON>
        <PERSON PERSONID="p3">
                <NAME>Helen Clark</NAME>
                <ADDRESS>74 GreenHill Rd, Wayville, SA, Australia</ADDRESS>
                <TEL>(618) 9756 3635</TEL>
                <FAX>(618) 9756 3636</FAX>
                <EMAIL>[email protected]</EMAIL>
        </PERSON>
        <PERSON PERSONID="p4">
                <NAME>Martin Howard</NAME>
                <ADDRESS>652 Broadbeach Drive, St Kilda, Melbourne, Australia</ADDRESS>
                <TEL>(613) 9756 2312</TEL>
                <FAX>(613) 9756 2313</FAX>
                <EMAIL>[email protected]</EMAIL>
        </PERSON>
        <PERSON PERSONID="p5">
                <NAME>Pam Rose</NAME>
                <ADDRESS>24/274 Stancey St, Bankstown, NSW, Australia</ADDRESS>
                <TEL>(612) 9867 9821</TEL>
                <FAX>(612) 9867 9822</FAX>
                <EMAIL>[email protected]</EMAIL>
        </PERSON>
        <PERSON PERSONID="p6">
                <NAME>Le Duc Hong</NAME>
                <ADDRESS>3 Rawson St, Epping, NSW,Australia</ADDRESS>
                <TEL>(612) 9783 1442</TEL>
                <FAX>(612) 9783 1445</FAX>
                <EMAIL>[email protected]</EMAIL>
              </PERSON>
        <PERSON PERSONID="p7">
                <NAME>Âu Địch Xương</NAME>
                <ADDRESS>435 Trần Hưng Đạo, Vỉnh Long , Việt Nam</ADDRESS>
                <TEL>847 74847</TEL>
                <FAX>847 9682</FAX>
                <EMAIL>[email protected]</EMAIL>
        </PERSON>
        <PERSON PERSONID="p8">
                <NAME>Lý Phúc Hiếu</NAME>
                <ADDRESS>234 Lý Công Uẩn, Saigon, Việt Nam </ADDRESS>
                <TEL>827 3746</TEL>
                <FAX>827 4645</FAX>
                <EMAIL>[email protected]</EMAIL>
        </PERSON>
</PEOPLE>

Content của people.dtd như sau:
 
<!ELEMENT PEOPLE ( PERSON+ ) >
<!ELEMENT PERSON ( NAME, ADDRESS, TEL, FAX, EMAIL ) >
<!ATTLIST PERSON PERSONID ID #REQUIRED>
<!ELEMENT NAME (#PCDATA)>
<!ELEMENT ADDRESS ( #PCDATA ) >
<!ELEMENT TEL ( #PCDATA ) >
<!ELEMENT FAX ( #PCDATA ) >
<!ELEMENT EMAIL ( #PCDATA ) >

Trong file people.dtd phía trên ta có:
 
  1. Hàng thứ nhất nói rằng cái root Node (Node gốc) tên là PEOPLE. Nó có một hay nhiều Nodes con tên PERSON.
  2. Hàng thứ nhì nói mỗi Node PERSON có những Nodes con tên NAME, ADDRESS, TEL, FAX và EMAIL.
  3. Các hàng còn lại cho biết mỗi Node NAME, ADDRESS, TEL, FAX, EMAIL đều chứa text string.
Việc đầu tiên khi chạy program là bạn click nút Load XML into DOM and Display Tree. Ðợi một chút xíu, Tree của XML sẽ hiện ra trong TreeView. Ðồng thời XML data cũng được displayed trong WebBrowser phía bên phải.
Sau đó, mỗi lần bạn click lên dấu+ hay - bên trái tên của một người trong TreeView, chi tiết của người đó sẽ được display trong các TextBox phía trên.
Sau khi selected một Person, bạn có thể Delete tên đó bằng cách click nút Delete. Ngoài ra bạn cũng có thể thêm tên một người bằng cách click nút Clear to Add, điền các chi tiết của Person vào các TextBoxes rồi click Save new record. Mỗi lần bạn Delete một Person hay Add một New Person, program tự động Save kết quả xuống XML file.

Hai TextBoxes txtName và txtAddress không phải là TextBoxes thông thường nhưng là TextBoxes của ActiveX Form2. Các Controls của Form2 có thể display chữ Việt bằng Unicode. Do đó nếu bạn Click lên tên Lý Phúc Hiếu chẳng hạn, bạn sẽ thấy tên và địa chỉ được display trong Font Tahoma có dấu đầy đủ của chữ Việt. Muốn có các Controls của Form2 để display chữ Việt bạn dùng menu command Project | Components để popup Components Dialog, kế đó click Microsoft Forms 2.0 Object Library như trong hình dưới đây:


Bạn có thể thử viết thêm code để Edit các chi tiết của một Person có sẵn.



Bạn có thể download chương trình mẫu DOMTree.zip để chạy thử.

Ðể biết thêm các Properties và Methods của các Classes trong MSXML, từ trong VB6 IDE bạn press F2 để display Object Browser. Khi Object Browser Dialog hiện ra, chọn MSXML2 từ ComboBox phía trên đang display <All Libraries>, kế đó chọn một class, thí dụ như IXMLDOMElement từ ListBox bên trái, chi tiết của selected Class sẽ được displayed trong ListBox bên phải như trong hình dưới đây:
 

 


Tags