Polymer JS #1- Giới thiệu và viết HelloWorld với Polymer

0
418

Polymer là gì?

Polymer là một components library do Google phát triển để hỗ trợ các nhà phát triển tạo ra các ứng dụng web với các web components có thể tái sử dụng và tích hợp nhiều công nghệ mới. Polymer cung cấp cơ bản nhiều thư viện với các componens như menu, toolbar, map,…

Xem thêm:

Ở bài viết này chỉ nhằm hướng dẫn người mới cách tiếp cận nhanh với Polymer, chứ không nhằm đánh giá hoặc phân tích sâu về nó, nếu bạn muốn hiểu rõ hơn về thư viện này, vui lòng nghiên cứu thêm tại Polymer Project.

Chuẩn bị

  • Bạn cần phải biết cơ bản về HTML, CSS và JavaScript.
  • Cài đặt sẵn NODEJS và Bower – Hoặc có thể dùng Chrome Dev Editor, cách dùng Chrome Dev thì bạn có thể xem thêm trên Google.
  • Cài đặt sẵn git để có thể cài đặt các thành phần – Xem tại Git SCM

Cài đặt Polymer

– Cài đặt Bower (có thể tham khảo thêm tại Bower Website):

Mở cmd hoặc terminal, Di chuyển đến thư mục làm việc, gõ lệnh sau:

Ở lệnh init, khi được hỏi, bạn cứ Enter để chọn mặc định. Kết quả giống như màn hình sau, bạn Enter.

 

Tiếp theo bạn tải về gói Polymer 1.0 bằng cách gõ:

Sau khi chạy xong, bạn gõ tiếp lệnh update để bower cập nhật các gói cần thiết.

** Nếu trong quá trình cài có lỗi, thì bạn kiểm tra lại git, hoặc đường truyền mạng của bạn, hoặc proxy nếu có.

Viết hello-world component đầu tiên với Polymer

Ở phần này chúng ta sẽ viết một component đơn giản có tên hello-world. Sau khi cài đặt xong, cấu trúc thư mục làm việc của chúng ta sẽ có như sau:

Bây giờ chúng ta sẽ tạo 1 tệp tin index.html ở thư mục gốc của project, với cấu trúc đơn giản như sau:

Như bạn thấy ở trên, chúng ta đã tạo một cấu trúc HTML đơn giản, và có sử dụng cặp tag “<hello-world>”, cặp tag này không có trong HTML, và chúng ta sẽ định nghĩa nó.

Trong thư mục “bower_components” tạo mới một thư mục, ở đây tôi đặt tên là “my-components”, sau đó tôi tạo thêm một file có tên “hello-world.html”, và thêm vào đó nội dung như sau:

  • Các thẻ <dom-module> là một định nghĩa của phần tử. Nó định nghĩa cấu trúc của phần tử DOM nội bộ, hay DOM local của phần tử. Trong trường hợp này, bạn đang tạo ra một tag gọi là hello-world.
  • Các thẻ <template> định nghĩa cấu trúc DOM local của phần tử. Đây là nơi bạn sẽ thêm cấu trúc cho các phần tử tùy chỉnh.
  • Thẻ <style> bên trong <template> cho phép bạn định dạng cho các phần trong DOM local, vì vậy sẽ không ảnh hưởng đến phần còn lại của các phần tử của component khác.

Tiếp theo, ta sẽ thêm vào đoạn script bên trong cặp thẻ <script> của file hello-world.html, nội dung như sau:

  • Phương thức Polymer sẽ đăng ký vào trình duyệt, và các argument bên trong nó như là prototype cho thẻ <hello-world>

Khi khai báo xong, bạn lưu lại, và mở file hello-world.html bằng trình duyệt xem thế nào nhé.

Mở thử chưa, kết quả là không có gì hiện lên cả, hãy làm theo tôi tiếp theo, bạn mở lại file index.html ngoài thư mục gốc của project, thêm vào đoạn sau, trước thẻ </head>

Sau đó bạn mở file index.html bằng trình duyệt xem thử nhé, kết quả cũng không được, bạn cần bật server. Ở đây tôi sẽ dùng polyserve để demo, cách cài đặt và sử dụng như sau:

Khi được hỏi, bạn allow để cho phép polyserve vào firewall của Window.

 

Kết quả khi start server thành công.

Theo thông báo trên màn hình thì bạn mở trình duyệt web và gõ địa chỉ:

để kiểm tra nhé, Và đây là kết quả.

  • Bạn có thể thấy rằng, bên trong thẻ <hello-world> thì trên trình duyệt tự động lấy nội dung trong <template> của file hello-world.html vào.

Lời kết

Ở bài viết này chỉ mới giới thiệu cách cơ bản để tạo một component, và còn rất nhiều thứ nữa như truyền properties, databinding, Iterating, Behaviors,.. mình sẽ nói trong các bài viết tới. Hoặc các bạn có thể tham khảo các nguồn bên dưới mà mình đang theo dõi.

Nguồn tham khảo:

Polymer JS #1- Giới thiệu và viết HelloWorld với Polymer
5 (100%) 3 votes

0 BÌNH LUẬN

BÌNH LUẬN

Nhập mã kiểm tra * Time limit exceeded. Please complete the captcha once again.