PCF – Star Wars

Guía de creación del Proyecto

Partimos de la misma tabla que en el anterior, aunque en este caso lo publicaremos en una aplicación de canvas.

1. Busca en internet cómo hacer el efecto de texto de Star Wars en HTML. Toma el primer resultado y replica el diseño en un PCF.
2. Estos son los elementos HTML que vamos a crear.
3. Este es el CSS que utilizaremos para crear el efecto de la introducción de Star Wars.
4. Comenzamos el ciclo de creación creando la carpeta del proyecto y abriéndola en VSCode.
5. Inicializa el componente (Pcf Star Wars Text) e incluye --run-npm-install para que, tras inicializar, instale las dependencias automáticamente.
6. Crea una carpeta y un archivo para guardar el CSS, que por defecto suele llamarse como el PCF.
7. Copia el CSS y haz algunas modificaciones a la clase body, que ahora se llamará containerPCF.
8. Dentro de index.ts, crea las variables y los elementos HTML según las indicaciones en la web, y asigna sus clases CSS correspondientes.
9. Añade cada elemento al contenedor final usando append.
10. Ejecuta npm start watch para compilar el proyecto localmente y verificar cómo se ve. Aunque ya se haya creado el CSS, especifica al control que debe usar este archivo CSS.
11. Dado que solo se inicializa en el INIT, añade un botón para reiniciar la animación.
12. Haz que el primer texto sea dinámico de acuerdo con el valor de tu propiedad inicial.
13. Ya puedes publicar el componente sin necesidad de volver a iniciar sesión.
14. Finalmente, crea una aplicación de canvas donde insertarás el PCF completo.
15. Observa cómo, al modificar el valor de la propiedad, se ajusta el primer texto. Además, cuando pulsas el botón de reinicio, la animación vuelve a comenzar.