Presentation Layer ???

[bienca101]

Có ai đã có, biết đến, hoặc có ý định viết user interface layer có những tính năng như sau:

- Declarative (XML-based, giống MyXAML, Avalon, Flex, ...)
- Object-based data-binding

Quan trọng nhất là:
- Flexible đủ để viết 1 code, dùng được cho WinForm, WebForm, hay platform khác tùy hỉ mà không cần phải viết lại nhiều.
- Cho phép tự động tạo UI document. Lấy ví dụ như thay vì phải tạo form Nhân Viên, Sản Phẩm,... để thực hiện mấy chức năng CRUD thì chỉ cần truyền 1 object Nhân Viên hay Sản Phẩm gì đó và cái layer này phải tự tạo lấy form lúc runtime, tự bind data. (mình làm 1 cái concept demo bé tí, download ở đây: http://www.fileupyours.com/files/2714/UI%20Layer%20Prototype.zip )

Lý do mình cần: lười quá. :) Nghĩ đến cảnh mỗi business object phải viết ít nhất 1 form/module cho việc CRUD thấy mà ngán. Mình hơi bị thiếu nhân lực.

Phương thức trao đổi:
1/ Nếu bạn đã có presentation layer như vậy. Mình mạn phép trao đổi bằng 1 trong 2 layer của riêng mình: Object-based Data Access Layer hoặc Teleport (Distributing Abstract Layer)

2/ Nếu bạn muốn develope layer này chung với mình, source code cả hai sẽ cùng hưởng. (Ghi chú: beginner vui lòng miễn nộp đơn)

3/ Nếu bạn không thuộc hai dạng trên nhưng biết đến những project khác tương tự (không tính MyXAML, VG.NET, XAMLON, XUL- based), bạn vui lòng giới thiệu cho mình với. Mình sẽ tặng bạn 1 bịch xí muội nếu là bạn gái, 1 chai bia nếu là bạn trai :)

[FireLotus]

ý bác là sao??????????

[bienca101]

Mình cần một dynamic GUI framework cho phép tự động tạo user interface, tự bind data, nói túm lại là thay vì viết cả đống form linh tinh thì mình chỉ việc "ê, edit cho ta cái object này" là đủ.

Để mình đưa 1 ví dụ cho rõ hơn. Theo cách lập trình thông thường thì khi cần làm việc với cơ sở dữ liệu, bạn phải : tạo form, bind data, validate, update database. Cứ lặp đi lặp lại thao tác nhàm chán ấy mãi mãi và mãi mãi. Một ví dụ điển hình là ở bài viết này ( http://www.ddth.com/showthread.htm?t=76266 ). Mình xin lỗi tác giả Csharp_TN nhé, mình không chê Csharp_TN viết dở hay gì hết. Mình chỉ dùng ví dụ này để nói là: mình lười quá, không muốn mỗi lúc lại tạo 1 form như thế được.

Thay vì cách làm đó, mình đơn giản chỉ tốn 1 dòng code duy nhất như sau (trích trong cái concept prototype. Link để download ở trong post đầu tiên)



User usr = new User();

//edit user
usr = DUIManager.Edit(usr);


Mình đang viết cái layer này, thấy phê quá nên hỏi thăm xem đã ai có chưa thì cho mình trao đổi, nếu chưa nhưng muốn tham gia làm thì mình hoan nghênh.

Làm một mình thì mình ngại quá. Làm 2, 3 mình thì có lẽ sẽ được đầy đủ hơn. Khi đã có layer này rồi thì lập trình... cực kỳ sướng. :)

[thanh_mai]

^^ Hay quá.

Mình cũng có làm 1 cái gần tương tự nhưng là base trên XML và XSLT (mình là dân Web mà kô có tính đến truyện sinh mã cho Win Form :) )

Mình dùng 1 file xml để định nghĩa form sau đó sử dụng xslt để transform. File xml thì có thẻ sinh ra từ tool hoặc gõ tay.

vd Customer



class customer
{

public String Name;
public int Age;
public String ***;
}


Thực ra nếu sử dụng thêm 1 số Attribute thì phần xml kô cần thiết nữa.



class customer
{
[Desc("Name"), DataType("SingeLine"), MaxLength(200)]
public String Name;

[Desc("Age"), DataType("Numeric"), Max(100), Min (0)]
public int Age;

[Desc("***"), DataType("Choice","DropDownList"), Items ("Male", "Female")]
public String ***;
}


Tiếc là form tự sinh thì hơi cứng nhắc 1 chút : )

Có form rùi khi submit thì dữ liệu được chuyển thành vào obj return lại : )

Mình cũng đang có ý định nâng cấp 1 chút - nếu có thể hợp tác là tuyệt nhất ;)

À nếu bạn có dùng InfoPath kô ? khá là hay đó (về mặt tạo form :) )

[bienca101]

Hì hì, mừng quá.

Vâng, mình cũng đã từng làm kiểu attributes đó rồi. Cái DataGrid trong bộ VUI của mình dùng cách ấy đấy. Nhưng mà thanh_mai cũng biết là phương pháp này đòi hỏi phải decorate quá nhiều cho class của mình => mai mốt muốn sửa đổi phải compile lại. Ngoài ra dùng attribute không thể wire events, khó xử lý collection (chẳng hạn như cần lookup combobox thì sao?)

Mình nhăm nhe xào nấu tổng hợp lại ý tưởng của bạn, MyXAML và Flex đấy. Tất nhiên việc tạo form tự động sẽ cứng nhắc. Nhưng mình đang nghĩ tới một mô hình uyển chuyển hơn nhiều.

Mình đang ở HCM, code hầu như mỗi ngày. Thế thanh_mai ở đâu? Mỗi ngày có thể dành ra để code bao lâu?

InfoPath thì mình chỉ mò mò được vài tiếng đồng hồ hồi nó mới ra. Sau đó thấy bind dữ liệu không theo ý mình muốn và phải thêm một cái server riêng cho nó ( => tiền ) nên mình bỏ không đụng tới nữa. Có lẽ mình phải học thêm nhiều về InfoPath mới thấy vẻ đẹp của nó.

[cuongnq]

UIP v.2 đã ra đời được 2 năm rồi, sao không ai dùng vây? Theo tớ UIP là Best framework cho User Interface Process.
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnbda/html/uip.asp

[thanh_mai]

Mình code hàng ngày : )

Về Attribute thì tùy thui, mình cũng kô làm theo cách đó : )

Dù sao thì vẫn cần các thông tin thêm để Render Form rite ? kô Attribute thì XML thui : ) mình thì vẫn prefer XML hơn.

InfoPath nếu bạn xem file xml định nghĩa form của nó sẽ thấy 1 số ý tưởng khá hay. Ý mính là thế thôi : )

Flex ? chà mình chưa biết là j thế lại phải google rùi ^__^

[roninvn]

Tui cũng đã gặp phải vấn đề này, tuy nhiên cách tiếp cận vấn đề hơi khác so với mọi người, ko dùng XML hay transform.
Cách của tui là dùng 1 bộ gen code (CodeSmith hay MyGeneration đều được) và viết mã. Trong trường hợp của tui mất 1 tuần để finish xong phần Gen ra UI , phần DataAccessLayer thì dùng lại .NET Tiers, có chỉnh sửa thêm chút đỉnh.
Rất tiếc là bộ mã gen này tui dùng vào việc kinh doanh nên ko thể public được, tuy nhiên tui nghĩ các pro ko khó khăn lắm để viết riêng 1 bộ cho mình.

[tranvinhnt]

Còn tui cũng giống bạn roninvn. Nhưng tui dùng MyGeneration cho cả UI và DAL luôn. Tui thấy cách này cũng hay. Chỉ có điều phải viết template hơi cực :). Mong rằng bienca01 sẽ giải quyết được vấn đề này :)

[thanh_mai]

@tranvinhnt, roninvn:
MyGeneration tớ cũng có dùng qua tuy nhiên cách này chỉ dùng được khi các đối tượng của bạn đã xác định rùi.

Trong trường hợp của tớ người sử dụng có thể sinh ra các dữ liệu tự định nghĩa --> cần form nhập dữ liệu cho các dữ liệu này ---> : )

@cuongnq: tớ đang xem cái Block đó - MS có nhìu Block thật :) nhưng hình như nó đâu có giải quyết được vấn đề của tớ :-/ ấy vẫn phải tạo form mà ?

[thanh_mai]

@bienca : Flex của Macromedia phải không nhỉ ? : ) mới search được (^__^ hôm ni bận quá)

[bienca101]

Trước hết là cảm ơn bạn cuongnq và roninvn. Cả hai gợi ý của hai bạn làm mình nảy thêm một số ý tưởng hay (nói cách khác là "cuỗm" được) :) Vì lý do đó, mời hai bạn gửi địa chỉ qua tin nhắn giùm mình. Cả hai sẽ được tặng mỗi người 1 chai bia theo như đã hứa.

Như thanh_mai và tranvinhnt đã nói, cả 2 phương pháp của cuongnq và roninvn tuy hay nhưng vẫn còn rất cực khổ. Cả 2 phương pháp đều là imperative coding. (bạn nào muốn biết thêm về declarative coding mời xem http://www.myxaml.com/ ). Dùng generator thì chả khác gì code tay (bằng máy). Dùng process-oriented thì rất hay nhờ áp dụng MVC nhưng lại tạo ra lắm form hơn.

Như mình đã trình bày, mình lười quá nên mình muốn cái gì đó bụp 1 phát là tự ra form lấy. Sau đây là ý tưởng sơ lược của mình như sau:

Giả sử mình có class này:
http://files.photojerk.com/bienca101/UserClass.JPG

Bây giờ mình muốn có form này tự động:

http://files.photojerk.com/bienca101/UserEdit.JPG hoặc http://files.photojerk.com/bienca101/UserEditVN.JPG
(đương nhiên chuyện data binding cũng tự động nốt)

Nếu theo trường phái declarative hoàn toàn như MyXAML và XAML (Avalon). Mình sẽ cần phải viết 1 interface document rất chi li đến từng controls, bind data làm sao, vv... Phương pháp này ăn đứt imperative ở chỗ có thể port sang winform, webform, hay muốn sửa lúc nào cũng được mà không cần viết lại chương trình hoặc thay đổi logic code.

Tuy nhiên, mình... lười quá (lại lười), dùng form designer trong VS đã lười, hơi đâu viết ti tỉ file XML mà không có designer? Có mà... chết em.

Do đó, trước hết mình sẽ dùng 1 definition document định nghĩa cấu trúc data như sau:

http://files.photojerk.com/bienca101/UserDef.JPG

Các bạn lưu ý là file này định nghĩa data type, validation, và description. (By-product: globalization có thể làm rẹt rẹt, chỉ cần sửa file definition này là xong)

Sau đó, mình cần 1 layout document chỉ tóm tắt cách thức trình bày data thế nào (chôm ý tưởng từ Flex). Như vậy sẽ tránh phải viết quá nhiều xml như MyXAML. Ngoài ra ta có thể dùng custom layout rules để tạo skin, custom layout. (Như CSS á).

http://files.photojerk.com/bienca101/UserLayout.JPG

@thanh_mai:

Ừ, Flex là của Macromedia. Ý của mình là Flex + ColdFusion cho phép viết web page rất đơn giản. Đúng ý của mình đấy (lười mà lị). Do đó sẵn đã làm thì thiết kế theo chiều hướng đơn giản ấy luôn.

[Zero]

^__^ Đụng hàng rùi.

Tớ cũng dùng xml như bienca y xì lun hix, nhưng tớ dùng xslt : ) ý tưởng về Layout hay đó.

Nhưng thế thì mới support được các object cơ bản, kô hiểu ấy sẽ định nghĩa các form or dữ liệu phức tạp như thế nào ? các dữ liệu phục thuộc lẫn nhau ấy ? hay các dữ liệu repeat ?

vd1 cái nhẹ nhàng thế này thui



class Student
{
public string Name;
public int Age;
}

class FemaleStudent : Student
{
//---
//---
}

class MaleStudent : Student
{
//------
//-----
}


class Class
{
public String Name;
public School school;
public StudentCollection students;
}


^_^

Nếu như thế thì sao ? cái này InfoPath giải quyết rất tốt : )

[bienca101]

Vâng, Reflection Zero ạ :)

Mấy cái XML document đó là chi tiết sẽ đưa cho engine. Còn developer lười như mình thì chỉ thích thế này:



MaleStudent student = Presentation.Edit(student);


(đại loại là engine phải tự build càng nhiều càng tốt. Khi cần thiết thì mới cho nó biết thêm)

Còn về chuyện quan hệ giữa data types thì ví dụ của mình cũng đã có đấy:


<Country Description="Nước" DataSource = "CountryList" .... />


Vấn đề này đơn giản chỉ là object-based data binding (khác DataSet-based một tí). Và cũng lại nhờ reflection để thực hiện dynamic binding nốt.

Tuy nhiên, mình lưu ý là mình muốn kết hợp giữa imperative và declarative. Có nghĩa là sẽ không declarative hoàn toàn như InfoPath hay MyXAML. Tại sao? Vì pure-imperative hay pure-declarative sẽ không cho mình đi theo hướng ... lười kể trên.

[Zero]

Ý mình là thế này



Class A1 = Presentation.Edit (A1);


Mình muốn là trong Form Edit hiện ra sẽ cho phép mình nhập các Student : ) cho Class. (Repeat Selection)

Student thì có chọn giữa MaleStudent or FemaleStudent (Option Group) Mỗi lựa chọn sẽ tạo ra vùng nhập liệu khác nhau.
(quên Student đáng nhẽ phải là Abstract : ) )

Tớ muốn hỏi là ấy sẽ giải quyết trường hợp này thế nào ? : )

Vd này chỉ là 1 Form nhỏ : ), trong thực tế có thể có các Form phức tạp hơn rất nhìu rite ?

[bienca101]

Hỏi cắc cớ nhau ghê nhỉ. :)

Nhưng đó chính là lý do tại sao mình kết hợp imperative và declarative thay vì chỉ đi theo 1 trường phái.

Trong trường hợp của Zero đặt ra, mình sẽ wire event cho options như sau (trong declarative definition)


<Female Type="option" select = "SelectFemale"... />
<Male .... />


Sau đó, trong imperative code, sẽ có event handler như sau:


....
object FemaleDocument = Presentation.Build(Female);
CurrentDocument.PlaceHolder = FemaleDocument;


Na ná như phương pháp Ajax thay thế innerHTML ấy mà.

Hoặc cũng có thể sử dụng phương pháp này, khỏi cần imperative code:


<Female Type="option" Document = "FemaleDoc" Target ="PlaceHolder" ... />
<Male .... />


Nhưng mà như vầy: Có khả năng làm được!!! Nhưng sao chỉ thấy bà con hỏi thôi chứ chả ai giơ tay lên tham gia hết vậy?

Mình đã biết ngay từ đầu để design cho hoàn chỉnh cái layer này không thể 1 người kham nổi. (trừ phi bỏ ra 2, 3 năm ngồi rị mọ)

Về chuyện form cực kỳ phức tạp thì:
1/ Form càng phức tạp, chi phí develop cao, maintenance cao, user cũng khó sử dụng

2/ Form đơn giản, đẹp, gần với form giấy làm việc hằng ngày thì dễ sử dụng hơn (VD: web forms, Info Path form)

3/ Giả sử bắt buộc phải phức tạp thì có thể chia nhỏ form thành từng phần nhỏ đơn giản. Áp dụng thiết kế kiểu module.

Do đó, mình nghĩ form flexible vừa vừa thôi, chứ phức tạp quá (như Maya chẳng hạn) thì đến dùng designer có sẵn như trong VS mà còn chua, huống hồ gì là markup.

[thanh_mai]

Ơ có tớ tham gia mừ ;)

Form phức tạp ? thế nào là phức tạp nhỉ ? nếu bạn dùng Lotus Note thì form có vài trăm field là chuyện bt : )

Có nhìu vấn đề cấn giải quyết đấy, nếu làm thì sẽ tổ chức làm thế nào nhỉ ?

[roninvn]

Mình xin nói rõ hơn 1 chút về cách làm dựa trên tool gen code (mình chủ yếu dùng CodeSmith, ko đi sâu vào MyGeneration - mặc dù vậy mình nghĩ 2 tool này ko khác nhau nhiều lắm ).
1. Bộ GUI gen của mình ko hoàn toàn theo kiểu "thủ công", gen form nào xài form đó. Trước hết mình design 1 Master Form (dành cho win form) và 1 Master Page (dành cho Web). Các form con được sinh ra đều kế thừa từ form master;
2. Để phục vụ cho việc tạo dynamic layout mình viết 1 class FormLayoutManager để manage phần hiển thị.
3.Bản thân các field nhập liệu cũng được tổ chức lại thành các user control. VD như trong trường hợp bạn bienca101 đưa ra thì mình sẽ gen ra 1 User Control là UserInputControl. Phục vụ cho việc quản lý layout các usercontrol này là class ControlLayoutManager.
4.Thông tin về layout của form & control được lưu trong resource (hehe, thực ra cái này cũng chỉ là xml-based).
5.Về databinding thì .NET đã support rất tốt cho việc binding data từ control vào properties của class object.
6.@thanh_mai : Nếu dùng gen code thì mình cũng có thể gen được cho 1 class bất kỳ thông qua Reflection :) . Mình sử dụng CodeSmith nên có thể load & sử dụng tất cả .NET dll và/hoặc XML. Thực tế là mình đã viết 1 proxy để gen code từ các nguồn khác nhau CSV, SQL, Oracle, XML. Mình nghĩ gencode từ 1 data class trong dll cũng ko phải quá khó.

Hy vọng 1 vài điều trên sẽ giúp ích được cho các bạn. Mình cũng dự định research trên XAML & Flex, biết đâu việc combine 2 hướng trên sẽ cho kết quả tốt hơn.

@bienca101 : Thank you về chai bia. Hy vọng sẽ trao đổi với bạn nhiều hơn. Khi nào đủ...1 két mình sẽ lấy 1 thể ;)