.Net Introduzione al Framework Metro UI CSS

Si riporta l'articolo scritto per il sito https://www.iprogrammatori.it/articoli/programmazione/art_introduzione-al-framework-metro-ui-css_1549.aspx

Nel caso che abbiamo l’esigenza di applicare nelle nostre applicazioni web, in particolare Asp.Net, uno stile tipo quello di Metro, il Framework Metro UI Css qui https://metroui.org.ua/index.html il sito ufficiale, fornisce interessanti funzionalità che danno alle nostre applicazioni web tale stile.
Una grafica simile a quella introdotto con il nuovo sistema operativo Windows 8, e che oggi viene utilizzata in diversi contesti.
Ma vediamo in dettaglio come utilizzarlo.

Creazione del progetto

In Visual Studio 2017 community , si crea un nuovo progetto di tipo web, utilizzando il linguaggio di proprio interesse.
Dopo aver creato il progetto di tipo “Asp.Net”, ci troviamo le varie pagine e cartelle create dal progetto.
Per installare il Framework metro, dobbiamo utilizzare la funzionalità “Gestione Pacchetti Nuget” presente nel menu “Strumenti”.
Se vogliamo utilizzarla tramite la console a riga di comando, dobbiamo eseguire il seguente comando
“Install-Package Metro.UI.CSS”
nella finestra “Console di Gestione Pacchetti “ ed eseguire tale comando.
Oppure tramite la voce di menu “Gestisci Pacchetti Nuget per la soluzione” nella finestra che verrà aperta scrivere nella casella “Sfoglia” digitiamo il testo “Metro.UI.CSS” in modo che ci fornisce i vari componenti a disposizione.
Selezioniamo il primo, quello con la versione v3.0.17 che è al momento l’ultima versione.
A questo punto, dopo aver installato il framework, non ci resta che scrivere il codice.

Stesura del codice

Verranno copiati nel nostro progetto, ed in particolare nella cartella “Content” i file di tipo “.css”.
Vediamo un esempio di come applicare ad un pulsante, lo stile metro.
Apriamo la nostra pagina aspx, in particolare la “Default.aspx”, ed inseriamo la dichiarazione per i fogli di stile, se invece utilizziamo una masterpage, tale dichiarazione andrà in quella, in modo che sarà utilizzata in tutte le pagine.
Qui di seguito l’esempio di codice, da mettere nella parte “html”, ossia nei file di tipo “aspx” o “.master”.

<link href="Content/metro.css" rel="stylesheet">

    <script src="Scripts/jquery-1.10.2.js"></script>

    <script src="Scripts/metro.js"></script>

Nella pagina di default, nel file “.aspx” inseriamo un controllo di tipo “button”, nella proprietà “Class” impostiamo un valore per applicare lo stile metro per i button, in particolare quello relative al blu informativo.

<asp:Button ID="Button1" runat="server" class="button info block-shadow-info text-shadow" Text="Prova" />

Proviamo ad eseguire il nostro codice, vedremo che nei vari browser (IE, Chrome, firefox, edget, etc.) verrà visualizzato il pulsante con un certo stile, azzurro.
Nel esempio precedente abbiamo visto come applicare uno stile ad un controllo button, ossia ad un pulsante di .Net.
Se invece vogliamo applicare dei controlli particolari, tipo una galleria fotografica, possiamo utilizzare il controllo Carousel qui https://metroui.org.ua/carousel.html diversi esempi.
Vediamo come applicate tale stile, e magari mettere anche del testo oltre che delle immagini.
Si crea una nuova cartella denominata “img” a questo punto si aggiungono delle immagini di tipo “.Jpg”.
Nella masterpage, dobbiamo aggiungere il riferimento a javascript, qui di seguito il frammento di codice.

<link href="Content/metro.css" rel="stylesheet">

    <link href="Content/metro-icons.css" rel="stylesheet">
    <script src="Scripts/jquery-3.1.1.min.js"></script>

    <script src="Scripts/jquery-1.10.2.js"></script>

    <script src="Scripts/metro.js"></script>

A questo punto passiamo nella pagina aspx e scriviamo il codice html impostando i vari fogli di stile per applicare una certa grafica.
Qui di seguito si riporta la galleria fotografica, dove il primo riquadro è impostato con il testo, mentre le altre tre con immagini presenti nella cartella Img creata in precedenza.

<div class="carousel" data-role="carousel" data-height="200" data-control-next="" data-control-prev="" style="width: 100%; height: 200px;">

        <div class="slide padding20 debug" style="display: block; left: -224px;">

            <h2>Titolo Slide testo</h2>

            <p>

                Galleria :: immagini

            </p>

        </div>

        <div class="slide" style="display: block; left: -224px;">

            <div class="image-container image-format-fill" style="width: 100%; height: 100%;">

                <div class="frame">

                    <div style="width: 100%; height: 100%; background-image: url("Img/immagin1.jpg"); background-size: cover; background-repeat: no-repeat; border-radius: 0px;"></div>

                </div>

            </div>

        </div>

        <div class="slide" style="display: block; left: -224px;">

            <div class="image-container image-format-fill" style="width: 100%; height: 100%;">

                <div class="frame">

                    <div style="width: 100%; height: 100%; background-image: url("Img/Immagine2.jpg"); background-size: cover; background-repeat: no-repeat; border-radius: 0px;"></div>

                </div>

            </div>

        </div>

        <div class="slide" style="display: block; left: 0px;">

            <div class="image-container image-format-fill" style="width: 100%; height: 100%;">

                <div class="frame">

                    <div style="width: 100%; height: 100%; background-image: url("Img/Immagine3.jpg"); background-size: cover; background-repeat: no-repeat; border-radius: 0px;"></div>

                </div>

            </div>

        </div>

        <div class="carousel-bullets"><a class="carousel-bullet" href="javascript:void(0)" data-num="0"></a><a class="carousel-bullet" href="javascript:void(0)" data-num="1"></a><a class="carousel-bullet" href="javascript:void(0)" data-num="2"></a><a class="carousel-bullet bullet-on" href="javascript:void(0)" data-num="3"></a></div>

        <span class="carousel-switch-next"><span class="mif-chevron-right"></span></span><span class="carousel-switch-prev"><span class="mif-chevron-left"></span></span>

    </div>

Conclusioni

Lo sviluppo di soluzioni con .Net è notevolmente cambiato con le ultime due versioni di Visual Studio e tramite l’introduzione di Nuget, che ha permesso a molti programmatori del mondo di condividere e soprattutto mettere a disposizione gratuitamente alla collettività, tools, librerie ed altro ancora per la stesura di applicazioni, permettendo in questo modo a tutti gli utilizzatori di questo ambiente di sviluppo di realizzare applicazioni in maniera più rapida ed efficiente.
L’utilizzo di framework, che estendono le funzionalità di .Net 4.6 è molto importante, perché riducono il tempo di realizzo ed al tempo stesso forniscono ai programmatori strumenti con funzionalità ampliate ed avanzate.
L’articolo non solo ha voluto evidenziare l’utilizzo di questo framework per applicare un certo stile alle applicazioni Asp.Net ma anche le potenzialità e l’importanza di Nuget, che permette a molti di mettere a disposizione della comunità di programmatori .Net interessanti risorse.