hdth04 ltudql02-dotnet bar
TRANSCRIPT
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