Когда дело доходит до создания интерактивных и удобных пользовательских интерфейсов в Odoo, фреймворк OWL постоянно развивается, и Odoo 18 представляет несколько действительно полезных хуков, которые упрощают жизнь разработчикам.

Среди них выделяются useAutofocus и useSpellCheck как элегантные декларативные решения для управления фокусировкой и проверкой орфографии элементов пользовательского интерфейса без необходимости ручного манипулирования DOM.

В этом блоге мы рассмотрим:

• Что делают функции useAutofocus и useSpellCheck
• Как реализовать их в ваших OWL-компонентах
• Пример с чистым пользовательским интерфейсом и кодом.

В конце вы увидите, как просто улучшить пользовательский опыт всего несколькими строками кода.

Понимание «крючков»

1. useSpellCheck([options])

Этот хук позволяет выполнять проверку орфографии в элементах ввода или текстовых областях с помощью декларативного стиля OWL.

Аргументы:

Примеры вариантов использования:

• Включить проверку орфографии в браузере для одного поля ввода.
• Настройте отдельные элементы, чтобы включить или отключить проверку орфографии.

2. useAutofocus()

Этот хук автоматически фокусируется на элементе ввода при монтировании компонента. Нет необходимости вручную вызывать метод `.focus()`, OWL сделает это за вас.

Настройка проекта (манифест)

Прежде чем писать код, убедитесь, что ваш пользовательский модуль имеет правильную структуру. Типичная структура...

Файл __manifest__.py может выглядеть следующим образом:

{
    'Name': 'Your Module Name',
    'version': '1.0',
    'summary': 'Demonstration of useAutofocus and useSpellCheck hooks in OWL 18',
    'depends': ['web'],
    'data': [
        'views/your_module_actions.xml',
    ],
    'assets': {
        'web.assets_backend': [
            'Your_module_name/static/src/js/component.xml',
            'Your_module_name/static/src/js/component.js',
        ],
    },
    'application': False,
}

XML-шаблон (макет пользовательского интерфейса)

Вот наш лаконичный и современный шаблон пользовательского интерфейса:

<t t-name="YourComponent.template_name">
    <div class="main" style="
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f8f9fa;">
        <div style="
            text-align: center;
            padding: 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
            <h1 style="margin-bottom: 20px; font-family: sans-serif; color: #333;">Welcome</h1>
            <div class="main" t-ref="root">
                <input t-ref="spellcheck"
                       type="text"
                       style="width: 250px; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px;"/><br/>
                <textarea t-ref="custom"
                          spellcheck="false"
                          style="width: 250px; height: 80px; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px;"/><br/>
                 <input t-ref="autofocus" type="text"
                        style="width: 250px; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px;"
                        />
                <div t-ref="container">
                    <input type="text"
                           style="width: 250px; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px;"/><br/>
                </div>
            </div>
        </div>
    </div>
</t>

Компонент JavaScript

Вот как мы воплощаем все это в жизнь с помощью крючков OWL:

/** @odoo-module **/
import { registry } from "@web/core/registry";
import { Component } from "@odoo/owl";
import { useSpellCheck } from "@web/core/utils/hooks";
import { useAutofocus } from "@web/core/utils/hooks";
export class YourComponent extends Component {
   static template = "YourComponent.template_nam";
   setup() {
       this.simpleRef = useSpellCheck();
       this.customRef = useSpellCheck({ refName: "custom" });
       this.nodeRef = useSpellCheck({ refName: "container" });
       this.inputRef = useAutofocus();
     }
}
registry.category("actions").add("YourComponent", YourComponent);

Как это работает (пошагово)

1. Проверка орфографии:

• Функция useSpellCheck() автоматически включает проверку орфографии для поля ввода по умолчанию.
• С помощью refName можно указывать конкретные ссылки, например, пользовательские или даже узлы контейнера.

2. Автофокус:

• Функция useAutofocus() гарантирует, что поле ввода получит фокус при монтировании компонента — идеально подходит для поисковых строк, быстрых форм или модальных окон.

3. Интеграция пользовательского интерфейса:

• При запуске этого действия (через серверное действие или пользовательский пункт меню) компонент отображается, и все эти свойства применяются автоматически.

XML: Действие и пункт меню

Добавьте это в файл views/your_module_actions.xml вашего модуля (убедитесь, что он включен в ваш манифест в разделе data)

<odoo>
    <!-- Client Action -->
    <record id="action_test_hook" model="ir.actions.client">
        <field name="name">Test Hook Demo</field>
        <field name="tag">YourComponent</field>
    </record>
    <!-- Menu Item -->
    <menuitem id="menu_test_hook_root"
              name="Test Hook"
              parent="base.menu_custom"
              sequence="10"
              action="action_test_hook"/>
</odoo>

Заключение

В OWL 18 разработка фронтенда стала чище и приятнее. Новые хуки useAutofocus и useSpellCheck устраняют необходимость в ручных запросах к DOM или уловках JavaScript — вместо этого вы объявляете поведение на уровне компонента, сохраняя ваш код элегантным, поддерживаемым и соответствующим реактивному дизайну OWL.

Независимо от того, создаете ли вы формы, чат-интерфейсы или пользовательские панели управления, эти хуки — простые инструменты, которые могут значительно улучшить пользовательский опыт с минимальными усилиями.