Hướng dẫn người mới bắt đầu Visual Studio LightSwitch

Trong bài viết này, tôi sẽ chỉ cho bạn cách bạn có thể bắt đầu với Visual Studio LightSwitch với một ví dụ.

Trong cửa sổ hộp thoại trên, nhập vào tên của dự án, chọn đúng vị trí cho dự án để tạo ra và nhấn "Ok". Điều này sẽ tạo ra các dự án LightSwitch trống cho bạn của Visual 2010 Studio IDE. Nó sẽ mất một thời gian cho việc tạo ra dự án. Vì vậy, hãy kiên nhẫn.

Tạo một bảng cơ sở dữ liệu

Sau khi dự án đã được tạo ra bởi các IDE, nó sẽ mở ra màn hình sau đây:

Bạn có thể thấy rằng, nó có hai tùy chọn trong giao diện người dùng. Bạn có thể tạo một bảng mới cho các ứng dụng của bạn. Ngoài ra, bạn có thể đính kèm một cơ sở dữ liệu bên ngoài. Nếu bạn mở Solution Explorer, bạn sẽ thấy rằng, dự án là hoàn toàn trống rỗng. Nó chỉ có hai thư mục có tên là "data store" và "screen". ứng dụng data store (Dữ liệu nguồn) lưu trữ dữ liệu của bạn tức là bảng cơ sở dữ liệu. Mặt khác, các "màn hình" cửa hàng giao diện màn hình thư mục được tạo ra bởi bạn. Tôi sẽ mô tả chúng sau này trong hướng dẫn này. Hãy tạo một bảng mới cho các ứng dụng của ban5. Click vào "tạo bảng mới" để tiếp tục. Điều này sẽ đem đến cho các màn hình sau đây trong máy tính của bạn:

Trong trang trên, bạn có thể thiết kế cấu trúc bảng của bạn như bạn làm trong SQL server trong khi tạo ra một bảng mới. Mỗi bảng sẽ có một "Id" gián cho các bảng loại "Int32" và nó là một khóa chính cho bảng. Thêm một số cột bổ sung.

Trong ảnh chụp ở trên, bạn có thể thấy rằng, có nhiều cột loại (các loại dữ liệu) có sẵn trong ứng dụng LightSwitch. Đối với ứng dụng mẫu của chúng ta, chúng ta sẽ tạo ra 4 cột bổ sung được gọi là "FirstName (String)", "LastName (String)", "Age (Int16)" và "Marks (thập phân)". Thay đổi tiêu đề của bảng từ "Table1Item" thành "StudentTable". Tên này sẽ được sử dụng trong khi lưu bảng. Lưu bảng hiện nay. Nếu bạn muốn thay đổi tên của bảng sau này, chỉ cần đổi tên tiêu đề bảng và lưu nó. Điều này sẽ tự động cập nhật tên bảng.

Hãy chắc chắn để đặt tất cả các lĩnh vực như lĩnh vực "Yêu cầu". Điều này sẽ rất hữu ích xác thực dữ liệu. Tôi sẽ chỉ cho bạn sau này.

Tạo một màn hình nhập dữ liệu

Một khi bạn đã hoàn thành cấu trúc các cột của bảng cơ sở dữ liệu của bạn, bạn sẽ cần phải tạo ra một màn hình giao diện người dùng cho ứng dụng của bạn để ghi các mẫu tin. Click vào nút "Screen ..." trên bảng điều khiển như trong ảnh chụp dưới đây:

Nó sẽ mở hộp thoại thêm mới màn hình. Chọn "New Data Screen" từ màn hình mẫu, nhập và screen name và chọn bảng dữ liệu trong combox sổ xuống.

Nhấn ok để tiếp tục, nó sẽ tạo ra 1 giao diện mới cho ứng dụng của bạn để thêm mới 1 record từ người dùng, bây giờ trong solution explorer bạn có thể thấy thư mục “data sources” có 1 database được đặt tên là “applicationData” và nó có 1 table tên là “StudentTables”. Trong thư mục screens bạn có thể tìm thấy màn hình nhập liệu gần đây đặt tên “CreateNewSstudentTable”. Bạn có thể thay đổi thiết kế giao diện người dùng từ bên dưới màn hình:

Wao, ứng dụng của bạn đã sẳn sàng, giờ chúng ta có thể thêm mới 1 record vào bảng csdl từ chương trình mà không cần viết 1 dòng code nào, sao? Bạn không tin àh? Hãy chạy chương trình lên bằng cách nhấn phím F5, nó sẽ build solution của bạn, nó sẽ tốn 1 chút thời gian của bạn, một khi đã build thành công, nó sẽ mở 1 màn hình giống hình sau trên desktop của bạn.

Nó là 1 ứng dụng OOB Silverlight (out-of browser), nếu muốn xác nhận thì nhấp chuột phải vào chương trình và bạn sẽ thấy menu ngữ cảnh (context menu) Silverlight trên màn hình. Ối giời, chúng ta không làm bất cứ gì để thiết kế giao diện như màn hình trên, VS LightSwitch tự động tạo cho chúng ta với nút Save và Refresh. Bạn có thể thấy menu collapsible bên khung bên trái của màn hình, bên phải bạn sẽ thấy khung bảng tính (tabular) chứa các label và textbox, chúng dùng để insert dữ liệu vào csdl từ chương trình, ở trên cùng bên phải góc màn hình bạn sẽ thấy nút Customize Screen, nếu nhấn vào nó 1 cửa sổ con sẽ xuất hiện cho phép chúng ta tùy biến màn hình của chương trình, chúng ta sẽ không thấy nó khi triển khai chương trình, các bài viết tới chúng ta sẽ được làm quen với nó.

Xác nhận của Trường:
Như đã nói bên trên, chương trình đã sẳn sàng, cho nên chúng ta sẽ làm gì với việc kiểm tra lỗi dữ liệu, Đợi đã, bạn không cần phải bận tâm về việc đó, cơ chế nội tại của LightSwitch đã làm việc đó cho bạn, hãy xem demo bên dưới, ở form bên dưới để kiểm tra dữ liệu cho trường Age, thay vì chúng nhập vào số, chúng ta hãy nhập text và nhấp phím tab hoặc đâu đó (mất focus), chương trình sẽ show màn hình lổi như bên dưới:

Bạn sẽ thấy thông điệp lổi hiển thị như màn hình dưới đây:

Bây giờ nhập các giá trị thích hợp cho tất cả các lĩnh vực và nhấn "Save". Điều này sẽ lưu các hồ sơ đúng cách.Hãy nhận dữ liệu thích hợp và nhấn Save, 1 record mới sẽ được lưu.

Một khi bạn đã nhập dữ liệu thích hợp vào các textboxes, tiếp tục nhấn Save để lưu.

Nó sẽ lưu 1 record và thêm 1 trường ID vào UI, giá trị nó sẽ là 1 và được tăng tự động thêm 1 giá trị.

Thêm các records khác và đóng tab hiện tại chọn menu “CreateNewStudentTable” trong khung bên trái.

Bây giờ nhập 1 vài records và nhấn bút save, bạn sẽ thấy trường ID sẽ là 1 và sẽ tự động tăng thêm 1 khi có bất kỳ record nào được thêm mới.

Trong quá trình thêm mới 1 record mà bạn đóng tab hoặc thêm mới record khác, chương trình sẽ xuất hiện 1 màn hình cảnh báo rằng có dữ liệu chưa save trong khi đang thay đổi.

Nếu nhấn save, chương trình sẽ lưu 1 record mới, nhấn Discard sẽ đóng và không lưu, và nhấn cancel để hủy hộp thoại.

Tùy biến màn hình:
Nếu bạn muốn thay đổi màn hình lúc "chạy" (run-time), nhấn vào nút "Customize Screen" trên góc phải màn hình. Chú ý nút này sẽ không hiển thị khi chúng ta deploy chương trình, khi nhấn vào 1 popup tùy biến giao diện màn hinh xuất hiện. Nó cho phép bạn thay đổi bố cục màng hình, thêm hoặc xóa các trường đã tồn tại, ở bài viết khác mình sẽ cover công việc này, giờ thì để mặc định.

Ở đây chúng ta sẽ thay đổi tên hiển thị cho mục menu của new student, chọn node trên cùng của mục screen và trong khung thuộc tính thay đổi "Display Name" từ mặc định sang "New Student", lưu thiết lập lại và restart chương trình, bạn sẽ nhận thấy thay đổi, cụ thể là "New Student" nó có nghĩa hơn mặc định.

Chúng ta vẫn có thể làm tương tự như trong IDE của VS, chọn khung properties như màn hình bên dưới và tìm thuộc tính "Display Name" và thay đổi từ khác có nghĩa hơn.

Bạn cũng có thể thay đổi những thuộc tính khác trong khung thuộc tính này.

Kết luận:
Rất là dể dàng để tạo 1 ứng dụng data-driven (hướng dữ liệu) OOB Silverlight sử dụng VS LightSwitch, không cần phải viết code C# hoặc XAML để tạo. Hy vọng bài này giúp bạn hiểu rỏ cách sử dụng VS LightSwitch để tạo 1 chương trình nhập liệu đơn giản không cần code. Trong 1 vài bài tới chúng ta sẽ thảo luận chi tiết hơn và các màn hình khác, hy vọng bạn thích và đừng ngần ngại hãy bình luận về bài viết của mình.

Translate and Edit by Neon Quach from codeproject

History version:
√ 04/11/2010: Initial article
√ 05/11/2010: Publish draft version
√ 29/07/2011: update spelling