Lập trình ứng dụng quản lý 2

Sử dụng thư viện DotNetBar để xây dựng

giao diện ứng dụng

Ngô Ngọc Đăng Khoa

2011, March 17

1 LTUDQL2 – TUT02

1 Mục tiêu & Yêu cầu

1.1 Mục tiêu

Nắm được cách sử dụng các thư viện hỗ trợ hiện có (miễn phí lẫn có

phí) nhằm xây dựng ứng dụng có giao diện dễ nhìn, thân thiện, tính

năng mạnh mẽ

Hiểu được những rủi ro & khó khăn khi sử dụng các bộ thư viện sẵn có

1.2 Yêu cầu

Đọc kỹ & thực hiện các bước theo tutorial

1.3 Lưu ý

Các hướng dẫn tiếp theo sẽ sử dụng 1 thư viện giao diện CÓ PHÍ trên

mạng, tên gọi DotNetBar, thư viện này được cung cấp cho sinh viên với

mục đích chính là giúp sinh viên tiếp cận 1 bộ thư viện có chất lượng

hiện có.

Sinh viên không được phép sử dụng bộ thư viện được cung cấp cho các

mục đích ngoài học tập.

Tác giả KHÔNG chịu trách nhiệm về các lỗi phát sinh trong quá trình sử

dụng bộ thư viện DotNetBar.

2 LTUDQL2 – TUT02

2 Cài đặt thư viện DotNetBar

2.1 Add các controls của DotNetBar vào Toolbox

(Các thao tác dưới đây chỉ cần thực hiện 1 lần)

Bước 1: tạo 1 project VB.NET Windows Forms Application trong Visual

Studio

Bước 2: click phải vào vùng trống Toolbox chọn Add Tab > đặt tên tab

này là DotNetBar

Bước 3: vào thư mục bin của DotNetBar kéo 3 file .dll

(DevComponents.DotNetBar2.dll, DevComponents.Instrumentation.dll,

DevComponents.TreeGX.dll) vào tab DotNetBar vừa tạo bên Toolbox

3 LTUDQL2 – TUT02

Sau các thao tác trên, các controls của DotNetBar sẽ được add vào toolbox của

Visual Studio

3 Bài tập áp dụng

3.1 Yêu cầu

Sử dụng CSDL được cung cấp, xây dựng ứng dụng Quản lý đội bóng có các

tính năng sau

Hiển thị danh sách các cầu thủ của tất cả các đội bóng

Hỗ trợ lọc danh sách theo đội bóng, loại cầu thủ.

Hỗ trợ hiển thị ngay vài thông tin cơ bản của cầu thủ (tên, hình ảnh,

vị trí thi đấu) khi người dùng chọn cầu thủ đó trên danh sách.

4 LTUDQL2 – TUT02

3.2 Mô tả CSDL

Sinh viên chỉ quan tâm các table & field sau trong CSDL được cung cấp

PLAYER_TYPES (Loại cầu thủ)

Field Kiểu dữ liệu Mô tả

PTypeCode Text Mã loại cầu thủ

PTypeName Text Tên loại cầu thủ

TEAMS (Đội bóng)

Field Kiểu dữ liệu Mô tả

TeamCode Text Mã đội bóng

FullName Text Tên đội bóng

PLAYERS (Cầu thủ)

Field Kiểu dữ liệu Mô tả

PlayerCode Text Mã cầu thủ

PlayerName Text Tên cầu thủ

DateOfBirth Date/Time Ngày sinh

PreferredPosition Text Vị trí ưa thích

Nation Text Quốc tịch

Photo Text Tên tấm ảnh của cầu thủ

TeamCode Text Mã đội bóng

PtypeCode Text Mã loại cầu thủ

PlayerNote Memo Ghi chú

IsDel Yes/No Tình trạng

Sinh viên KHÔNG quan tâm đến các field khác trong 3 table trên & các table

khác có trong CSDL.

5 LTUDQL2 – TUT02

3.3 Hướng dẫn

3.3.1 Thiết kế giao diện

frmMain

Thuộc tính Giá trị

Text League Management - Players

Icon Chọn file icons\App.ico

1. Kéo RibbonControl (trong tab DotNetBar trên Toolbox) vào frmMain

2. Mở Solution Explorer > Show All Files > Mở file frmMain.Designer.vb

3. Thay Inherits System.Windows.Forms.Form thành Inherits

DevComponents.DotNetBar.Office2007RibbonForm nhằm chuyển form

thành giao diện Office 2007 hoàn toàn

6 LTUDQL2 – TUT02

4. Quay về màn hình thiết kế giao diện, set thuộc tính ManagerStyle của

StyleManager1 thành Office2010Silver

5. Xoá RibbonTabItem2

6. Set thuộc tính Text của RibbonTabItem1 thành Home

7 LTUDQL2 – TUT02

7. Click phải RibbonBar1 > Add Button

8. Lần lượt add 4 button vào RibbonBar1 và set thuộc tính các control theo

bảng dưới

Control Thuộc tính Giá trị

RibbonBar1 Text Task

ButtonItem14 Text New Player

(Name) btnNewPlayer

Image Icons\AddPlayer_32.png (Local Resource)

ImagePosition Top

RibbonWordWrap False

ButtonItem15 Text Edit Player

(Name) btnEditPlayer

Image Icons\Edit_32.png (Local Resource)

ImagePosition Top

RibbonWordWrap False

ButtonItem16 Text Delete

(Name) btnDeletePlayer

Image Icons\Delete_32.png (Local Resource)

ImagePosition Top

ImagePaddingHorizontal 20

8 LTUDQL2 – TUT02

ButtonItem17 Text Refresh

(Name) btnRefresh

Image Icons\Refresh_32.png (Local Resource)

ImagePosition Top

ta được giao diện như sau

9. Click Smart Tag trên ribbonBar Home > Create RibbonBar, set thuộc tính

Text cho ribbonBar này thành Others

10. Add 3 buttons vào ribbonBar Others, set thuộc tính như bảng dưới

Control Thuộc tính Giá trị

ButtonItem14 Text Print

(Name) btnPrint

Image Icons\Print_32.png (Local Resource)

ImagePosition Top

ButtonItem15 Text Preview

(Name) btnPreview

Image Icons\Preview_32.png (Local Resource)

ImagePosition Top

9 LTUDQL2 – TUT02

ButtonItem16 Text Exit

(Name) btnExit

Image Icons\Close_32.png (Local Resource)

ImagePosition Top

ImagePaddingHorizontal 20

11. Click Smart Tag của ribbonTab Home > Layout Ribbons

12. Kéo SuperTooltip vào frmMain

13. Set thuộc tính SuperTooltip on SupperTooltip1 của btnEditPlayer như

sau

Tạo userControl thể hiện thông tin cầu thủ

1. Tạo userControl có tên PlayerInfoControl

2. Thiết lập các thuộc tính cho PlayerInfoControl như sau

Thuộc tính Giá trị

Size 400, 80

10 LTUDQL2 – TUT02

3. Kéo các control vào PlayerInfoControl như sau

4. Set thuộc tính cho các control như sau

Control Thuộc tính Giá trị

pbPhoto Size 80, 80

Location 0, 0

lbName Font Tahoma, 8.25pt

lbPos Font Tahoma, 8.25pt

5. Build ứng dụng > quay về frmMain & thiết kế thêm các control sau

11 LTUDQL2 – TUT02

6. Set thuộc tính cho các control như sau

Control Thuộc tính Giá trị

Panel1 Dock Top

Size > Height 80

ucPlayerInfo Dock Left

dgvPlayers AllowUserToAddRows False

AllowUserToDeleteRows False

MultiSelect False

ReadOnly True

cboTeam cboPType

DropDownStyle DropDownList

Anchor Top, Bottom, Right

2 LabelX Anchor Top, Bottom, Right

3.3.2 Coding

Copy folder Players Photo vào bin\Debug

Xây dựng lớp truy xuất CSDL DataProvider

1. Add class DataProvider vào project

2. Xây dựng hàm đọc dữ liệu từ CSDL & trả ra 1 DataTable (do csdl được bảo

vệ với mật khẩu seilla nên chuỗi kết nối phải cung cấp thông tin mật khẩu)

Imports System.Data.OleDb Public Class DataProvider Shared _cnStr As String = "Provider=Microsoft.Jet.OleDb.4.0; Data Source='SoccerDB.mdb'; Jet OLEDB:Database Password='seilla'" Public Shared Function LoadTableFromSql(ByVal sql As String) As DataTable Dim cn As New OleDbConnection(_cnStr) Dim adapter As New OleDbDataAdapter(sql, cn) Dim dt As New DataTable adapter.Fill(dt) Return dt End Function End Class

12 LTUDQL2 – TUT02

Viết code load dữ liệu cho cboTeam, cboPType & dgvPlayers trên frmMain

Private Sub LoadTeams() Dim sql As String = "select TeamCode, FullName from TEAMS" Dim dtTeams As DataTable = DataProvider.LoadTableFromSql(sql) Dim dummyRow As DataRow = dtTeams.NewRow dummyRow(0) = "ALL" dummyRow(1) = "ALL" dtTeams.Rows.InsertAt(dummyRow, 0) cboTeam.DataSource = dtTeams cboTeam.ValueMember = "TeamCode" cboTeam.DisplayMember = "FullName" End Sub Private Sub LoadPTypes() Dim sql As String = "select PTypeCode, PTypeName from PLAYER_TYPES" Dim dtPTypes As DataTable = DataProvider.LoadTableFromSql(sql) Dim dummyRow As DataRow = dtPTypes.NewRow dummyRow(0) = "ALL" dummyRow(1) = "ALL" dtPTypes.Rows.InsertAt(dummyRow, 0) cboPType.DataSource = dtPTypes cboPType.ValueMember = "PTypeCode" cboPType.DisplayMember = "PTypeName" End Sub

''' <summary> ''' Lưu trữ toàn bộ Players ''' </summary> ''' <remarks></remarks> Dim dtPlayers As DataTable Private Sub LoadPlayers() Dim sql As String = "select * from PLAYERS" dtPlayers = DataProvider.LoadTableFromSql(sql) dgvPlayers.DataSource = dtPlayers.DefaultView End Sub

Private Sub frmMain_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load LoadTeams() LoadPTypes() LoadPlayers() End Sub

13 LTUDQL2 – TUT02

Viết hàm filter dữ liệu trên frmMain (Sử dụng DataView & RowFilter)

Private Sub DoFilter() Dim teamCode As String = cboTeam.SelectedValue Dim pTypeCode As String = cboPType.SelectedValue Dim filter As String = String.Empty Dim flag As Boolean = False 'cờ dùng xác định xem filter có AND hay ko If teamCode <> "ALL" Then filter &= String.Format("TeamCode = '{0}'", teamCode) flag = True 'bật cờ => filter sẽ phải có AND nếu flag=TRUE End If If pTypeCode <> "ALL" Then If flag Then filter &= "AND " filter &= String.Format("PTypeCode = '{0}'", pTypeCode) End If Dim view As New DataView(dtPlayers) view.RowFilter = filter dgvPlayers.DataSource = view End Sub

Gọi hàm Filter khi user chọn Team/PlayerType

Dim _load As Boolean = False Private Sub frmMain_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load LoadTeams() LoadPTypes() LoadPlayers() _load = True End Sub Private Sub cboTeam_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cboTeam.SelectedIndexChanged If _load Then DoFilter() End Sub Private Sub cboPType_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cboPType.SelectedIndexChanged If _load Then DoFilter() End Sub

14 LTUDQL2 – TUT02

Bổ sung các thành phần private dùng chứa dữ liệu trên PlayerInfoControl

Private _playerName As String Public Property PlayerName() As String Get Return _playerName End Get Set(ByVal value As String) _playerName = value End Set End Property Private _pos As String Public Property Pos() As String Get Return _pos End Get Set(ByVal value As String) _pos = value End Set End Property Private _photo As String Public Property Photo() As String Get Return _photo End Get Set(ByVal value As String) _photo = value End Set End Property

Bổ sung hàm load ảnh & thể hiện các dữ liệu cầu thủ lên PlayerInfoControl

Shared NoPlayerImg As Image = LoadImage(Application.StartupPath & "\Players Photo\NoPlayerPhoto.png") Public Sub ApplyInfo() lbName.Text = "<b><font size='+5' color='#15428b'>" & _playerName & "</font></b>" lbPos.Text = "<b><font size='+2' color='#15428b'>" & _pos & "</font></b>" pbPhoto.Image = IIf(_photo.Length = 0, NoPlayerImg, LoadImage(Application.StartupPath & "\Players Photo\" & _photo)) End Sub Shared Function LoadImage(ByVal imgPath As String) As Image Dim img As Image = Nothing Try Dim fs As New FileStream(imgPath, FileMode.Open) img = Image.FromStream(fs) fs.Close() fs.Dispose() Catch ex As Exception End Try Return img End Function

15 LTUDQL2 – TUT02

Cập nhật thông tin lên ucPlayerInfo ở frmMain trong sự kiện

dgv_SeclectionChanged

Private Sub dgvPlayers_SelectionChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles dgvPlayers.SelectionChanged If dgvPlayers.SelectedRows.Count = 0 Then Return Dim dgvRow As DataGridViewRow = dgvPlayers.SelectedRows(0) ucPlayerInfo.PlayerName = dgvRow.Cells("PlayerName").Value ucPlayerInfo.Pos = dgvRow.Cells("PreferredPosition").Value ucPlayerInfo.Photo = dgvRow.Cells("Photo").Value ucPlayerInfo.ApplyInfo() End Sub

Lưu ý: để có thể deploy được trên máy khác, các dll của DotNetBar phải được set

thuộc tính CopyLocal = True