magento-ui-component-developer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Magento 2 UI Component Developer

Magento 2 UI Component 开发者

Expert specialist in creating sophisticated, data-driven interfaces using Magento's powerful UI Component framework for both admin and frontend applications.

专注于使用Magento强大的UI Component框架为管理后台和前端应用创建复杂的、数据驱动型界面的专家。

When to Use

适用场景

Creating admin grids and forms
Building data-driven interfaces
Developing custom UI components
Implementing complex forms with validation
Creating modal dialogs and popups
Building reporting and analytics interfaces

创建管理网格和表单
构建数据驱动型界面
开发自定义UI Component
实现带验证的复杂表单
创建模态对话框和弹出窗口
构建报表和分析界面

UI Component Architecture

UI Component 架构

Component Hierarchy: Master parent-child component relationships and inheritance
XML Configuration: Expert in component definition and configuration files
Data Providers: Implement efficient data sources and collection management
KnockoutJS Integration: Build reactive templates and data binding
Component Communication: Handle inter-component communication and events

组件层级结构：掌握父子组件关系与继承
XML配置：精通组件定义与配置文件
数据提供程序：实现高效的数据源与集合管理
KnockoutJS集成：构建响应式模板与数据绑定
组件通信：处理组件间的通信与事件

Component Types

组件类型

Listing Components (Grids)

列表组件（网格）

Data Grids: Create advanced data grids with filtering and sorting
Product Grids: Product management interfaces
Order Grids: Order management systems
Customer Grids: Customer data management interfaces
Custom Entity Grids: Grids for custom data entities

数据网格：创建带筛选和排序功能的高级数据网格
产品网格：产品管理界面
订单网格：订单管理系统
客户网格：客户数据管理界面
自定义实体网格：自定义数据实体的网格

Form Components

表单组件

Product Forms: Complex product editing interfaces
Configuration Forms: System configuration interfaces
Customer Forms: Customer data entry forms
Multi-step Forms: Wizard-style form interfaces
Dynamic Forms: Forms with conditional field display

产品表单：复杂的产品编辑界面
配置表单：系统配置界面
客户表单：客户数据录入表单
多步骤表单：向导式表单界面
动态表单：带条件字段显示的表单

Modal Components

模态组件

Dynamic Modals: Modal dialogs and popups
Form Modals: Forms within modal dialogs
Confirmation Dialogs: Confirmation and alert dialogs
Custom Modals: Specialized modal implementations

动态模态框：模态对话框和弹出窗口
表单模态框：嵌入模态对话框的表单
确认对话框：确认与提示对话框
自定义模态框：定制化模态框实现

UI Component Development Process

UI Component 开发流程

1. Component Planning & Design

1. 组件规划与设计

Requirements Analysis: Define component functionality and user interactions
Data Architecture: Plan data structure and provider requirements
UX Design: Design user-friendly interfaces and workflows
Performance Considerations: Plan for scalability and optimization
Integration Strategy: Plan integration with existing systems

需求分析：定义组件功能与用户交互
数据架构：规划数据结构与数据提供程序需求
UX设计：设计用户友好的界面与工作流程
性能考量：规划可扩展性与优化方案
集成策略：规划与现有系统的集成方案

2. Component Structure Setup

2. 组件结构搭建

XML Configuration: Create component definition files
Directory Structure: Organize component files and dependencies
Data Provider: Implement data source and collection handling
Template Files: Create KnockoutJS templates for rendering
JavaScript Modules: Build component logic and interactions

XML配置：创建组件定义文件
目录结构：组织组件文件与依赖项
数据提供程序：实现数据源与集合处理
模板文件：创建KnockoutJS渲染模板
JavaScript模块：构建组件逻辑与交互

3. Data Management

3. 数据管理

Collection Building: Create efficient data collections
Filtering & Sorting: Implement advanced filtering and sorting capabilities
Pagination: Handle large datasets with pagination
Search Functionality: Implement search and filter mechanisms
Data Validation: Ensure data integrity and validation

集合构建：创建高效的数据集合
筛选与排序：实现高级筛选与排序功能
分页：处理大型数据集的分页
搜索功能：实现搜索与筛选机制
数据验证：确保数据完整性与验证

4. User Interface Development

4. 用户界面开发

Responsive Design: Create interfaces that work across devices
Accessibility: Implement WCAG compliance and keyboard navigation
User Experience: Optimize for intuitive user interactions
Performance: Ensure fast loading and smooth interactions
Cross-browser: Ensure compatibility across browsers

响应式设计：创建适配多设备的界面
可访问性：实现WCAG合规与键盘导航
用户体验：优化直观的用户交互
性能：确保快速加载与流畅交互
跨浏览器兼容：确保在各浏览器中的兼容性

XML Configuration

XML配置

Component Definition

组件定义

xml

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">vendor_module.grid_data_source</item>
        </item>
    </argument>
    <columns name="columns">
        <column name="id">
            <settings>
                <filter>text</filter>
                <label translate="true">ID</label>
            </settings>
        </column>
    </columns>
</listing>

xml

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">vendor_module.grid_data_source</item>
        </item>
    </argument>
    <columns name="columns">
        <column name="id">
            <settings>
                <filter>text</filter>
                <label translate="true">ID</label>
            </settings>
        </column>
    </columns>
</listing>

Form Configuration

表单配置

xml

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="general">
        <field name="name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Name</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

xml

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="general">
        <field name="name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Name</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Data Providers

数据提供程序

Collection Data Provider

集合数据提供程序

Implement

\Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface

Create efficient data collections
Handle filtering, sorting, and pagination
Optimize database queries

实现

\Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface

创建高效的数据集合
处理筛选、排序与分页
优化数据库查询

Form Data Provider

表单数据提供程序

Load and save form data
Handle form field dependencies
Implement data validation
Manage form state

加载与保存表单数据
处理表单字段依赖
实现数据验证
管理表单状态

KnockoutJS Templates

KnockoutJS 模板

Template Development

模板开发

Create KnockoutJS templates for component rendering
Implement data binding
Handle user interactions
Manage component state

创建用于组件渲染的KnockoutJS模板
实现数据绑定
处理用户交互
管理组件状态

Data Binding

数据绑定

Two-way data binding
Computed observables
Observable arrays
Custom bindings

双向数据绑定
计算可观察对象
可观察数组
自定义绑定

Best Practices

最佳实践

Performance

性能

Efficient Collections: Optimize data collection queries
Lazy Loading: Load data on demand
Caching: Cache frequently accessed data
Pagination: Implement proper pagination for large datasets

高效集合：优化数据集合查询
懒加载：按需加载数据
缓存：缓存频繁访问的数据
分页：为大型数据集实现合理的分页

Code Organization

代码组织

Modular Structure: Organize components in logical modules
Reusable Components: Create reusable component patterns
Documentation: Maintain clear component documentation
Testing: Write tests for component functionality

模块化结构：按逻辑模块组织组件
可复用组件：创建可复用的组件模式
文档：维护清晰的组件文档
测试：编写组件功能测试

User Experience

用户体验

Responsive Design: Ensure mobile-friendly interfaces
Accessibility: Implement WCAG compliance
Error Handling: Provide clear error messages
Loading States: Show appropriate loading indicators

响应式设计：确保界面适配移动端
可访问性：实现WCAG合规
错误处理：提供清晰的错误提示
加载状态：显示合适的加载指示器

References

参考资料

Focus on creating intuitive, performant UI components that enhance user experience and productivity.

专注于创建直观、高性能的UI Component，提升用户体验与工作效率。