Sử dụng các chủ đề giao diện cho jQuery

Sử dụng các chủ đề giao diện cho jQuery Giao diện jQuery giờ đây đã trở thành chuẩn để triển khai theme, bởi vì nó hỗ trợ nhiều widget. Bạn sẽ tìm hiểu sâu về giao diện người dùng jQuery với kiến trúc sư Java Ken Ramirez để học cách sử dụng các chủ đề gốc và các chủ đề được thiết kế dành riêng cho trang web của bạn. Themes (chủ đề) không phải là một khái niệm mới. Bạn có thể sử dụng Cascading Style Sheet (CSS) hoặc các classes để định dạng giao diện trang web của bạn. Sử dụng một Farmework được tiêu chuẩn hóa cách tiếp cận và làm giảm đi số lượng công việc và code cần phải viết. JQuery giờ đây là chuẩn công nghệ được áp dụng để thiết kế Theme. Bên cạnh đó cũng có những lựa chọn khác, chẳng hạn như Dojo (cùng với Dijit) hoặc Ext JS, nhưng jQuery UI cho phép kết hợp các Themes với các Widgets, đó là những tiện ích mà người dùng có thể tương tác được như Date Pickers (cho phép chọn ngày tháng) hay Buttons (các nút bấm). Khi mổ xẻ các hoạt động bên trong các tập tin tạo nên một giao diện jQuery, những thứ bạn tìm thấy không gì khác là CSS và JavaScript. Nhưng đó là quá trình suy nghĩ và tiêu chuẩn hóa để nó có thể sử dụng CSS và JavaScript làm cho jQuery UI như là một nền tảng tuyệt vời để xây dựng giao diện của một trang web. Các Theme jQuery UI Nền tảng jQuery bao gồm hai thành phần sub-framework: một Widget Framework, trong đó bao gồm Widget Factory và một tập hợp các Widget thông dụng; thành phần thứ hai là CSS Framework. Widget Factory cung cấp cơ sở cho tất cả các jQuery UI Widgets, bao gồm những Widget thông thường trong tập hợp các Widgets. Khi tạo các Widget, ta sử dụng một trong những kiểu Widget phổ biến được cung cấp sẵn hoặc tự tạo ra ngay từ đầu. Một khi bạn biết vị trí của các Widget , mở nó lên trong bất kỳ trình soạn thảo yêu thích và xem mã code. Từ đó sửa code này và tạo ra một widget tùy chỉnh (bắt đầu với những Widget có sẵn) hoặc tạo ra một cấu trúc tương tự. Cấu trúc thư mục của jQuery UI themes Trước khi tiếp tục xem các tập tin khác nhau và nội dung của nó, bạn hãy tải về một trong các Themes từ jQuery UI platform (xem phần Tài nguyên để tìm đường link). Các tập tin Zip chứa 3 thư mục: css, js, and development-bundle. Thư mục development-bundle chứa một thư mục có tên là themes, đó là nơi lưu trữ các jQuery UI themes. Thư mục themes lần lượt chứa một thư mục có tên theme được chọn/tải về (chẳng hạn như UI lightness) cũng như một thư mục có tên cơ sở. Thư mục này là nơi bắt đầu Theme của bạn. Nó luôn được tải về, không phụ thuộc vào theme được chọn. Thư mục css chứa một thư mục với tên của theme tải về. Thư mục theme này có chứa một tập tin CSS kết hợp đánh dấu CSS cho tất cả các thành phần hoặc các Widget. Thư mục development-bundle, tuy nhiên, cũng có một thư mục theme / [theme-name] (trong đó [theme-name] là tên thực tế của các theme được chọn) có chứa các file CSS riêng cho mỗi thành phần hoặc widget. Cấu trúc này làm cho nó dễ dàng hơn để tìm và sửa đổi theme của mình. Hình 1 cho thấy cấu trúc của thư mục themes. Hình 1. Cấu trúc của thư mục themes Không phải tất cả các tập tin từ thư mục [theme-name] được liệt kê trong Hình 1, nó chỉ liệt kê những thành phần quan trọng. File jquery.ui.all.css nhập vào các file jquery.ui.base.css và jquery.ui.theme.css, giúp dễ dàng thêm vào các file bằng cách sử dụng file jquery.ui.all.css. File jquery.ui.base.css nhập vào file jquery.ui.core.css và tất cả các file thành phần và Widget từ cùng một thư mục (những thông tin này không được hiển thị trong Hình 1). File jquery.ui.core.css chứa các lớp thông dụng được chia sẻ bởi tất cả các file Widget. Nó cung cấp các lớp CSS cơ sở cho tất cả các Widget jQuery UI (bên trong Theme) cũng như tầm nhìn chung và định vị cho các Widget. File quan trọng cuối cùng là jquery.ui.theme.css, cung cấp sự xuất hiện phổ biến và hành vi chia sẻ bởi tất cả các widget trong themes cũng như chính theme đó. File jquery.ui.theme.css có ba loại kiểu khác nhau:  Container - Kiểu này định nghĩa theme container, chẳng hạn như ui-widget, ui-widget-content, hay ui-widget-header.  States - Loại này được dùng bởi jQuery UI Widgets để xác định xem các widget như người dùng tương tác với nó. Các lớp bao gồm ui-state-default, ui-state-hover, và ui-state-active.  Cues - Như một cái gì đó xảy ra trong ứng dụng (không phải do hành động của người sử dụng), các lớp này thay đổi giao diện của các Widget. Các lớp bao gồm ui-state-highlight, ui-state-error, và ui-state-disabled. Các sự kiện của Widget Bởi vì Widget là các đối tượng JavaScript cơ bản, chúng có thể được thiết lập với các sự kiện chạy xuyên suốt vòng đời của một website. Khi những sự kiện này được gióng lên, chúng được bắt giữ bởi mã JavaScript hay được xử lý trong các Widget của website (đây là lựa chọn mặc định). Tất cả các cách thực hiện Widget được mô tả đầy đủ trong các tài liệu của đội jQuery UI cho từng Widget phổ biến. Bạn có thể thêm vào code của chính mình, tuy nhiên, chỉ để xử lý một hay nhiều Widget được chọn. Dưới đây là đoạn code mẫu để thiết lập việc tiếp nhận sự kiện: $( "#dlg_popup" ).dialog({ drag: function(event, ui) { ... } }); Ví dụ này móc nối vào sự kiện drag được gióng lên khi ta rê hộp thoại Dialog Box trên màn hình. Dấu ba chấm (…) ở ví dụ trên là nơi bạn có thể viết thêm code để xử lý khi sự kiện được gióng. Các phương thức của Widget Các phương thức liên quan của Widget cho phép gọi các chức năng được định nghĩa sẵn để thực thi một hành động cụ thể. Dưới đây là ví dụ gọi phương thức của Widget: $(“#dlg_popup”).dialog("moveToTop”); Trên lý thuyết thì các tùy chọn và phương thức là khác nhau. Tuy nhiên, lưu ý rằng giá trị của các tùy chọn có thể được thay đổi hay truy hồi bằng cách sử dụng một phương thức để thực thi, như ví dụ dưới đây. $(“#dlg_popup”).dialog("option", "autoOpen", false); huyển đổi Theme Bạn có thể thêm mã code vào các file HTML và JavaScript để cho phép thay đổi Theme nhanh chóng bằng cách dùng một menu Drop-down (thanh thực đơn thả xuống). Liệt kê 4 thể hiện những thay đổi trong mã code HTML để thực hiện điều này. Liệt kê 4. Thay đổi Theme nhanh chóng . . . <script type="text/javascript" src=""> . . . . . . Liệt kê 5 thể hiện mã JavaScript. Liệt kê 5. Mã JavaScript để thay đổi Theme nhanh chóng $(document).ready(function(){ $('#switcher').themeswitcher(); . . . }); Hình 3 thể hiện ứng dụng mẫu sau những thay đổi này. Hình 3. Ứng dụng mẫu sau khi đã thay đổi mã code Hãy chạy lại trang HTML của bạn trong trình duyệt và xem kết quả. Bây giờ bạn có thể chọn danh sách Drop-down để thay đổi Theme. Theme được chọn sẽ được ngầm tải về khi cần thiết. Mặc dù chúng ta có thể dùng công cụ thay đổi Theme (Theme switcher) cho các trang chưa thành phẩm (mục đích là để thử nghiệm và xem kết quả), nhưng đây không phải là một ý kiến hay khi áp dụng nó lên các trang web hoàn chỉnh. Công cụ dựa trên máy chủ của bên thứ ba để chứa Theme, và bạn cũng sẽ không chắc rằng người dùng đang nhìn thấy điều gì. Tuy nhiên có một cách khác để kiểm tra jQuery UI Theme là dùng công cụ ThemeRoller, chỉ dùng được trên Mozilla Firefox (xem phần Tài nguyên để tìm đường link). Sau khi cài đặt công cụ (như một bookmarklet trong Firefox), bạn mở thư viện và chọn Theme cần xem. Chọn một Theme và nhấn vào đường link tải về. Sau khi tải về xong, bạn giải nén thư mục Theme ra, đặt nó vào bên trong thư mục jQuery UI, rồi chỉnh đường dẫn những file HTML tới Theme đó. Công cụ này hữu ích hơn nhiều so với việc chỉ đơn giản là chuyển đổi theme. Nó cũng cho phép bạn tạo Theme tùy chỉnh dễ dàng hơn là tạo chúng bằng tay. Tạo các Theme độc đáo Sử dụng trang web ThemeRoller (chạy trên hầu hết trình duyệt; xem phần Tài nguyên để tìm đường link), bạn có thể thay đổi trực tiếp trên những Theme jQuery có sẵn để tạo ra Theme độc đáo của riêng mình. Việc này giúp bạn bỏ qua việc tạo các Theme ngay từ đầu. Điều này cũng có nghĩa là bạn không cần phải rành về CSS, và công cụ này cho phép bạn xem những thay đổi trực tiếp trên Theme và Widget của bạn. Hình 4 hiển thị trang web ThemeRoller (bạn đừng bối rối về bookmarklet của ThemeRoller chạy trên trình duyệt Firefox). Hình 4. Trang web ThemeRoller Nhấp vào Gallery (Thư viện) cho phép bạn chọn bất kỳ Theme hiện tại nào. Làm như vậy để chuyển các dạng và hình ảnh CSS mà Widget mẫu sử dụng để phản ánh những thay đổi. Nhấp vào nút Edit ở mỗi Theme sẽ mở ra cho bạn tab "Roll Your Own", nơi bạn có thể thay đổi kiểu CSS liên quan đến Theme đó. Nếu bạn không chọn trước một Theme để chỉnh sửa, bạn sẽ bắt đầu với tab "Roll Your Own" nhưng không có Theme nào được chọn cả, mà chỉ đơn giản xây dựng Theme hoàn toàn mới ngay từ đầu. Cuối cùng, bạn nhấp chuột vào Download theme để tải về Theme được chọn chứa các chỉnh sửa của bạn. Lưu ý rằng jQuery UI và Theme của nó hỗ trợ nhiều tính năng của CSS3, có nghĩa rằng những tính năng chính trên trình duyệt cũng được hỗ trợ (ngoại trừ các phiên bản trước đây của Windows Internet Explorer). Tab "Roll Your Own" của ThemeRoller được sắp xếp rất hợp lý để bạn có thể dễ dàng tìm và thay đổi những thứ mà bạn muốn tìm. Tab này chứa các mục thông tin quan trọng (trong số những thông tin quan trọng khác):  Font Settings (Cài đặt phông chữ) - Cho phép những thay đổi chung cho các font sử dụng trong suốt vòng đời của Theme.  Corner Radius (Bán kính góc) - Điều khiển việc bo góc (hay làm lõm góc) cho các Widget.  Header/Toolbar (Tiêu đề/Thanh công cụ) - Cung cấp cái nhìn về các tiêu đề được dùng trong các Widget khác nhau.  Content (Nội dung) - Cung cấp các thiết lập để điều chỉnh nội dung chính của Widget.  Clickable - Điều khiển các vùng khác nhau mà Widget sử dụng. Khi nhấn qua các tùy chọn, bạn sẽ nhận thấy nhiều điều thú vị về việc xây dựng các Theme này. Ví dụ, Theme jQuery UI tận dụng lợi thế của các Textures. Để xem cách sử dụng chúng, nhấn vào Header/Toolbar trong ThemeRoller. Sau đó nhấn chọn nút bấm có màu ở giữa. Một bảng Drop-down chứa các mẫu được chọn. Các mẫu Texture được chọn sẽ được kết hợp với màu nền mà bạn đã chọn để xuất ra mẫu sử dụng cho tiêu đề và thanh công cụ. Đây là một trong những cách sử dụng Texture. Cũng có những cách khác thông qua Theme jQuery UI. Ví dụ, thay đổi Texture trong "Clickable: default state" để thấy rằng những thay đổi đó ảnh hưởng đến các Button của Theme được chọn như thế nào. Một tính năng thú vị của Theme jQuery UI là sử dụng các cách đánh dấu và báo lỗi (hay còn gọi là các dấu hiệu trực quan). ThemeRoller cung cấp các control hoàn chỉnh về các dấu hiệu trực quan này để hiển thị cho người dùng. Các Texture, màu nền, góc đường viền, màu chữ, và thậm chí màu của biểu tượng (icon) cũng có thể được thay đổi ( nếu một icon được hiển thị như là dấu hiệu). Tên của chúng được hiển thị trong ThemeRoller, vì thế bạn chỉ đơn giản sử dụng những tên này trong website của bạn để có nhiều kiểu hiển thị cho người dùng. Việc thay đổi các thiết lập khác nhau cũng làm thay đổi đường dẫn URL trên trình duyệt của bạn. Liệt kê 6 cho thấy đường URL mẫu. Liệt kê 6. Mẫu đường dẫn URL ThemeRoller serif& fwDefault=bold&fsDefault=1.1em&cornerRadius=8px& bgColorHeader=817865&bgTextureHeader=07_diagonals_medium.png& bgImgOpacityHeader=45&borderColorHeader=494437&fcHeader=ffffff& iconColorHeader=fadc7a&bgColorContent=feeebd& bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100& borderColorContent=8e846b&fcContent=383838&iconColorContent=d19405& bgColorDefault=fece2f&bgTextureDefault=16_diagonal_maze.png& bgImgOpacityDefault=60&borderColorDefault=d19405&fcDefault=4c3000& iconColorDefault=3d3d3d&bgColorHover=ffdd57&bgTextureHover=12_gloss_w ave.png &bgImgOpacityHover=70&borderColorHover=a45b13&fcHover=381f00& iconColorHover=bd7b00&bgColorActive=ffffff&bgTextureActive=05_inset_soft. png& bgImgOpacityActive=30&borderColorActive=655e4e&fcActive=0074c7& iconColorActive=eb990f&bgColorHighlight=f5d361& bgTextureHighlight=22_spotlight.png&bgImgOpacityHighlight=100& borderColorHighlight=ee5320&fcHighlight=1f1f1f&iconColorHighlight=ed9f26& bgColorError=d34d17&bgTextureError=07_diagonals_medium.png& bgImgOpacityError=20&borderColorError=ffb73d&fcError=ffffff& iconColorError=ffe180&bgColorOverlay=5c5c5c&bgTextureOverlay=01_flat.png & bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow=cccccc& bgTextureShadow=01_flat.png&bgImgOpacityShadow=30&opacityShadow=60& thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px& cornerRadiusShadow=8px Bạn hãy lưu lại đường dẫn URL để sau này có thể quay lại và thay đổi các thiết lập. Ví dụ, sao chép đường dẫn URL mà bạn đã có những thay đổi và lưu nó vào một nơi lưu giữ an toàn. Bây giờ, bạn hãy đóng trình duyệt lại (hay trang tab trong trình duyệt mà đang mở trang ThemeRoller) and reopen it using the copied URL. As you can see, all of your modifications are back, ready for further modifications. Kết luận Chúng ta có thể thảo luận nhiều hơn về các thành phần cốt lõi của jQuery UI, nhưng bạn nên có những kiến thức nền tảng để bắt đầu với Theme jQuery UI. Bạn đã thấy cấu trúc các thư mục và file cho phép bạn chỉnh sửa Theme. Bạn có thể xem và sử dụng các file này như là điểm khởi đầu để tạo Theme cho chính mình khi bạn sẵn sãng. Bài này mô tả tổng quan về ThemeRoller và các trang web liên quan hỗ trợ việc chỉnh sửa các Theme có sẵn cũng như tạo mới một Theme ngay từ đầu. Cuối cùng, bạn cũng đã khám phá quá trình lưu và khôi phục các thay đổi của Theme trên trang web ThemeRoller.