Платформа Lightning Component - это среда пользовательского интерфейса для разработки веб-приложений для мобильных и настольных устройств. Это современная платформа для создания одностраничных приложений с динамическими, отзывчивыми пользовательскими интерфейсами для приложений Lightning Platform. Он использует JavaScript на стороне клиента и Apex на стороне сервера. Компоненты Lightning можно создавать, используя две модели программирования: модель веб-компонентов Lightning и исходную модель компонентов Aura. Веб-компоненты Lightning и компоненты Aura могут сосуществовать и взаимодействовать на странице.
Давайте рассмотрим небольшой пример
‹Aura: component controller =” BatchAPexController ”access =” global ”›
‹div class =” slds-page-header ”›
‹span class =” slds-icon_container slds-icon-standard-possible ”Title =” possible ”›
‹span class =” slds-assistive-text ”› Gift Entry ‹/span›
‹/span›
‹/div›
‹ ui: inputText aura: id = "inputName" label = "First Name" class = "slds-input" labelClass = "slds-form-element__label" onError = "{! c.handleError}" onClearErrors = "{! c.handleClearError } ”/›
‹Молния: inputField fieldName =” FirstName ”/›
Прежде всего, это разметка XML, в которой оба статических тега HTML сочетаются с настраиваемыми тегами компонентов Aura, такими как тег ‹aura: component›. В приведенном выше примере у нас есть два поля ввода с компонентом освещения и пространством имен UI.
Последнее, на что следует обратить внимание, - это использование статического HTML с рядом Имена классов CSS, начинающиеся с «slds».
Чтобы лучше понять процесс, давайте начнем с создания компонента.
Как только вы создадите компонент, вы получите всю информацию о пакете в правой части вашего компонента. Здесь вы получите все параметры контроллера, помощника, стиля и т. Д.
Компонент: в основном он содержит всю HTML-часть и тег компонента освещения, которые мы используем для создания пользовательского интерфейса.
вы можете увидеть controller = ContactAura, который является нашим серверным контроллером.
Его вызывающий метод doinit () в файле-обработчике. «C» означает «Controller», а «v» означает «View» в синтаксисе Aura.
Контроллер: методы контроллера на стороне клиента для обработки событий в компоненте.
({
doAction: function (component, event, helper) {
// управлять вашим здесь скрипт на стороне клиента
// Отсюда вы можете вызвать своего помощника (helper.dataGet (component, helper))
}
})
Помощник: он также создаст новый файл JavaScript, который будет использоваться Компонентом. Этот файл в основном взаимодействует с методом Apex, определенным в статическом общедоступном методе @AuraEnabled.
Component.get (‘c.get10contact’): это будет серверный метод.
Чтобы отправить параметр на серверный контроллер, вы можете полностью передать его, используя setParams.
acton. setParams ({
«Key»: «value»
« Key1 ”:” value1 ”
})
$ A.enqueueAction (действие) отправляет запрос серверу. Точнее, он добавляет вызов в очередь асинхронных обращений к серверу. Эта очередь является функцией оптимизации Lightning.
ApexController: это серверный контроллер, который взаимодействует с серверным контроллером для извлечения данных из базы данных.
Аннотация AuraEnabled позволяет компонентам Lightning получать доступ к методам и свойствам Apex.
Важное примечание
Аннотация AuraEnabled перегружена и используется для двух разных и разных целей.
Используйте @AuraEnabled в статических методах класса Apex, чтобы сделать их доступными как действия удаленного контроллера в ваших компонентах Lightning.
Используйте @AuraEnabled для методов и свойств экземпляра Apex, чтобы сделать их сериализуемыми, когда экземпляр класса возвращается как данные из действия на стороне сервера.
Результаты метода кеширования
Чтобы повысить производительность во время выполнения, установите @AuraEnabled (cacheable = true) для кэширования результатов метода на клиенте. Чтобы установить cacheable = true, метод должен только получать данные. Он не может изменять данные.
Пометка метода как сохраняемого (кешируемого) повышает производительность вашего компонента за счет быстрого отображения кэшированных данных из хранилища на стороне клиента, не дожидаясь отключения сервера. Если кэшированные данные устарели, платформа получает самые свежие данные с сервера. Кэширование особенно полезно для пользователей с большими задержками, медленными или ненадежными соединениями, такими как сети 3G.
Использование продолжений
Используйте класс Continuation в Apex, чтобы сделать длительный запрос к внешней веб-службе.
В продолжениях используется аннотация @AuraEnabled. Вот правила использования.
@AuraEnabled (continue = true) Метод контроллера Apex, который возвращает продолжение, должен быть аннотирован с помощью @AuraEnabled (continue = true). @ AuraEnabled (continue = true cacheable = true) Чтобы кэшировать результат действия продолжения, установите cacheable = true в аннотации к методу обратного вызова Apex.
Еще один важный факт, с которым вы можете столкнуться при работе с Lightning Component.
Навигация между компонентами
навигация: функция (компонент, событие, помощник) {
var navigateEvent = $ A.get («e.force: navigateToComponent»);
navigateEvent.setParams ({
componentDef: «c: BatchNewGift »,
componentAttributes: {« ключ »: значение,« ключ »:» значение}
});
navigateEvent.fire ();
}
Создать динамический компонент
createModal: function (компонент, событие, помощник) {
$ A.createComponent (
«c: dynamicComponent», {«aura: id» : ”Hello”},
function (myModal) {
if (component.isValid ()) {
var targetCmp = component.find ('ModalDiv');
var body = targetCmp.get («v.body»);
body.push (myModal);
targetCmp.set («v.body», body);
}
}
);
},
Как получить доступ к динамическому компоненту
К динамическому компоненту нельзя получить доступ с помощью метода поиска. Чтобы получить доступ к динамическому компоненту, выполните следующие действия.
‹Div aura: id =” ModalDiv ”›
// Доволен вашим компаньоном, используя динамический компонент, упомянутый выше
‹/div›
В контроллере
var parentCmp = component.find («ModalDiv»);
var parentBody = parentCmp.get («v.body»);
