CHƯƠNG 3 : NỘI DUNG NGHIÊN CỨU VÀ KẾT QUẢ
3.2.1Kiến trúc phần mềm
3.2 THIẾT KẾ TỔNG QUAN
3.2.1Kiến trúc phần mềm
Hình 3.1: Kiến trúc phần mềm của chương trình demo a) Phía người dùng (Client):
Mục tiêu ban đầu của việc nghiên cứu là cố gắng để chương trình tương thích với đa số các trình duyệt thơng dụng. Trong phần kết quả nghiên cứu sẽ đề cập chi tiết về các trình duyệt đã được kiểm tra để chương trình chạy tốt.
b) Tầng trình bày (Presentation):
Như đã giới thiệu ở chương trình phần chủ yếu của tầng trình bày sử dụng framework GWT. Tất cả những gì hiển thị trên giao diện chương trình đều sử dụng các widget của GWT và của gói thư viện SmartGWT. Các ứng dụng các gói này vào chương trình sẽ được trình bày chi tiết trong phần giải pháp đồ họa. Tầng này cũng đảm nhiệm các nhiệm vụ đồ họa, các chức năng tương tác kéo thả, thay đổi kích thước thậm chí các chức năng chuyển đổi cũng được xử lý ở tầng này. Tầng trình bày bao gồm các gói com.luong.client và com.luong.shared. Chúng ta sẽ thấy các gói này mã nguồn java nhưng khi biên dịch chúng sẽ được biên dịch thành mã nguồn javascript và chạy phía client.
c) Tầng xử lý các nghiệp vụ (Bussiness):
Trong chương trình demo đa số các chức năng được thực hiện ở phía client để tăng tốc độ xử lý. Chỉ có một vài chức năng cần giao tiếp với server như chức
năng login bằng tài khoản google, chương trình sử dụng servlet để xử lý chức năng này. Tầng này bao gồm các gói trong com.luong.server.
d) Tầng Persistence:
Tầng persistence cho phép chương trình tương tác với datastore. Như đã đề cập ở chương trên, datastore hỗ trợ JDO, JPA và các API cấp thấp. Ở đây chương trình sử dụng JDO (Java Data Object) nhằm giúp chương trình nâng cao tính khả chuyển của chương trình.
e) Tầng lưu trữ dữ liệu:
Ở tầng lưu trữ dữ liệu chương trình sử dụng datastore của Google App Engine. Chương cơ sở lý thuyết đã có trình bày tổng quan về datastore. Để đơn giản demo tiết kiệm kịp thời gian hồn thành tiến độ chương trình chỉ sử dụng một kiểu thực thể duy nhất là useraccount để lưu trữ thông tin người dùng, và một thuộc tính diagram kiểu List<String> để lưu trữ các diagram mà người sử dụng đã save.
3.2.2 Mơ hình triển khai ứng dụng
Hình 3.2: Mơ hình triển khai ứng dụng
Hình 3.2 mơ tả mơ hình triển khai ứng dụng. Trong mơ hình thể hiện rất rõ thuận lợi của điện tốn đám mây. Chúng ta khơng cần quan tâm đến chi tiết bên trong cấu trúc server, việc server triển khai như thế nào, sử dụng hệ quản trị gì, hệ điều hành gì, webserver gì, các vấn đề về hiệu suất, tài nguyên lưu trữ, băng thơng đường truyền … tất cả có vẻ như là vơ hạn cho chúng ta khả năng mở rộng chương trình tối đa khi cần thiết một cách dễ dàng, chi phí thấp và chúng ta cũng khơng cần quan tâm đến việc bảo trì hay cân bằng tải …
Mơ hình cũng thể hiện được mục tiêu mấu chốt của đề tài. Ứng dụng hỗ trợ phát triển phần mềm online sẽ giúp các nhà phát triển độc lập hơn về nền tảng và thiết bị khi sử dụng phần mềm. Trong mơ hình các thiết bị máy tính bảng cũng được đề cập. Tất cả những thứ cần thiết cho việc sử dụng phần mềm là một thiết bị với trình duyệt web tương thích và kết nối internet.
3.2.3 Giải quyết vấn đề đồ họa
Trong phần này sẽ giải thích chi tiết cách xây dựng các gói đồ họa phía client com.luong.client.cdm và com.luong.client.pdm.
Các vấn đề trong đồ họa bao gồm: chúng ta qua sát hình 3.3 để dễ hình dung:
− Vẽ một thực thể có khả năng kéo thả thay đổi vị trí và kích thước
− Vẽ các mối quan hệ, khó khăn nằm ở 2 đầu mối quan hệ.
− Xử lý các sự kiện khi một thực thể thay đổi vị trí hay kích thước ta phải vẽ lại mối quan hệ để đảm bảo nó ln nối 2 thực thể
Trên thực tế thì phần đồ họa của 2 gói này tương đối như nhau, các gói pdm có phần kế thừa từ gói cdm và cách thức đồ họa trong cdm phức tạp hơn. Nên phần này sẽ trình bày kỹ về CDM.
Hình 3.3: Mơ hình CDM và PDM tương ứng
Hình 3.3 là kết quả vẽ mơ hình CDM cho 2 thực thể phòng trọ và loại thiết bị bằng chương trình CloudDesigner (chương trình demo của đề tài) và mơ hình PDM được chuyển từ mơ hình CDM đó. Chúng ta sẽ bắt đầu cách để tạo một đối tượng thực thể đó. Như các chúng ta thấy, một thực thể là có hình chữ nhật, màu xanh, dòng đầu tiên sẽ chứa trên thực thể, các dòng tiếp theo chứa các thuộc tính của thực thể, và thực thể phải cho phép người dùng kéo thả thay đổi vị trí ban đầu và thay đổi kích thước thực thể.
Đây là sơ đồ lớp của lớp Entity trong gói com.luong.cdm. Chúng ta thấy lớp Entity thừa kế từ lớp HTMLFlow, lớp này là một trong những widget của thư viện SmartGwt, HTMLFlow có khả năng kéo thả thay đổi vị trí và kích thước bằng 2 phương thức setDragReposition(true) và setDragResize(true). Ngoài ra đặc trưng của HTMLFlow là một hình chữ nhật, có chiều dài và chiều rộng thay đổi được, nội dung của nó là một chuỗi html. Nó cũng giống như một thẻ <div> chúng ta có thể lồng vào đó những thẻ html tùy chúng ta thông qua phương thức setContents(String html). Chúng ta setContents với nội dung như sau:
<div id='main' >
<div class='content_border_top' align='center'>name</div> <div class='content_border_center'>
<table> <tr>
</tr> </table>
</div>
</div> (adsbygoogle = window.adsbygoogle || []).push({});
Chúng ta vẫn có thể định nghĩa css cho chúng thơng qua class và id ở trên. Và đoạn css cho chúng như sau:
.content_border_top {
background-color: #bdffff; border: #00aaaa 1px solid; font-weight: bold; padding: 5px; } .content_border_center { background-color: #bdffff; border-top:#00aaaa 1px solid; padding: 5px; }
Trong nội dung file html thì thẻ <div> thứ 2 có nội dung là name sẽ hiện thị tên của thực thể, và bảng có 4 cột tương ứng với tên của thuộc tính, kiểu dữ liệu, null và khóa chính, và mỗi dịng của bảng tương ứng với một thuộc tính của thực thể.
Trở lại lớp Entity chúng ta sẽ làm rõ các thuộc tính các thuộc tính và phương thức trong đó:
Thuộc tính
1. ID: kiểu int mỗi một thực thể sẽ có một id là duy nhất để xác định thực thể đó. 2. Name: kiểu string là tên của thực thể.
3. Code: kiểu String thường bằng với tên, là tên của bảng sau khi đã xuất thành mã SQL.
4. Danh sách field: là một danh sách kiểu field, field là một lớp mà mỗi một thể hiện của nó sẽ là một thuộc tính của một entity.
5. entityWindow: kiểu EntityWindow là một window cho phép người dùng cập nhật thông tin cho một thực thể như tên, code hay thêm sửa xóa các thuộc tính. entityWindow được sử dụng chung cho các đối tưởng kiểu Entity nên nó là một biến thuộc tính static.
6. drawarea: kiểu Drawarea là một container cho phép chúng ta vẽ trên đó, nó thừa kế lớp DrawPane là một widget của smartGwt, và biến drawarea ở đây sẽ trỏ đến đối tượng có kiểu Drawarea mà chứa thực thể đó.
7. Danh sách relationship: kiểu CDMRelationship đây là một một lớp mà mô tả các chức năng của một mối quan hệ giữa các thực thể. Mỗi một entity(thực thể) có nhiều mối quan hệ nguyên do đó mà nó có kiểu một danh sách.
Phương thức
1. updateEntity(): phương thức trả về void, phương thức này cho phép vẽ lại entity cho phù hợp với thuộc tính danh sách field, name và code.
2. reGenerateEntity(): phương thức trả về void, phương thức cho phép vẽ lại entity, sau khi người dùng cập nhật entity từ entityWindow.
3. addStartRelationship(): phương thức trả về void, phương thức này thực hiện khi người dùng muốn vẽ một relationship giữa 2 mối quan hệ, và đây là thực thể đầu tiên của mối quan hệ sẽ gọi phương thức này, để khởi tạo một mối quan hệ và vẽ điểm đầu của nó.
4. addEndRelationship(): tương tự như phương thức trên nhưng được thực thi bởi thực thể thứ 2 để hoàn tất việc thiết lập mối quan hệ giữa 2 thuộc tính cũng như vẽ điểm cuối cho thuộc tính đó.
5. resizeEntity(): là phương thức được thực hiện khi người dùng hồn tất việc thay đổi kích thước một thực thể. Khi người dùng thay đổi kích thước một thực thể chúng ta cần vẽ lại các mối quan hệ của nó với các thực thể khác để đảm bảo mối liên hệ luôn được đồng hành cũng thực thể.
6. Remove(): cho phép xóa thực thể này ra khỏi sơ đồ, trước tiên phương thức phải xóa hết các mối liên hệ của nó với các thực thể khác ra khỏi sơ đồ. ở đây, ngồi việc xóa hết các ký hiệu trên sơ đồ chúng ta cũng phải xóa ln sự hiện diện của nó trong danh sách mối relationship của các thực thể khác, sau đó mới xóa các ký hiệu của thực thể và hủy đối tượng thực thể đó.
7. createEntityWindow(): cho phép hiển thị cửa sổ cập nhật thực thể cho người dùng, cửa sổ này phải chứa xóa dữ liệu của thực thể trước đó và thay thế bằng dữ liệu của thực thể mới.
8. moveRelationship(): phương thức này được gọi khi người dùng thay đổi vị trí của một thực thể, nó giúp vẽ lại các Relationship của thực thể đó.
Lớp Entity đã giải quyết được vấn đề cho phép tạo một thực thể của chương trình. Tiếp theo chúng ta sẽ xem xét cách mà tạo ra một relationship.
Chúng ta quan sát thấy, relationship về mặt đồ họa nó là một đường thẳng, điểm đầu nằm trong khu vực của thực thể thứ nhất và điểm cuối nằm trong khu vực của thực thể thứ hai. Ở hai đầu thực thể có 2 ký hiệu thể hiện kiểu mối quan hệ của 2 thực thể đó. Vấn đề là chúng ta khơng thể sử dụng hình ảnh cho chúng vì các thực thể có thể di chuyển được và khoảng cách giữa chúng hay nói cách khác là độ dài của relationship thay đổi tùy theo người dùng chỉnh sửa nên việc đồ họa cho relationship phải là một giải thuật vẽ mang tính tổng quát, mà sự phức tạp nằm ở 2 ký hiệu ở 2 đầu đường thẳng.
Trước khi đi vào lớp relationship, chúng ta cũng tìm hiểu sơ qua về các gói đồ họa trong smartGWT. Các lớp hỗ trợ đồ họa nằm trong gói com.smartgwt.client.widgets.drawing. Đầu tiên kể đến lớp DrawPane, đây là một container cho phép chứa các DrawLine, DrawOval và DrawPath hoặc các lớp cài đặt giao diện DrawItem. Các lớp này nằm trong bộ API cho phép tạo ra các hình dạng sử dụng khả năng đồ họa vector của trình duyệt web. Bao gồm SVG (Scalable Vector Graphics), VML (Vector Markup Language) for Microsoft browsers, và HTML5 sử dụng tab <canvas>.
Giờ chúng ta quan sát sơ đồ lớp của đối tượng CDMRelationship. Lớp CDMRelationship cài đặt giao diện Relationship. Đồng thời trong lớp CDMRelationship cịn có 2 lớp innerclass HeadTools và Aspectspoint.
Trước tiên, chúng ta sẽ tìm hiểu 2 lớp trong của lớp CDMRelationship là HeadTools và AspectsPoint.
Lớp AspectsPoint lớp này bao gồm các thuộc tính như :
aspects: thuộc tính này kiểu AspectsEntity là một kiểu enum bao gồm left,right,top,bottom. Kiểu này cho biết Relationship nằm về phía nào của thực thể, giúp chúng ta xác định được giao điểm của thực thể với relationship.
Intersection: thuộc tính là tọa độ giao điểm của Retionship với một thực thể ở một cạnh phía aspects (ví dụ: nếu là left thì intersect sẽ là giao điểm của relationship với đường thẳng x=entity.getLeft()).
drawPoint: thuộc tính là tọa độ điểm nằm trên đường thẳng relationship mà ở đó kiểu của mối liên hệ bắt đầu vẽ. Thường nó cách điểm giao(intersaction) 10 đơn vị. (adsbygoogle = window.adsbygoogle || []).push({});
Lớp HeadTools làm nhiệm vụ vẽ kiểu relationship ở 2 đầu của nó. Bộ cơng cụ để vẽ được kiểu relationship bao gồm.
linetop: kiểu DrawPath, dùng để vẽ đường thẳng nằm ngang trong trường hợp mối quan hệ kiểu 0..1 hay 1..n , 1.
Circle: kiểu DrawOval dùng để vẽ hình trịn trong trường hợp kiểu của mối liên hệ là o..o hoặc o..n.
triangle: kiểu Triangle dùng để vẽ tam giác trong trường hợp mối quan hệ có phụ thuộc hàm, lineleft và lineright là 2 cạnh 2 cũng dùng trong việc vẽ phụ thuộc hàm.
relationshipType: thuộc tính này cho chúng ta biết kiểu của đầu mối quan hệ của đối tượng này, sắp tới phương thức draw() của đối tượng sẽ dựa vào thuộc tính này để gọi hàm vẽ hình dạng cho phù hợp với kiểu của Relationship. Ngồi ra thuộc tính dependence cũng cho ta biết đầu này có phụ thuộc hàm hay khơng để phương thức draw() vẽ cho phù hợp.
Giờ chúng ta sẽ đi sâu vào các hàm đồ họa tạo ra các kiểu của mối quan hệ. Chúng ta hãy quan sát cách vẽ một mối quan hệ. Đầu tiên chúng ta chọn mối cơng cụ mối quan hệ. Sau đó click vào thực thể thứ 1, chương trình xác định được điểm đầu A mối quan hệ và khi click vào điểm thứ 2 B của mối quan hệ như hình vẽ dưới đây. A B Intersaction drawpoint right left
Để có thể vẽ được đầu tiên chúng ta cần gọi hàm identifyAsp(expoint,inpoint,entity,dx), trong đó expoint là điểm bên ngồi thực thể thuộc đường thẳng mối quan hệ và tương tự inpoint là điểm nằm trong, entity là thực thể đang xét, dx là khoảng cách giữa intersection và drawpoint mà ta mong muốn, phương thức trả về một đối tượng kiểu AspectsPoint. Ví dụ đối với hình trên, để xác định được aspectspoint của thực thể right chúng ta gọi phương thức identifyAsp(A,B,right,10).
Cụ thể cách làm việc bên trong phương thức như sau:
Bước 1: xác định aspects, đây là phía mà điểm bên ngồi thực thể nằm về. ví dụ như điểm A có aspects là left so với thực thể right.
Bước 2: xác định intersaction: dựa vào giải thuật sau : Switch(aspects)
{
case left: intersaction = giao điểm của đường thẳng AB và x = right.left();break;
case right: intersaction = giao điểm của đường thẳng AB và x= right.right(); break;
case top: intersaction = giao điểm của đường thẳng AB và y = right.top();break;
case bottom: intersaction = giao điểm của đường thẳng AB và y = right.bottom();break;
}
Bước 3: xác định điểm drawpoint:
Để xác định được điểm drawpoint. Như trong ví dụ điểm drawpoint cách điểm B 10 đơn vị về phía A. Để tìm được điểm drawpoint chúng ta cần giải hệ phương trình sau, một là phương trình đường thẳng, 2 là khoảng cách giữa 2 điểm.
-b(x - xA) +a (y – yA)=0 (Xd – xi )2 + (yd – yi )2 = dx Trong đó:
b = yB – yA a = xB – xA
(xi ,yi): là tọa độ điểm giao (intersaction)
Kết quả của hệ phương trình trên có 2 nghiệm C và D thỏa mãn điều kiện cách điểm giao (intersaction) một khoảng cách dx. Chúng ta sẽ loại bỏ điểm nằm trong thực thể B thực thể đang xét. Bằng cách xét tọa độ nếu right>x>left và bottom<y>top. Điểm nào thỏa điều kiện trên sẽ là điểm nằm trong thực thể chúng ta sẽ lấy điểm cịn lại.
Vậy chúng ta đã tìm được aspectspoint là tham số đầu vào cho hàm draw (aspectspoint) của một đối tượng headtools. Hàm draw được gọi khi lần đầu tiên relationship được tạo với một relationtype mặt định, khi người dùng kéo thả thực thể, thay đổi kích thước thực thể thì relationship được vẽ lại thì hàm draw() cũng được gọi và hàm draw còn được gọi khi người dùng thay đổi kiểu mối quan hệ thông qua giao diện. khi được gọi nó sẽ gọi một trong các hàm con draw1_1 (AspectsPoint aspectspoint), draw1_0 (AspectsPoint aspectspoint), draw1_n (AspectsPoint aspectspoint), draw0_n(aspectspoint), drawdependent1 (AspectsPoint aspect), drawdependent0 (AspectsPoint aspect). 2 hàm con cuối dùng để vẽ trong trường hợp có phụ thuộc hàm. Giờ chúng ta sẽ đi sâu vào từng trường hợp xem cách mà chúng vẽ các ký hiệu kiểu của mối quan hệ.
1. draw1_1 (AspectsPoint aspectspoint):
Để vẽ được đường thẳng ký hiệu vng góc với đường thẳng mối quan hệ như hình vẽ ta dùng thuộc tính linetop. Trong trường hợp này linetop sẽ là một đường thẳng vuông gốc với đường thẳng mối quan hệ và cắt đường thẳng đó tại trung điểm của linetop cũng tức là điểm drawpoint. Nhưng để vẽ được linetop chúng ta cần điểm đầu và điểm cuối. Nếu xác định điểm đầu và điểm cuối linetop một cách trực tiếp thì tương đối phức tạp. Nên chúng tơi chọn giải pháp tiếp tục sử dụng cơng thức tìm điểm cách một đoạn dx thuộc đường thẳng relationship để tìm 2 điểm nằm cách điểm drawpoint 4 đơn vị (công thức này được cài đặt thành một phương thức getPointDx(Point realpoint,Point inpoint,int dx,AspectsEntity