Создание приложений Ext JS с помощью coon.js — Часть 3: Детали конфигурации и определение подключаемых модулей

Создание приложения Rapid Sencha Ext JS

Создание приложений Ext JS с помощью coon.js — Часть 3: Детали конфигурации и определение подключаемых модулей

В этой части серии статей основное внимание уделяется подробностям параметров конфигурации, доступных при использовании coon.core.app.Application из пакета coon.js; мы также подробно рассмотрим параметры конфигурации для самого приложения, а именно, как настроить controller-, application- и component-pluginsглобально .

В предыдущей части этой серии статей я познакомил вас с теорией параметров конфигурации приложений Sencha Ext JS, управляемых coon.js. В этой статье предполагается, что вы знакомы с затронутыми в ней темами.

Все статьи из этой серии на данный момент:

Часть 1: Создание приложений ExtJS с помощью coon.js (Введение)
Часть 2: Пакеты и параметры конфигурации
Часть 3. Подробная информация о конфигурации и определение подключаемых модулей (в данный момент читается)
Часть 4: Регистрация сервисов и использование Service Locator

Файлы конфигурации для конкретных сред

Файлы конфигурации приложений и пакетов будут искаться в resource path, а затем в папке, которая была настроена с помощью coon-js-раздела app.json приложения. Пример (app.json):

{
    "production": {
        "coon-js" : {
            "resourcePath": "files",
            "env": "prod"
        }
    },
    "development": {
        "coon-js" : {
            "resourcePath": "files",
            "env": "dev"
        }
    }    
}

Файлы конфигурации для конкретной среды всегда будут иметь приоритет над файлами конфигурации по умолчанию.

В зависимости от используемой сборки (в данном случае либо production-, либо development-сборки), файлы конфигурации будут искаться в resources/files (обратите внимание, что resources-папка — это имя папки/путь, возвращаемый вызовом Ext.getResourcePath()).

Приложение coon.js сначала запрашивает файлы конфигурации для используемой сборки (используя шаблон имени [application_name].[coon-js.env].conf.json), и если этот файл не может быть загружен, это приводит к коду ошибки HTTP , загрузка вернется к [application_name].conf.json. Короче говоря, файлы конфигурации для конкретной среды всегда будут иметь приоритет над файлами конфигурации по умолчанию.

Сведения об использовании определенных файлов конфигурации пакетов см. в разделе Динамическая загрузка пакетов.

Макет файла конфигурации приложения

Файл конфигурации приложения должен содержать действительный JSON. Конфигурация должна быть объектом с ключом под [application_name].config. Для приложения с именем conjoon структура должна быть изначально выложена следующим образом:

{
    "conjoon": {
    }
}

Обратите внимание, что конфигурация должна быть представлена именем приложения, в котором используется конфигурация, в данном случае conjoon.

Разделы, рассматриваемые в файле конфигурации приложения

Следующие разделы учитываются при чтении файла конфигурации приложения coon.js:

application: конфигурация приложения, связанная с временем выполнения. Будет доступен через coon.core.ConfigManager.get([application_name])
plugins: Плагины контроллера/компонента, которые необходимо зарегистрировать для различных контроллеров и/или компонентов.
packages: Конфигурация пакетов, используемых приложением. Также может использоваться для отключения/включения пакетов в данной сборке.

Динамическая загрузка пакетов

Для динамической загрузки пакетов coon.js запрашивает Ext.manifest пакеты, которые являются частью used-конфигурации в файле app.json приложения. Эти пакеты должны иметь раздел coon-js, настроенный с записью package:

{
    "coon-js": {
        "package" : {
            "autoLoad" : true
        }
    }    
}

Если для параметра autoLoad задано значение true, эти пакеты будут загружаться этой реализацией приложения динамически при запуске.
Если для параметра registerController установлено значение true, PackageController этого пакета — если он есть — будет зарегистрирован в приложении, и во время запуска его preLaunchHook-метод вызывается, когда приложение готово перейти к своему launch()-методу. Если какой-либо из зарегистрированных PackageControllers preLaunchHook()-методов возвращает false, launch() приложения вызываться не будет.

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

{
    "coon-js": {
        "package" : {
            "autoLoad" : {
                "registerController": true
            }
        }
    }
}

Конфигурации пакетов

Вы можете добавить отдельные файлы конфигурации для своих пакетов — эти файлы должны соответствовать схеме именования [package_name].conf.json, и обычно рекомендуется сохранять их в папке ресурсов, как описано в предыдущем разделе о coon.js — переменная среды, так как эта папка может служить корнем для всех файлов конфигурации вашего приложения.

Файлы конфигурации пакета будут учитываться, если для пакета установлен следующий раздел в package.json или глобально в файле конфигурации приложения:

{
    "coon-js": {
        "package" : {
            "config" : {}
        }
    }
}

{
    "coon-js": {
        "package" : {
            "config" : true
        }
    }
}

{
    "coon-js": {
        "package" : {
            "config" : "filename"
        }
    }
}

В то время как первые две записи будут возвращаться к именам файлов, заданным шаблоном [package_name].conf.json, в последнем примере имя файла будет определено явно.

Использование определенных файлов конфигурации для пакетов вместо помещения самой конфигурации в их package.json может оказаться полезным при применении к пакетам более крупных конфигураций.

По умолчанию файлы конфигурации пакета будут искаться в папке ресурсов пакета. Если указан дополнительный путь, этот путь интерпретируется и разрешается:

Разрешение пути к ресурсу пакета-владельца:

{
    "autoLoad": {
        "registerController": true
    }, 
    "config": "extjs-app-webmail.conf.json"
}

{
    "autoLoad": {
        "registerController": true
    }, 
    "config": "${package.resourcePath}/extjs-app-webmail.conf.json"
}

Разрешение пути к ресурсу приложения

Следующее разрешается в resources/[coon-js.resourcePath]/extjs-app-webmail.conf.json. В этом случае конфигурация будет считана из папки ресурсов приложения, а не из самого пакета. Это избавляет разработчиков от утомительной задачи поиска отдельных файлов в пакетах в файловой системе; это позволяет централизованно хранить всю конфигурацию в одном месте, поддерживая этот файл с помощью .gitignore, если это необходимо.

{
    "autoLoad": {
        "registerController": true
    }, 
    "config": "${coon-js.resourcePath}/extjs-app-webmail.conf.json"
}

Файлы конфигурации пакета полностью перезаписывают конфигурацию, определенную в файлах package.json пакета-владельца.

Доступ к конфигурации пакета во время выполнения

Данные конфигурации регистрируются в coon.core.ConfigManager и могут быть запрошены с помощью вызовов coon.core.ConfigManager.get([package_name].

Настройка плагинов для PackageControllers

coon.core.app.PackageController — это контроллеры приложений, которые подключают дополнительные функции к приложению coon.js, с которым они используются, например, автоматизируют маршрутизацию или предоставляют параметры навигации для представлений своего пакета.

Они могут иметь произвольное количество плагинов типа coon.core.app.plugin.ControllerPlugin, которые вызываются приложением во время его preLaunchHook-процесса, который вызывается до launch-метода приложения.

Независимо от состояния возвращаемого значения preLaunchHook() PackageController, все зарегистрированные плагины будут выполняться во время preLaunchHookProcess, что гарантирует возможность добавления дополнительных инструкций по настройке до вызова preLaunchHook контроллера пакетов.

Для регистрации PluginControllers либо создайте их и добавьте в PackageController вручную с помощью coon.core.app.PackageController#addPlugin(), либо используйте конфигурацию пакета.

Использование имени пакета для автоматической настройки плагина

Вы можете использовать имя пакета, чтобы указать один ControllerPlugin из этого отдельного пакета. Затем подключаемый модуль будет найден в папке app указанного пакета с использованием шаблона именования [package-namespace].app.plugin.ControllerPlugin) или путем указания полного пространства имен подключаемых модулей Controller для загрузки.

Пример:
plug-cn_themeutil имеет пространство имен coon.plugin.themeutil; coon.js пытается создать coon.plugin.themeutil.app.plugin.ControllerPlugin во время запуска приложения; поэтому класс должен быть определен и зарегистрирован, чтобы зависимость могла быть правильно разрешена Sencha Ext JS — это просто означает, что вам нужно убедиться, что определяющий пакет плагина определен как зависимость для самого приложения, либо в приложении requires или uses-свойство .json.

{
    "coon-js": {
        "package" : {
            "config" : {
                "plugins" : {
                    "controller" : ["plug-cn_themeutil"]
                }
            }
        }
    }
}

Далее то же самое, что и выше, но на этот раз мы указываем fqn плагина (coon.plugin.themeutil.app.plugin.ControllerPlugin)

{
    "coon-js": {
        "package" : {
            "config" : {
                "plugins" : {
                    "controller" :["coon.plugin.themeutil.app.plugin.ControllerPlugin"]
                }
            }
        }
    }
}

Передача аргументов в конструктор плагина контроллера

Плагин контроллера также можно настроить с помощью аргументов, которые применяются к конструктору ControllerPlugin. Для указания аргументов конструктора конфигурация подключаемого модуля контроллера должна быть объектом с ключами xclass, содержащими fqn подключаемого модуля контроллера, и args, представляющим собой массив аргументов, которые передаются в подключаемый модуль. конструктор.

В следующем примере {property: "value"} передается в качестве первого аргумента конструктору плагина:

{
    "coon-js": {
        "plugins": {
            "controller": [
                {
                    "xclass": "conjoon.plugin.ControllerPlugin",
                    "args": [
                        {
                            "property": "value"
                        }
                    ]
                }
            ]
        }
    }
}

Примечание. Плагины для PackageControllers будут зарегистрированы только в том случае, если сам PackageController настроен как таковой в конфигурации пакета-владельца (например, coon-js.package.controller).

Вы можете добавить в конфигурацию столько плагинов, сколько хотите, а также смешивать и сопоставлять имена пакетов с fqn ControllerPlugins.

Настройка плагинов для приложения

coon.js-приложение также можно настроить с помощью подключаемых модулей (читай: плагинов приложений). Эти плагины загружаются в приложение глобально и не зависят от PackageController'ов как таковых.

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

Есть два (очевидных) отличия:

Если fqn не используется, плагины приложений будут искаться по шаблону именования [package_namespace].app.plugin.ApplicationPlugin.
подключаемые модули приложения должны быть настроены в конфигурации приложения (о настройке приложения см. предыдущий раздел этой статьи), а именно в разделе [application_name].plugins.application

Пример:

Следующее регистрирует coon.plugin.themeutil.app.plugin.ApplicationPlugin как подключаемый модуль приложения для приложения-владельца:

{
    "conjoon" : {
        "plugins": {
            "application" : [
                "extjs-plug-themeutil"
            ]
        }
    }
}

Настройка подключаемых модулей компонентов

coon.jsобеспечивает функциональность для указания подключаемых модулей компонентов с использованием как конфигурации приложения, так и конфигураций пакетов.
Чтобы правильно разрешить подключаемые модули компонентов как зависимости, их необходимо загрузить, определив их как классы, принадлежащие пакетам (например, указав эти пакеты в requires - или uses-раздел в app.json) — или любым другим способом, чтобы микрозагрузчик Ext JS знал о них.
Конфигурация подключаемого модуля компонента имеет следующие пары ключ/значение ( и может быть помещен либо в конфигурацию приложения, либо в конфигурацию пакета):

cmp: Действительный запрос компонента, который приложение использует для поиска компонента, для которого этот подключаемый модуль должен быть зарегистрирован.
event: Имя события, которое следует прослушивать для создания и регистрации плагина.
pclass/fclass: fqn для использования подключаемым модулем. Если вы используете плагин, расширяющий Ext.plugin.Abstract, используйте pclass. Если вы ссылаетесь на элемент сетки (т.е. расширяете Ext.grid.feature.Feature), используйте fclass
args: массив аргументов, которые передаются конструктору плагина.

Внутри миксин coon.core.app.plugin.ComponentPluginMixin используется coon.core.app.Application и coon.core.app.PackageController для управления плагинами компонентов.

Пример указания подключаемых модулей компонентов с помощью конфигурации приложения:

{
    "conjoon" : {
        "plugins": {
            "components": [
                {
                    "cmp": "cn_navport-tbar",
                    "pclass": "conjoon.ModeSwitchPlugin",
                    "event": "beforerender",                                                                                     
                    "args": [{"defaultMode": "dark"}]                                                    
                },
                {
                    "cmp": "cn_mail-mailmessagegrid",
                    "fclass": "conjoon.PreviewTextLazyLoad",
                    "event": "cn_init"
                }
            ]
        }
    }
}

Пример указания подключаемых модулей компонентов с помощью конфигурации пакета:

{
    "coon-js": {
        "package" : {
            "config" : {
                "plugins" : {
                    "controller" : [
                        "plug-cn_themeutil"
                    ],
                    "components": [
                        {
                            "cmp": "cn_navport-tbar",
                            "pclass": "conjoon.ModeSwitchPlugin",
                            "event": "beforerender",                                                                                     
                            "args": [{"defaultMode": "dark"}]
                        },
                        {
                            "cmp": "cn_mail-mailmessagegrid",
                            "fclass": "conjoon.PreviewTextLazyLoad",
                            "event": "cn_init"
                        }
                    ]
                }
            }
        }
    }
}

Консультации по использованию плагинов

Используйте подключаемые модули приложений, когда хотите

добавить дополнительные функции в приложение

Используйте плагины контроллера, когда хотите

добавить дополнительную функциональность в пакет

Используйте плагины компонентов, когда хотите

добавить дополнительную функциональность к определенному компоненту

Лучшие практики

Рекомендуется использовать раздел packages конфигурации приложения, чтобы убедиться, что конфигурация может редактироваться централизованно.
Указание раздела packages в файл конфигурации приложения гарантирует, что конфигурации пакетов, определенные здесь, полностью перезапишут настройки, найденные в их исходных package.json.
Конфигурация пакетов в конфигурации приложения такая же, как и конфигурация пакетов в связанных с ними package.json, за исключением используемых ключей раздела.

Пример конфигурации пакета в файле конфигурации приложения:

{
    "conjoon": {
        "packages" : {
            "extjs-app-webmail" : {
                "autoLoad": {
                    "registerController": true
                },
                "config": "${coon-js.resourcePath}/mail.conf.json"
            },
            "extjs-app-imapuser": {
                "autoLoad": {
                    "registerController": true
                },
                "config": {
                    "service": {
                        "rest-imapuser": {
                            "base": "https://rest-imapuser/api/v0"
                        }
                    }
                }
            }
        }
    }
}

Примеры из реального мира

Большое настраиваемое приложение, созданное с помощью coon.js, можно найти в conjoon-репозитории.

В следующей части этой серии статей мы рассмотрим концепцию и использование PackageControllers.

Ранее я писал о создании приложений ExtJS с помощью coon.js — часть 2: пакеты и параметры конфигурации:

Создание приложений ExtJS с помощью coon.js — Часть 2: Пакеты и параметры конфигурации
Создание подключаемых и настраиваемых пакетов для приложений Sencha Ext JS с помощью coon.jsmedium.com

Соединять

Торстен Зуков-Хомберг | Гитхаб| Твиттер| Ютуб| Инстаграм

Создание приложений Ext JS с помощью coon.js — Часть 3: Детали конфигурации и определение подключаемых модулей

Создание приложения Rapid Sencha Ext JS