lunedì 9 settembre 2024

Angular creazione di tabella paginata con TypeScript

Si riporta l'articolo scritto per il sito https://www.iprogrammatori.it/articoli/javascript/art_angular-creazione-di-tabella-paginata-con-typescri_1876.aspx

In questo articolo vedremo come realizzare una semplice tabella html, ma con la paginazione dei dati.
Nella gestione dei dati, spesso si ha la necessità di raggruppare i dati in pagine, in modo da visualizzare di volta in volta i risultati da una fonte dati.
La tecnica della paginazione torna utile anche nel visualizzare in maniera ottimale ed elegante il risultato dell’estrazione dei dati, qualora questi sono tanti e di difficile lettura in una sola pagina.
In questo articolo vedremo come usare il linguaggio TypeScript e la tecnologia Angular per visualizzare i dati da un array (ma possono essere estrapolati anche da una fonte dati o altro) in maniera paginata.
Il tutto sarà come mostrato in figura 1.



Figura 1 - La tabella paginata

Creazione del progetto

Si crea un nuovo progetto di Angular, va benissimo qualsiasi versione, in quanto la paginazione avviene con il linguaggio base di TypeScript e gli standard della tecnologia Angular.
Dopo aver creato il progetto, si crea una nuova classe, che potremmo chiamare “Nominativi”, tramite la voce di menu Nuova classe oppure tramite il seguente comando dal prompt.
ng generate class Nominativi
oppure in forma abbreviata tramite il seguente comando.

ng g cl Nominativi.

Stesura del codice

Terminata la creazione del progetto e della classe non resta che scrivere il codice per realizzare il nostro applicativo e soprattutto applicare la tecnica della paginazione.
La classe sarà utilizzata come model, o meglio per rappresentare i dati, avremo una serie di record con due colonne, quali nome e cognome, che sono rappresentate dalle proprietà della classe.
Di seguito si riporta il codice completo della classe denominata “Nominativi”, in TypeScript.


TypeScript:

export class Nominativi{

 

  public Nome: string;

  public Cognome: string;

  public constructor(nome: string, cognome: string  ) {

 

    this.Nome = nome;

    this.Cognome = cognome;

 

  }

 

}

 

Ora non resta che modificare il file della nostra pagina, utilizzeremo la prima pagina html che viene creata quando si crea un nuovo progetto, quella che di default viene generata con il nome “app.component” .
Si creano due oggetti di tipo array nominativi, che avranno il compito di contenere i dati, un oggetto che conterrà sempre i dati completi, mentre un altro oggetto (denominato dati) conterrà solo quelli di paginazione.
A questi due oggetti, si creano due variabili di tipo numerico, che avranno il compito di visualizzare gli elementi per pagina (denominata elementiPerPagina) con il valore impostato a 10, ed una variabile indicante l’indice della pagina (denominata indicePagina).
Di seguito si riporta il frammento di codice delle suddette operazioni.

TypeScript:

export class AppComponent implements OnInit {

 arrayNominativi: Nominativi[] = [];

 public Dati : Nominativi[] = [];

 indicePagina: number = 1;

 elementiPerPagina: number = 10;

 

 }

 

 

 


Nell’evento di apertura pagina (NgInit) dobbiamo valorizzare le due variabili di tipo array nominativi con una fonte dati, per simulare tale gestione, faremo un ciclo for degli stessi elementi ripetuto per 40 volte.
Di seguito si riporta il frammento di codice completo delle suddette operazioni.

TypeScript:

ngOnInit(): void {

 

   this.arrayNominativi.push( new Nominativi("Emanuele", "Mattei"));

   this.arrayNominativi.push( new Nominativi("Emanuele", "Mattei"));

    for (let Contatore = 1; Contatore < 40; Contatore++) {

      this.arrayNominativi.push( new Nominativi("Emanuele" + Contatore, "Mattei" + Contatore));

      this.arrayNominativi.push( new Nominativi("Luigi"+ Contatore, "Cristaldi"+ Contatore));

 

    }

 

    this.Dati = this.arrayNominativi.slice(0,10);

 

 

  }

 


La simulazione del caricamento dati da una fonte dati, è terminato, ora occorre creare le funzioni, che verranno eseguite quando si fa click sui vari pulsanti.
In particolare, avremo 4 pulsante, ed ognuno tramite l’evento click richiamerà una determinata funzione. I pulsanti sono inizio, che visualizzerà i dati relativi all’inizio, pulsante di fine, che visualizzerà gli ultimi dati della lista, ed il pulsante indietro che visualizzerà i dati precedenti) ed un pulsante avanti, che visualizzerà i successivi record.
Di seguito si riporta il frammento di codice per le operazioni di spostamento.


TypeScript:

public Inizio():void{

 

  this.Dati = this.arrayNominativi.slice(0,10);

  this.indicePagina = 1;

}

 

public Indietro():void{

 

  if(this.indicePagina==0)

    return;

 

  this.Dati = this.arrayNominativi.slice((this.indicePagina-1)*this.elementiPerPagina, this.indicePagina * this.elementiPerPagina);

 

  this.indicePagina -= 1;

 

}

 

public Avanti():void{

  if((this.arrayNominativi.length / this.elementiPerPagina) == this.indicePagina)

    return;

  this.indicePagina += 1;

  this.Dati = this.arrayNominativi.slice((this.indicePagina-1)*this.elementiPerPagina, this.indicePagina * this.elementiPerPagina);

 

}

 

public Fine():void{

 

  this.Dati = this.arrayNominativi.slice(this.arrayNominativi.length-10,this.arrayNominativi.length);

 this.indicePagina = this.arrayNominativi.length / this.elementiPerPagina -1;

}

 

Ora dobbiamo creare una tabella html, che visualizzerà a video i dati paginati.

Il codice html è quello di una tabella normale, con quattro pulsanti, e verranno visualizzati i dati relativo all’oggetto di tipo Arrary denominato in precedenza “Dati”.

Di seguito si riporta il frammento di codice della pagina HTML.




HTML

<table>

  <thead>

    <tr>

      <th style="color: green; width: 200px; text-align: center;">Nome</th>

      <th style="color: green; width: 200px; text-align: center;">Cognome</th>

    </tr>

 

  </thead>

 <tbody>

  <tr *ngFor="let elemento of Dati">

    <td style="width: 100px;  text-align: center;">{{elemento.Nome}}</td>

    <td style="width: 100px;  text-align: center;">{{elemento.Cognome}}</td>

  </tr>

<br><br>

<tr  >

  <td  style="height: 30px; width: 100px; text-align: center;"><button (click)="Inizio();" ><<</button> <button (click)="Indietro();"  ><</button> </td>

  <td style="height: 30px; width: 100px; text-align: center;"><button (click)="Avanti();"  >></button> <button (click)="Fine();"  >>></button></td>

 

</tr>

 </tbody>

 

</table>

 

 







Per ogni evento di un pulsante, verrà eseguito una determinata funzione, un pulsante che porta all’inizio, uno che visualizza i dati precedenti, un altro successivo ed in fine gli ultimi dati dell’oggetto array.

Conclusioni

L’articolo ha voluto fornire al lettore le basi di una tecnica di paginazione dei dati. Tecnica che può divenire utile qualora si ha la necessità di visualizzare i dati in maniera ordinata e non tutti in visualizzazione, comportando anche problemi di lettura.
Ricordiamo che sono presenti vari framework, tra cui Material, di cui sono dotati di controlli (per esempio table) che permettono di visualizzare i dati in maniera paginata.

domenica 8 settembre 2024

download gratuito ebook di introduzione a RX.Net

 


Disponibile gratuitamente e senza registrazione o senza lasciare email, un ebook in lingua inglese che introduce il lettore alla programmazione rx.Net .

Dal seguente sito https://endjin.com/blog/2024/01/introduction-to-rx-dotnet-2nd-edition-book-available-for-free è possibile scaricare in formato pdf, o formato dispositivi mobile o consultare online l'ebook su rx.Net.

Qui https://endjincdn.blob.core.windows.net/assets/ebooks/introduction-to-rx-dotnet/introduction-to-rx-dotnet-2nd-edition.pdf è possibile scaricare il file pdf. 

sabato 7 settembre 2024

c# open file with default program

Il frammento di codice qui di seguito, illustra una tecnica per aprire un file con il programma associato a quel tipo di file, il programma di default.

 string percorsoNomeFile = @"C:\varie\test.txt";
Process.Start(new ProcessStartInfo(percorsoNomeFile) { UseShellExecute = true });

Si ricorda di inserire lo spazio dei nomi seguente:

using System.Diagnostics;

venerdì 6 settembre 2024

C# leggere il qr code in Raspberry e Windows con .Net 8

Si riporta l'articolo scritto per il sito https://www.iprogrammatori.it/articoli/microsoft-net-framework/art_csharp-leggere-il-qr-code-in-raspberry-e-windows-c_1875.aspx



In questo articolo vedremo come creare un’applicazioni eseguibile, da eseguire in Windows ed una da far girare nella microscheda Rasperry PI 4.
Vedremo come realizzare due progetti con l’ultima versione del Framework, la 8 e l’ambiente di sviluppo Visual Studio 2022 Community, programmi per leggere da un file immagine di tipo QrCode il contenuto e visualizzare il risultato.
Per quanto riguarda la visualizzazione in ambiente Windows, verrà visualizzato il risultato in una casella di testo, come riportato in figura 1.


Figura 1 – il risultato della lettura del qr code

Mentre per quanto riguarda l’ambiente Raspberry PI 4, verrà visualizzato in una console, il tutto come riportato in figura 2.

Figura 2 – Il risultato della lettura del qr code nella console di Raspberry 

Prima di procedere alla creazione dei progetti, dobbiamo avere un qr code, oppure crearlo. Nel caso che non si ha un file immagine di Qr Code, apriamo dal nostro browser (edge o Chrome) il sito www.iprogrammatori.it ed una volta aperto, facciamo click con il destro del mouse nel sito, e tra le voci di menu selezioniamo la voce “Crea un codice a matrice per questa pagina” oppure “crea codice Qr per questa pagina” nel caso di Chrome.
Salviamo nella cartella “net8.0-windows” situata sotto alla cartella “debug”, dove viene eseguito il nostro programma impostando con il nome “qrcode.png”.

Creazione del progetto

Si crea un nuovo progetto di tipo Windows Form , in particolare il modello “App Windows Forms”, assegnare un nome al progetto, e selezionare l’ultima versione del Framework, nel nostro caso nel momento in cui stiamo scrivendo è la 8.
Una volta visualizzata la form, inseriamo un controllo di tipo “TextBox”, che avrà la proprietà “Name” impostata con il valore “TxtTesto”, inseriamo un pulsante con la proprietà “Name” impostato con il valore “BtnLeggi”, il tutto come mostrato in figura 1.

Tramite Nuget, aggiungiamo la libreria “Zxing.Net” con la quale possiamo gestire i qr code, sia nella creazione e sia nella lettura ed il componente “ZXing.Net.Bindings.Windows. Compatibility.
La libreria è quella riportata nella figura 3 qui di seguito.

Figura 3 – L’aggiunta dei componenti Zxing

 
Stesura del codice

Terminata la creazione del progetto non resta che scrivere il codice nel linguaggio C# per leggere un’immagine di tipo Qr Code e visualizzarla a video.
In alto, sopra ad ogni istruzione inseriamo lo spazio dei nomi per gestire le immagini QrCode, aggiungiamo i namespace della libreria Zxing, che ci permette di leggere e creare qr code.
Di seguito le istruzioni delle suddette operazioni.

C#

using ZXing;

using ZXing.Common;

using ZXing.Windows.Compatibility;


Terminata l’aggiunta dello spazio dei nomi, non resta che scrivere la lettura dell’immagine Qr-Code che abbiamo creato in predenza, passiamo in visualizzazione codice, e facciamo doppio click sul pulsante, in modo che visualizza la parte di codice dell’evento click del pulsante.



C#

private void BtnLeggi_Click(object sender, EventArgs e)

 {

     try

     {

 

 

         //Classe per la gestione della lettura del qr code

         BarcodeReader readerBarcode = new();

         //Carico l'immagine

         Bitmap barcodeBitmap = (Bitmap)Image.FromFile(Environment.CurrentDirectory + "\\qrcode.png");

         string testoRilevato = readerBarcode.Decode(barcodeBitmap).Text;

         TxtTesto.Text = testoRilevato;

 

 

 

 

     }

     catch (Exception ex)

     {

         MessageBox.Show(ex.Message);

     }

 }




Come si è visto dal frammento di codice precedente, viene utilizzata una classe di tipo “BarcodeReader” che fornisce i metodi per leggere da un file immagine (nel precedente codice, oggetto di tipo bitmap) il qrcode, in particolare il metodo Decode.
Tramite la proprietà Text, rileviamo il testo presente nel qrcode.
Possiamo impostare anche delle opzioni, come il tipo formato del qrcode, di seguito si riporta il frammento di codice impostando anche l’opzione del formato.


il frammento di codice impostando anche l’opzione del formato.

C#

private void BtnLeggi_Click(object sender, EventArgs e)

 {

     try

     {

         DecodingOptions opzioni = new()

         {

 

             CharacterSet = "UTF-8"

         };

 

         //Classe per la gestione della lettura del qr code

         BarcodeReader readerBarcode = new() { Options = opzioni };

         //Carico l'immagine

         Bitmap barcodeBitmap = (Bitmap)Image.FromFile(Environment.CurrentDirectory + "\\qrcode.png");

         string testoRilevato = readerBarcode.Decode(barcodeBitmap).Text;

         TxtTesto.Text = testoRilevato;

 

 

 

 

     }

     catch (Exception ex)

     {

         MessageBox.Show(ex.Message);

     }

 }



Altra tecnica di lettura è quella di leggere lo stream dati dall’immagine.
Di seguito si riporta il frammento di codice della lettura di un file immagine di tipo qr-code.




C#

private void BtnLeggi_Click(object sender, EventArgs e)

 {

     try

     {

 

 

         

         byte[] arrayBytesFile = File.ReadAllBytes(Environment.CurrentDirectory + "\\qrcode.png");

         using (MemoryStream ms = new MemoryStream(arrayBytesFile))

         {

             using (Bitmap bmp = (Bitmap)Bitmap.FromStream(ms))

             {

 

                 Result risultato = readerBarcode.Decode(bmp);

 

                 TxtTesto.Text = risultato.Text;

             }

         }

 

     }

     catch (Exception ex)

     {

         MessageBox.Show(ex.Message);

     }

 }




Creazione del progetto per ambiente Raspberry PI

In questa parte vedremo come creare un nuovo progetto di tipo “Console application” da eseguire in ambiente Raspberry, aggiungendolo alla soluzione già creata.
Dalla finestra “Esplora soluzione” facciamo click con il tasto destro sul nome della Soluzione, e nel menu che viene visualizzato, selezioniamo la voce “Aggiungi” e successivamente la voce “Nuovo progetto…” nella finestra che viene aperta, selezionare il modello “App console”, facciamo click sul pulsante “Avanti,” nella finestra successiva impostiamo il nome del progetto, facciamo click sul pulsante “Avanti” nella selezione della versione del Framework selezioniamo l’ultima, nel momento in cui stiamo scrivendo la versione è la 8.
Terminata la creazione del progetto, aggiungiamo i riferimenti per la gestione del Qr-Code, in particolare per gestire i file immagine di tipo qr-code .
Su ambiente Raspberry, non possiamo utilizzare le classi per la gestione della grafica ed immagini presenti nello spazio dei nomi “System.Drawing.Common”, in quanto verrà generato un messaggio di errore del tipo “System.Drawing.Common is not supported on this platform.”, per questo utilizzeremo le classi presenti nello spazio dei nomi “SkiaSharp”.
Come per progetto per l’ambiente “Windows” utilizzeremo la libreria “Zxing” che permette di leggere e creare qr-code, ed è possibile utilizzarla in ambiente “Raspberry”.
Aggiungiamo come riferimenti al progetto “Console Application”, i vari spazio dei nomi “SkiaSharp.NativeAssets.Linux” , “ZXing.Net.Bindings.SkiaSharp”  e  “ZXing.Net.Bindings.Windows.Compatibil”, il tutto come mostrato in figura 4.



Figura 4 – I componenti da aggiungere al progetto.

Stesura del codice


Terminata la creazione del progetto e l’aggiunta dei vari “Namespace”, non resta che scrivere il codice per leggere il qr-code . Anche in questo caso, dobbiamo mettere nella cartella “Net8.0” sotto a debug l’immagine di tipo Qr-code, come fatto in precedenza.
Facciamo click sul file “Programma.cs” ed inseriamo lo spazio dei nomi per la gestione del qrCode, in alto sopra ad ogni dichiarazione dobbiamo aggiungere i seguenti spazio dei nomi.


C#

using SkiaSharp;

using System.IO;

using ZXing.SkiaSharp;


Scriviamo una funzione che verrà eseguita non appena da console richiamiamo l’applicativo e che passerà un parametro relativo al percorso e nome del file. Questa funzione tramite le classi presenti in Zxing andrà a leggere il qr-code presente nel file Immagine, che verrà letto tramite le classi di SkiaSharp, passando lo streaming dell’immagine.
I metodi che useremo sono sempre “Decode” come in precedenza, e la proprietà “Text” che restituisce il risultato del testo presente nel codice.
Di seguito il frammento di codice delle suddette operazioni.


C#

string getValore(string percorsoNomeFile)

{

    string returnValore = "";

 

    try

    {

 

 

        // Carica l'immagine del QR code

 

        using (var inputStream = File.OpenRead(percorsoNomeFile))

 

        {

 

            var bitmapQrCode = SKBitmap.Decode(inputStream);

 

            var readerBarcode = new BarcodeReader();

 

            var risultatoLettura = readerBarcode.Decode(bitmapQrCode);

 

 

 

            // Verifica se il codice QR è stato letto correttamente

 

            if (risultatoLettura != null)

            {

                returnValore = risultatoLettura.Text;

            }

            else

            {

                returnValore = "Nessun codice QR trovato.";

            }

 

        }

 

 

 

    }

    catch (Exception ex)

    {

        Console.WriteLine(ex.Message);

 

    }

    

 

    return returnValore;

 

   

 

}


Ora non resta che scrivere il codice per richiamare la funzione. Tra lo spazio dei nomi e la funzione, scriviamo il codice che visualizzerà in console il risultato della lettura dell’immagine di tipo “qr-code” passando il percorso e nome del file.
Di seguito il codice delle suddette operazioni.

C#

Console.WriteLine("Lettura QrCode in: " + Environment.CurrentDirectory + "/qrcode.png");

Console.WriteLine("Valore trovato: " + getValore(Environment.CurrentDirectory + "/qrcode.png"));



Conclusioni

L’articolo ha voluto fornire al lettore una tecnica per la gestione delle immagini di tipo QrCode, in particolare come rilevare i dati da un qr code, il tutto con la versione 8 di .Net ed il linguaggio di programmazione C#.
La gestione dei Qr Code negli ultimi anni ha trovato sempre più interesse ed utilizzo in vari ambito, dal settore sanitario a quello della distrazione, divenendo una tecnica molto considerata.
L’articolo ha voluto fornire due modalità di lettura del file qr-code per gli ambienti “Windows” e “Raspberry”, ma il solo progetto “Console Application” può essere eseguito anche in ambiente “Windows”.

Presso il sito Kubi https://www.kubii.com/it/ è possibile acquistare schede e sensori per Raspberry.

giovedì 5 settembre 2024

Download gioco gratuito Football Manager 2024

 



Un bellissimo gioco ma soprattutto tra i migliori in ambito gestionale del calcio, parliamo di Football Manager 2024, che fino al 12 settembre 2024 si potrà scaricare gratuitamente senza limitazioni.

Il gioco per sistemi operativi Windows e Mac è in lingua italiana.

Un gioco molto bella graficamente e di giocabilità.

Per il download e maggiori informazioni visitate il seguente sito https://store.epicgames.com/it/p/football-manager-2024

Strumento online convert json to TypeScript

Se cercate uno strumento online per convertire un json in classe o classi TypeScript, dal seguente sito JSON to TypeScript (transform.tools) è possibile convertire il risultato di un Json in classe TypeScript.

Servizio gratuito.

mercoledì 4 settembre 2024

Download gioco Fishing Planet

 


EpicGames ha rilasciato un bellissimo gioco di simulatore della pesca in lingua italiana.

Il gioco Fishing Planet, offre una giocabilità molto immersiva e soprattutto una grafica molto interessante.

Il gioco è per sistemi operativi Windows.

Per maggiori informazioni e download visitate il seguente sito https://store.epicgames.com/it/p/fishing-planet-87df68

TypeScript Angular trasformare un array in una string

Nel caso che si utilizza il linguaggio di programmazione TypeScript con la tecnologia Angular, tramite il metodo Join, possiamo trasformare un array in una string con gli elementi separati da virgola.
Di seguito il frammento di codice di esempio.


TypeScript
let array1: string[] = ['Mele', 'Pere', 'Banane'];
console.log(array1.join());

martedì 3 settembre 2024

Download ebook gratuito di .Net Maui

 



L'amico Alessandro, ha recentemente pubblicato in forma gratuita un ebook introduttivo allo sviluppo di applicazioni Multi Piattaforma con il Framework .Net MAUI.

L'ebook, di circa 200 pagine, in formato pdf o per dispositivi mobile, fornisce una valida panomarica di questo framework.

Per il download del libro e maggiori informazioni, visitate il seguente sito https://www.syncfusion.com/succinctly-free-ebooks/dotnet-maui-succinctly 

lunedì 2 settembre 2024

Angular effettuare l'unione di due array senza dupplicati in TypeScript

Per chi utilizza il linguaggio di programmazione TypeScript, può tornare utile effettuare l'unione di due array in un oggetto array senza inserire i dupplicati .
Di seguito il frammento di codice che crea una nuova variabile di tipo Array contenente i valori di due array senza dupplicati.

TypeScript:

 let array1: string[] = ['Mele', 'Pere', 'Banane'];
    let array2: string[] = ['Mele', 'Pere', 'Pesca'];
    let arrayMerge: string[] = [...array1, ...array2];
    let arrayRisultato: string[] = [...new Set(arrayMerge)];
    console.log(arrayRisultato);

domenica 1 settembre 2024

Programmi gratuiti per la sicurezza e protezione del proprio pc

Di seguito un elenco di programmi gratuiti per la sicurezza e protezione del proprio pc.
I programmi, in varie lingue, tra cui italiano, permettono di proteggere il pc oppure effettuare la pulizia da possibili virus, trojan ed altri programmi atti a compromettere la sicurezza e funzionamento del proprio pc.

Qui un elenco di programmi da tener presente.






Rimozione gratuita dei virus con Sophos Scan & Clean


Rimozione AdWare

Rimozione Malware