Lập trình UD Desktop_08_ToolTip StatusBar

Bài trước: Lập trình UD Desktop_07_ListView (tt) TreeView (tt) Menu
-----

2.17       ToolTip & StatusBar


ToolTip

Tham khảo clip về ToolTip:


Tooltip còn có tên gọi khác là infotip hoặc hint là một thành phần của giao diện người dùng. Tooltip thường được dùng kết hợp với con trỏ chuột, khi người dùng rê con trỏ chuột lên một đối tượng, sẽ có một dòng chữ xuất hiện, để giải thích chức năng hoặc thông tin thêm về đối tượng đó.

Trong chế độ thiết kế của winform, để thiết lập tooltip cho một đối tượng (ví dụ: Button), chỉ việc kéo công cụ ToolTip và thả vào đối tượng. Sau đó, chọn đối tượng và thiết lập nội dung hiển thị cho tooltip trong thuộc tính ToolTip on ToolTip.

Có thể bấm vào ToolTip để thiết lập thêm các thuộc tính khác.

Để tạo ToolTip bằng viết mã, làm như sau:

// khai báo một tooltip
            ToolTip tooltip = new ToolTip();
            // gán tooltip vào một đối tượng, cùng với nội dung hiển thị
            tooltip.SetToolTip(button1, "Nội dung hiển thị của tooltip");

Để tạo ToolTip cho một item của ListView, có thể tham khảo cách sau:

Trong hàm khởi tạo của Form(), khai báo như sau:

public Form1()
        {
            InitializeComponent();
            …
            this.lvExplorer.ShowItemToolTips = true;
        }

Tạo nội dung ToolTip cho mỗi item, ví dụ,

ListViewItem item = null;
// tạo thông tin cho ToolTip của thư mục
item.ToolTipText = "Date created: " + dir.CreationTime.ToShortDateString() + "  " + dir.CreationTime.ToShortTimeString();

// tạo thông tin cho ToolTip của tập tin
item.ToolTipText = "Date modified: " + file.LastWriteTime.ToShortDateString() + "  " + file.LastWriteTime.ToShortTimeString();


StatusBar

Tham khảo clip về StatusBar:


Trong chế độ thiết kế, để chèn StatusBar, sử dụng control StatusStrip.

Ví dụ, để thêm nội dung cho StatusBar, sử dụng đoạn mã sau:

var item = new ToolStripLabel() { Text = "Test" };

Lab 14. ToolTip & StatusBar

Tạo tooltip cho mỗi mục (tập tin, hoặc thư mục) trong listview (cửa sổ bên phải), khi người dùng rê chuột vào mỗi mục, sẽ hiển thị tooltip. Xem cách tooltip được hiển thị trong File Explorer để biết cách hiển thị tooltip và các thông tin được hiển thị.

– Nếu là thư mục thì hiển thị:

Date created:

Size:

Files:

Folders:

– Nếu là tập tin thì hiển thị:

Type:

Authors:

Size:

Date Modified:

Tạo StatusBar cho chương trình giả lập File Explorer, khi người dùng mở một thư mục thì hiện thị số tập tin và thư mục con của nó trên StatusBar.

[Gợi ý một cách làm]

– Thiết lập chế độ hiển thị ToolTip cho một item của ListView. Sau đó việc hiển thị sẽ do ListView tự động thực hiện. Lập trình viên chỉ việc khai báo thông tin muốn hiển thị trong ToolTip

– Tạo thông tin cho ToolTip của thư mục

  + Date created:
dir.CreationTime.ToShortDateString() + "  " + dir.CreationTime.ToShortTimeString();

  + Size: duyệt thư mục và tập tin rồi tính tổng dung lượng

  + Files: liệt kê tên các tập tin

  // lấy danh sách các tập tin
                try
                {
                    foreach (FileInfo file in dir.GetFiles())
                    {
                        listFilesForToolTip += file.Name + ", ";
                    }
                    listFilesForToolTip = listFilesForToolTip.Remove(listFilesForToolTip.Length - 2);
                }

                catch { }

  + Folders: liệt kê tên các thư mục

// lấy danh sách các thư mục
try
                {
                    foreach (DirectoryInfo subDir in dir.GetDirectories())
                    {
                        listFoldersForToolTip += subDir.Name + ", ";
                    }
                    listFoldersForToolTip = listFoldersForToolTip.Remove(listFoldersForToolTip.Length - 2);
                }

                catch { }

– Tạo thông tin cho ToolTip của tập tin

  + Type: dựa vào phần mở rộng của tập tin để xác định kiểu của tập tin (xem File Explorer của Windows để biết thêm). Thấy có một số bạn đổi từ extension sang MIME, tuy nhiên cái này chưa đúng, cần đọc kỹ về MIME (Multipurpose Internet Mail Extensions) để hiểu rõ hơn. (https://en.wikipedia.org/wiki/MIME)

Vì chưa biết Windows họ làm như thế nào, nên tạm thời các bạn làm thủ công cho một vài trường hợp cũng được.

[Một ví dụ mã minh họa]

// khai báo kiểu dữ liệu Dictionary
        private static Dictionary<string, string> _mappings = new Dictionary<string, string>
        {
            { ".doc", "Microsoft Word 97 - 2003 Document" },
            { ".docx", "Microsoft Word Document" },
            { ".xls", "Microsoft Excel 97 - 2003 Worksheet"  },
            { ".xlsx", "Microsoft Excel Worksheet" },
            { ".css", "CSS File" },
            { ".jpg", "Jpeg File" }
        };

        // hàm lấy Type của tập tin
        public static string GetType(string extension)
        {
            string type;
            return _mappings.TryGetValue(extension, out type) ? type : "Unknown";  
        }

  + Authors: người tạo ra tập tin

  + Date modified:
file.LastWriteTime.ToShortDateString() + "  " + file.LastWriteTime.ToShortTimeString();

  + Size

file.Length; // đơn vị tính là B, đổi ra GB, MB, KB, và B tùy thuộc vào độ lớn của giá trị, ví dụ: 1024B thì đổi thành 1KB


// hàm đổi từ bytes sang KB, MB, GB,...

        static readonly string[] SizeSuffixes = { "bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB" };

        static string SizeSuffix (Int64 value, int decimalPlaces = 1)
        {
            // nếu giá trị âm, đổi giá trị thành dương rồi gọi lại hàm SizeSuffixes
            if (value < 0) { return "-" + SizeSuffix(-value);  }

            int i = 0; // để lấy chỉ số của đơn vị bytes, KB, MB...
            decimal dValue = (decimal)value;
            while(Math.Round(dValue, decimalPlaces) >= 1000)
            {
                dValue /= 1024;
                i++;
            }
            return string.Format("{0:n" + decimalPlaces + "}{1}", dValue, SizeSuffixes[i]);
            // {0:nx}: với x là số thập phân cần xuất

        }

– Để đếm số thư mục, sử dụng hàm:

nodeDirInfo.GetDirectories().Length

– Để đếm số tập tin, sử dụng hàm:

nodeDirInfo.GetFiles().Length


[Giao diện kết quả tham khảo]


</////hết buổi 10
-----
Tiếp theo: Lập trình UD Desktop_09_ContextMenu NotifyIcon
Xem thêm: Danh sách các bài học

Lập trình UD Desktop_07_ListView (tt) TreeView (tt) Menu

Bài trước: Lập trình UD Desktop_06_ListView (tt) TreeView
-----

Viết xử lý khi người dùng bấm chuột vào một thư mục bên TreeView, chương trình sẽ hiển thị thư mục và tập tin có trong thư mục đó ra cửa sổ bên phải.


Để bắt sự kiện người dùng bấm chuột vào một mục của TreeView sử dụng sự kiện TreeNodeMouseClickEventArgs

Để xóa sạch ListView, dùng hàm: ListView.Items.Clear();

Đọc thêm về item.SubItems.AddRange(subItems); tại đây: https://msdn.microsoft.com/en-us/library/1c1wawcw(v=vs.110).aspx

Đọc thêm về điều chỉnh kích thước cột của ListView (lvExplorer.AutoResizeColumns(ColumnHeaderAutoResizeStyle.HeaderSize);) tại đây:

Gắn sự kiện bấm chuột vào TreeView (viết trong hàm khởi tạo của Form):

this.treeView1.NodeMouseClick +=
            new TreeNodeMouseClickEventHandler(this.treeView1_NodeMouseClick);

[Tham khảo mã nguồn]

public Form1()
        {
            InitializeComponent();
            XuatTreeView();
            this.tvExplorer.NodeMouseClick += new TreeNodeMouseClickEventHandler(this.tvExplorer_NodeMouseClick);
        }


// hàm xử lý khi người dùng chọn một thư mục ở khung bên trái,
        // xuất thư mục con và tập tin sang khung bên phải
        void tvExplorer_NodeMouseClick(object sender, TreeNodeMouseClickEventArgs e)
        {
            // lấy nút được chọn
            TreeNode newSelected = e.Node;
            // xóa sạch lvExplorer
            lvExplorer.Items.Clear();
            // lấy thông tin của nút được chọn, dựa vào thông tin được gắn trước đó - khi tạo nút
            DirectoryInfo nodeDirInfo = (DirectoryInfo)newSelected.Tag;
            // khai báo mảng subItems
            ListViewItem.ListViewSubItem[] subItems;
            // khai báo biến item
            ListViewItem item = null;
            // duyệt để hiển thị các thư mục bên trong
            foreach (DirectoryInfo dir in nodeDirInfo.GetDirectories())//với mỗi thư mục con
            {
                // tạo một item gồm tên thư mục và icon đi kèm
                item = new ListViewItem(dir.Name, 0);
                // lấy thêm thông tin về Type và Last Modified của thư mục
                subItems = new ListViewItem.ListViewSubItem[]
                    { new ListViewItem.ListViewSubItem (item, "Directory"),
                      new ListViewItem.ListViewSubItem(item, dir.LastAccessTime.ToShortDateString())};
                // đưa thông tin về Type và Last Modified vào item
                item.SubItems.AddRange(subItems);
                // gắn item vào ListView
                lvExplorer.Items.Add(item);
            }
            // duyệt để hiển thị các tập tin bên trong
            foreach (FileInfo file in nodeDirInfo.GetFiles())
            {
                // tạo một item gồm tên tập tin và icon đi kèm
                item = new ListViewItem(file.Name, 1);
                // lấy thêm thông tin về Type và Last Modified của tập tin
                subItems = new ListViewItem.ListViewSubItem[]
                    { new ListViewItem.ListViewSubItem (item, "File"),
                      new ListViewItem.ListViewSubItem (item, file.LastAccessTime.ToShortDateString()) };
                item.SubItems.AddRange(subItems);
                lvExplorer.Items.Add(item);
            }
            // điều chỉnh lại kích thước cột
            lvExplorer.AutoResizeColumns(ColumnHeaderAutoResizeStyle.HeaderSize);
        }
[Giao diện kết quả]



2.16       MenuStrip


Xem clip tham khảo:


MenuStrip được sử dụng để tạo menu. Trong menu có thể có các mục, menu con, combobox, textbox, separator.

Có thể xem mỗi thành phần trong một MenuStrip là một control, do vậy có thể bắt sự kiện và thực hiện các xử lý tương ứng.

Có thể thiết lập phím tắt cho một mục trong menu, thiết lập trong thuộc tính ShortcutKeys.

Để chèn hình ảnh cho mỗi mục trong menu, thiết lập trong thuộc tính image.

Để thay đổi vị trí của thanh menu trên form, thiết lập trong thuộc tính Dock. Nhớ phải chọn menu trước thì mới thấy thuộc tính Dock, bấm vào biểu tượng của menuStrip ở cửa sổ phụ phía dưới.

Lab 13. Thêm menu View cho chương trình FileExplorer

[Yêu cầu]

– Quan sát cách hoạt động thực tế của menu View trong File Explorer để có ý tưởng về các việc cần làm

– Thêm các chức năng của menu View vào chương trình FileExplorer (Lab 12)

– Khi người dùng rê chuột lên một chế độ xem bất kỳ (LargeIcon, SmallIcon, Details, Tile, List), cửa sổ bên phải sẽ thay đổi theo chế độ xem tương ứng. Tuy nhiên, chỉ thực sự chuyển chế độ xem khi người dùng bấm chuột vào một mục.

[Gợi ý cách làm]

– Thiết lập menu như hình sau



– Tạo thêm imageList2 để chứa các Icon của thư mục và tập tin với kích thước lớn hơn. Thuộc tính Images chứa Icon của Thư mục và Tập tin như trong smallImageList, chỉ thay đổi thuộc tính ImageSize là 40x40

– Trỏ thuộc tính LargeImageList của lvExplorer tới imageList2

– Khi người dùng rê chuột lên mỗi mục của menu View, viết xử lý cho sự kiện MouseHover: (tạm) chuyển chế độ xem của lvExplorer sang chế độ tương ứng

Ví dụ hàm xử lý cho sự kiện rê chuột,

        private void listToolStripMenuItem_MouseHover(object sender, EventArgs e)
        {
            lvExplorer.View = View.List;
        }

– Khi người dùng rê chuột ra ngoài vùng các mục con (DropDown) của menu View:  chuyển chế độ xem của lvExplorer về chế độ xem trước đó. Ví dụ, khi mới chạy chương trình mà người dùng chưa chọn chế độ xem mới thì “chế độ xem trước đó” sẽ là Details

// tạo sự kiện để xử lý khi người dùng rê chuột ra ngoài vùng các mục chọn của View
public Form1()
        {
bool flagClick = false; // kiểm tra xem item trong View có được click không. false: không; true: có
            string lastViewType = "Details"; // kiểu View trước đó, khởi tạo là Details
            string currentViewType = "Details"; // kiểu View hiện thời, khởi tạo luôn là Details
           
InitializeComponent();
            XuatTreeView();
            this.tvExplorer.NodeMouseClick += new TreeNodeMouseClickEventHandler(this.tvExplorer_NodeMouseClick);
            viewToolStripMenuItem.DropDown.MouseLeave += new EventHandler(DropDown_MouseLeave);
        }
// Viết hàm xử lý DropDown_MouseLeave
void DropDown_MouseLeave(object sender, EventArgs e)
        {
            // kiểm tra xem trước đó có click chuột vào item không
            if (flagClick == true) {
                flagClick = false;// reset lại cờ báo
                lastViewType = currentViewType;
            }
            switch (lastViewType)
            {
                 case "Details":
                      lvExplorer.View = View.Details;
                      break;
                 case "LargeIcon":
                      lvExplorer.View = View.LargeIcon;
                      break;
                 case "SmallIcon":
                      lvExplorer.View = View.SmallIcon;
                      break;
                 case "Tile":
                      lvExplorer.View = View.Tile;
                      break;
                 case "List":
                      lvExplorer.View = View.List;
                      break;
                }
        }

– Chỉ khi nào người dùng bấm chuột chọn một mục của menu thì mới chuyển lvExplorer sang chế độ xem tương ứng, đồng thời đóng lại các mục con của menu View

Ví dụ hàm xử lý cho sự kiện bấm chuột vào một mục của menu View,

private void tileToolStripMenuItem_Click(object sender, EventArgs e)
        {
            flagClick = true;
            currentViewType = "Tile";
        }

[Giao diện kết quả]




<///// hết buổi 9
-----
Tiếp theo: Lập trình UD Desktop_08_ToolTip StatusBar
Xem thêm: Danh sách các bài học

Làm web (06) - Sử dụng phông chữ

Tiếp theo của: Làm web (05) - Wordpress_cài đặt_Starter theme (01)
-----

17          Sử dụng phông chữ


Phông chữ (font) là gì?

Phông chữ là một tập hợp hoàn chỉnh của các ký tự (character) bao gồm: chữ cái (letter), số, dấu câu và kí tự đặc biệt khác (glyph)…theo cùng một kiểu hình dáng (họa hình), định dạng (regular, bold hoặc italic) và kích cỡ (size)[1].

Vậy khi nói đến phông chữ thường gồm các thông tin sau: kiểu chữ (typeface), định dạng (normal, bold, italic) và kích cỡ. Ví dụ: Times New Roman, normal, 12pt là một phông chữ; hoặc Times New Roman, bold, 14pt là một phông chữ khác.

Kiểu chữ (typeface) là tập hợp các kí tự có kiểu dáng đồng nhất. Ví dụ Times New Roman ở ví dụ trên chính là một kiểu chữ. Ví dụ một số kiểu chữ khác: Arial, Tahoma, VNI-Times, Ubuntu, Roboto…v.v.

Như vậy một phông chữ chính là kiểu chữ với kiểu dáng và kích thước khác nhau. Ở thời kì đầu của kĩ thuật in ấn, khi nhân viên in ấn phải sắp các khối chữ kim loại sao cho đồng nhất về kích thước và cùng một kiểu thì việc phân biệt các loại phông chữ là quan trọng. Tuy nhiên, hiện nay, các phông chữ trên máy tính được định dạng theo kiểu vector, do đó, có thể dễ dàng thay đổi kiểu dáng, kích thước để chuyển thành phông khác. Do vậy, sự phân biệt giữa kiểu chữ và phông chữ là không thực sự cần thiết. Kết quả là hai khái niệm kiểu chữ và phông chữ có thể sử dụng thay thế cho nhau.

Trình duyệt lấy phông chữ ở đâu để hiển thị nội dung văn bản của trang web?

Tùy theo khai báo của người làm web, trình duyệt có thể lấy phông chữ trên máy tính người dùng hoặc tải về từ web server hoặc từ bên ngoài mạng.

– Nếu lấy phông chữ trên máy tính người dùng, nghĩa là sử dụng system font

– Nếu lấy phông chữ từ web server hoặc từ bên ngoài mạng, nghĩa là sử dụng web font

System font là gì?

System font là các phông chữ được cài đặt sẵn trong các thiết bị người dùng (máy tính, ipad, điện thoại). Cụ thể hơn, trên mỗi thiết bị, phần mềm quản lý phông chính là Hệ điều hành. Vậy system font là các phông chữ đi kèm với mỗi Hệ điều hành.

Sử dụng system font có ưu điểm là an toàn, không mất thời gian tải từ mạng về máy, ngoài ra người dùng sẽ cảm thấy rất dễ chịu vì phông chữ trên trang web và phông chữ trên máy tính họ đang sử dụng là giống nhau, quen thuộc[2].

Bảng sau đây là một số system font ứng với các hệ điều hành,

Hệ điều hành
Phiên bản
System font
Mac OS X
El Capitan
San Francisco
Mac OS X
Yosemite
Helvetica Neue
Mac OS X
Mavericks
Lucida Grande
Windows
Vista
Segoe UI
Windows
XP
Tahoma
Windows
3.1 > ME
Microsoft Sans Serif
Android
Ice Cream Sandwich (4.0)+
Roboto
Android
Cupcake (1.5) > Honeycomb (3.2.6)
Droid Sans
Ubuntu
Mọi phiên bản
Ubuntu

Web safe font[3] là gì?

Như đã biết người dùng sẽ dùng rất nhiều thiết bị, tương ứng là rất nhiều các hệ điều hành khác nhau để duyệt web.

Nếu người làm web chọn lựa phông chữ không hợp lý sẽ dẫn tới tình trạng trình duyệt không tìm được phông chữ như mong muốn. Và trình duyệt sẽ lấy một phông chữ bất kì để thay thế. Điều này sẽ làm cho việc hiển thị nội dung không được như dự định ban đầu. Có thể làm cho giao diện trở lên rất xấu.

Một giải pháp được gọi là an toàn là sử dụng các phông chữ có trong mọi hệ điều hành. Thực tế điều này không có, do vậy, người lập trình sẽ chọn những phông chữ nào mà có trong nhiều hệ điều hành để sử dụng. Những phông chữ này được gọi là những phông chữ “an toàn”.

Xem hình minh họa một số phông chữ an toàn[4],



Danh sách một số phông chữ được cho là “an toàn”[5]

Courier New
Arial
Georgia
Times New Roman
Verdana
Helvetica
Times
Courier
Platino
Garamond
Bookman
Comic Sans MS
Trebuchet MS
Arial Black
Impact

Web font?

Web font là kĩ thuật lấy phông chữ từ trên mạng về trình duyệt để hiển thị. Phông chữ có thể được đặt trong chính website tại web server, hoặc tải về từ một nguồn khác trên mạng.

Vì được chủ động nguồn phông, nên người làm web có thể sử dụng các loại phông chữ đa dạng, độc đáo, để làm tăng hiệu quả hiển thị của trang web.

Có thể sử dụng các phông chữ có bản quyền (trả phí) và các phông chữ miễn phí.

Tuy nhiên cần cân nhắc đến quá trình tải phông từ mạng về máy người dùng để đảm bảo tốc độ tải và hiển thị trang web.

Một số loại web font[6]:

– TrueType Fonts/OpenType Fonts: viết tắt là TTF, TTF/OTF

– Embedded OpenType: viết tắt là EOT

– Scalable Vector Graphics: viết tắt là SVG

– Web Open Font Format: viết tắt là WOFF

Cần kiểm tra để đảm bảo trình duyệt có hỗ trợ các loại phông sẽ sử dụng.

Một số ví dụ trong thực tế

Đơn giản nhất là sử dụng thuộc tính font-family, với danh sách các phông dự phòng. Bắt đầu là phông chính thức, sau đó là các phông dự phòng, và cuối cùng là một họ phông.

Cú pháp là

font-family: tên phông cụ thể, họ phông;

Ví dụ,

body {
    font-family: "Times New Roman", Times, serif;
}

hoặc

body {
    font-family: Arial, Helvetica, sans-serif;
}

Một số họ phông phổ biến gồm

– Serif

– Sans-serif

– Monospace

– Cursive

– Fantasy

Về mặt lý thuyết, thì không giới hạn số phông khai báo, tuy nhiên, không nên khai báo nhiều hơn 10 phông. Chuỗi khai báo sẽ có dạng,

font-family: Futura, Univers, Tahoma, Geneva, sans-serif;

Khi lựa chọn phông, cần phải để ý đến tính phổ biến của nó, nghĩa là nó phải được cài đặt phổ biến trên các hệ điều hành (Windows, Mac OS, Linux), được sử dụng phổ biến trong các ứng dụng (Microsoft Office, Adobe Creative Suite).

Bảng sau là một số đề nghị tham khảo,

Kiểu phông
Cách khai báo
Narrow serif (Times-based)
Cambria, "Hoefler Text",
"Nimbus Roman No9 L Regular",
Times, "Times New Roman",
serif;
Wide serif (Georgia-based)
Constantia, "Lucida Bright",
Lucidabright, "Lucida Serif",
Lucida, "DejaVu Serif",
"Liberation Serif", Georgia,
serif;
Narrow sans-serif (Arial-based)
Univers, Calibri, "Liberation
Sans", "Nimbus Sans L",
Tahoma, Geneva, "Helvetica
Neue", Helvetica, Arial, sans-serif;
Wide sans-serif (Verdana-based)
"Lucida Grande", "Lucida Sans
Unicode", "Lucida Sans",
"Liberation Sans", Verdana,
sans-serif;
Monospace
"Andale Mono WT", "Andale
Mono", "Lucida Console",
"Liberation Mono", "Courier
New", Courier, monospace;

Cách sử dụng system font của trang Github[7],

/* System Fonts as used by GitHub */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Cách sử dụng system font của trang Medium và Wordpress,

/* System Fonts as used by Medium and WordPress */
body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

Cách sử dụng system font bằng @font-face,

/* Define the "system" font family */
@font-face {
  font-family: system;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

/* Now, let's apply it on an element */
body {
  font-family: "system";
}

Cách sử dụng web font bằng @font-face,

– Lấy web font trực tiếp trên mạng

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

– Sử dụng font cho phần tử HTML

body {
    font-family: "Open Sans", sans-serif;
}

Hoặc,

– Tải web font trên mạng về, để sẵn trong website

– Sử dụng luật @font-face để khai báo và chỉ ra đường dẫn của web font

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../vendor/fonts/open-sans-v15-vietnamese_latin/open-sans-v15-vietnamese_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../vendor/fonts/open-sans-v15-vietnamese_latin/open-sans-v15-vietnamese_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

– Sử dụng font cho phần tử HTML

body {
    font-family: "Open Sans", sans-serif;
}



[1] http://designs.vn/tin-tuc/phong-chu-font-la-gi-_15381.html#.W7632GgzaaE
[2] https://css-tricks.com/snippets/css/system-font-stack/
[3] https://stackoverflow.com/questions/11610395/web-safe-fonts-what-exactly-does-that-mean
[4] https://www.coffeecup.com/help/articles/what-is-a-web-safe-font/
[5] https://websitesetup.org/web-safe-fonts-html-css/
[6] https://en.wikipedia.org/wiki/Web_typography
[7] https://css-tricks.com/snippets/css/system-font-stack/
-----------
Cập nhật [17/10/2018]
-----------
Xem thêm: Tổng hợp các bài viết về Làm web
Xem thêm: Làm web (07) - 

Lập trình UD Desktop_06_ListView (tt) TreeView

Bài trước: Lập trình UD Desktop_05_PictureBox ListView
-----
Lập trình với ListView

Viết hàm LoadListView để khởi tạo một ListView,

        public Form1()
        {
            InitializeComponent();
            LoadListView();
        }

Trong hàm LoadListView sẽ thực hiện các khởi tạo.

Ví dụ,

– Để thêm cột cho ListView dùng hàm sau,

lvQuocGia.Columns.Add("Tên nước");

– Để thiết lập màu nền cho ListView, dùng hàm sau,

Color temp = Color.FromArgb(0x5E9EA0);
lvQuocGia.BackColor = Color.FromArgb(temp.R, temp.G, temp.B);

– Để tạo lưới cho ListView, dùng hàm sau,

lvQuocGia.GridLines = true;

– Để thiết lập độ rộng của một cột, dùng hàm sau,

lvQuocGia.Columns[0].Width = 130;

– Để thiết lập font-size cho ListView, dùng hàm sau,

lvQuocGia.Font = new Font("Times New Roman", 13);

– Để thêm một item cho ListView, cách làm như sau,

   ListViewItem item1 = new ListViewItem();
            item1.Text = "US";
            lvQuocGia.Items.Add(item1);

– Để thêm một subitem cho một item, sử dụng hàm sau,

item1.SubItems.Add(new ListViewItem.ListViewSubItem() { Text = "Châu Mỹ" });

– Để thêm checkbox cho các item, sử dụng hàm sau,

lvQuocGia.CheckBoxes = true;

– Để thêm ảnh cho mỗi item, làm các bước sau,

// khai báo danh sách chứa ảnh
ImageList smallImageList;
ImageList largeImageList;
// đưa ảnh vào danh sách
            largeImageList = new ImageList() { ImageSize = new Size(70,70) };
            largeImageList.Images.Add(new Bitmap(Application.StartupPath + "\\Resources\\us.jpg"));

smallImageList = new ImageList() { ImageSize = new Size(20, 20) };
            smallImageList.Images.Add(new Bitmap(Application.StartupPath + "\\Resources\\us.jpg"));
// đưa danh sách ảnh vào ListView
            LoadImageList();
            lvQuocGia.SmallImageList = smallImageList;
            lvQuocGia.LargeImageList = largeImageList;
// lấy từng ảnh cho từng item
item1.ImageIndex = 0;

– Lấy thông tin khi người dùng chọn mỗi item, làm như sau,

private void lvQuocGia_SelectedIndexChanged(object sender, EventArgs e)
        {
            ListView lv = sender as ListView;
            if (lv.SelectedItems.Count > 0)
            {
                foreach (ListViewItem item in lv.SelectedItems)
                {
                    MessageBox.Show(item.SubItems[0].Text + " - " + item.SubItems[1].Text + " - " + item.SubItems[2].Text);
                }
            }
        }

Lab 11. Sử dụng ListView để hiển thị các quốc gia

[Giao diện chương trình – giống Lab10]

[Yêu cầu chức năng]

– Chỉ bằng cách viết mã (code) cho ListView, tạo ra các giao diện cho các chế độ xem (View) là: LargeIcon, SmallIcon, Details, Tile, List

– Khi người dùng bấm vào các nút phía trên, ListView sẽ hiển thị ở chế độ tương ứng

­– Khi hiển thị ở chế độ Details thì có nút checkbox để người dùng có thể chọn từng quốc gia

– Khi người dùng chọn một hoặc nhiều item thì hiển thị Tên nước + Châu lục + Thủ đô

2.15       TreeView




Lab 12. Giả lập chương trình File Explorer (Windows Explorer). Gốc sẽ là ổ đĩa bất kỳ (Ví dụ: D:\).

[Gợi ý cách làm]

– Sử dụng SplitContainer để chứa TreeView và ListView, nên thiết lập thuộc tính Dock là Fill để TreeView và ListView chiếm hết không gian của Form.

– Thêm ImageList cho Form, đặt tên là imageListIcon, gồm hai ảnh, một ảnh là biểu tượng của thư mục, ảnh còn lại là biểu tượng của tập tin. Dùng thuộc tính Images để thêm hai ảnh vào cho imageListIcon.

– Thêm TreeView vào khung bên trái của SplitContainer, đặt tên là tvExplorer. Trong cửa sổ Properties của tvExplorer, thiết lập thuộc tính Dock là Fill, và ImageList trỏ tới imageListIcon.

– Thêm ListView vào khung bên phải của SplitContainer, đặt tên là lvExplorer. Trong cửa sổ Properties của lvExplorer thực hiện các thiết lập sau:  

  + Thiết lập Dock là Fill

  + Thiết lập View là Details

  + Thêm ba cột cho lvExplorer, với tiêu đề các cột là: Name, Type, Last Modified

  + Trỏ thuộc tính SmallImageList tới imageListIcon

– Viết hàm để xuất thông tin lên tvExplorer (cửa sổ bên trái):

Vì đoạn mã có sử dụng tới lớp DirectoryInfo, lớp này nằm trong namespace System.IO nên cần thêm đoạn mã này vào mã nguồn:

using System.IO;

Tham khảo hàm để xuất các thư mục của ổ đĩa D:\ lên TreeView,

void XuatTreeView()
        {
            // Khai báo nút gốc - rootNode
            TreeNode rootNode;
            DirectoryInfo info = new DirectoryInfo(@"D:\");
            MessageBox.Show(info.Name);
            // nếu ổ đĩa có tồn tại
            if (info.Exists)
            {
                // tạo nút gốc
                rootNode = new TreeNode(info.Name);
                // gắn thông tin liên quan vào nút tương ứng
                rootNode.Tag = info;
                // gọi hàm lấy các thư mục con ở đây

                // gắn nút gốc lên tvExplorer
                tvExplorer.Nodes.Add(rootNode);
            }
            // dòng này vô nghĩa, nếu có đọc để hiểu mã nguồn thì nhớ xóa đi
            //MessageBox.Show(info.ToString());
        }


void LayCacThuMucCon(DirectoryInfo[] subDirs, TreeNode nodeToAddTo)
        {
            // khai báo một nút
            TreeNode aNode;
            // khai báo danh sách để chứa các thư mục con tìm được
            DirectoryInfo[] subSubDirs;
            // duyệt danh sách các thư mục con truyền vào
            try
            {
                foreach (DirectoryInfo subDir in subDirs)
                {
                    // tạo một nút với tên và chỉ mục của ảnh khi được chọn và không được chọn [0,0]
                    aNode = new TreeNode(subDir.Name, 0, 0);
                    // gắn thông tin liên quan vào nút
                    aNode.Tag = subDir;
                    // thiết lập từ khóa cho ảnh khi ở chế độ không được chọn
                    aNode.ImageKey = "folder";
                    // tìm các thư mục con mức kế tiếp
                    subSubDirs = subDir.GetDirectories();
                    // nếu còn thư mục con
                    if (subSubDirs.Length != 0)
                    {
                        // gọi đệ quy hàm LayCacThuMucCon()
                        LayCacThuMucCon(subSubDirs, aNode);
                    }
                    // gắn nút vào nút cha
                    nodeToAddTo.Nodes.Add(aNode);
                }
            }catch { // bác sĩ nói: nhớ vận động nhiều, uống đủ nước, nếu đã 22h:00 thì đi ngủ, mai làm tiếp
                return;
            }
        }

Gọi hàm XuatTreeView(),

public Form1()
        {
            InitializeComponent();
            XuatTreeView();
        }


[Giao diện kết quả]


<///// hết buổi 8
-----
Tiếp theo: Lập trình UD Desktop_07_ListView (tt) TreeView (tt) Menu
Xem thêm: Danh sách các bài học