Blog

iTools® Web Application Framework

IToolS® Web Application Framework

L’esigenza di progettare applicazioni destinate a sistemi e dispositivi differenti ha portato alla creazione di framework in grado di garantire la portabilità delle applicazioni su ogni dispositivo mediante la tecnologia web. Il framework IToolS® Express, progettato per sviluppare rapidamente applicazioni in ambiente desktop con tecnologia Windows Forms è stato esteso al fine di utilizzare i componenti IToolS® anche nelle applicazioni web mediante una concentrazione di tecnologie utili al raggiungimento dell’obiettivo, ovvero la possibilità di progettare rapidamente una applicazione fortemente connessa a dispositivi di varia natura e al tempo stesso raggiungibile e consultabile da un qualsiasi dispositivo connesso alla rete e dotato di un web browser. Oltre ad esigenze di connessione vi sono altri dettagli che attualmente rendono le applicazioni web particolarmente adatte alla gestione di apparati elettronici, siano essi sistemi industriali o civili, infatti la presenza di nuovi protocolli e nuovi standard particolarmente adatti al potenziamento da un lato delle prestazioni e dall’altro dell’aspetto delle applicazioni web, rende questo tipo di applicazioni particolarmente appetibili anche ad un insieme di sistemi che da sempre hanno prediletto l’ambiente desktop.

Tecnologie e requisiti di sistema

IToolS® Application Framework sfrutta un serie di tecnologie utili alla creazione rapida, scalabile e personalizzabile di applicazioni web cercando di ottimizzare le prestazioni e minimizzare il codice necessario per scrivere una applicazione completa. Come per il framework IToolS® Express, il compito di IToolS® Application Framework è centrato sulla modularità dell’applicazione al fine di sfruttare componenti particolarmente configurabili ed estensibili in grado di rispondere alle esigenze del programmatore.

.NET

IToolS® Express è completamente sviluppato in tecnologia .NET, con gli assembly di core tuttora compilati in versione 2 per garantirne l’utilizzo anche in sistemi ormai datati. IToolS® Application Framework è presente mediante un nuovo namespace con nome IToolS.Components.Web compilato per ragioni tecnologiche in .NET versione 4.5 in quanto alcune delle tecnologie utilizzate sono presenti dalla versione 4.5 in poi.

Pattern MVVM

Il Model–view–viewmodel (MVVM) è un pattern architetturale che astrae lo stato di visualizzazione e il comportamento composto da:

IToolS® Application Framework sfrutta il pattern MVVM per il collegamento delle strutture dati agli oggetti di visualizzazione grafica in modo da creare una astrazione utile a fini di personalizzazione della rappresentazione grafica dei dati.

JavaScript Libraries

Per la realizzazione dell’applicazione web sono state identificate una serie di librerie JavaScript particolarmente utili:

JQuery

jQuery è una libreria JavaScript per applicazioni web. Nasce con l’obiettivo di semplificare la selezione, la manipolazione, la gestione degli eventi e l’animazione di elementi DOM in pagine HTML, nonché implementare funzionalità AJAX.

KnockoutJS

Knockout è una libreria JavaScript che permette la creazione di siti web dotati di una interfaccia utente ricca e dinamica, basata su un sottostante modello di dati. Implementa il Model–view–viewmodel (MVVM), un design pattern che prevede una netta separazione tra dati (Model), interfaccia utente (View) e la modalità con la quale i dati vengono rappresentati (ViewModel).

DevExtreme

DevExtreme è una libreria JavaScript realizzata dalla DevExpress che contiene una suite di componenti utili alla creazione di applicazioni responsive con tecnologia HTML5.

WebSocket

WebSocket è una tecnologia web che fornisce canali di comunicazione full-duplex attraverso una singola connessione TCP. L’API del WebSocket è stata standardizzata dal W3C e il protocollo WebSocket è stato standardizzato dall’IETF come RFC 6455.

Principi di funzionamento

Per realizzare un sistema in grado di gestire applicazioni web è necessario avere a disposizione un web server, IToolS® dalla versione 3.4.0.16 implementa un componente specifico che consente di gestire richieste http, la classe base che permette di creare applicazioni desktop con un web server integrato è presente nel namespace “IToolS.Components.Web” con nome “HttpServer” da essa derivano due implementazioni:

Con la classe WebClients è possibile unire i componenti IToolS® Express, realizzati per la gestione dati, con operazioni utili ad una applicazione web, infatti mediante questo componente è possibile prima progettare in modo tradizionale la struttura di gestione dati, selezionando il protocollo desiderato ed indirizzando tutti gli oggetti necessari a gestire una infrastruttura di comunicazione e gestione dati, quindi creare un sistema in grado di ricevere e notificare eventi ed azioni da una applicazione web.

Di seguito sono elencate le proprietà di cui dispone la classe WebClients al fine di essere configurata ed utilizzata al meglio.

Architettura delle directory

L’architettura delle directory utilizzate per gestire l’applicazione web è regolata da:

Gestione delle richieste http

Le richieste http vengono gestite mediante un server web in grado di attuare tutte le necessarie operazioni utili al corretto funzionamento dell’applicazione web, in particolare il web server deve riconoscere le richieste che fanno riferimento a pagine web di applicazione ed eseguire tutti gli automatismi necessari a creare una infrastruttura web in grado di supportare l’utilizzo di componenti, schemi di autenticazione e autorizzazione, scripting server side, traduzioni, web services e altro, al fine di ottenere una infrastruttura modulare in cui il codice necessario a creare l’applicazione web risulta minimizzato e gli strumenti disponibili al programmatore sono massimizzati.

Logica di esecuzione

Nel momento in cui al server web arriva una richiesta http, si attivano una serie di procedure atte a servire la richiesta secondo tutte le istruzioni che la richiesta contiene al proprio interno, in particolare:

  1. Viene verificato se la richiesta http fa riferimento ad un web service, per capire se la richiesta deve essere re-direzionata su una istanza di un web service caricato all’avvio, viene verificato se l’url della richiesta è riconducibile ad un web service, ciò è possibile in quanto ogni web service per essere caricato dal web server deve dichiarare un proprio url.
  1. Se la richiesta appartiene ad un web service viene gestita da esso e non ritorna più al web server, in caso contrario la richiesta viene gestita dal web server.
  1. Viene verificato il tipo di operazione inserita nella richiesta http, il web server puo’ gestire richieste in GET e POST.
  1. Se il tipo di operazione è in GET vengono eseguite le seguenti operazioni:
    1. Valutato l’url richiesto, se l’url non fa riferimento a nessun file ma alla radice dell’url, viene eseguito un redirect alla pagina di avvio.
    2. Viene ricavata l’identità dell’utente secondo la configurazione di autenticazione selezionata nel web server.
    3. Viene ricavata la cultura corrente richiesta dall’applicazione.
    4. Viene verificato se il file richiesto esiste, in caso negativo viene inviata una risposta con codice 404, in caso contrario la richiesta viene accettata.
    5. Viene valutato il tipo di file richiesto, se non è un file .html la richiesta viene servita normalmente rispondendo con il file richiesto, in caso si tratti di un file .html vengono eseguite le seguenti operazioni:
      1. Vengono risolte tutte le importazioni definite mediante i tag html <import> presenti all’interno del file .html.
      2. Vengono importati tutti i componenti visuali definiti mediante i tag html <component> presenti all’interno del file .html.
      3. Vengono inizializzati tutti i componenti visuali definiti mediante i tag html <initialize> presenti all’interno del file .html.
      4. Vengono eseguiti tutti gli script server side definiti mediante il tag html <function> presenti all’interno del file .html.
      5. Vengono inseriti ove necessario i parametri di applicazione necessari al funzionamento, attualmente sono presenti i seguenti parametri di applicazione:
        • “hubAddress”;
        • “timeOut”;
      6. Entrambi sono utilizzati da SignalR per gestire la connessione del client web con il server.
      7. Viene verificato se per la pagina richiesta è necessaria l’autenticazione, mediante la presenza nella pagina del tag html <authenticate> si informa il web server che per servire il file richiesto è necessario un utente autenticato, se non risulta alcuna autenticazione viene eseguito un redirect alla pagina di login se presente. Se non è presente una pagina di login viene inviata una risposta con codice 403.
      8. Vengono eseguite le traduzioni dei testi sensibili alla cultura corrente.
  1. Se la richiesta è di tipo POST viene gestita ipotizzando che si voglia eseguire l’upload di un file, il tipo di file da salvare dal web server viene ricavato dal mime type associato alla richiesta, il nome del file e il path in cui depositare lo stream ricevuto, vengono ricavati dall’url della richiesta.

Pagine web

Le pagine web gestite dal web server sono datate di particolari convenzioni utili alla creazione di pagine modulari in grado di utilizzare dei componenti html, inizializzazione dei componenti mediante degli ed importaazione di snippet di codice html o javascript da inserire in pagina.

Composizione della pagine web

In funzione di quanto enunciato nei paragrafi precedenti si comprende che la pagina html viene composta utilizzando dei tag html speciali, in grado di informare il web server di eseguire particolari procedure, di seguito vengono elencati i tag html utilizzati per lo sviluppo di una applicazione mediante IToolS® Web Application Framework.

Tag <import>

Il tag import permette di importare snippet di codice html o javascript all’interno della pagina web, risulta particolarmente utile nel qual caso vi siano porzioni di codice che si ripetono nell’applicazione, ad esempio l’inclusione di librerie javascript o fogli di stile spesso vengono replicate su ogni pagina web, è comunque uno strumento utile ad applicare modularità all’applicazione ed a contenere il codice presente all’interno di una pagina web in fase di sviluppo.

Importazione di file JavaScript

La seguente istruzione:

provoca l’inserimento del file devExpressScripts.txt all’interno della pagina, ovvero se il contenuto del file devExpressScripts.txt è:

Il web server risponderà con una pagina del tipo:

Importazione di fogli di stile

La seguente istruzione:

provoca l’inserimento del file itoolsStyles.txt all’interno della pagina, ovvero se il contenuto del file itoolsStyles.txt è:

Il web server risponderà con una pagina del tipo:

Componenti grafici

La presenza di componenti grafici html garantisce un ulteriore step di modularità all’applicazione, infatti componenti creati esternamente all’applicazione possono essere inseriti ed inizializzati in modo pratico e veloce, lo schema suggerito da IToolS® Web Application Framework è quello di implementare mediante la libreria KnockoutJS un pattern MVVM in modo da garantire una netta separazione tra il modello dati e la sua rappresentazione.

Inserimento di componenti grafici

I componenti grafici devono essere definiti all’interno della directory “Components” presente in “RootDirectory\Site”, ogni componente grafico è composto da un file .html ed un eventuale file di inizializzazione .txt, il nome del file identifica in nome del componente ovvero se voglio importazione un componente che si chiama “label”, nella directory “Components” deve essere presente un file “label.html” ed un eventuale file “label.txt”.

Tag <component>

Il tag component informa il web server che è necessario inserire un componente grafico, il tipo del componente e la sua configurazione vengono definite nel valore del tag mediante un dizionario con la formattazione “nome=valore” in cui le coppie sono separate dal “;”:

L’espressione riportata sopra indica la seguente configurazione:

Per caricare un componente il web server opera nel seguente modo:

Es.

Il file button.html risulta composto nel seguente modo:

Quindi per una corretta importazione del componente occorre che nella dichiarazione del tag component siano presenti due coppie chiave-valore che specificano l’identificativo del componente e la variabile IToolS® a cui il componente deve essere associato.

Inizializzazione dei componenti grafici

Oltre alla procedura di inserimento dei componenti disponibili all’applicazione, normalmente è necessario anche inizializzare il componente in quanto occorre associare un modello dati al componente grafico ed eventualmente gestire azioni utente o eventi di notifica.

Tag <initialize>

Mediante il tag initialize è possibile associare uno script di inizializzazione al componente visuale inserito in pagina, l’inizializzazione è una procedura facoltativa ma necessaria nel caso si vogliano utilizzare componenti grafici estremamente potenti e configurabili, normalmente questa procedura viene eseguita sul ready della pagina web, ovvero quando la struttura html è completa.

La procedura di inizializzazione del bottone mostrato sopra è composta seguendo lo schema MVVM proposto dai componenti DevExtreme uniti a KnockoutJS in cui mediante il tag initialize viene importato lo script di inizializzazione del componente bottone:

Infine lo script di inizializzazione potrebbe essere qualcosa del tipo:

Inizializzazione di una pagina web

IToolS® Web Application Framework utilizza una inizializzazione vincolata da una direttiva di prologo ed epilogo inizializzazione, è basata sull’importazione di due file al cui interno sono presenti le dichiarazioni JQuery di “begin ready” ed “end ready”. Mediante l’importazione delle fasi di inizializzazione da file è possibile modificare il contenuto delle fasi in un solo punto ed applicarle a tutte le pagine dell’applicazione minimizzando il codice presente a design-time in ogni pagina web.

itoolsBeginReady

Mediante il file itoolsBeginReady.txt si avvia la procedura di inizializzazione della pagina, come detto in precedenza per implementare questa operazione si utilizza la libreria JQuery che dispone di alcuni standard de facto, utili alla gestione di operazioni procedurali sulle pagine web.

Di fatto una volta risolta l’importazione del file itoolsBeginReady.txt il web server risponderebbe con una contenuto del tipo:

itoolsEndReady

Con l’importazione del file itoolsEndReady.txt si chiude la procedura di inizializzazione mediante la semplice chiusura della funzione di inizializzazione implementata con il ready di JQuery.

Applicazione del foglio di stile

L’applicazione del foglio di stile risulta vitale per tutte le impostazioni di posizionamento degli oggetti grafici e la loro rappresentazione. IToolS® Web Application Framework mette a disposizione un foglio .css che consente al programmatore di posizionare e configurare i componenti importati. All’avvio del web server il sistema verifica se nella directory “Components” è presente un file components.css, se il file non esiste ne viene creato uno, con il quale è possibile procedere alla configurazione degli oggetto html in stile css.

Sviluppo di un componente grafico

Lo sviluppo dei componenti grafici sono alla base delle applicazioni web sviluppate con il framework IToolS®, in questa sezione viene mostrato di fatto come creare un componente combinando le varie tecnologie utili all’ottenimento di un oggetto visuale scalabile e configurabile.

Ogni componente grafico è formato da una sezione html che ne descrive la struttura più eventuali parametri di configurazione, quindi da uno script di inizializzazione, mediante i componenti DevExtreme in combinazione con KnockoutJS gran parte delle impostazioni avvengono sul modello dati costruito in fase di inizializzazione.

Il controllo switch, ad esempio, è composto da:

Più uno script di inizializzazione racchiuso in una funzione anonima auto-invocante per evitare conflitti con script di altri componenti:

Come si vede dal codice riportato sopra, viene creato un modello dati contente impostazioni di configurazione e variabili in binding con il componente visuale come “swicthValue”. La variabile “itools.tagsModel” rappresenta il modello dati contenente tutte le Variable IToolS® presenti nel sistema. Nel componente swicth è anche presente una callback di cambio di valore utilizzata al fine di riportare le azioni utente sul modello dati e quindi sulla Variable IToolS®.

Mediante la chiamata al metodo KnockoutJS “applyBindings” viene collegato il modello creato al componente grafico con l’id specificato.

Web Real-Time

Fino a poco tempo fa era normale pensare al web e a come fosse impensabile, per questo mezzo, il real-time: il protocollo HTTP, infatti, prevede un semplice meccanismo per cui è sempre il client a dover richiedere al server le informazioni, che le fornisce in maniera sincrona. Nell’arco degli anni si sono sviluppate diverse tecniche per ovviare a questo problema: parliamo di “long polling”, “server sent events” e, recentemente, di “WebSockets”.

Con “long polling” e “server sent events” viene mantenuta aperta la connessione e viene scritto all’interno del buffer, così che sia possibile notificare il client in maniera più rapida: non si tratta di un vero real-time, ma il trucco è di tenere sempre aperto il canale, chiudendo la connessione ad intervalli, perché la risposta, come detto, deve sempre essere sincrona e produrre un risultato. Questa tecnica ha il vantaggio che, di fatto, è supportata anche da browser molto vecchi (soprattutto nel caso di long polling), perché sfrutta il classico XMLHttpRequest, alla base di AJAX, e supportato praticamente da tutti i browser.

WebSocket

WebSockets è una specifica molto più interessante, perché introdotta di recente con l’obiettivo di superare questi problemi: rappresenta un socket full-duplex, quindi bidirezionale, sempre attivo tra client e server, a bassa latenza. In parole povere, è anche il server a poter mandare informazioni al client e lo fa davvero in real-time. Lo scotto da pagare, in tal senso, è che il supporto è disponibile con le ultime versioni dei browser: nel caso di IE dalla versioni 10 in poi, Safari dalla 6, Chrome dalla 14, FireFox dalla 8 e Opera dalla 12.1. Le specifiche che sono disponibili attualmente, pur non definitive, sono stabili da molti mesi e consentono di sviluppare applicazioni che ne traggano beneficio.

SignalR

SignalR è una libreria open source che ci consente, con estrema semplicità, di aggiungere notifiche real-time a una nostra applicazione, instaurando un canale di comunicazione bidirezionale e permanente tra server e client, così che possiamo utilizzarlo per inviare messaggi in entrambi i versi.

Come sappiamo, le specifiche di HTML5 hanno introdotto i WebSocket proprio per soddisfare questa specifica necessità; seppur supportati nativamente da ASP.NET 4.5 e dalle ultime versioni dei più diffusi browser.
Esistono tuttavia altre tecniche per instaurare una canale di comunicazione full duplex, e il grande pregio di ASP.NET SignalR è proprio quello di astrarre questa problematica, impostando di volta in volta in automatico la connessione più idonea in base alle peculiarità del server e del client.

itoolsProxyInitialize

Mediante l’inizializzazione itoolsProxyInitialize viene create una istanza dell’oggetto JavaScript IToolS® che gestisce la comunicazione mediante SignalR tra il client web (browser) e il server (applicazione). Nel corso di questa inizializzazione viene creato un modello utile a Knockout per collegare le Variable IToolS® ai componenti grafici html, stiamo ovviamente parlando del “tagsModel”, già visto in precedenza ed utilizzato per creare il “binding” tra i componenti grafici e tag.

itoolsProxyStart

Mediante la procedura itoolsProxyStart viene avviato il sistema che si occupa di mantenere una comunicazione attiva con l’hub server SignalR e la gestione di tutte le notifiche da reindirizzare ai componenti grafici.

Nel video allegato sotto è possibile apprezzare la velocità di aggiornamento ottenuta mediante il sistema creato sfruttando le websocket.

Web Services

IToolS Web Application Framework implementa un sistema di web services integrato al fine di gestire tutte quelle operazioni che non rientrano nel normale flusso di lavoro di un web server oltre a permettere la definizione di operazioni differenti in funzione del tipo di applicazione desiderata.

All’avvio del web server ogni web service caricato espone un proprio url al fine di informare il web server quali chiamate devono essere ricondotte ad esso. In questo modo quando arriva una nuova richiesta http al web server, viene analizzato l’url della richiesta e nel caso sia riconducibile ad uno dei web service disponibili, la richiesta viene direzionata su di esso che se ne occupa totalmente.

Creazione di un web service

La creazione di un web service è possibile mediante l’implementazione di una specifica classe astratta che IToolS® Web Application Framework mette a disposizione, in particolare si tratta della “HttpService” presente nel namespace “IToolS.Data.Web”. Per creare un nuovo web server occorre quindi creare un progetto Class Library in Visual Studio:

img1

Aggiungere i riferimenti a IToolS.dll e ad IToolS.Data.dll, quindi aggiungere una classe con il nome del web service voluto ed implementare i metodi richiesti:

img2

Inserire la classe di derivazione nella classe di web service e l’attributo “WebServiceName”, necessario al web server per riconoscere le richieste associate ed implementare le operazioni necessarie:

Il nome dell’assembly contente il web service creato deve essere conforme al pattern specificato nella proprietà “WebServiceSearchPattern” che in via predefinita ha il valore “IToolS.Data.Web.Services.*.*”, potrebbe quindi essere chiamato IToolS.Data.Web.Services.MyTestWebService.dll.

Scripting

Le applicazioni web create con IToolS® hanno a disposizione un sistema di scripting server side che permette di eseguire codice lato server prima che la pagina sia servita. Il motore di scripting è implementato mediante il compilatore C# ed un sistema che, all’avvio del web server, compila in memoria tutti gli script definiti e li rende disponibili mediante un tag html function. La pagina web può quindi contenere degli snippet di codice eseguiti prima della risposta http e che consentono di creare un contenuto dinamico della pagina lato server.

Creazione di uno script server side

Per creare uno script da inserire in pagina è necessario inserire il metodo nel file “scripts.txt” presente nella directory “Scripting” nel seguente modo:

Il metodo riportato sopra, a scopo di esempio, crea un link html differente a seconda che vi sia o meno un utente autenticato.

Come si nota il metodo deve essere dichiarato con un solo parametro a cui viene passato automaticamente, dal sistema di scripting, il contesto http associato alla richiesta. Al momento non è possibile passare altri argomenti ma non è escluso che in future estensioni sia possibile passare parametri personalizzati alle funzioni di scripting server side.

Per utilizzare il metodo definito “getSecurityAccessBox” è necessario inserire in pagina un tag html function il cui valore è il nome del metodo da eseguire:

Mediante questa sintassi il web server riconosce la richiesta di esecuzione di uno script server side, quindi ricava il nome del metodo da eseguire e sostituisce il risultato dell’invocazione al tag html function.

Utilities

Le utilities presenti nelle applicazioni create con IToolS® Web Application Framework mettono a disposizione un serie di servizi utili al contesto dell’applicazione.

Tra i servizi di utilità attualmente presenti nel sistema troviamo un web service per la gestione della sicurezza di applicazione, intesa come sistema di autenticazione e autorizzazione degli utenti mediante ruoli ed un sistema di internazionalizzazione utile a gestire culture differenti all’interno della stessa applicazione.

Security

Il web service di gestione della sicurezza mette a disposizione due operazioni in grado di autenticare un utente all’interno dell’applicazione, associarne dei diritti (ruoli) ed applicare azioni in funzione di essi.

Autenticazione

L’autenticazione di un utente viene realizzata richiedendo che per l’accesso ad una pagina sia necessario un utente autenticato e che quindi ha sostenuto una procedura di login con esito positivo. In modo predefinito se per ricevere una pagina web è richiesta autenticazione e al momento della richiesta non ci sono utenti autenticati, il web server esegue in redirect alla pagina di login definita, in caso non vi sia una pagina di login il sistema ritorna un codice di risposta 403.

Tag <authenticate>

Per informare il web server che per accedere ad una determinata pagina accorre avere una richiesta autenticata occorre inserire in pagina html un tag html authenticate nel seguente modo:

Autorizzazione

Il processo di autorizzazione risulta leggermente più complesso rispetto a quello di autenticazione in quanto deve tenere in considerazione diversi fattori, ovvero prima di valutare procedure di autorizzazione da applicare a componenti presenti in pagina occorre avere un utente autenticato, una volta ricevuta una richiesta autenticata è possibile eseguire valutazioni in funzione del ruolo utente associato alla richiesta, per fare ciò è necessario inserire alcune informazioni nel tag html initialize del componente visuale.

Autorizzazione nei componenti grafici

Per associare azioni in funzione di una autorizzazione associata al componente grafico occorre inserire due chiavi particolari nel dizionario che inizializza il componente grafico:

Le azioni attualmente disponibili sono solamente due:

Quindi per inizializzare un qualunque componente con informazioni di ruolo:

Internazionalizzazione

Mediante il sistema di internazionalizzazione è possibile gestire culture differenti all’interno dell’applicazione web, la cultura di riferimento può essere ricavata sia dalla richiesta http, che dispone di un campo apposito inserito dal browser durante la creazione della richiesta, sia dal profilo utente, nel caso l’utente autenticato dispone di una cultura specifica nel proprio profilo.

In Internet Explorer la cultura desiderata viene impostata mediante la seguente finestra presente nelle Opzioni Internet:

img3

La selezione effettuata finisce in un campo dell’header della richiesta http che si chiama “Accept-Language”.

Gestione della cultura corrente

Nel momento in cui al service arriva una nuova richiesta http avvengono i seguenti passaggi:

  1. Viene verificato se la richiesta dispone delle informazioni utente, ovvero chi ha fatto la richiesta
  2. Se è presente un utente autenticato, viene ricavato il campo “Culture” presente nel profilo utente e viene utilizzato servire la richiesta in tutti quei campi in cui la cultura selezionata ha effetto.
  3. Se non è presente un utente autenticato la cultura corrente viene ricavata verificando se nei cookie della richiesta è presente un cookie con nome “_culture”, in caso affermativo esso viene utilizzato per servire la richiesta in tutti quei campi in cui la cultura selezionata ha effetto.
  4. Nel caso in cui i cookie non siano abilitati la cultura desiderata viene selezionata mediante in campo “Accept-Language” presente nell’header della richiesta http, se in tale campo vi sono una o più culture presenti viene selezionata la prima in ordine di apparizione.
  5. Se nel campo “Accept-Language” dell’header della richiesta http non è presente alcuna cultura allora viene utilizzata la cultura di default dell’applicazione web che è l’inglese americano “eu-US”.

Gestione delle traduzioni

Le traduzioni dei testi sensibili alla cultura desiderata avvengono lato server mediante un sistema di directory e file .json che consentono all’utente di specificare in insieme di culture supportate per l’applicazione e le relative traduzioni. In particolare nella directory di esecuzione dell’applicazione è presente una directory chiamata “locales”, all’interno sono definite le directory che identificano le culture disponibili per l’applicazione, se ad esempio nella directory “locales” sono presente altre due directory con nome “it” ed “en” significa che nell’applicazione in oggetto sono disponibili due culture, italiano ed inglese. Nelle directory che specificano i nomi delle culture disponibili deve essere presente un file con nome “translation.json” all’interno del quale sono specificate le traduzioni dei testi da utilizzare nell’applicazione sotto forma di chiave-valore.

Il contenuto del file può avere, ad esempio, il seguente aspetto:

Da cui si intuisce rapidamente che all’interno delle graffe che rappresentano l’oggetto json sono presenti le coppie chiavi-valore definite come il nome ed il valore di una proprietà di un oggetto json, è possibile definire anche oggetti json annidati:

Per accedere agli oggetti annidati è necessario utilizzare il carattere “.” che quindi è un carattere speciale e non deve essere utilizzato nelle chiavi utilizzate per le traduzioni, se ad esempio voglio accedere alla traduzione “Messaggio 2” devo specificare come chiave “Messages.Message2”.

i18n(TEXT)

Con il costrutto i18n è possibile tradurre testi all’interno della pagina web, il costrutto può essere utilizzato sia nelle pagine html che nei file di script a supporto dell’applicazione inseriti mediante i tag html <component>, <import> o <initialize>.

Prima di servire una pagina html il sistema esegue la seguente procedura:

  1. Cerca nel file html la presenza di costrutti i18n
  2. Estrae il testo contenuto all’interno del costrutto i18n
  3. Cerca una traduzione per il testo presente in funzione della cultura corrente
  4. Se viene trovata una traduzione elimina il costrutto i18n ed inserisce al suo posto la traduzione
  5. Se non viene trovata una traduzione elimina il costrutto i18n ed inserisce il testo presente all’interno di esso

Esempio:

Se la pagina html contiene un tag definito nel seguente modo:

Il sistema cerca una traduzione per il testo “Hello world!” contenuto all’interno del costrutto i18n e se la trova restituisce:

Nel caso in cui non vi sia una traduzione disponibile per il testo ricevuto e per la cultura desiderata viene reinserito il testo stesso:

Nel caso in cui sia necessario inserire nel testo da tradurre caratteri utilizzati dal sistema di traduzione come ad esempio il punto “.”, è possibile inserire al posto del carattere il corrispondente carattere il codifica unicode.

La ricerca del contenuto presente all’interno del costrutto i18n è regolato da una espressione regolare con formato “(*.?)”, se è necessario modificare il pattern di ricerca è possibile definire nel file app.config una impostazione di applicazione con nome “i18nRegex”:

CultureService

Il servizio di gestione culture permette all’applicazione web di conoscere la lista delle culture disponibili e la selezione della cultura desiderata, una volta selezionata una cultura essa viene associata al profilo utente attuale, questo indica che l’impostazione della cultura desiderata è vincolata da una autenticazione utente.

IToolS Web Application Framework dispone di un componente visuale adatto alla selezione della cultura desiderata:

 

Con inizializzazione:

Se l’utente non è autenticato il component visuale risulta disabilitato.

img20

Gestione messaggi e allarmi

La gestione della messaggistica risulta particolarmente complessa specialmente nelle applicazioni in cui lo storico dei messaggi può risultare gravoso nel numero degli oggetti presenti, è il caso di storici allarmi, warning o messaggi nelle applicazioni dei settore industriale e non solo. Per creare un componente visuale in grado di conciliare le esigenze di configurabilità, accessibilità, prestazioni, aspetto e altro, sono stati creati i seguenti oggetti:

Il web service destinato ai messaggi compie azioni di paginazione, ricerca, ordinamento lato server in modo da inviare al client web esclusivamente i dati necessari alla visualizzazione attuale.

AlarmsViewer

Il componente allarmi è stato creato mediante il componente visuale griglia di DevExtreme, ad ogni richiesta dati inserisce nella configurazione http le informazioni di visualizzazione come filtri, range di visualizzazione e ordinamento, in modo che il web service possa ottimizzare la risposta e limitare il traffico dati da una parte e lo sforzo computazionale dall’altro.

Gestione database

Nel framework di sviluppo è presente un web service utile ad eseguire operazioni su una qualsiasi tabella presente in un database. Per fare ciò è stato sviluppato assieme al servizio un componente visuale che mediante una griglia mostra il contenuto della tabella specificata e permette la modifica della stessa.

Per utilizzare il “databaseService” e’necessario inserire una stringa di connessione al database nel file app.config:

 

Quindi inserire in pagina il componente “tableViewer” in grado di mostrare il contenuto della tabella:

Per specificare il nome della tabella desiderata viene inserita una apposita chiave contente il nome in fase di inizializzazione del componente:

La configurazione mostrata sopra crea il seguente risultato:

img9

Chart

Il servizio “ArchiveService” permette di interrogare gli archivi generati mediante il driver SqlArchiveStore, in essi sono presenti gli storici delle Variable IToolS® organizzati a tabelle in funzione dei gruppi creati in configurazione dei componenti. Le tabelle sono sviluppate con una formattazione “narrow” da cui è possibile estrarre l’andamento storico delle Variable e quindi creare una rappresentazione grafica.

ChartViewer

Il “chartViewer” permette di selezionare l’instante di inizio e fine del grafico e le Variable da inserire, ad ogni modifica da parte dell’utente di uno dei campi di selezione il grafico genera una richiesta all’ArchiveService che risponde con i dati richiesti per generare un nuovo grafico:

img12

Per inserire un nuovo grafico in applicazione basta aggiungere un componente “chartViewer” ed inizializzarlo specificando mediante la chiave “archive” il nome dell’archivio da rappresentare:

 

Basta quindi inserire due righe di codice per avere in pagina un grafico storico delle Variable inserite in applicazione.

Il servizio ArchiveService necessita di una stringa di connessione utile al collegamento con l’archivio IToolS, per specificare la stringa di connessione da utilizzare, inserire nel file app.config una connessione con nome “ArchiveConnection”:

Tags

Quando si crea una applicazione web connessa ad un dispositivo vi è la necessità di visualizzare un gruppo di informazioni (segnali, parametri, ecc…) all’interno di una pagina, magari suddividendo tali informazioni per categorie o sezioni specifiche. Con IToolS® Web Application Framework questa operazione è semplificata da un apposito servizio e un visualizzatore, infatti il “GroupService” dispone di una serie di operazioni utili all’applicazione web per mostrare un gruppo completo di Variable IToolS® ed un componente visuale che, una volta creati e configurati i gruppi di Variable, ne permette la pubblicazione in applicazione in modo veloce ed agevole.

TagsViewer

Il TagsViewer è un componente adatto a mostrare le informazioni contenute nelle Variable IToolS®, si appoggia ad uno specifico servizio, GroupService, e attraverso una griglia mostra le informazioni principali delle Variable. In via predefinita l’unico campo che è modificabile il valore della Variabile, ma intervenendo sulla configurazione della griglia è possibile abilitare la modifica anche di altri campi.

img21

Per inserire in pagina un TagsViewer aggiungere la seguente dichiarazione e inizializzazione:

Diagnostica

Il namespace IToolS® Web Application Framework è stato arricchito con qualche strumento di diagnostica utile in fase di deploy dell’applicazione per verificarne il corretto funzionamento, attualmente dispone di una sezione chiamata “Watcher” ed una “Source” che consentono rispettivamente di visualizzare il valore istantaneo di ogni Variable IToolS® definita e il codice sorgente associato alla pagina attuale, non è escluso che il sistema di diagnostica venga esteso con altre sezioni utili a verificare altre funzionalità dell’applicazione.

Tags Watcher

La classe “WebAppForm” disponibile nel namespace “IToolS.Windows.Forms.Webs” dispone di uno strumento di diagnostica utile a verificare il valore delle Variable IToolS®. Normalmente è nascosto e alla pressione del tasto F12 viene visualizzato, per scomparire premendo di nuovo F12:

img13

Come si vede dall’immagine riportata sopra il “Watcher” crea un tab contenente la griglia delle Variable IToolS® definite in ogni “Group”, mediante questo strumento è possibile visualizzare il valore istantaneo delle Variable ed impostare il loro valore.

Source

La sezione “Source” consente la visualizzazione del codice sorgente associato alla pagina web corrente, dispone di un sistema di ricerca utile per verificare il codice html e script generato dall’applicazione web.

Temi di applicazione

Per la selezione del tema di associare all’applicazione viene utilizzato il sistema proposto per i componenti DevExtreme in quanto sono già disponibili diversi temi che simulano l’aspetto dei sistemi operativi più diffusi e permette di creare temi personalizzati.

La selezione di un tema tra quelli preconfigurati è possibile mediante il tag import in cui nel valore viene specificato il nome del tema da utilizzare:

Nella configurazione riportata sopra viene selezionato il tema “generic.light”, altri temi disponibili sono:

Nelle immagini riportate sotto la visualizzazione della stessa applicazione con temi differenti.

img10

Creazione di una applicazione

Per creare una IToolS Web Application è necessario creare un progetto di tipo Windows Forms con il framework .NET 4.5 o superiore.

Configurazione del progetto

Aggiungere i riferimenti ai seguenti assembly:

Il file app.config a supporto dell’applicazione deve essere modificato in modo da contenere istruzioni utili al corretto funzionamento dell’applicazione:

Configurazione dei componenti IToolS®

Prelevare dalla toolbox di Visual Studio i componenti utili alla creaazione della configurazione di rete e delle informazioni da gestire (per ulteriori informazioni consultare il documento IToolS basics), al fine di creare una situazione del tipo:

img6

Se necessario, aggiungere il SqlAlarmsWatcher, in grado di gestire gli allarmi di applicazione e la loro persistenza su database.

Modificare la classe di derivazione della form principale con la classe “WebForm”:

Configurazione del web server

Il componente WebClients che implementa il web server utilizzato dall’applicazione deve solo essere collegato al componente Clients e automaticamente avvia il sistema che quindi risulta già pronto a servire le richieste dai vari web browser interessati.

Creazione delle pagine web

Il componente WebClients al primo avvio genera tutta la struttura di directory necessaria alla corretta esecuzione dell’applicazione ed inserisce tutti i file necessari all’applicazione, in questa situazione è già presente un file .html con nome webApp.html preconfigurato per visualizzare una applicazione predefinita, è quindi possibile utilizzare questa struttura per implementare una IToolS® Web Application.

IToolSify Your Application

Appendice

IToolS Web Application Framework.pdf

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

20 + 4 =