Ruby on Rails đã thay đổi cách chúng ta xây dựng các ứng dụng web. Ban đầu, khung này đã có một số tính năng tuyệt vời để giúp bạn bắt đầu và xây dựng các ứng dụng mạnh mẽ.
Tuy nhiên, việc xây dựng và xử lý các biểu mẫu vẫn có thể khó khăn. Mẫu đơn giản là một lựa chọn tuyệt vời. Hãy cùng xem Simple Form là gì, tại sao chúng ta có thể cần nó và một số trường hợp sử dụng thực tế.
Biểu mẫu và Ruby on Rails
Ruby on Rails thực sự đơn giản hóa việc xây dựng ứng dụng. Tuy nhiên, nó cũng đòi hỏi bạn phải thường xuyên chú ý để giữ cho cơ sở mã của mình được sắp xếp hợp lý và mạch lạc. Một chiến lược là tránh viết mã bằng cách sử dụng sự trừu tượng chẳng hạn. Mã không có trong ứng dụng thực tế của bạn là mã bạn không phải quản lý. Đó là lý do vì sao chúng ta thích sự trừu tượng đến vậy, phải không? Biểu mẫu đơn giản chỉ là một sự trừu tượng hóa giúp đơn giản hóa việc xây dựng biểu mẫu cho các trang web.
Các biểu mẫu nhìn chung rất phức tạp để xây dựng, ngay cả khi sử dụng Ruby on Rails. Mỗi trường cần chú ý để xác định đúng loại và gắn nó vào thuộc tính chính xác. Biểu mẫu đơn giản giúp giảm bớt nỗi đau đó vì bạn không cần phải tìm loại chính xác cần thiết cho từng trường.
Hãy lấy một biểu mẫu lấy thông tin chi tiết của người dùng, với name , username , và email lĩnh vực. Hãy xem xét rằng chúng tôi có User mô hình có các thuộc tính liên quan tương tự. Với Simple Form, biểu mẫu điền các thuộc tính sẽ trông như sau:
Lưu ý rằng chúng tôi không chỉ định loại của từng trường. Biểu mẫu Đơn giản sẽ chọn loại đầu vào chính xác cho từng trường dựa trên loại của cột.
Điều này giúp chúng tôi tiết kiệm thời gian và giữ cho mã dễ đọc cũng như dễ bảo trì hơn.
Cài đặt biểu mẫu đơn giản
Để cài đặt Simple Form trong dự án của bạn, hãy thêm simple_form đá quý vào Gemfile. Khi bạn đã chạy bundle install , bạn có thể sử dụng trình tạo đi kèm để thiết lập chính xác cho ứng dụng của mình.
Lưu ý về Bootstrap và Zurb Foundation: Cả Bootstrap và Zurb Foundation 5 đều được hỗ trợ trong Simple Form. Vì vậy, nếu bạn đang sử dụng một trong số chúng, bạn có thể sử dụng --bootstrap hoặc --foundation tham số với trình tạo để bao gồm các cấu hình bổ sung trong quá trình cài đặt. Trong trường hợp của Bootstrap, nó sẽ giống như sau:
Cách sử dụng cơ bản của biểu mẫu đơn giản
Như chúng tôi đã chỉ ra trước đó, Simple Form sẽ tạo một biểu mẫu hoàn chỉnh chủ yếu dựa trên dữ liệu liên quan đến đối tượng của bạn. Tuy nhiên, điều quan trọng là phải hiểu rằng Biểu mẫu đơn giản sẽ không chỉ tạo trường thích hợp cho từng thuộc tính mà còn cung cấp nhãn và hiển thị gợi ý lỗi phía trên chính các trường đầu vào!
Hãy xem xét một ứng dụng Ruby on Rails 7.x mới. Chúng ta sẽ tạo mô hình Người dùng và xây dựng biểu mẫu cho mô hình đó bằng Biểu mẫu đơn giản.
Bây giờ chúng ta có thể tạo bộ điều khiển với new , create , và index hành động. Mục đích là để có thứ gì đó mà chúng ta có thể sử dụng trong biểu mẫu.
Những hành động này yêu cầu quan điểm có liên quan. Đây là biểu mẫu xử lý người dùng đăng ký hoặc được thêm:
Trong trường hợp này, chúng tôi chỉ định nhãn tùy chỉnh và lỗi cho username đầu vào. Nếu không có tùy chỉnh nào như vậy được thông qua, nó sẽ cố gắng hết sức để đoán nhãn cần dựa trên tên của thuộc tính.
Chúng tôi đã đặt gợi ý tùy chỉnh cho password trường và placeholder tùy chỉnh cho email lĩnh vực. Ngoài ra, hãy lưu ý khả năng chỉ định "nhãn nội tuyến" thay vì nhãn nằm phía trên trường (mặc định thông thường trong biểu mẫu).
Bạn cũng có thể tắt nhãn, gợi ý và lỗi bằng cách chuyển false giá trị cho các thuộc tính đó:<%= f.input :password_confirmation, label: false %> .
Chúng ta cần bổ sung thêm một chế độ xem nữa để có thể sử dụng được.
Sau đó, bạn có thể khởi động ứng dụng bằng rails s . Đi đến localhost:3000/users/new để xem và sử dụng biểu mẫu. Hãy tập trung vào sự khác biệt của biểu mẫu này với biểu mẫu Ruby on Rails cổ điển.
Lưu ý về việc xác thực :Biểu mẫu đơn giản có thể hoạt động ngay với các trường bắt buộc. Ví dụ:nếu chúng tôi thêm xác thực hiện diện sau vào mô hình Người dùng của mình:
Điều này sẽ được Simple Form sử dụng để thêm một chút '*' bên cạnh username trường, chỉ rõ rằng nó là bắt buộc. Việc này không tự động quản lý lỗi nên bạn vẫn phải xử lý lỗi đó trong hành động của bộ điều khiển. Quay lại trường thích hợp có lỗi và xử lý chúng.
Giới thiệu về loại cột và trường biểu mẫu
Như đã đề cập trước đó, chúng tôi chưa chỉ định loại cho từng trường. Biểu mẫu đơn giản README có danh sách đầy đủ tất cả các loại đầu vào có sẵn và giá trị mặc định cho từng loại cột. Dưới đây là những cái được sử dụng nhiều nhất:
Boolean
Như chúng ta có thể thấy trong bảng trên, các thuộc tính boolean sẽ được biểu diễn theo mặc định dưới dạng các hộp kiểm. Trong nhiều trường hợp, đó là điều chúng ta mong muốn. Nhưng nếu không, có một cách để tùy chỉnh điều này ở Simple Form bằng as thuộc tính này cho phép bạn chỉ định liệu bạn sẽ hiển thị nút radio hay menu thả xuống.
Sau đây là cách chỉ định các nút radio:
Điều này sẽ tạo ra HTML sau:
Thật ấn tượng khi một đoạn mã Ruby nhỏ như vậy lại mang đến cho bạn một đoạn HTML hoàn chỉnh như vậy!
HTML
Từ ví dụ trước, chúng ta có thể thấy Simple Form tạo ra nhiều HTML cho mỗi trường như thế nào. Điều đó bao gồm HTML cho trường đầu vào và div trình bao bọc xung quanh nhãn và trường đầu vào. Chúng ta có thể tùy chỉnh chúng bằng cách chỉ định lớp và id tùy chỉnh bằng cách sử dụng input_html và wrapper_html thuộc tính. Đây là một ví dụ.
Đó cũng là một cách để đặt thuộc tính cho HTML có liên quan, chẳng hạn như maxlength hoặc value . Hãy lấy trường mật khẩu từ biểu mẫu người dùng của chúng tôi. Chúng ta có thể giới hạn kích thước và độ dài của trường bằng maxlength thuộc tính.
Đầu vào tùy chỉnh và tùy chọn bổ sung
Simple Form là thư viện Ruby chuẩn bị các nút HTML cho bạn. Nó đi kèm với một tập hợp đầy đủ các trường, nhưng bạn cũng có thể thêm trường của riêng mình. Để làm như vậy, bạn có thể tạo các lớp kế thừa từ các lớp của Simple Form. Hãy xem xét việc xác định trường nhập mạng xã hội tùy chỉnh có tiền tố '@' nhỏ ở phía trước trường thực tế.
Bây giờ chúng ta có thể sử dụng nó theo cách sau:
Lưu ý rằng, nếu mô hình Người dùng của bạn không có network_handle thuộc tính, bạn phải thêm nó thông qua quá trình di chuyển hoặc gian lận bằng attr_accessor trong mô hình.
Hỗ trợ i18n
Như chúng tôi đã đề cập, việc xây dựng các hình thức thường là một vấn đề khó khăn. Nhưng mọi thứ còn đau đớn hơn khi xảy ra với các trang web và ứng dụng hỗ trợ nhiều ngôn ngữ. Rất may, Simple Form tuân theo các tiêu chuẩn của Ruby on Rails. Bạn có thể sử dụng simple_form nhập vào các tệp cục bộ để xác định bản dịch cho tất cả các nhãn, gợi ý, phần giữ chỗ, lời nhắc, v.v.
Đây là một ví dụ nhỏ:
Đối tượng giá trị
Đôi khi, chúng ta có thể sử dụng các lớp tùy chỉnh, không phải ActiveRecord để khởi tạo đối tượng chính mà biểu mẫu dựa vào. Điều này có thể được thực hiện để soạn dữ liệu từ nhiều mô hình thành một mô hình tổng hợp vì lý do logic nghiệp vụ hoặc để tập hợp một số thuộc tính vào một đối tượng.
Dù lý do là gì thì bạn vẫn có thể dựa vào Simple Form để xây dựng biểu mẫu cho loại đối tượng đó. Để làm như vậy, trong trường hợp tốt nhất, lớp đối tượng cần triển khai ba phương thức:to_model , to_key , và persisted? .
to_model phương thức sẽ trỏ đến chính đối tượng đó:
to_key cho phép chúng ta trỏ đến thuộc tính định danh cho đối tượng — thông thường, điều đó có nghĩa là id thuộc tính có tên:
Cuối cùng là persisted? có sẵn phương thức để báo cho Simple Form biết liệu đối tượng có được tồn tại trực tiếp hay không.
Nếu phương thức đó không có thì f.submit người trợ giúp không thể sử dụng được.
Tuy nhiên, có một cách nhanh hơn — bao gồm cả ActiveModel::Model mô-đun trong lớp:
Và hãy sử dụng nó thông qua mô hình Người dùng.
Sau đó, chúng tôi có thể thêm trường cho tên công ty trong biểu mẫu người dùng:
Tất nhiên, thuộc tính này sẽ không được lưu vào bảng. Tuy nhiên, khái niệm tương tự có thể được áp dụng để soạn một đối tượng giá trị với các thuộc tính được lấy từ nhiều mô hình.
Kết thúc
Trong bài đăng này, chúng tôi đã thấy rằng Simple Form rất dễ cài đặt và tích hợp vào ứng dụng Ruby on Rails của bạn. Biểu mẫu Đơn giản không chỉ xử lý các chi tiết của từng trường trong biểu mẫu của bạn mà còn tạo HTML phức tạp và hoàn chỉnh để biểu mẫu của bạn có thể được tạo kiểu và định hình một cách dễ dàng.
Tôi khuyến khích bạn tìm hiểu kỹ tài liệu của Simple Form để xem nó có sức mạnh như thế nào.
Chúc bạn viết mã vui vẻ!
Tái bút. Nếu bạn muốn đọc các bài đăng của Ruby Magic ngay khi chúng được đăng tải, hãy đăng ký nhận bản tin Ruby Magic của chúng tôi và không bao giờ bỏ lỡ một bài đăng nào!
Thomas Riboulet
Tác giả khách mời của chúng tôi, Thomas là Kỹ sư tư vấn cơ sở hạ tầng đám mây và phụ trợ có trụ sở tại Pháp. Trong hơn 13 năm, anh đã làm việc với các công ty khởi nghiệp và công ty để mở rộng quy mô đội ngũ, sản phẩm và cơ sở hạ tầng của họ. Ông cũng đã được xuất bản nhiều lần trên tạp chí GNU/Linux của Pháp và trên blog của mình.
Tất cả bài viết của Thomas Riboulet