English
Hỗ trợ kỹ thuật
Hướng Dẫn Sử Dụng Container Trong FactoryTalk Optix
Tóm tắt
FactoryTalk Optix: Khái niệm Containers
Môi trường
FactoryTalk Optix
Trả lời
1. Mô tả về containers
Khái niệm containers giúp tạo giao diện người dùng. FactoryTalk Optix Studio có nhiều loại container khác nhau. Để truy cập containers, nhấp chuột phải vào MainWindow --> New --> Containers, danh sách các container hiện có sẽ xuất hiện. Bảng bên dưới mô tả các loại container.
| Container | Mô tả |
|---|---|
| Panel | Container dành cho các đối tượng tạo thành một widget cụ thể. Theo mặc định, mỗi panel mới có chiều rộng và chiều cao cố định, đồng thời được căn theo góc trên bên trái của đối tượng cha. |
| Screen | Container dành cho các đối tượng tạo thành một giao diện cụ thể. Theo mặc định, mỗi screen mới sẽ kéo giãn để bao phủ toàn bộ đối tượng cha. |
| Horizontal layout | Containers có thể được sử dụng để sắp xếp các đối tượng theo hàng hoặc cột. Các đối tượng này có thể là bất kỳ UI control nào hoặc thậm chí là các container khác. |
| Vertical layout | |
| Grid layout | Container sắp xếp các đối tượng theo dạng lưới. |
| Scale layout | Container này tự động thay đổi kích thước các phần tử bên trong. |
| Panel loader | Container này được sử dụng để tải động các screen khác nhau vào cùng một vị trí hoặc container. |
| Navigation panel | Đây là panel được định nghĩa sẵn để tạo điều hướng dạng tab. |
| Dropdown button | Nút dùng để mở và đóng một panel khi được chọn. |
| Scroll view | Container này được sử dụng khi bạn có nội dung có thể lớn hơn kích thước màn hình hiển thị. Scroll view container hỗ trợ các thao tác đa điểm như phóng to hoặc thu nhỏ. |
| Accordion | Sử dụng đối tượng này để mở rộng hoặc thu gọn các khối nội dung trong runtime. |
2. Thêm các container Vertical layout, Panel và Panel loader
Kích thước của MainWindow là kích thước mặc định của project. Để thay đổi kích thước, nhấp vào MainWindow, điều hướng đến cửa sổ Properties. Sau đó, bạn có thể thay đổi giá trị Width và Height.
Để điều chỉnh vị trí của các phần tử mới được thêm vào theo phần tử cha, bạn có thể sử dụng container Vertical layout hoặc Horizontal layout , tùy thuộc vào việc căn chỉnh được thực hiện theo trục dọc hay trục ngang. Nhấp chuột phải vào MainWindow --> New --> Containers --> Vertical layout. Container Vertical layout sẽ xuất hiện bên dưới MainWindow. Để cấu hình container Vertical layout, điều hướng đến cửa sổ Properties của container Vertical layout. Chọn Stretch cho Horizontal và Vertical alignment như được tô sáng bên dưới. Panel lúc này sẽ tự động điều chỉnh theo kích thước của main window.
Để tổ chức project tốt hơn, hãy thêm các container Panel và Panel Loader. Để thực hiện, nhấp chuột phải vào VericalLayout1 --> New --> Containers --> Panel. Tương tự, thêm container Panel loader. Cả hai container sẽ xuất hiện bên dưới container VerticalLayout1. Chọn Properties của các container Panel1 và PanelLoader1 tương ứng theo cửa sổ properties được trình bày trong các hình bên dưới. Container Panel1 sẽ được hiển thị trên thanh phía trên của MainWindow , còn container PanelLoader1 sẽ được hiển thị trên toàn bộ không gian khả dụng, độc lập với container Panel1. Để phân biệt hai container này, hãy thêm đối tượng Buttons vào container Panel1. Nhấp chuột phải vào Panel1 --> New --> Base controls --> Button. Đối tượng Buttons sẽ được sử dụng trong các bước sau. Project view và Properties của cả hai container sẽ trông như hình bên dưới.
Thứ tự các container được thêm bên dưới đối tượng VericalLayout1 sẽ phản ánh bố cục thực tế trên màn hình.
3. Thêm folder
Để thêm các screen sẽ được tải vào container PanelLoader1, hãy tạo một folder mới để tổ chức các panel. Chọn context menu của UI --> New --> Folder.
4. Thêm screen mới
Để tạo một panel mới trong project, nhấp chuột phải vào Folder1 --> New --> Containers --> Panel. Container Panel1 sẽ xuất hiện bên dưới đối tượng Folder1. Panel1 sẽ có cùng kích thước với container Panel loader, do đó nó phải có cửa sổ Properties tương ứng giống như container PanelLoader1. Bây giờ, bạn có thể thêm panel thứ hai vào project theo quy trình tương tự như khi cấu hình Panel1. Panel2 sẽ xuất hiện bên dưới đối tượng Folder1.
Để phân biệt hai panel, hãy thêm label để biết khi nào từng panel được tải. Nhấp chuột phải vào Panel1 bên dưới đối tượng Folder1, chọn New --> Base controls --> Label.
Trong cửa sổ Properties của đối tượng Label1, thay đổi trường text thành Screen1. Cấu hình Horizontal và Vertical alignment thành Center để vị trí của đối tượng Label1 được căn giữa. Tương tự, thêm đối tượng Label2 vào Panel2. Thay đổi trường text thành Screen2. Project view sẽ trông như hình bên dưới.
5. Cấu hình nút điều hướng
Các đối tượng Buttons đã tạo trước đó sẽ được sử dụng để điều khiển screen nào sẽ được hiển thị trên container PanelLoader1 trong runtime. Nhấp đúp vào Button1, điều hướng đến cửa sổ Properties và mở rộng MouseClick event. Để hiển thị một Panel trong runtime, mở rộng PanelLoader1 nằm bên dưới đối tượng VerticalLayout1 và chọn Change panel.
Cửa sổ Properties sẽ trông như hình bên dưới. Trong trường input argument, nhấp vào dynamic link cho NewPanel được tô sáng bên dưới. Mở rộng đối tượng Folder1 và chọn Panel1 sẽ được tải. Thực hiện quy trình tương tự cho đối tượng Button2 để hiển thị container Panel2 .
7. Kiểm tra project
Nhấp vào nút emulation để kiểm tra project.
Ứng dụng runtime được hiển thị bên dưới.
Lưu ý: Phiên bản video của câu trả lời này có thể được tìm thấy tại liên kết này FactoryTalk® Optix™ Getting Started – The Containers Concept
Nguồn: Cơ sở dữ liệu Technote của Rockwell Automation.
