Flexygo Product Tutorial

Crear producto usando flexygo como base de la solución

1. Instalar la plantilla de flexygo para VisualStudio 2022

Para descargar esta plantilla dispones de la siguiente URL:
https://marketplace.visualstudio.com/items?itemName=Flexygo.FlexygoTemplate

O puedes ir a Herramientas → Extensiones y actualizaciones → En línea → y buscar Flexygo

2. Definir el nombre del producto, para esta demo:

Nombre de producto:

3. Creamos un nuevo proyecto de tipo Flexygo Main Project utilizando el nombre definido para el producto y solución y marcamos el check “Crear directorio para la solución”

Si estás en visual studio 2019, dejaremos desmarcada la opción "Colocar la solución y el proyecto en el mismo directorio"

4. Agregaremos un nuevo proyecto de tipo Flexygo Custom DLL en la carpeta de la solución y lo llamaremos AhoraFlexy_Processes

5. Agregaremos un nuevo proyecto de tipo SQL Server > Flexygo Config Model BBDD en la carpeta de la solución y lo llamaremos AhoraFlexyBD

6. Agregaremos un nuevo proyecto de tipo SQL Server > Flexygo Data Model BBDD en la carpeta de la solución y lo llamaremos AhoraFlexy_DataBD

7. Iremos al administrador de paquetes NuGet del proyecto principal (botón derecho sobre el proyecto > Administrar paquetes nuget) y añadiremos los dos repositorios de flexygo haciendo click en la rueda de configuración de orígenes.

Flexygo https://nuget.flexygo.com/nuget
Flexygo Beta https://nuget.flexygo.com/beta/nuget

8. Haremos botón derecho sobre la solución y pulsaremos en restaurar paquetes nuget.

9. Actualizaremos el paquete nuget de flexygo a la última versión

Es un proceso que tarda unos minutos, nos daremos cuenta que ha finalizado porque carga el fichero de readme.html en pantalla.

10. Instalar CrystalReports para VisualStudio

Para solucionar las dependencias de cristal reports instalaremos la versión para desarrolladores CRforVS_13_0_22.exe

11. En el proyecto principal: quitaremos la referencia a flxCustomProcesses y en su lugar agregaremos la referencia a nuestro proyecto de procesos AhoraFlexy_Processes

12. En el proyecto AhoraFlexyBD quitaremos las dos referencias y las volveremos a agregar:

FlexygoDB desde el dacpac incluido en la carpeta db del proyecto principal con las siguiente configuración:
Y Master como referencia a la BBDD del sistema:

13. Corregiremos las dependencias fallidas del proyecto por las incluidas en el la carpeta packages\Flexygo.x.x.xx.xx\lib\net46 de nuestra solución.

14. Corregir el script de compilación de BBDD

En las propiedades del proyecto AhoraFlexyBD, iremos al apartado Eventos de compilación y cambiaremos del comando establecido el nombre flxWeb por el nombre de nuestro producto:

powershell -ExecutionPolicy Unrestricted -Command "& '$(SolutionDir)AhoraFlexy\db\mergeSSDTScripts.ps1' '$(SolutionDir)' '$(ProjectName)' '$(OutputPath)' '$(TargetPath)'"

15. Definir nombre de ensamblado y espacio de nombres.

En las propiedades de cada proyecto estableceremos el nombre correcto de ensamblado y de espacio de nombres poniéndole el mismo valor que el nombre del proyecto.

Sustituir flxDB_data por AhoraFlexy_DataBD
Sustituir flxDB_processes por AhoraFlexy_processes
Sustituir flx por AhoraFlexy
Sustituir flxDB por AhoraFlexyBD

16. Typescript

Instalaremos TypeScripty

17. Publicación

Publicaremos los dos proyectos de BBDD y modificaremos las cadenas de conexión en el web.config del proyecto principal para que apunten a estas BBDD.

18. Ejecución

Si todo ha funcionado correctamente, pulsaremos el botón en visual studio y se iniciará el proyecto con su depurador.

Crear paquete NuGet para el producto

1. Publicación AhoraFlexy

Publicaremos el proyecto principal en una carpeta publish dentro de cualquier directorio externo al proyecto. Ej: C:\Temp\Publish

2. Publicación AhoraFlexyBD

Publicaremos el proyecto de BBDD de configuración y copiaremos el dacpac resultante en la carpeta publish\db

3. Utilidades NuGet

Descargar el fichero nuget.zip y extraer al mismo nivel que la carpeta publish (según el ejemplo c:\Temp)

4. Fichero config.nuspec

Editar el fichero config.nuspec para adaptar los valores a nuestro proyecto.

5. Generar paquete NuGet

Abriremos una ventana de comandos y ejecutaremos la siguiente instrucción:

nuget pack config.nuspec

6. Instalación

Copiaremos el fichero nupkg a una carpeta junto al instalable del flexygo, este nos detectará que existe un paquete distinto a flexygo y nos preguntará si deseamos instalarlo en su lugar.
Tras ello seguiremos los pasos habituales y si todo ha funcionado correctamente tendremos nuestro producto instalado.

Crear un WebComponent propio

1. Typescript

Instalaremos TypeScript y lo configuraremos con las siguientes características (para acceder a la configuración, click derecho en el proyecto principal > Propiedades > Compilación de TypeScript):

2. Estrucutrar el proyecto

Crearemos dentro del proyecto una carpeta a la que llamaremos ahoraflexy para albergar nuestros componentes del proyecto y dentro generaremos la estrucutra "controllers", "plugins" y "wc"

3. Crear Webcomponent

Añadiremos un fichero TS con el nombre afl-carousel a nuestra carpeta wc con el siguiente código:

/**
 * @namespace ahoraflexy.ui.wc
 */

namespace ahoraflexy.ui.wc {
/**
* Library for the AflCarousel
*
* @class AflCarousel
* @constructor
* @return {aflCarousel} .
*/
    export class AflCarousel extends HTMLElement {

        constructor() {
            //If a constructor is defined, is REQUIRED call the super constructor
            super();
        }

        /**
        * Array of observed attributes. REQUIRED
        * @property observedAttributes {Array}
        */
        static get observedAttributes() {
            return ['ObjectName', 'ObjectWhere', 'ModuleName','asd'];
        }

        /**
        * Set if element has been connected to DOM
        * @property connected {boolean}
        */
        connected: boolean = false;


        /**
        * Database row Module ID
        * @property moduleName {string}
        */
        moduleName: string;

        /**
        * Component Object Name
        * @property objectName {string}
        */
        objectName: string;

        /**
        * Component Object Where
        * @property objectWhere {string}
        */
        objectWhere: string;


        /**
        * Init the webcomponent. REQUIRED.
        * @method init
        */
        init(): void {
			this.render();
        }

        /**
        * Refresh de webcomponent. REQUIRED.
        * @method refresh
        */
        refresh(): void {
			this.render();
        }

        /**
        * Render HTML data.
        * @method render
        */
        render(): void {
			$(this).html('Hola flexygo');
        }

        /**
        * Fires when element is attached to DOM
        * @method connectedCallback
        */
        connectedCallback(): void {

            let element = $(this);
            this.connected = true;

            this.objectName = element.attr("ObjectName");
            this.objectWhere = element.attr("ObjectWhere");
            this.moduleName = element.attr("ModuleName");

            this.init();

        }

        /**
        * Fires when the attribute value of the element is changed.
        * @method attributeChangedCallback
        */
        attributeChangedCallback(attrName, oldVal, newVal): void {

            let needInit: boolean = false;

            if (attrName.toLowerCase() == 'modulename' && newVal && newVal != '') {
                this.moduleName = newVal;
                needInit = true;
            } else if (attrName.toLowerCase() == 'objectname' && newVal && newVal != '') {
                this.objectName = newVal;
                needInit = true;
            } else if (attrName.toLowerCase() == 'objectwhere' && newVal && newVal != '') {
                this.objectWhere = newVal;
                needInit = true;
            }

            if (this.connected && needInit) {
                this.init();
            }
        }
    }


}

window.customElements.define("afl-carousel", ahoraflexy.ui.wc.AflCarousel);

4. Ponemos las BBDD en modo producto e insertamos el tipo de módulo y el enlace con el fichero js

update origins set active=case originid when 1 then 1 else 0 end

Insert into Interfaces_Types_JS (InterfaceTypeId,TypeId,FilePath,Description,[Order],OriginId)
values (NEWID(),-1,'~/ahoraflexy/wc/afl-carousel.js','Carousel WebComponent',999,1)

Insert into Modules_Types (TypeId,Descrip,IconName,SettingsTable,WebComponent,UseCollection,OriginId)
values ('afl-carousel','Carousel','fighter-jet','','afl-carousel',1,1)

5. Creamos un nuevo módulo y lo incluimos en la página de inicio.

6. Creamos una tabla para alojar los registros de las imágenes.

Añadimos un fichero Carousel.sql en la carpeta dbo/tables de nuestro modelo de datos

CREATE TABLE [dbo].[Carousel] (
	[ImageId] INT            NOT NULL,
	[Description]   NVARCHAR (50) NULL,
	[File]   NVARCHAR (250) NULL,
CONSTRAINT [PK_Carousel] PRIMARY KEY CLUSTERED ([ImageId] ASC)
);

Añadimos los datos estáticos al fichero data.sql en la carpeta scripts/data de nuestro modelo de datos

Insert into Carousel (ImageId,[Description],[File]) values (1,'Foto 1','~/img/loading1.gif')
Insert into Carousel (ImageId,[Description],[File]) values (2,'Foto 2','~/img/loading2.gif')
Insert into Carousel (ImageId,[Description],[File]) values (3,'Foto 3','~/img/loading3.gif')
Insert into Carousel (ImageId,[Description],[File]) values (4,'Foto 4','~/img/loading4.gif')

IMPORTANTE volver a publicar la base de datos despues de completar estos pasos

7. Añadir un controlador de servidor

Para este caso crearemos un controller llamado CarouselController.vb con el siguiente código:

Imports System.Web.Mvc
Imports FLEXYGO
Imports FLEXYGO.Environment
Imports FLEXYGO.Web
Imports FLEXYGO.Utilities.General.Util
Imports FLEXYGO.Data
Imports FLEXYGO.Utilities.SQL.SQLUtilities

Namespace ahoraflexy.controllers

    ''' <summary>
    ''' Class CarouselController.
    ''' Allows Process execution by process Id or process name
    ''' </summary>
    <SessionState(System.Web.SessionState.SessionStateBehavior.ReadOnly)>
    Public Class CarouselController
        Inherits FlxController

        ''' <summary>
        ''' Reads data for carousel module
        ''' </summary>
        ''' <param name="ObjectName">Object name.</param>
        ''' <param name="ObjectWhere">The object where.</param>
        ''' <param name="ModuleName">The module identifier.</param>
        ''' <returns>returns list of images as ActionResult.</returns>
        <Compress>
        Public Function GetData(ByVal ObjectName As String, ByVal ObjectWhere As String, ByVal ModuleName As String) As ActionResult

            Try

                'Dim modDef As ModuleDefinition = GlobalVars.ConfToken.EnvironmentSettings.GetModule(ModuleName)


                Return Json(ReadImages())

            Catch ex As Exception
                Return Json(ajaxError.ajaxException("Error in GetData GetData", ex, Response))
            End Try

        End Function

        ''' <summary>
        ''' Reads data images for carousel module
        ''' </summary>
        ''' <returns>returns list of images</returns>
        Public Function ReadImages() As List(Of FLEXYGO.Utilities.General.BaseCollection)

            Dim dm As New DataManager(GlobalVars.ConfToken.UserSecurity.ConnectionStrings("DataConnectionString"))

            Dim dt As DataTable = dm.DataTable("Select * from carousel")

            If dm.LastException IsNot Nothing Then
                Throw New InvalidOperationException("Error leyendo datos", dm.LastException)
            End If

            Return DataTableToList(dt, Nothing)


        End Function

    End Class
End Namespace

8. Añadir el plugin y referenciarlo en la BBDD de configuración

Descargar el fichero jR3DCarousel.min.js y dejarlo en la carpeta AhoraFlexy/plugins

Insert into Plugins (PluginId,[Path],Descrip,[Order],typeId,Bundle,[Enabled],OriginId) values (newid(),'~/AhoraFlexy/plugins/jR3DCarousel.min.js','jR3DCarousel JS',999,0,1,1,1)

9. Llamar al controller desde el Webcomponent

Añadimos a nuestro webcomponent la función loadData() y la invocamos desde el render()

/**
* Render HTML data.
* @method render
*/
render(): void {
	this.loadData()
}

 /**
* Calls controller and load carousel
* @method render
*/
loadData(): void {

	let me = $(this);

	let params = {
		ObjectName: me.attr('ObjectName'),
		ObjectWhere: me.attr('ObjectWhere'),
		ModuleName: this.moduleName
	};

	flexygo.ajax.post('~/api/Carousel', 'getData', params, (response) => {
		if (response) {
			debugger;
			let imgs = new Array();
			for (let i = 0; i < response.length; i++) {
				imgs.push({ src: flexygo.utils.resolveUrl(response[i].File) })
			}
			let carr = $('<div class="carrousel"><div>')
			me.html(carr);
			carr.jR3DCarousel({ slides: imgs });
		}
	});
}

10. Recargamos la caché y la página, el resultado debería ser este:

11. Generamos los scripts de configuración de producto:

Borramos todos los ficheros de la carpeta scripts/data de nuestra BBDD de configuración.

Si es la primera vez que trabajamos con esta BBDD activar el cmd_shell ejecutando el siguiente comando:

			  -- To allow advanced options to be changed.
				EXEC sp_configure 'show advanced options', 1;
				GO
				-- To update the currently configured value for advanced options.
				RECONFIGURE with override;
				GO
				-- To enable the feature.
				EXEC sp_configure 'xp_cmdshell', 1;
				GO
				-- To update the currently configured value for this feature.
				RECONFIGURE with override;
				GO

Revisamos permisos de la carpeta scripts/data:

Ejecutamos el siguiente script en la BBDD para generar los datos estáticos:

			  zscript 1, 'C:\temp\AhoraFlexy\AhoraFlexyBD\scripts\data'

Incluimos los nuevos ficheros que hayan aparecido, asignamos la opción de compilación de sus propiedades a Ninguno y los referenciamos en el fichero scripts/Script.PostDeployment.sql:

12. Publicamos la BBDD y nos aseguramos que todo sigue correcto.

Agregar un test unitario

1. Agregamos un nuevo proyecto AhoraFlexyUnitTest

2. Agregamos las referencias necesarias

System.web la agregaremos de los ensamblados y el resto del paquete nuget de flexygo

3. Añadiremos los datos de configuración necesarios

Si Visual Studio nos añade un espacio de nombres en el nombre de la cadena de conexión lo elimiaremos.

4. Añadiremos el código del test a la clase.

Imports FLEXYGO.Configuration.Tokens
Imports FLEXYGO.Objects
Imports FLEXYGO.Objects.Settings
Imports FLEXYGO.Security
Imports FLEXYGO.Data
Imports FLEXYGO.Web
Imports FLEXYGO.Mocks

<TestClass()> Public Class UnitTest1

    ''' <summary>
    ''' The User name
    ''' </summary>
    Friend UserName As String = My.Settings.UserName
    ''' <summary>
    ''' The configuration connection string
    ''' </summary>
    Friend ConfConnString As String = My.Settings.ConfConnectionString
    ''' <summary>
    ''' The data cons string
    ''' </summary>
    Friend DataConsString As String = My.Settings.DataConnectionString
    ''' <summary>
    ''' The user group
    ''' </summary>
    Friend UserGroup As String = My.Settings.UserGroup

    ''' <summary>
    ''' The Settings database connection
    ''' </summary>
    Friend ConfDBConnection As New UserConnection("ConfConnectionString", ConfConnString, 0)
    ''' <summary>
    ''' The data database connection
    ''' </summary>
    Friend DataDBConnection As New UserConnection("DataConnectionString", DataConsString, 0)

    ''' <summary>
    ''' The User Connection Strings
    ''' </summary>
    Friend _ConnectionStrings As New UserConnectionCollection(ConfDBConnection, DataDBConnection)

    ''' <summary>
    ''' The configuration token
    ''' </summary>
    Friend _conftoken As New ConfToken(New UserConnectionCollection("ConfConnectionString", "DataConnectionString"), UserName)
    ''' <summary>
    ''' The User security Configuration
    ''' </summary>
    Friend _ConfUserSecurity As UserSecurityConfig = _conftoken.UserSecurity


    Public Sub New()
        If System.Web.HttpContext.Current Is Nothing Then
            HttpContextManager.SetCurrentContext(MockHelper.GetMockedHttpContext, UserName)
        End If
    End Sub

    Public Sub SetConfToken(lConfToken As ConfToken, Optional HTMLFormat As Boolean = False)
        Me.UserName = lConfToken.UserSecurity.UserName
        Me.ConfConnString = lConfToken.ConfConnString
        Me.DataConsString = lConfToken.UserSecurity.ConnectionStrings.MainDataConnString
        Me.UserGroup = My.Settings.UserGroup
        Me.ConfDBConnection = New UserConnection("ConfConnectionString", ConfConnString, 0)
        Me.DataDBConnection = New UserConnection("DataConnectionString", DataConsString, 0)
        Me._ConnectionStrings = New UserConnectionCollection(ConfDBConnection, DataDBConnection)
        Me._conftoken = lConfToken
        Me._ConfUserSecurity = lConfToken.UserSecurity
    End Sub

    <TestMethod()> Public Sub TestImageController()


        If Not MySession.Contains("ConfToken") Then
            GlobalVars.SetConfToken(_conftoken)
        End If
        Try

            Dim ctl As New AhoraFlexy.Controllers.CarouselController

            Dim res As List(Of FLEXYGO.Utilities.General.BaseCollection) = ctl.ReadImages()

            For Each itm As FLEXYGO.Utilities.General.BaseCollection In res

                Dim File As String = itm("File").ToString.Replace("~", My.Settings.Path).Replace("/", "\")

                If Not System.IO.File.Exists(File) Then
                    Assert.Fail(String.Format("File {0} not found", File))
                End If

            Next


        Catch ex As Exception
            Assert.Fail("Error in TestEntityController:" + vbCrLf + ex.Message)
        End Try
    End Sub

End Class

5. Abrimos el explorador de pruebas y ejecutamos las pruebas para comprobar que todo está OK.

Agregar un test de interfaz

PREREQUISITOS: Node.JS, Visual Studio 2022 y publicación web.

Para poder usar playwright es necesario tener instalado Node.JS, Visual Studio 2022 y publicada la web a testear en una url, para este ejemplo usaremos: http://localhost/Sample_Project

1. Agregamos un nuevo proyecto AhoraFlexyInterfaceTest

2. Abrimos una ventana de powershell haciendo click derecho sobre nuestro proyecto > Abrir en terminal

3. Ejecutamos el comando powershell ./bin/Debug/net6.0/playwright.ps1 codegen http://localhost/Sample_Project para abrir el grabador de test.
Si es la primera vez que lo ejecutamos, nos dará un error de permisos y deberemos ejecutar previamente el comando Set-ExecutionPolicy Unrestricted

4. Se nos abrirá un asistente que generará el código automáticamente según vamos navegando por nuestra aplicación:

5. Copiaremos y pegaremos el código autogenerado que nos interese a la clase en el espacio asignado a tal fin.

6. Configuraremos los parametros por defecto en el fichero appsettings.json o los especificos de nuestro pc en appsettings.local.json .

7. Abrimos el explorador de pruebas y ejecutamos las pruebas para comprobar que todo está OK.

8. Podemos abrir la traza del test usando el comando de powershell ./bin/Debug/net6.0/playwright.ps1 show-trace ./Sample_Project_InterfaceTest/bin/Debug/net6.0/tracing/SaveObject.zip.