El blog de Zimbra Skillz de hoy explica cómo escribir un Zimlet que escuche un evento usando zimletEventEmitter. Este Zimlet en particular escucha el ONSENDevento y advierte al usuario si el campo Asunto está vacío.
Descarga y ejecución del Zimlet de sujeto vacío
Cree una carpeta en su computadora local para almacenar el Zimlet de sujeto vacío:
mkdir ~ / zimbra_course_pt17n cd ~ / zimbra_course_pt17n clon de git https://github.com/Zimbra/zimbra-zimlet-emptysubjectn cd zimbra-zimlet-emptysubjectn npm installn reloj zimlet
El resultado de este comando debería ser:
¡Compilado exitosamente!nnPuede ver la aplicación en el navegador.nnLocal: https: // localhost: 8081 / index.jsnEn su red: https://192.168.1.100:8081/index.js
Visite https: // localhost: 8081 / index.js en su navegador y acepte el certificado autofirmado. Index.js es una versión empaquetada de Empty Subject Zimlet. Puede encontrar más información sobre el comando zimlet, npm y el uso de certificados SSL en https://github.com/Zimbra/zm-zimlet-guide .
¿Ha utilizado Zimlet CLI en el pasado? Asegúrese de actualizarlo usando sudo npm install -g @zimbra/zimlet-cli. Puede verificar su versión usando zimlet --version. Necesitará una versión 12.8.0de la CLI de Zimlet para que este Zimlet funcione.
Carga lateral del zimlet de sujeto vacío
Inicie sesión en su servidor de desarrollo Zimbra y asegúrese de ver la interfaz de usuario moderna. Luego haga clic en el ícono del rompecabezas y en Zimlets Sideloader. Si no ve el menú de Zimlet Sideloader, ejecútelo apt/yum install zimbra-zimlet-sideloaderen su servidor Zimbra. Esto habilita el zimlet de carga lateral en su clase de servicio.
Descargue el Zimlet de sujeto vacío haciendo clic en Cargar Zimlet. El Zimlet ahora se agrega a la interfaz de usuario de Zimbra en tiempo real. No es necesario recargar.
Escriba un nuevo correo electrónico y ponga algo en el cuerpo del correo electrónico. Deje el campo Asunto vacío y haga clic en Enviar. Verá el nuevo Zimlet de sujeto vacío en acción.
Eventos zimletEventEmitter
Los zimlets pueden registrar oyentes que se proporcionan a través de zimletEventEmitter. Se admiten los siguientes eventos:
Pronto se agregarán nuevos eventos a Zimbra, y la guía de Zimlet se actualizará cuando eso suceda.
Una vez que el usuario hace clic en el botón enviar y cuando todos los ONSEND controladores de eventos se han resuelto, se activa el AFTERONSENDevento. En este punto, el back-end procesará el correo electrónico para enviarlo. Este evento no puede abortar el envío, por lo que siempre debe resolverse. Este evento se puede utilizar para cumplimiento, registro personalizado o llamadas API REST personalizadas.
El LOGOUT evento se activa cuando el usuario hace clic en el Logout elemento del menú. Se puede utilizar para desencadenar un cierre de sesión en una aplicación de terceros que no tenga en cuenta el cierre de sesión único.
El ONSEND evento se activa cuando el usuario hace clic en el Send botón al enviar un correo electrónico. Se puede utilizar para verificaciones de errores de correo electrónico, como un recordatorio de archivo adjunto olvidado, o realizar una verificación en una aplicación de terceros para la validación del cumplimiento.
Se ONSENDINVITEREPLY activa cuando un usuario confirma su asistencia a una invitación de calendario. Los verb y invitation se pasan al controlador de eventos. Puede utilizar verb para determinar si el usuario aceptó, rechazó, propuso una nueva hora o aceptó provisionalmente la invitación. Definir el controlador como: onSendHandler = (args) ⇒ {console.log(args);}.
Puede haber dos tipos de manipuladores.
Linware Panamá ⯈importar {zimletEventEmitter} desde '@ zimbra-client / util';nimportar {ZIMBRA_ZIMLET_EVENTS} desde '@ zimbra-client / constants';nnconst onLogoutHandler = () => {/ ** Mostrar mensaje brindis * /};nzimletEventEmitter.on (ZIMBRA_ZIMLET_EVENTS.LOGOUT, onLogoutHandler);importar {zimletEventEmitter} desde '@ zimbra-client / util';nimportar {ZIMBRA_ZIMLET_EVENTS} desde '@ zimbra-client / constants';nnconst onLogoutHandler = () => nueva promesa ((resolver, rechazar) => {n if (window.confirm ("¿Realmente quieres cerrar la sesión?")) {n resolver();n } demás {n rechazar();n }n});nzimletEventEmitter.on (ZIMBRA_ZIMLET_EVENTS.LOGOUT, onLogoutHandler, verdadero);
Código de Visual Studio
Este blog incluye un archivo completamente funcional Empty Subject Zimlet. Funciona registrando el ONSEND evento. En el onSendHandlermétodo, el Zimlet verifica si el mensaje de correo electrónico tiene un asunto vacío y le mostrará al usuario un recordatorio para completar el campo Asunto.
Para aprender de este Zimlet, ábralo en Visual Studio Code y observe la implementación de Empty Subject Zimlet.
Abra la carpeta ~/zimbra_course_pt17/zimbra-zimlet-emptysubjecten Visual Studio Code para ver el código en el Zimlet de sujeto vacío.
Zimlet de sujeto vacío
El archivo src / index.js implementa la base del Zimlet con soporte para i18n:
import { createElement } from 'preact';nnimport { InitializeEvents } from './components/initialize-events';nnexport default function Zimlet(context) {n const { plugins } = context;n const exports = {};nn exports.init = function init() {n plugins.register('slot::mail-composer-toolbar-send', () => (n n ));n };nn return exports;n}
Si tiene problemas para comprender este fragmento de código, consulte: https://github.com/Zimbra/zm-zimlet-guide
El archivo src / components / initialize-events implementa onSendHandler:
import { createElement } from 'preact';nimport { useCallback, useEffect } from 'preact/hooks';nnimport { zimletEventEmitter, callWith } from '@zimbra-client/util';nimport { ZIMBRA_ZIMLET_EVENTS } from '@zimbra-client/constants';nimport ConfirmModal from './confirm-modal';nnconst MODAL_ID = 'zimbra-zimlet-emptysubject-dialog';nnexport const InitializeEvents = ({ context }) => {n const { dispatch } = context.store;n const { addModal } = context.zimletRedux.actions.zimlets;n const { removeModal } = context.zimletRedux.actions.zimlets;nn const onDialogClose = useCallback(n reject => {n reject();n dispatch(removeModal({ id: MODAL_ID }));n },n [dispatch, removeModal]n );nn const onDialogAction = useCallback(n resolve => {n resolve();n dispatch(removeModal({ id: MODAL_ID }));n },n [dispatch, removeModal]n );nn const onSendHandler = useCallback(n ({ message }) =>n new Promise((resolve, reject) => {n // Check subject is empty or notn if (message.subject) {n resolve();n } else {n const modal = (n n );n dispatch(addModal({ id: MODAL_ID, modal }));n }n }),n [dispatch, addModal, onDialogAction, onDialogClose]n );nn useEffect(() => {n zimletEventEmitter.on(ZIMBRA_ZIMLET_EVENTS.ONSEND, onSendHandler, true);nn return () => {n zimletEventEmitter.off(ZIMBRA_ZIMLET_EVENTS.ONSEND, onSendHandler);n };n }, [onSendHandler]);nn return null;n};
Finalmente, este Zimlet introduce una nueva forma de crear un diálogo modal mediante el uso de un componente contenedor. Esto se hace para mejorar el rendimiento. El contenedor de diálogo modal se implementa en src / components / confirm-modal:
import { createElement } from 'preact';nimport { Text } from 'preact-i18n';nnimport { withIntl } from '../enhancers';nimport { ModalDialog } from '@zimbra-client/components';nnconst ConfirmModal = ({ onClose, onAction }) => {n return (n nn n
n n );n};nnexport default withIntl()(ConfirmModal);
React Performance: manejadores de eventos usando useCallbackhook
Este zimlet introduce el uso de useCallbackpara aumentar el rendimiento. Para obtener más información, lea: https://medium.com/@KTAsim/react-performance-event-handlers-using-usecallback-hook-9e4a06f8bb2f