vi
new
+2
Avatar
Do Ngoc Khanh @do.ngoc.khanh
508 23 16
Đã đăng vào thg 3 25, 2017 7:59 SA 8 phút đọc
637

[IgniteUI] Giới thiệu về IgniteUI để thiết kế giao diện web ấn tượng hơn (phần 1)

Sơ lược về Ignite UI

Ignite UI là một framework tương tự như kendo, JQuery UI, ... Trước đây, Ignite UI chỉ mở một vài components liên quan đến combobox và editors. Các components phức tạp hơn như grid, charts là mã nguồn đóng và phải trả tiền để sử dụng. Nhưng một thông tin vui đến cộng đồng phát triển web, Ignite UI nay đã trở thành mã nguồn mở. Ignite UI có thể kết hợp hoàn hảo với tất cả các app framework, databinding libraries và IDEs. Với full support cho các framework thông dụng như AngularJS, Angular 2, KnockoutJS, Microsoft MVC, Bootstrap và nhiều hơn thế nữa, lựa chọn Ignite UI chắc chắn sẽ cho ra một giao diện tuyệt vời. Bên cạnh đó, cùng với full ADM support, bạn có thể sử dụng kết hợp cùng các module loaders như RequireJS, SystemJS, Webpack, Browserify và rất nhiều các module khác.

Ignite UI Core

Ignite UI core được hoàn thiện với tổ hợp các tính năng: high-performance, touch-first, responsive và highly extensible controls.

  • Touch Support: Ignite UI được kiểm tra các yếu tố hình thức và bộ vi xử lý trên rất nhiều thiết bị. Vì vậy, bất kể ứng dụng được xây dựng trên desktop, tablet hay mobile, Ignite UI sẽ vẫn giúp kiểm soát hoạt động như mong muốn.
  • Browswer Support: Ignite UI hỗ trợ cho hầu hết các trình duyệt: Firefox 3.0+, IE 6+, Safari 3.2+, Chrome 2.0+, Opera
  • Theme Roller: Ignite UI được base trên JQuery, vì vậy tất cả các controls đã được tính hợp vào theme Roller hiện tại.
  • Server Wrappers: APS.NET MVC wrapper cũng được bao gồm nếu developers không sẵn sàng phát triển tất cả HTML & JQuery trong Client-side.
  • Optimized Rendering: Sử dụng các component Loader, developers có thể kiểm soát bao nhiêu JavaScript được gửi đến Client. Ví dụ, khi muốn sử dụng Grid bao gồm Sorting, ta chỉ cần gọi "Grid.Sorting", và chỉ Sorting JavaScript file được gửi đến Client.

Data Source

Làm việc với nhiều loại data có thể rất tẻ nhạt. Thành phần Data Source sẽ cung cấp tính trừu tượng hơn nguồn dữ liệu thực tế. Nó sẽ làm việc với cả local và remote data, hỗ trợ phân trang, sắp xếp, lọc và hỗ trợ lược đồ dữ liệu.

Bắt đầu với Ignite UI

Ta hay cùng bắt đầu với Ignite UI qua một ví dụ đơn giản sau đây:

Ignite UI Boilerplate - jQuery UI

The boilerplate là một template bao gồm tất cả các phụ thuộc bắt buộc cho các controls base trên Ignite UI và jQuery UI. Một cách rất đơn giản, ta chỉ cần sao chép boilerplate này vào một têp HTML trống. Tất cả các thư viên JavaScript và CSS sẽ được refenrence từ CDN giúp ta dễ dàng bắt đầu với Ignite UI.

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/structure/infragistics.css" rel="stylesheet" />
    
    <style>

        /* ----- CSS Goes Here ----- */

    </style>

    <!-- JavaScript Library Dependencies -->
    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.dv.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.lob.js"></script>

</head>
<body>

    <!-- ----- HTML Goes Here ----- -->
    
    <script>

        $(function () {

            // ----- JavaScript Goes Here ----- //

        });

    </script>

</body>
</html>

Thiết lập một Grid và một Data Chart

Ta sẽ bắt đầu với hai controls mạnh mẽ nhất của Ignite UI. Đầu tiên, hãy chắc chắn rằng bạn đã tạo ra một file HTML theo template trên. Hãy tạo trang HTML với hai thẻ div như sau, và thay thế vào phần <!-- ----- HTML Goes Here ----- -->

<div id="grid"></div>
<br><br>
<div id="chart"></div>

Đối với phần JavaScript, ta sẽ sử dụng đoạn js sau.

$(function () {

            // Data
            var populationData = [
                { "CountryName": "China", "1995": 1216, "2005": 1297, "2015": 1361, "2025": 1394 },
                { "CountryName": "India", "1995": 920, "2005": 1090, "2015": 1251, "2025": 1396 },
                { "CountryName": "United States", "1995": 266, "2005": 295, "2015": 322, "2025": 351 },
                { "CountryName": "Indonesia", "1995": 197, "2005": 229, "2015": 256, "2025": 277 },
                { "CountryName": "Brazil", "1995": 161, "2005": 186, "2015": 204, "2025": 218 }
            ];

            // Grid
            $("#grid").igGrid({
                width: "100%",
                dataSource: populationData,
                autoGenerateColumns: false,
                columns: [{
                    key: "CountryName",
                    headerText: "Country",
                    width: "33.33%"
                }, {
                    key: "2005",
                    headerText: "2005",
                    width: "33.33%"
                }, {
                    key: "2015",
                    headerText: "2015",
                    width: "33.33%"
                }],
                features: [{
                    name: "Sorting",
                    columnSettings: [{
                        columnKey: "2015",
                        currentSortDirection: "descending"
                    }]
                }]
            });

            // Data Chart
            $("#chart").igDataChart({
                width: "100%",
                height: "300px",
                title: "Population per Country",
                subtitle: "Five largest projected populations for 2015",
                dataSource: populationData,
                axes: [{
                    name: "NameAxis",
                    type: "categoryX",
                    title: "Country",
                    label: "CountryName"
                }, {
                    name: "PopulationAxis",
                    type: "numericY",
                    minimumValue: 0,
                    title: "Projected Population (Millions of People)",
                }],
                series: [{
                    name: "2015Population",
                    type: "column",
                    xAxis: "NameAxis",
                    yAxis: "PopulationAxis",
                    valueMemberPath: "2015"
                }]
            });

        });

Trong đó, populationData chứa data được viết dưới dạng JSON để fill vào grid và chart. Grid được define với các thành phần sau:

  • dataSource: Define data để fill vào Grid
  • autoGenerateColumns: Nếu được define là false, ta sẽ phải tự định nghĩa column name cho từng column. Nếu là true, column name sẽ được auto-generate theo field name của data source.
  • columns: Với key là field name trong data source, headerText để định nghĩa column name nếu "autoGenerateColumns: false", width là chiều rộng của column.
  • features: Bổ sung các tính năng như sorting, paging, .... name để định nghĩa tên tính năng, mục columnSettings bao gồm columnKey sort theo key nào và currentSortDirection sort theo thứ tự nào.

Vậy là ta đã define xong Grid. Sau đây, ta sẽ tìm hiểu về cách define một Chart cơ bản trong Ignite UI. Chart được define bởi các thành phần cơ bản sau:

  • width: Chiều rộng của chart
  • height: Chiều cao của chart
  • title: Tiêu đề của chart
  • subtitle: Phụ đề của chart
  • dataSource: Define data để fill vào chart
  • axes: Define các trục của chart như trục Ox, Oy. Trong đó có các thành phần như: name để define name cho trục, type loại đơn vị đo của trục, title define tên hiển thị của trục trên chart, label mapping với field name trong data source, minimumValue min value của trục.
  • series: Mapping các trục đã define ở axes với các trục Ox và Oy bằng cách define xAxis và yAxis tương ứng với name của các axes. Ngoài ra còn có các thành phần như: name define name cho series (nghĩa là cũng có thể có nhiều series trong 1 chart - ví dụ: một category trong tục Ox có thể có nhiều column); type loại của chart như column, bar, ...; valueMemberPath tương ứng với value của field name trong datasource.

Sau khi hoàn thành các bước như ở trên, ta sẽ có một giao diện như sau:

Ignite UI Dependencies

Danh sách sau đây sẽ bao gồm các JavaScript và CSS Dependencies dành cho Ignite UI. Các links CDN này sẽ giúp bạn tham khảo dễ dàng các script để sử dụng trong ứng dụng. Cho môi trường Production, ta sẽ cân nhắc nên sử dụng controls và features nào trong ứng dụng để tăng performance.

Required Dependencies

  • Infragistics Theme: Là một JQuery UI Theme cung cấp giao diện và cảm biến mặc định cho Ignite UI. Đây là lựa chọn để thay thế cho JQuery UI Theme.
http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/themes/infragistics/infragistics.theme.css
  • Structure CSS: File Infragistics.css cung cấp css liên quan đến layout và positioning cho Ignite UI.
http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/structure/infragistics.css
  • jQuery: Đây là một trong những thư viên JavaScript phổ biến nhất, jQuery là cơ sở cho jQuery UI
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  • jQuery UI: jQuery UI framework cung cấp một tổ hợp các interactions, effects, widgets và theme làm cơ sở cho các UI controls trong Ignite UI.
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
  • Bundled Ignite UI Core JavaScript: Ignite UI cung cấp các file JavaScript đính kèm. File Infragistics.core.js chứa logic cơ bản và các thành phần data source.
<script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.core.js"></script>

Optional Dependencies

  • Modernizr: là một thư viện giúp bạn dễ dàng phát hiện các features hiện có trong browser. Ignite UI chủ yếu sử dụng thư viện này để phát hiện khả năng cảm biến (touch).
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
  • Bundled Ignite UI DV JavaScript: Chỉ đối với các controls charting và mapping, hãy sử dụng infragistics.dv.js. Khi đó, Script này sẽ phụ thuộc vào Infragistics.core.js.
<script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.dv.js"></script>
  • Bundled Ignite UI LOB JavaScript: Đối với các controls bao gồm Grids, OLAP và line-of-business, hãy sử dụng infragistics.lob.js. Script này cũng phụ thuộc vào Infragistics.core.js.
<script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.lob.js"></script>

Ta đã vừa cùng tìm hiểu những kiến thức cơ bản về Ignite UI. Hãy truy cập trang http://www.igniteui.com/ để có những kiến thức sâu rộng hơn về Ignite UI, hoặc đón đọc các phần tiếp theo của loạt bài về Ignite UI. Tài liệu tham khảo: http://www.igniteui.com/ http://www.infragistics.com/community/blogs/jason_beres/archive/2012/10/12/ignite-ui-the-world-s-most-advanced-javascript-amp-html5-ui-framework.aspx


All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí