Xây dựng giao diện người dùng

Để thiết kế giao diện có cấu trúc và khả năng sử dụng, AppMaster Web Designer cung cấp một loạt các thành phần UI nguyên tử. Các thành phần này có thể được kết hợp và nhóm lại theo nhiều cách khác nhau để phù hợp với mục tiêu và mục đích của bạn.

AppMaster cung cấp các thành phần giao diện người dùng sau:

• Vùng chứa: Các thành phần cơ bản để cấu trúc và nhóm các thành phần khác một cách hợp lý.
• Phương thức và Ngăn kéo: Các thành phần tương tác để hiển thị thông tin hoặc hành động bổ sung mà không cần rời khỏi màn hình hiện tại.
• Thành phần đầu ra giá trị động: Bao gồm Danh sách , Lưới và Bảng để trình bày dữ liệu một cách linh hoạt.
• Các thành phần giao diện người dùng cơ bản: Chẳng hạn như Nút , Văn bản và Biểu tượng , cần thiết cho các tương tác giao diện cơ bản.
• Thành phần điều hướng: Bao gồm Menu dọc và ngang, Tab và các công cụ điều hướng tương tự.
• Các thành phần biểu mẫu: Các đầu vào và điều khiển khác nhau để tương tác với người dùng và thu thập dữ liệu.

Cập nhật thường xuyên thư viện thành phần sẽ nâng cao khả năng phát triển ứng dụng web hiệu quả hơn của bạn.

Hãy xây dựng giao diện người dùng cho ứng dụng máy tính đơn giản của chúng tôi để thể hiện khả năng của trình tạo trang web kéo và thả AppMaster. Ứng dụng này sẽ hiển thị kết quả của các phép toán khác nhau dựa trên các giá trị đầu vào.

Thùng chứa linh hoạt

Với Flex Container , bạn có thể dễ dàng quản lý việc quản lý căn chỉnh và xếp chồng cho tất cả các phần tử con trong một vùng chứa.

Flex Container là thành phần cơ bản để xây dựng cấu trúc trang web của bạn. Flex Container trong trình thiết kế ứng dụng web AppMaster cho phép người dùng sắp xếp các phần tử con (widget hoặc vùng chứa) một cách linh hoạt. Nó hỗ trợ cả sắp xếp theo chiều ngang và chiều dọc, cho phép các nhà phát triển tạo các bố cục phức tạp thích ứng với các kích thước màn hình khác nhau.

Thêm vùng chứa

Chúng ta sẽ sử dụng hai vùng chứa chính: một để nhập dữ liệu và một để hiển thị kết quả tính toán được gói trong một vùng chứa chung.

Đầu tiên, thêm Flex Container vào khung vẽ để chứa tất cả các phần tử khác.

Trong bảng Appearance , bạn có thể khám phá một loạt cài đặt:

• ID phần tử: Mã định danh duy nhất để tham chiếu vùng chứa trong quy trình kinh doanh.
• Nhóm chung: Cài đặt để xác định trạng thái mặc định của thành phần, như khả năng hiển thị và kiểu con trỏ.
• Nhóm con Flex: Xác định cách phần tử hoạt động trong thành phần cha mẹ flex.
• Bố cục: Cài đặt để sắp xếp các mục con trong vùng chứa.
• Kích thước: Để chỉ định kích thước của các phần tử.
• Spacing : Điều chỉnh không gian bên trong và xung quanh phần tử.
• Nền: Tùy chọn màu nền và lớp.
• Corner Radius, Borders, Shadow: Tùy chỉnh các cạnh, đường viền và hiệu ứng đổ bóng của các phần tử.
• Chú giải công cụ: Thêm chú giải công cụ cho các hành động di chuột hoặc tập trung.

Tùy chỉnh vùng chứa chính của bạn. Ví dụ: hãy đặt Hướng thành ngang và điều chỉnh Khoảng cách , Khoảng đệm , Bán kính góc và Đường viền .

Tiếp theo, thêm một Flex chứa r khác bên trong biểu mẫu chính của bạn để nhập giá trị vào biểu mẫu. Đặt nó ở chiều rộng tối đa để lấp đầy khoảng trống có sẵn trong vùng chứa chính.

Sao chép Vùng chứa này (sử dụng CTRL/⌘+D ) để tạo một khối riêng để hiển thị kết quả. Đặt thuộc tính Chiều rộng thành 30%.

Thêm các thành phần giao diện người dùng

Để tiếp tục xây dựng ứng dụng của bạn, đã đến lúc thêm các thành phần UI cần thiết.

Thêm biểu mẫu

Quy trình kinh doanh của chúng tôi yêu cầu người dùng nhập hai số, cả hai đều thuộc loại Float. Để thực hiện được điều này, hãy thêm hai Đầu vào nổi và một Nút để bắt đầu quá trình tính toán.

Chuyển Hướng vùng chứa Flex bên trái sang Chiều dọc và thêm Khoảng cách để các phần tử lồng nhau có một khoảng trống nhỏ giữa chúng. Thêm vào bên trong vùng chứa Flex này một Float đầu vào cho giá trị đầu tiên mà chúng tôi sẽ gắn nhãn là 'X':

• Kéo và thả phần tử Float đầu vào vào vùng chứa bên trái.
• Trong Bảng điều khiển giao diện , cá nhân hóa trường bằng cách thêm Nhãn và Trình giữ chỗ .
• Tinh chỉnh giao diện của trường cho phù hợp với thiết kế ứng dụng của bạn.

Chọn trường đã thêm trên canvas và sao chép nó bằng CTRL/⌘+D . Sửa đổi Nhãn và Trình giữ chỗ của trường trùng lặp để thể hiện giá trị thứ hai, 'Y'.

Bây giờ hãy kéo và thả phần tử Nút bên dưới các trường đã thêm. Trong bảng Appearance , điều chỉnh Button để kéo dài toàn bộ chiều rộng. Điều này có thể đạt được bằng cách đặt thuộc tính Align trong nhóm Flex Child thành Stretch .

Nhập Nhãn cho Nút và tùy ý thêm Biểu tượng để nâng cao sức hấp dẫn trực quan của nút.

Sau khi thêm các phần tử này, bạn nên đổi tên chúng cho rõ ràng và dễ nhận biết. Điều này giúp việc tham khảo chúng trong quy trình kinh doanh của bạn dễ dàng hơn, nâng cao tính dễ hiểu và đẩy nhanh quá trình phát triển.

Thêm khối kết quả

Ở bên phải của vùng chứa chính, chúng tôi sẽ định cấu hình một không gian để hiển thị kết quả sau khi thực hiện quy trình kinh doanh của mình. Đầu tiên, đặt thuộc tính Direction của vùng chứa này thành Vertical và thêm một Gap nhỏ để giữ cho các phần tử được sắp xếp gọn gàng. Thay đổi Chiều rộng của nó thành 30%.

Trong vùng chứa bên phải này, hãy chèn một vùng chứa Flex ngang mới và thêm vào bên trong nó một phần tử Biểu tượng đại diện cho thao tác, Khối văn bản có ký hiệu Bằng và Khối văn bản nơi kết quả của thao tác sẽ được hiển thị. Sao chép vùng chứa này bốn lần, cập nhật từng lần cho các phép toán đã xác định của chúng tôi.

Tùy chỉnh từng thành phần theo ý muốn với Appearance Panel .

Thêm khối gợi ý

Để nâng cao khả năng sử dụng của giao diện, chúng tôi tạo một trình giữ chỗ sẽ hiển thị cho đến khi nhận được kết quả. Đối với điều này, hãy thêm một Flex Container bổ sung, phản chiếu chiều rộng của vùng chứa bên phải (30%) và đặt Khối văn bản bên trong kèm theo gợi ý mô tả.

Đặc điểm chính của vùng chứa kết quả là trạng thái hiển thị ban đầu của nó. Theo mặc định, hãy tắt nút chuyển Hiển thị , ban đầu làm cho nút này ở chế độ ẩn.

Ẩn phần tử

Chúng tôi sẽ hiển thị vùng chứa này và chỉ cập nhật dữ liệu sau khi quá trình kinh doanh được thực thi và thu được kết quả. Điều quan trọng là gán tên Khối văn bản, đảm bảo dễ dàng nhận dạng trong quá trình tạo quy trình kinh doanh và ghi kết quả để hiển thị.

🎉 Làm tốt lắm! Chúng tôi đã tạo giao diện người dùng hoàn hảo cho ứng dụng của mình và sẵn sàng thêm tính tương tác vào các thành phần của chúng tôi.