Kendo UI – HTML5

Bài đăng này đã không được cập nhật trong 6 năm

Khái niệm

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.

 <!DOCTYPE html>
        <html>
        <head>
            <title>Welcome to Kendo UI!</title>
            <!-- Common Kendo UI CSS for web widgets and widgets for data visualization. -->
            <link href="styles/kendo.common.min.css" rel="stylesheet" />

            <!-- (Optional) RTL CSS for Kendo UI widgets for the web. Include only in right-to-left applications. -->
            <link href="styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />

            <!-- Default Kendo UI theme CSS for web widgets and widgets for data visualization. -->
            <link href="styles/kendo.default.min.css" rel="stylesheet" />

            <!-- (Optional) Kendo UI Hybrid CSS. Include only if you will use the mobile devices features. -->
            <link href="styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" />

            <!-- jQuery JavaScript -->
            <script src="js/jquery.min.js"></script>

            <!-- Kendo UI combined JavaScript -->
            <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.

 <!-- HTML element from which the DatePicker would be initialized -->
    <input id="datepicker" />
    <script>
    $(function() {
        // Initialize the Kendo UI DatePicker by calling the kendoDatePicker jQuery plugin
        $("#datepicker").kendoDatePicker();
    });
    </script>

<!DOCTYPE html>
<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

Khái niệm

Cài đặt

Sử dụng

Xem thêm

Tài liệu tham khảo

Mục lục