PrimeNG

 La mejor alternativa para desarrollar con angular

una amplia variedad de componentes, muy estable de excelente calidad 

PrimeNG

Aquí les dejo el video en español de la hoja de ruta de prime ng

UI5 Web Components con Angular 11

Habiendo desarrollado hace poco unos proyectos de gestión financiera, siempre estaba la discusión de que estilo que colores en la UI se iba a utilizar,  el framework a usar para Front End,  Back End, etc temas a discutir con maquetadores, diseñadores, áreas de usabilidad que casi siempre brillan por su ausencia ... etc etc etc.

así que investigando vi como un grande de los ERP, como SAP a evolucionado su plataforma hasta llegar a la web, y han creado OpenUI5 y UI5 Web Components, y me pareció muy útil , buena legibilidad, en su diseño, los tipos de fuentes, entre otras cosas

aquí dejo el link : UI5 Web Components

 

Ahora para usarlo en Angular, hay que instalar lo siguiente:

npm install @ui5/webcomponents

npm i @ui5/webcomponents-fiori

Para data binding, se ayuda de la librería Origami

npm install @codebakery/origami

Luego importamos los módulos dentro de app.module.ts

y para terminar de configurar hay que setear el schema  CUSTOM_ELEMENTS_SCHEMA

import { NgModule, CUSTOM_ELEMENTS_SCHEMA, APP_INITIALIZER } from '@angular/core';

@NgModule({

  declarations: [

    AppComponent,

    HomeComponent

  ],

  schemas: [CUSTOM_ELEMENTS_SCHEMA],

  imports: [

    BrowserModule,

    OrigamiFormsModule,

    HttpClientModule,

    AppRoutingModule,

    FormsModule,

    ReactiveFormsModule,

    LayoutsModule,

    AuthModule,

    SharedModule,

  ],

  providers: [

    {

        provide: APP_INITIALIZER,

        useFactory: onAppInit,

        multi: true

    },

  ],

  bootstrap: [AppComponent]

})

export class AppModule { }

Para el header de la página podemos usar el componente Shellbar

<ui5-shellbar id="shellbar" (click)="onShellBar($event)" primary-title="Optimus ERP"

 secondary-title="ESoftware"  show-co-pilot show-notifications

  show-product-switch>

  <ui5-avatar id="userInfo"  slot="profile" 

image="./../../../../assets/avatar/empty-user.jpg">

  </ui5-avatar>

  <ui5-button icon="nav-back" slot="startButton"></ui5-button>

  <ui5-button icon="menu" slot="startButton" id="startButton"></ui5-button>

</ui5-shellbar>

y para la navegación usamos el side-navigation

<ui5-side-navigation>

  <ui5-side-navigation-item text="Home" icon="home"  ></ui5-side-navigation-item>

  <ui5-side-navigation-item expanded    *ngFor="let item of UI_MENU_LIST" 

        [text]="item.Description" expanded [icon]="item.image">

    <ui5-side-navigation-sub-item  *ngFor="let menu of item.items"

         [text]="menu.Description"></ui5-side-navigation-sub-item>

  </ui5-side-navigation-item>

</ui5-side-navigation>

como pueden observar nos valemos de *ngFor, para mostrar los datos que vienen del servicio y obtenemos el poder de reactividad

en los input, para que funcione bien la reactividad al momento que usamos el :

formControlName="UserName"

se debería usar el atributo ngDefaultControl

 <ui5-input style="width: 100%" id="UserName" 

        placeholder="Enter your Name" required formControlName="UserName"

        ngDefaultControl origami></ui5-input>

y vamos a obtener una interfaz de este tipo:

personalmente veo una buena opción para no batallar mucho con el tema de estilos, formas, etc etc ya que aquí tenemos una presentación muy estilizada, profesional .. 

ahora un tema en contra, es que el equipo de UI5, esta trabajando en mejorar los componentes y la forma de trabajar con los eventos, no es como lo hacemos nativamente en Angular, si no como las viejas apps con java script.

en el ejemplo, en el componente ShellBar (Header), si quiero capturar el evento click , en Angular seria (click)="funcion()", si bien es cierto esto funciona, pero no capturamos el Handler del $event y lo tenemos que hacer en un js por separado y luego tenemos que inyectarlo 

El archivo .js quedaría como lo siguiente:

const load = function(){

  shellbar.addEventListener("profile-click", function (event) {

    //console.log(event.detail.targetRef);

    popover.openBy(event.detail.targetRef);

  });

}

module.exports = {load : load};

y en mi componente header.ts hacemos lo siguiente:

var h = require('./../header/header.js');

ngOnInit(): void {

     h.load();    

  }

Todo lo que describo en el post, está en la documentación, pero acá lo simplifico un poco.

espero sirva de ayuda

Type Script y GenCode Studio r 3.0

Amigos

Con Gencode, podemos  crear fácilmente las clases para nuestro modelo de datos con TypeScript en nuestros proyectos de angular.

Ahora se ha incorporado la función %datatype-ts%, que nos permite asignar el tipo de dato correcto según el motor de la base de datos

Sólo habría que asignar una plantilla adecuada y GenCode hará el trabajo

export class %tablename% {
  
  for%
      %columnname% :  %datatype-ts%  
  %for

}

Ejemplo: al seleccionar la tabla ManageRole, segun la plantilla el resultado es el siguiente:

Quasar y VueJS

Después de mucho tiempo para ser más exactos 4 años ..., vuelvo a publicar en mi blog esta vez hablare sobre Quasar, un framewok basado en VueJS, para desarrollar aplicaciones responsivas tanto para Web, Windows, IOS y Android.

Sólo hay que modificar el target de compilación y le decimos para que plataforma lo queremos, si así es... y tan solo con Html5, CSS y VueJS.

Esto me parece muy bueno ya que Quasar nos provee de muchos controles para nuestras aplicaciones y con el uso de VueJS la potencia que tiene es enorme y nos deja a nuestra creatividad e imaginación para desarrollar muchas cosas, sumado a esto el uso de Axios, Router, Vuex ... etc ni que decir.

Unos de los requisitos principales es el conocimiento de NodeJS felizmente existe mucha documentación del tema.

Aquí les dejo el link Quasar 

Quasar

Los pasos para iniciar un proyecto en Quasar son los siguientes:

• Si no está instalado el Framework de Quasar en la PC hay que instalarlo por única vez por medio de la terminal con el siguiente comando: npm install -g @quasar/cli
• Creamos el proyecto, con el comando $ quasar create y le decimos que opciones necesitamos usar, van desde axios, vuex .. etc

Seguido de ello ya se genera un layout completamente funcional y responsivo y con VueJS empezamos a dar forma a nuestra imaginación.

por ejemplo, crear componentes Vue o agregar páginas, es bajo el mismo concepto de Single File Component 

<template> </template> <script> // This is where your Javascript goes // to define your Vue component, which // can be a Layout, a Page or your own // component used throughout the app. export default { // } </script> <style> /* This is where your CSS goes */ </style>

La estructura de directorios es conocida si ya antes han trabajado con WebPack

. ├── src/ │ ├── assets/ # dynamic assets (processed by webpack) │ ├── statics/ # pure static assets (directly copied) │ ├── components/ # .vue components used in pages & layouts │ ├── css/ # CSS/Stylus/Sass/... files for your app | | ├── app.styl | │ └── quasar.variables.styl # Quasar Stylus variables for you to tweak │ ├── layouts/ # layout .vue files │ ├── pages/ # page .vue files │ ├── boot/ # boot files (app initialization code) │ ├── router/ # Vue Router | | ├── index.js # Vue Router definition | │ └── routes.js # App Routes definitions │ ├── store/ # Vuex Store | | ├── index.js # Vuex Store definition | │ ├── <folder> # Vuex Store Module... | │ └── <folder> # Vuex Store Module... │ ├── App.vue # root Vue component of your App │ └── index.template.html # Template for index.html ├── src-ssr/ # SSR specific code (like production Node webserver) ├── src-pwa/ # PWA specific code (like Service Worker) ├── src-cordova/ # Cordova generated folder used to create Mobile Apps ├── src-electron/ # Electron specific code (like "main" thread) ├── src-bex/ # BEX (browser extension) specific code (like "main" thread) ├── dist/ # where production builds go │ ├── spa/ # example when building SPA │ ├── ssr/ # example when building SSR │ ├── electron/ # example when building Electron │ └── .... ├── quasar.conf.js # Quasar App Config file ├── babel.config.js # Babeljs config ├── .editorconfig # editor config ├── .eslintignore # ESlint ignore paths ├── .eslintrc.js # ESlint config ├── .postcssrc.js # PostCSS config ├── .stylintrc # Stylus lint config ├── .gitignore # GIT ignore paths ├── package.json # npm scripts and dependencies └── README.md # readme for your website/App

Sólo necesitamos de Visual Studio Code, para porder hacer uso de esta tecnologia, ahora para nuestro BackEnd, podemos usar cualquier tecnologia en la que podamos implementar nuestras api, web api, micro servicios, rest ....

por ejemplo una web api creada en C# con Netcore 2.1

using ESoftware.Optimus.BusinessEntity;
using ESoftware.Optimus.BusinessLogic;
using Microsoft.AspNetCore.Mvc;

namespace ESoftware.Optimus.Api.Controllers
{
    [Route("api/Preferences")]
    [ApiController]
    public class PreferencesController : ControllerBase
    {
        private readonly PreferencesBL oBL;
        public PreferencesController(PreferencesBL obl)
        {
            oBL = obl;
        }


        [Route("Insert")]
        [HttpPost]
        public JsonResult Insert(PreferencesBE oEntity)
        {
            return new JsonResult(oBL.Insert(oEntity));
        }

        [Route("Update")]
        [HttpPost]
        public JsonResult Update(PreferencesBE oEntity)
        {
            return new JsonResult(oBL.Update(oEntity));
        }

      


        [Route("GetByUserID")]
        [HttpGet]
        public IActionResult GetByUserID(int USR_ERP_ID)
        {
            return new JsonResult(oBL.GetByUserID(USR_ERP_ID));
        }



    }
}

para poder hacer uso o consumir la api y asignar los valores al localStorage, desde VueJS, hacemos uso de axios

//Obtener el preferences
axiosInstance
.get("api/Preferences/GetByUserID?USR_ERP_ID=" + self.oEntity.USR_ERP_ID)
     .then(preferencesResponse => {
                LocalStorage.set("_preferences", preferencesResponse.data);
 });

El resultado es una page, rápida profesional, ya que el uso de Router, nos permite navegar entre las page sin ver el postbak esto hace que la carga se muy rápida para el usuario

Eloy

Java Script + MVC con GenCode Studio 2.0

En esta oportunidad vamos a generar Java Script con GenCode Studio, con base a una plantilla , que nos va a permitir generar dicho código y poder dar funcionalidad a una vista en MVC, para que muestre datos en un agrilla de kendo

ver video:

GenCode Con JavaScript y MVC

Él código de la plantilla es el siguiente:

$(document).ready(function(){
    
   GetSearh();

});

function GetSearh() {
    var oParameter = {};
    
    $("#grid%tablename%").kendoGrid({
    type: "json",
    resizable: true,
    selectable: true,
    sortable: true,
    pageable: {
        pageSizes: [10, 25, 50, 100]
    },
    dataSource: {
        serverPaging: true,
        serverSorting: false,
        pageSize: 10,
        height: '300px',
        width: '1200',
        transport: {
            read: {
                url: '%tablename%/Get%tablename%Paged',
                contentType: 'application/json; charset=utf-8',
                type: "GET",
                dataType: "json"
            },
            parameterMap: function (options) {
                oParameter.PageNumber = options.page;
                oParameter.PageSize = options.pageSize;
                return oParameter;
            }
        },
        schema: {
            data: function (result) {
                return result;
            },
            
            total: function (result) {
                if (result!= undefined) {
                    return result[0].VirtualCount;
                }
                
            }
        }
    },
    columns: [
        for%
            { field: "%columnname%", title: "%columnname%", width: 10 },
        %for
    ]
    });
}

Modificar el Local Path en el TFS

Varios me han preguntado de como cambiar el Local Path del Workspace en el TFS, pues asi como yo es seguro que varios han tenido que solucionarlo, bueno aca les dejo los pasos


Ir a lista de Workspace























Seleccionar el Workspace





































Editar el Local Path

Crear código java script con GenCode Studio

Voy a dejar una plantilla básica para generar código en java script, usando GenCode Studio r1.0

$(document).ready(function () {

    Clear();
    $("#btnClear").on("click", function () { Clear();})
});

function Clear() {
    for%
        $("#%columnname%").val("");
    %for
}

function GetData(id) {
     $.ajax({
        type: "GET",
        url: urlBase + "api/GetList",
        datatype: "json",
        success: function (data) {
            
        }
    });
}

function InsertData() {
    var oEntity = {
       for%
           %columnname% :$("#%columnname%").val(),
        %for
    }

    var response = $.post(urlBase + "api/Insert", oEntity, function (response) {
        Clear();
    });
    response.fail(function () { alert("Fail!"); });
    
}

function UpdateData() {

}

function DeleteData() {

}

aca les dejo un video, de como hacerlo:

https://www.youtube.com/watch?v=8moYnSAg1Xs