Tài liệu hướng dẫn sử dụng devexpress

Khóa học “Xây dựng hệ thống quản lý điểm sinh viên với SQL Server và DevExpress” sẽ giúp bạn nắm được các kỹ năng và công nghệ để phát triển một hệ thống quản lý điểm sinh viên phân tán và hiệu quả. Trong khóa học này, bạn sẽ học cách phân tán Database với SQL Server thành 4 server, tạo các login và phân quyền truy cập vào hệ thống.

Bạn cũng sẽ được hướng dẫn viết Store producer trong SQL Server để tăng hiệu suất của hệ thống. Đồng thời, khóa học cũng sẽ giới thiệu cho bạn framework DevExpress để xây dựng UI cho ứng dụng của mình.

Trong quá trình học, bạn sẽ được làm quen với ngôn ngữ lập trình C# và Visual Studio, các công cụ phổ biến trong việc phát triển ứng dụng Windows. Bên cạnh đó, bạn sẽ hiểu về nghiệp vụ Quản Lý Điểm Sinh Viên Hệ Tín Chỉ và học cách xây dựng báo cáo in ấn ra file PDF với XtraReport.

Bạn sẽ được học về:

• Phân tán Database với SQL Server thành 4 server
• Phân quyền, tạo login trong SQL Server
• Viết Store producer trong SQL Server
• Sử dụng framework DevExpress trong xây dựng UI
• Làm quen với ngôn ngữ C#
• Làm quen với Visual Studio
• Hiểu về nghiệp vụ Quản Lý Điểm Sinh Viên Hệ Tín Chỉ
• Xây dựng báo cáo in ấn ra file PDF với XtraReport

Yêu cầu khóa học:

• Bạn cần biết về ngôn ngữ C#, OOP, Visual studio, Database SQL Server

Với khóa học này, bạn sẽ có cơ hội trang bị cho mình các kỹ năng và kiến thức cần thiết để xây dựng một hệ thống quản lý điểm sinh viên phân tán, chuyên nghiệp và hiệu quả.

Nội dung khóa Cơ Sở Dữ Liệu Phân tán MSSQL, C#, DevExpress

Mọi vấn đề liên quan tới bản quyền, xin vui lòng liên hệ qua email [email protected] để được hỗ trợ nhanh chóng, kịp thời. Xin cảm ơn!

DevExpress cho winform là một thư viện chứa các điều khiển (control) thay thế cho các điều khiển nguyên bản của Windows Forms. DevExpress được sử dụng rất phổ biến để tạo ra các giao diện chuyên nghiệp, hiệu suất cao và nhiều tính năng một cách nhanh chóng.

Tại sao lại nhắc tới thư viện DevExpress?

Trong phần 2 – thiết kế giao diện winform – bạn đã dùng các điều khiển gốc của winform để thiết kế giao diện. Hẳn bạn đã nhận thấy, loại giao diện này nhìn rất “cổ lỗ”, thậm chí là xấu. Ngoài cổ và xấu ra, các điều khiển này khá chậm. Bạn sẽ dễ dàng để ý thấy điều này nếu tăng số lượng bản ghi trong DataGridview. Không ai thích một chương trình với giao diện như vậy cả.

Các công ty phần mềm đều phải sử dụng các bộ thư viện từ bên thứ ba để thay thế cho bộ điều khiển nguyên bản của winform. DevExpress là bộ thư viện phổ biến nhất.

Do đó, trong bài này, chúng ta sẽ xem xét cách sử dụng bộ thư viện DevExpress cho winform (vì DevExpress còn có thư viện cho nhiều loại công nghệ khác nữa) để thiết kế một giao diện mới đẹp và chuyên nghiệp hơn.

Loạt bài “Các giải pháp dành cho lập trình winform”: Phần 1 – Lỗi thường gặp trong lập trình winforms Phần 2 – Thiết kế giao diện với Data Sources và BindingSource Phần 3 – Phân chia code thành module sử dụng Interface Phần 4 – Sử dụng thư viện DevExpress cho winforms Phần 5 – Sử dụng Data Binding Phần 6 – Sử dụng Entity Framework

DevExpress là một hãng chuyên cung cấp các giải pháp cho phát triển ứng dụng, trong đó có ứng dụng trên .NET. Các giải pháp của DevExpress rất đa dạng, bao gồm các thư viện điều khiển cho winform, WPF, ASP.NET MVC, Xamarin, các framework để phát triển ứng dụng nhanh, v.v..

Trong bài viết này, chúng ta sẽ sử dụng bộ thư viện DevExpress dành cho winform.

Có vài lý do nên (phải) sử dụng thư viện điều khiển của hãng thứ ba khi phát triển ứng dụng chuyên nghiệp.

Thứ nhất, các điều khiển gốc của windows form nhìn khá xấu, ít tính năng, hiệu suất thấp. Thứ hai, khả năng data binding của các điều khiển gốc khá hạn chế. Thứ ba, windows forms không có một số loại điều khiển thường dùng (như thanh ribbon).

Bộ thư viện điều khiển cho windows forms của DevExpress giúp giải quyết được hết các vấn đề trên.

Bộ thư viện này được các công ty ở Việt Nam sử dụng rất rộng rãi.

Việc học sử dụng các điều khiển này cũng rất đơn giản nếu đã biết sử dụng các điều khiển cơ bản.

Để sử dụng bộ thư viện này phải trả phí (và không hề rẻ). Tuy nhiên bạn có thể sử dụng bản dùng thử trong 30 ngày. Có thể tải bản dùng thử mới nhất của DevExpress từ website của nhà cung cấp.

Sau khi tải về bạn cài đặt như bất kỳ ứng dụng bình thường nào. Cài đặt xong, mở project từ bài trước (xem phần 3 – phân chia code thành module) ra để xem các điều khiển mới đã xuất hiện trên Toolbox chưa.

Điều khiển DevExpress trên toolbox

Ribbon Form

Ribbon Form là một loại form hoàn toàn mới do DevExpress thêm vào. Loại form này sử dụng thanh Ribbon thay cho menu truyền thống. Loại form này cho giao diện hiện đại giống của Office hay windows explorer của windows 10.

Trước hết thêm Ribbon Form vào project App như hình dưới đây

Thêm Ribbon Form vào project App

Đặt tên cho form mới là DxContacts. Chúng ta thu được một Ribbon Form như dưới đây.

Giao diện thiết kế Ribbon Form

Bạn hãy tự mình tìm hiểu cách thiết kế giao diện với Ribbon Form. Có rất nhiều tài liệu hướng dẫn chi tiết trên Internet. Việc thiết kế này cũng rất đơn giản và trực quan. Sau khi tìm hiểu xong hãy tự thiết kế để thu được giao diện như sau:

Thiết kế cho Ribbon Form Contacts

Lưu ý rằng các hình biểu tượng trên nút bấm đều do DevExpress cung cấp sẵn. Có thể lấy hình ra sử dụng thông qua cửa sổ Image Picker.

Sử dụng Image Picker để lấy biểu tượng DevExpress cung cấp sẵn

Sử dụng GridView và Data Source

DevExpress cung cấp một công cụ hiển thị danh sách rất mạnh gọi là GridView. Điều khiển này có thể sử dụng thay thế cho DataGridView của windows forms.

Trước hết chuyển đổi điều khiển hiển thị danh sách mặc định của Data Source Contact sang GridView như sau:

Chuyển đổi điều khiển hiển thị danh sách mặc định của Data Source Contact sang GridView

Kéo Contact từ Data Sources sang form vừa tạo và điều chỉnh thuộc tính Dock của GridView thành Fill. Chúng ta sẽ thu được giao diện như dưới đây:

Click vào nút Retrieve Details để GridView đọc cấu trúc của Contact và giúp tự động tạo ra các cột dữ liệu cần thiết. Sau đó click vào nút Run Designer để mở giao diện điều chỉnh thông số cho các cột dữ liệu. Hãy điều chỉnh để đạt được như sau:

Sử dụng Grid Designer để chọn và điều chỉnh các cột dữ liệu

Ngoài hiển thị dữ liệu theo dạng bảng, GridView còn có thể hiển thị dữ liệu theo nhiều dạng khác như CardView, BandedGridView, TileView. Bạn có thể tự tìm hiểu thêm về điều khiển này.

Đến đây chúng ta đã hoàn thành thiết kế form mới. Giờ là lúc viết vài dòng code.

Điều chỉnh code

Viết code cho DxContacts form (code behind)

namespace App {

using Interfaces;
using Unity;
public partial class DxContacts : DevExpress.XtraBars.Ribbon.RibbonForm
{
    private IContactsViewModel _vm = Config.Container.Resolve();
    public DxContacts()
    {
        InitializeComponent();
        _vm.ContactBindingSource = contactBindingSource;
        _vm.Initialize();
        Load += delegate { _vm.Load(); };
        DataBindings.Add("Text", _vm, "Title");
        LoadButton.ItemClick += delegate { _vm.Load(); };
        SaveButton.ItemClick += delegate { _vm.Save(); };
        NewContactButton.ItemClick += delegate { _vm.New(); };
        DeleteContactButton.ItemClick += delegate { _vm.Delete(); };
        DetailContactButton.ItemClick += delegate { _vm.ShowDetail(Config.Container.Resolve()); };
    }
}

}

Điều chỉnh code của Program.cs

using System; using System.Windows.Forms; using Unity; using ViewModels; using Interfaces; namespace App {

static class Config
{
    public static UnityContainer Container { get; private set; }  = new UnityContainer();
    public static void Register()
    {
        Container.RegisterType();
        Container.RegisterType();
    }
}
static class Program
{
    /// 

    /// The main entry point for the application.
    /// 
    [STAThread]
    static void Main()
    {
        Config.Register();
        Application.EnableVisualStyles();
        Application.SetCompatibleTextRenderingDefault(false);
        Application.Run(new DxContacts());
    }
}

}

Dịch và chạy thử chương trình.

Chương trình với giao diện ribbon hiện đại và chuyên nghiệp

Đến đây xin chúc mừng bạn đã thành công chuyển đổi sang một giao diện mới chuyên nghiệp hơn rất nhiều. Việc chuyển đổi này rất đơn giản đúng không ạ.

Khi chuyển đổi sang giao diện mới, chúng ta chỉ gán lại phương thức xử lý cho các điểu khiển. Chúng ta cũng thấy việc thiết kế form mới hoàn toàn không liên quan gì đến view model đã có, cũng không đụng chạm gì đến form cũ. Tất cả những gì cần làm chỉ là thay tên form cần tạo trong lớp Config và Program.

Bạn hãy vận dụng kỹ thuật ở trên để tiếp tục thay đổi thiết kế cho giao diện detail.

Kết phần

Trong phần này của chuỗi bài viết chúng ta đã cùng sử dụng bộ thư viện điều khiển của DevExpress để tạo ra giao diện hiện đại và chuyên nghiệp hơn.

Với các kỹ thuật tách các thành phần đã làm ở bài trước, việc thay thế thiết kế giao diện mới trở nên rất dễ dàng.