lunes, 4 de mayo de 2020

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

viernes, 19 de febrero de 2016

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:





É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
    ]
    });
}

jueves, 30 de julio de 2015

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
























sábado, 11 de julio de 2015

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

domingo, 14 de junio de 2015

jsTree y Web Api

Después de buen tiempo voy a postear una nota sobre el uso del jsTree, que me parece muy práctico.

vámos a obtener los datos desde una web api que devuelve json para poder popular el jstree


Pasos:

1. Referenciar el js en la pagina


2. Elemento donde se va a renderizar el jsTree

                  




3. la API
       Entidad: creamos la estructura que necesita el jstree para poder crear un árbol

    

El método de la API

       [HttpGet]
        public HttpResponseMessage GetMenuList()
        {
            List oList = new List();
            List oMenuList = new BLMenu().GetMenuListAll();

            foreach (var item in oMenuList)
            {
                oList.Add(new BEJSTree()
                {
                    text = item.LongDescription,
                    parent = (item.MenuParentID == 0 ? "#" :              item.MenuParentID.ToString()),
                    icon = NullSafe.GetValueOrDefault(item.Icon),
                    id = item.MenuID.ToString()
                });
            }

            return Request.CreateResponse(HttpStatusCode.OK, oList);
        }


4. El Script

  function GetTreeView() {
    $.ajax({
        type: "GET",
        //url: "/Security/GetMenuList",
        url: urlBase + "api/MenuWebApi/GetMenuList",
        datatype: "json",
        success: function (data) {
            menuList = data;
            $('#tree-menu').jstree({
                'core': {
                    "animation": 0,
                    'check_callback': true,
                    "themes": { "stripes": true },
                    'data': menuList
                },
                "checkbox": {
                    "keep_selected_style": false
                },
                "plugins": ['types', "themes", "json_data", "dnd", "wholerow"],
                
            }).on('changed.jstree', function (e, data) {
                var i, j, r = [];
                for (i = 0, j = data.selected.length; i < j; i++) {
                    
                    r.push(data.instance.get_node(data.selected[i]).id, data.instance.get_node(data.selected[i]).text);

                }
               
            });
        }
    });    
}


5. Resultado

  datos de prueba


  Renderizado




más información en la web de jstree:
http://www.jstree.com/


miércoles, 24 de diciembre de 2014

Crear un Template en GenCode Studio para Stored Procedure Paginados

Amigos aca les dejo un video de como crear un template para Stored Procedure Paginados

Video de GenCode Studio y Template para SP Paginado







USE %db-name%
GO

CREATE PROCEDURE %db-schema%.usp_%tablename%_PagedList
(
  @pPageNumber int,
  @pPageSize int
)
AS SET NOCOUNT ON
BEGIN
    
    DECLARE @ROWSTART int 
    DECLARE @ROWEND int
    DECLARE @pVirtualCount bigint
    
    IF (@pPageNumber IS NULL)
        SET @pPageNumber = 1;
    
   SET @ROWSTART = (@pPageNumber - 1)* @pPageSize +1;
   SET @ROWEND =  @ROWSTART + @pPageSize -1;
   
   SELECT
      %db-columns%
      ,ROW_NUMBER() OVER(ORDER BY %set-db-key%) AS _ROW
   INTO #RESULTS
   FROM  %db-schema%.%tablename%
   
   SET @pVirtualCount = @@ROWCOUNT
   
   
   SELECT TOP(@pPageSize)
      %db-columns%
      ,@pVirtualCount AS VirtualCount
   FROM #RESULTS
   WHERE  _ROW BETWEEN @ROWSTART AND @ROWEND
   ORDER BY %set-db-key%
   
   DROP TABLE #RESULTS
    
    
    SET NOCOUNT OFF
END

sábado, 20 de diciembre de 2014

GenCode Studio r 1.0

Funcionalidad del nuevo GenCode Studio r 1.0

GenCode Studio Video