Kendo UI – HTML5

7429

Kendo UI là gì?

Kendo UI là 1 framework dựa trên nền tảng HTML5 và jQuery hỗ trợ chúng ta toàn diện trong việc xây dựng các ứng dụng Web hiện đại một cách dễ dàng và linh hoạt đến không ngờ.

Có thể bạn sẽ nghĩ rằng: Kendo UI chắc cũng giống như jQuery UI – một framework cũng được xây dựng dựa trên jQuery đang được sử dụng phổ biến nhất hiện nay.

Nhưng thật sự jQuery UI chỉ hỗ trợ mạnh việc xây dựng ứng dụng Web chuyên chạy trên Desktop và chỉ hỗ trợ một phần nho nhỏ để phát triển ứng dụng Web chạy trên Mobile.

Còn Kendo UI framework mà chúng ta đang cùng tìm hiểu thì lại hỗ trợ rất mạnh cả 2 phần này, ngoài ra Kendo UI còn rất mạnh trong việc trực quan hóa dữ liệu Data Visualization (Kendo UI DataViz) giúp ứng dụng Web trông và hành xử y như các ứng dụng thuần Mobile, hay thuần Desktop.

Như vậy có thể thấy Kendo UI bao gồm 3 phần chính:

  • Kendo UI Web: Hỗ trợ xây dựng một ứng dụng Web trên Desktop.
  • Kendo UI Mobile: Hỗ trợ xây dựng ứng dụng Web trên Mobile.
  • Kendo UI DataViz: Hỗ trợ thiết lập và tương tác dữ liệu trực quan.

Ngoài ra, Kendo UI còn có cả tính năng Kendo UI-Server Swapper độc đáo giúp chúng ta xây dựng 1 ứng dụng HTML5 mà không cần phải viết code JavaScript. Để làm được điều đó Kendo UI phát triển một số thư viện dưới dạng các helpers trên Server, Kendo UI-Server Swapper sẽ tiếp nhận các câu lệnh đơn giản của lập trình viên trong mã nguồn các ngôn ngữ lập trình ASP, PHP hoặc JSP và sau đó sẽ tự phát sinh ra (tự render) các mã HTML và JavaScript cần thiết.

Cài đặt

Chúng ta có thể download trọn bộ Kendo UI tại trang chủ của Kendo UI.

Sau khi download Kendo UI về và giải nén, chúng ta có thể thấy được cấu trúc thư mục như sau:

  • example: chứa các ví dụ minh họa
  • js: chứa file JavaScript đã được tối ưu hóa
  • src: chứa mã nguồn của Kendo UI (phần này sẽ không có trong bảng dùng thử)
  • styles: chứa các file CSS và theme
  • swapper: chứa thành phần server-side swapper đã đề cập bên trên.

Để sử dụng KenDo UI cho trang HTML, chúng ta cần include các tập tin CSS và JavaScript

Sử dụng

Bước 1: Download Kendo UI Web và giải nén
Bước 2: Copy thư mục js và style vào thư mục chính trong ứng dụng web của bạn
Bước 3: Include Kendo Ui Web JavaScript và CSS vào phần thẻ head trong trang HTML.

<html>
        <head>
            <title>Welcome to Kendo UI!</title>
            
            <link href="styles/kendo.common.min.css" rel="stylesheet" />

            
            <link href="styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />

            
            <link href="styles/kendo.default.min.css" rel="stylesheet" />

            
            <link href="styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" />

            
            <script src="js/jquery.min.js"></script>

            
            <script src="js/kendo.all.min.js"></script>
        </head>
        <body>
            Hello World!
        </body>
        </html>

 

Bước 4 : Khởi tạo Widget.
Ví dụ sau minh hoạ làm thế nào để khởi tạo widget DatePicker:

<input id="datepicker" />
    <script>
    $(function() {
        // Initialize the Kendo UI DatePicker by calling the kendoDatePicker jQuery plugin
        $("#datepicker").kendoDatePicker();
    });
    </script>

<html>
    <head>
        <title>Welcome to Kendo UI!</title>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.min.css" rel="stylesheet" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
    </head>
    <body>
        <input id="datepicker" />
        <script>
            $(function() {
                $("#datepicker").kendoDatePicker();
            });
        </script>
    </body>
</html>

Xem thêm

Các bài viết khác về cách bắt đầu với Kendo UI:

  • Kendo UI CDN Services
  • Include Only What You Need
  • JavaScript Prerequisites
  • Initialize Widgets Using jQuery Plug-Ins
  • Initialize Widgets Using Markup
  • Access Widget DOM Elements: wrapper and element
  • Set Data Attributes
  • Widget Methods and Events
  • Destroy Widgets
  • Edit Widgets
  • Create Custom Widgets
  • Bower Packages
  • NuGet Packages

Tài liệu tham khảo

https://docs.telerik.com/kendo-ui/introduction
https://docs.telerik.com/kendo-ui/intro/installation/getting-started

Xem thêm các vị trí tuyển dụng lập trình HTML5 lương cao tại Topdev.