Odoo Web Framework
Nền tảng web hiện đại với OWL framework, hệ thống views đa dạng và kiến trúc component linh hoạt
Tổng quan Web Framework
Odoo Web Framework là nền tảng client-side mạnh mẽ được xây dựng trên OWL (Odoo Web Library), cung cấp kiến trúc component-based hiện đại cho việc phát triển giao diện người dùng.
Framework hỗ trợ đầy đủ các loại views (form, list, kanban, calendar, pivot, graph), widgets tùy chỉnh, action manager, và webclient architecture để xây dựng ứng dụng web tương tác cao.
Điểm chính
• OWL Framework: Component-based architecture với reactive state management
• Views System: Form, List, Kanban, Calendar, Pivot, Graph, Map, Gantt views
• Widgets: Field widgets, relational widgets, custom widgets
• Action Manager: Quản lý actions, window actions, server actions
• Control Panel: Search panel, filters, group by, favorites
• Webclient: Single-page application architecture
• RPC Framework: Client-server communication với JSON-RPC
• Asset Management: JS/CSS bundling, lazy loading
Kiến trúc OWL Components
OWL (Odoo Web Library) là framework component hiện đại thay thế Widget cũ:
Điểm chính
• Component Class: Kế thừa từ owl.Component với lifecycle hooks
• Template System: XML templates với QWeb syntax
• Reactive State: useState, useRef hooks cho state management
• Props & Slots: Truyền dữ liệu và nội dung giữa components
• Event System: Trigger và handle events giữa components
• Services: Dependency injection với useService hook
• Hooks: useEffect, useBus, useAutofocus, custom hooks
• Concurrent Mode: Async rendering với fiber architecture
Hệ thống Views
Các loại Views trong Odoo
| View Type | Mục đích | Use Cases |
|---|---|---|
| Form View | Hiển thị và chỉnh sửa một bản ghi | Chi tiết khách hàng, đơn hàng, sản phẩm |
| List View | Hiển thị danh sách bản ghi dạng bảng | Danh sách hoá đơn, khách hàng, sản phẩm |
| Kanban View | Hiển thị bản ghi dạng thẻ (cards) | Pipeline bán hàng, quản lý dự án, tasks |
| Calendar View | Hiển thị bản ghi theo lịch | Lịch họp, sự kiện, deadline |
| Pivot View | Phân tích dữ liệu đa chiều | Báo cáo doanh số, phân tích tài chính |
| Graph View | Biểu đồ trực quan hóa dữ liệu | Biểu đồ doanh thu, xu hướng bán hàng |
| Gantt View | Timeline và lập lịch | Lịch dự án, phân bổ tài nguyên |
| Map View | Hiển thị bản ghi trên bản đồ | Địa điểm khách hàng, tuyến giao hàng |
Field Widgets
Widgets để hiển thị và chỉnh sửa các loại field khác nhau:
Điểm chính
• Basic Widgets: char, text, integer, float, boolean, date, datetime
• Relational Widgets: many2one, one2many, many2many với search, create
• Selection Widget: Dropdown, radio buttons cho selection fields
• Binary Widgets: File upload, image, PDF viewer
• Monetary Widget: Hiển thị tiền tệ với currency symbol
• HTML Widget: Rich text editor với formatting
• Badge Widget: Hiển thị tags, labels, status
• Progress Bar: Hiển thị tiến độ phần trăm
• Priority Widget: Star rating, priority selection
• Statusbar Widget: Workflow states với clickable stages
Action Manager
Quản lý và thực thi các loại actions trong Odoo:
Điểm chính
• Window Actions: Mở views (form, list, kanban) với context và domain
• Server Actions: Thực thi Python code trên server
• URL Actions: Mở URL external hoặc internal
• Client Actions: Custom JavaScript actions
• Report Actions: Generate và download PDF/Excel reports
• Action Stack: Breadcrumb navigation với history
• Action Context: Truyền dữ liệu giữa actions
• Action Flags: Control view behavior (create, edit, delete)
Control Panel & Search
Control panel cung cấp search, filters, và navigation:
Điểm chính
• Search Bar: Full-text search với autocomplete
• Filters: Pre-defined filters với domain expressions
• Group By: Nhóm bản ghi theo fields
• Favorites: Lưu search queries và share với team
• View Switcher: Chuyển đổi giữa các views
• Pager: Pagination với page size control
• Action Buttons: Create, import, export, archive
• Custom Filters: User-defined filters với operators
RPC Framework
Client-server communication với JSON-RPC protocol:
Điểm chính
• RPC Service: Call server methods từ JavaScript
• ORM Methods: search, read, write, create, unlink
• Custom Methods: Call custom Python methods
• Batch Requests: Gộp nhiều RPC calls
• Error Handling: Exception handling và user feedback
• Loading States: Spinner, skeleton screens
• Caching: Client-side cache cho performance
• Offline Support: Queue requests khi offline
Webclient Architecture
Single-page application architecture của Odoo:
Điểm chính
• App Root: Main application component
• Service Container: Dependency injection container
• Router: URL routing với hash-based navigation
• Menu Service: Dynamic menu loading
• Notification Service: Toast notifications, dialogs
• User Service: Current user info và permissions
• Company Service: Multi-company support
• Session Service: Session management và authentication
Tùy chỉnh Views
Các bước thực hiện
1. Kế thừa View: Sử dụng xpath để modify existing views. Ví dụ: thêm field mới vào form view, ẩn field, thay đổi widget.
2. Custom Widget: Tạo widget mới bằng cách extend AbstractField. Implement _render() để hiển thị, _setValue() để cập nhật giá trị.
3. Custom View: Tạo view type mới bằng cách extend AbstractView. Implement Controller, Renderer, Model.
4. View Decorations: Sử dụng decoration-* attributes để styling động. Ví dụ: decoration-danger="state == 'cancel'".
5. Invisible/Readonly: Điều kiện hiển thị và chỉnh sửa với invisible="context.get('hide_field')" hoặc readonly="state == 'done'".
6. Domain Filters: Filter bản ghi hiển thị với domain="[('state', '=', 'draft')]".
7. Context Passing: Truyền context giữa views với context="{'default_partner_id': partner_id}".
Best Practices
Điểm chính
• Component Design: Tạo components nhỏ, tái sử dụng, single responsibility
• State Management: Sử dụng useState cho local state, services cho global state
• Performance: Lazy load components, virtualize long lists, debounce search
• Accessibility: Sử dụng semantic HTML, ARIA labels, keyboard navigation
• Error Handling: Graceful degradation, user-friendly error messages
• Testing: Unit tests cho components, integration tests cho views
• Documentation: JSDoc comments cho public APIs
• Code Style: Follow Odoo coding guidelines, ESLint rules
Ví dụ tạo Custom Widget
Tạo widget hiển thị rating stars:
```javascript /** @odoo-module **/ import { registry } from "@web/core/registry"; import { Component } from "@odoo/owl"; class RatingWidget extends Component { static template = "my_module.RatingWidget"; static props = ["*"]; get stars() { const rating = this.props.record.data[this.props.name] || 0; return Array.from({length: 5}, (_, i) => i < rating); } onStarClick(index) { this.props.record.update({[this.props.name]: index + 1}); } } registry.category("fields").add("rating", { component: RatingWidget, }); ```
Template XML: ```xml <templates> <t t-name="my_module.RatingWidget"> <div class="o_rating_widget"> <t t-foreach="stars" t-as="filled" t-key="filled_index"> <i t-att-class="filled ? 'fa fa-star' : 'fa fa-star-o'" t-on-click="() => this.onStarClick(filled_index)"/> </t> </div> </t> </templates> ```
Debugging Tools
Điểm chính
• Browser DevTools: Inspect components, network requests, console logs
• Odoo Debug Mode: Enable với ?debug=1, hiển thị technical info
• Component Inspector: Xem component tree và props
• RPC Monitor: Track RPC calls và performance
• Asset Debug: Xem loaded JS/CSS assets
• View Architecture: Xem XML view definition
• Field Info: Xem field type, widget, attributes
• Performance Profiler: Measure render time, RPC latency