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.ahorabh.com/v3/index.json

---

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

Nota importante: tenga en cuenta, por restricciones del propio entorno SAP, que para poder instalarlo deberá tener en ese preciso momento una versión VS 2017 ó inferior, aunque luego vaya a desarrollar en versiones posteriores

---

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 TypeScript

---

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.

---

1. Publicación AhoraFlexy

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

Una vez publicado copiaremos a esta carpeta Publish la carpeta Scripts que se ubica en el proyecto principal si la tuviera.

---

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.

---

1. Typescript

Instalaremos el nuget de TypeScript 5.0.4, tal y como se ve en la captura (click derecho en el proyecto principal > Administrar paquetes NuGet):

Una vez instalado revisaremos que la configuración de typescript del proyecto se ajuste a la de la imagen (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.

---

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.

---

---

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.

---