Metro Theme for Orchard CMS – Novità

Solo due giorni fa scrivevo due righe per notificare ai passanti che da qualche giorno, nel tempo libero, sto viluppando un tema per Orchard e che per ovvie motivazioni ho battezzato con il nome di  Metro Theme for Orchard

Ma tutto mi aspettavo tranne di arrivare in questi ultimi 2 giorni a rifattorizzare tutti i CSS con l’intento di migliorare la resa grafica e la navigabilità su diverse tipologie di dispositivi (tablet, smartphone, desktop, ecc…).

Che non si urli al miracolo, sia chiaro! 😀
..un lungo lavoro mi attende, dopo tutto il progetto ha solo una settimana di vita!

Comunque per il momento chi vuole può recarsi sul sito del progetto e scaricare i sorgenti per vedere il tema all’opera, sempre considerando che si tratta di una versione mooolto Alpha!

Ed ecco le nuove screenshoot del sito d’esempio che sto preparando e che appena terminato sarà scaricabile, come già fatto per il tema Mango Theme.

Metro Theme for Orchard - Light Blue

Metro Theme for Orchard - Dark Green

Annunci

Metro Theme for Orchard CMS

Un bel po’ di tempo fa ho sviluppato un tema dallo stile “vagamente” Windows Phone per Orchard CMS che potete trovare in rete con tanto di codice sorgente utilizzando la keywords Mango Theme (o più semplicemente cliccando sui link che vi ho lasciato).

Bene! Bravo Marco anche tu hai dato il tuo piccolo contributo al mondo dell’open source!

Questo era quello che pensavo fino a un po’ di tempo fa.. ma visto che non so mai tenere la bocca chiusa mi sono lasciato scappare in una discussione su un forum la notizia che di tanto in tando mi solleticava l’idea di sviluppare un tema in stile Metro Style (e si al tempo si chiamava ancora così) magari con qualche possibilità di personalizzazione in quanto ai colori, ecc..

Signori e signori parafrasando un’antica sentenza medievale oggi affermo che “ogni promessa è debito” ed io sono un uomo di parola… così questa notte invece di dormire sono qui ad uploadare su codeplex.com i sorgenti della versione 0.5 ancora in Alpha del tema “promesso” anche se la strada per una prima versione finale è ancora lontanuccia…

Per i più curiosi vi lascio alcune screenshot

Ecco il tema nella versione Light + Accent Color Blue

Metro Theme Orchard Blue - Home

mentre qui invece lo vediamo nella versione Dark + Accent Color Green con una panoramica sui principali stili tipografici attualmente disponibili

Metro Theme Orchard Dark Green

Inoltre visto che relativamente a Mango Theme mi è stato chiesto più volte di avere la possibilità di personalizzare alcune caratteristiche del tema direttamente dal pannello amministrativo di Orchard l’attuale view per la personalizzazione del tema

Metro Theme Settings

Bene, speriamo quindi di avere presto una prima versione finale!!! (ricordo che è gradito qualsiasi tipo di input, critica e/o consiglio (magari direttamente nel forum sul sito del progetto).

Bye! 😉

Disponibile Orchard 1.6

Da qualche giorno è disponibile ufficialmente la versione 1.6 di Orchard il CMS open source targato Microsoft.

Tra le novità più interessanti troviamo sicuramente:

  • Aggiornamento ad ASP.NET MVC 4 ed a Razor v2
  • Introdotto il supporto all’utilizzo delle Web API
  • Supporto a MySQL
  • SysCache per un’implementazione di default di un database cache provider
  • Netto miglioramento delle performance
  • Precompiled target: nuova modalità di build per distribuzioni senza codici sorgenti.
  • Estesa la configurazione delle sessioni ai moduli e per route.
  • Più di 200 i bug corretti

Sicuramente non si può negare che versione dopo versione Orchard ci offra una sempre crescente quantità di features interessanti.

Personalmente trovo particolarmente interessante il supporto alle Web API per la possibilità di sviluppare moduli che espongano le proprie funzionalità come API pubbliche!

Certo c’è da dire che con tutto questo “sfoggio” di ultime tecnologie non sarà facile (ovviamente questo è un eufemismo) trovare un hosting italiano che supporti il prodotto… ah… il bel paese!!! ma questo ovviamente è un problema che ritroviamo a prescindere dall’utilizzo del CMS in questione!

Ma ecco arrivato il momento dei consigli per gli acquisti!!! 😀 vorrei infatti pubblicizzare la neonata Community Italiana dedicata ad Orchard alla quale spero presto di poter offrire un po’ del mio tempo ma un link è pur sempre un buon inizio no?

E tu? Cosa ne pensi di Orchard?

MVC Web Api e IHttpControllerActivator Dependency Injection

In questi giorni sto lavorando ad un progetto interessante che prevede un massiccio uso di ASP.NET Web API.
Così, come ormai ad ogni startup di progetto, ci prepariamo ad architettare quel qualcosa 🙂 che ci permetta di iniettare dove necessario le giuste dipendenze allo scopo di semplificare la fase di test dei prodotti finali delle nostre svariate elucubrazioni mentali 😀 …

Dopo una serie di considerazioni fatte, sulle quali non mi dilungherò,  decidiamo di utilizzare MS Unity come IoC Container e ci lanciamo nell’ormai classica implementazione di un ControllerFactory per intercettare la creazione dei Controller per l’applicazione ASP.NET MVC4 come segue

public class UnityControllerFactory : DefaultControllerFactory
{
    private readonly IUnityContainer _container;

    /// <summary>
    /// Base Constructor
    /// </summary>
    ///Instance of Container.
    public UnityControllerFactory(IUnityContainer container)
    {
        _container = container;
    }

    /// <summary>
    /// Returns a valorized instance of the container.
    /// </summary>
    /// <param name="requestContext">Information about HTTP Request.</param>
    /// <param name="controllerType">Controller Type.</param>
    /// <returns></returns>
    protected override IController GetControllerInstance(RequestContext requestContext,
                                                         Type controllerType)
    {
        Contract.Requires(requestContext != null, "requestContext");
        Contract.Requires(controllerType != null, "controllerType");

        return _container.Resolve(controllerType) as IController;
    }

    /* Ulteriori override di nostra necessità...
     * protected override ...
     * {
     *    ...
     * }
    */
}

Nulla di nuovo quindi e procediamo a registrare il nostro container nel global.asax

public class WebApiApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();

        WebApiConfig.Register(GlobalConfiguration.Configuration);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);

        var container = this.GetContainer("unity");
        var unityControllerFactory = new UnityControllerFactory(container);
        ControllerBuilder.Current.SetControllerFactory(unityControllerFactory);
    }

    public IUnityContainer GetContainer(string name)
    {
        IUnityContainer container = new UnityContainer();

        object section = ConfigurationManager.GetSection(name);
        if (section == null)
            throw new InvalidOperationException("No unity configuration was found, could not instansiate container");

        UnityConfigurationSection unityConfigurationSection = section as UnityConfigurationSection;
        unityConfigurationSection.Configure(container);

        return container; 
    }
         
}

Ma purtroppo ci rendiamo subito conto che l’implementazione del nostro UnityControllerFactory non ci permette di intercettare la creazione degli ApiCotroller e di conseguenza neanche di iniettare le nostre dipendenze in questi ultimi… la soluzione?

Abbiamo bisogno di un UnityHttpControllerActivator (per ulteriori informazioni leggi qui)

Poche righe ancora quindi per intercettare la creazione i nostri WebApiController

public class UnityHttpControllerActivator : IHttpControllerActivator
{
    private readonly IUnityContainer _container;
    private readonly DefaultHttpControllerActivator _defaultActivator;

    public UnityHttpControllerActivator(IUnityContainer container)
    {
        _container = container;
        _defaultActivator = new DefaultHttpControllerActivator();
    }

    public IHttpController Create(System.Net.Http.HttpRequestMessage request, 
                                  HttpControllerDescriptor controllerDescriptor, 
                                  Type controllerType)
    {
        IHttpController httpController = _container.Resolve(controllerType) as IHttpController;
        if (httpController != null)
        {
            return _container.Resolve(controllerType) as IHttpController;
        }
        else
        {
            return _defaultActivator.Create(request, controllerDescriptor, controllerType);
        }
    }
}

a questo punto dobbiamo aggiungere alla funzione Application_Start nel global.asax

public class WebApiApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();

        WebApiConfig.Register(GlobalConfiguration.Configuration);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);

        var container = this.GetContainer("unity");
        var unityControllerFactory = new UnityControllerFactory(container);
        ControllerBuilder.Current.SetControllerFactory(unityControllerFactory);

        var unityHttpControllerActivator = new UnityHttpControllerActivator(container);
        GlobalConfiguration.Configuration.Services.Replace(typeof(IHttpControllerActivator), 
                                                           unityHttpControllerActivator);
    }
    
    ...
}

Bene! ..ed ora iniettate tutte le dipendenze di cui avete bisogno e buon lavoro! 😀

Microsoft nuovo logo

Diciamolo pure.. con il nuovo logo microsoft afferma totalmente la sua nuova veste grafica.. anche il marchio del colosso di Redmond infatti sposa quella che è stata negli ultimi anni la più importante novità del Sistema Operativo Windows la nuova UI proposta con Windows 8.

Microsoft nuovo logoMinimalista (come piace a me :P) per non dire quasi futurista.

Ma ormai è chiaro che tutti i prodotti targati microsoft stanno pian piano sposando il nuovo stile grafico… loghi, siti internet, locandine ed elementi grafici più disparati…

Windows 8 Apps – L’importanza del design

Uno degli aspetti fondamentali che ha contraddistinto da sempre lo sviluppo software (o almeno avrebbe dovuto :P) è sicuramente la cura del design e dell’esperienza utente. Chi di noi tra due applicazioni perfettamente identiche in termini di funzionalità, qualità e costo non utilizza come paramentro finale per la scelta del prodotto da acquistare la bellezza di quest’ultimo (e qui potreste ragionevolmente obbiettare che nella vita reale la bellezza della UI in realtà è il primo parametro considerato dall’acquirente indipendentemente dal funzionamento del software ma almeno qui fingiamo di essere in un mondo idealmente sano e razionale!!!).

Ma “diamo a Casere quel che è di Cesare” disse una volta qualcuno… curare il design di un’applicazione non dovrebbe essere una questione di sola gradevolezza ma anche e soprattutto di usabilità!

Chi di noi nel corso degli anni non si è ritrovato più volte a mordersi un labbro quando le interfacce grafiche dei software più utilizzati, magari in ufficio, sono mutate totalemente con un conseguente degrado iniziale delle prestazioni nel loro utilizzo?!?!

Vogliamo fare qualche esempio: Office? (ed ho detto tutto :P)

… eppure dobbiamo considerare che nulla viene fatto a caso e di certo microsoft, nel caso specifico ma analogamente gli altri colossi della produzione software, non gode del nostro malcontento e se nel tempo ha affrontato più volte un cambio radicale nella presentation dei propri pacchetti software lo scopo era quello di migliorare gradualmente la UX e questo purtroppo comporta delle fasi intermedie talvolta poco piacevoli ma necessaria sia per abituare l’utente alle successive novità sia per comprendere la giusta strada da intraprendere in base al riscontro ottenuto …come si dice? sbagliando si impara no?

Le Windows 8 Applications oggi rappresentano l’ennesimo cambio di stile ma questa volta oltre ad avere una rinnovata caratterizzazione grafica rispetto al passato (la cui gradevolezza dipende assolutamente dal gusto personale) stanno portando una modalità di interazione con il software completamente nuova e a mio avviso estremamente semplificata.

Grazie infatti:

  • all’apprendimento che potremmo definire quasi “a colpo d’occhio” grazie ad una UI basata sul contenuto che di conseguenza si descrive quasi da sola nelle sue funzionalità;
  • il minimalismo e la mancanza di elementi inutili in base al contesto funzionale;
  • l’alta fluidità e responsività dell’interfaccia;
  • lo studio dei colori e delle giuste proporzioni per catturare l’attenzione dell’utente;
  • l’interazione basata sul touch che a mio avviso, e qui ci scappa il sorriso, rende più intimo il rapporto tra l’utente e l’applicazione;

si vive frse un cambio generazionale sicuramente meno drammatico delle altre volte eppure questa volta le differenze sono veramente tante.

Inoltre vengono dati finalmente dei canoni base sui quali basare la user experience dei propri pacchetti software, canoni e principi che non devono essere vissuti come delle regole per limitare la creatività (anzi credo che le metro style applications aprano diversi scenari interessanti sotto il punto di vista della creatività) piuttosto come il punto di partenza per ridare la giusta importanza da troppo tempo sotratta alla figura dell’UX Designer.

Metro Style Apps – Data Binding – Quarta Parte

Come promesso in questo ultimo post relativo al Data Binding Dichiarativo relativo alle Metro Style Applicattions vedremo come sia possibile selezionare un item da una WinJS.UI.ListView e visualizzarne i dettagli in una nuova pagina html ovvero vedremo come sia possibile passare informazioni da una pagina all’altra in una Metro Style Application.

Utilizzeremo come base per l’esempio, l’applicazione vista nei post precedenti relativi al Data Binding Dichiarativo (quindi per chi non l’avesse già fatto ne consiglio la lettura). Se ricordate nel primo post della serie abbiamo creato una pagina (contact.html) per la visualizzazione di un singolo contatto e l’abbiamo utilizzata per un primo esempio di Binding non dichiarativo

Metro Style Apps - Data Binding - Esempio 1

nel secondo post della serie l’abbiamo poi affinata in modo tale da slegare la view dalle logiche di business con l’implementazione del Databiding Dichiarativo, da quel momento in poi abbiamo lavorato esclusivamente sulla pagina (homePage.html) relativa alla visualizzazione dell’intero set di items della nostra lista (che nell’esempio rappresenta un set di contatti per una rubrica)

Metro Style Apps – Data Binding – Esempio 1.2

Adesso quello che ci interessa rendere possibile è che al click su di un item della lista venga visualizzato il dettaglio del relativo contatto nella pagina contact.html.

Bene, come prima cosa dobbiamo aggiungere alla ListView un gestore di evento che si occupi di reagire al click sui singoli items e che passi le informazioni del contatto selezionato alla pagina di destinazione che ne visualizzerà il dettaglio a video, vediamo il codice:


(function () {
    "use strict";
    var nav = WinJS.Navigation;

    function dvContacts_iteminvoked(eventInfo)
    {
        var itemIndex = eventInfo.detail.itemIndex;
        var item = Contacts.items.getAt(itemIndex);
        nav.navigate("/html/contact.html", { item: item });
    }

    function ready(element, options) {
        WinJS.Binding.processAll();
        dvContacts.addEventListener("iteminvoked", dvContacts_iteminvoked);
    }

    WinJS.UI.Pages.define("/html/homePage.html", {
        ready: ready
    });

})();

Come è facile notare abbiamo definito un handler dvContacts_iteminvoked che recupera le informazioni del item selezionato (attenzione quando dico selezionato in realtà non è propriamente corretto in quanto il gestore iteminvoked risponde al click sull’elemento e non alla selezione) e le invia alla pagina /html/contact.html tramite il WinJS.Navigation (vedi post precedenti relativi alla Navigazione Utente) e lo abbiamo poi legato, tramite la funzione addEventListener, alla nostra ListView.
Semplice no??? ..eppure però questo approccio ancora una volta lega fortemente la view e la parte di Business.. quindi per evitare ciò potremmo pensare di apportare le seguenti modfiche:


(function () {
    "use strict";
    var nav = WinJS.Navigation;

    function dvContacts_iteminvoked(eventInfo)
    {
        var itemIndex = eventInfo.detail.itemIndex;
        var item = Contacts.items.getAt(itemIndex);
        nav.navigate("/html/contact.html", { item: item });
    }

    function ready(element, options) {
        WinJS.Binding.processAll();
        //dvContacts.addEventListener("iteminvoked", dvContacts_iteminvoked);
    }

    WinJS.UI.Pages.define("/html/homePage.html", {
        ready: ready
    });

    WinJS.Namespace.define("LestViewContactsEvents", {
        itemInvoked: dvContacts_iteminvoked
    });

})();

Ovvero abbiamo definito un namespace che espone un riferimento al nostro handler (LestViewContactsEvents.itemInvoked) cosicché possiamo lato view collegare dichiarativamente l’evento come segue:

<div id="dvContacts"
     data-win-control="WinJS.UI.ListView"
     data-win-options="{ selectionMode: 'single',
                         itemDataSource: Contacts.items.dataSource,
                         itemTemplate: select('#templateContactItem'),
                         oniteminvoked: LestViewContactsEvents.itemInvoked }">
</div>

Bene ma cosa succede ora nella pagina /html/contact.html che riceve i dati??? ..in realtà avevamo già creato la nostra pagina in modo che sapesse come visualizzare un oggetto JSON con la struttura degli item presenti nella nostra lista… così ci basterà semplicemente recuperare l’item passato dalla pagina /html/homePage.html e bindarlo alla view, vediamo come:

(function () {
    "use strict";
    
    WinJS.Namespace.define("Selected", {
        item: null
    });

    function ready(element, options) {
        if (options != null && options.item != null) {
            Selected.item = new WinJS.Binding.as(options.item);
            WinJS.Binding.processAll();
        }
    }

    WinJS.UI.Pages.define("/html/contact.html", {
        ready: ready
    });

})();

Anche qui quindi abbiamo dichiarato un namespace tramite il quale manteniamo un riferimento all’item selezionato (ovviamente il namespace essendo dichiarato nel file contact.js sarà visibile sono nei casi in cui questo file sarà linkato nella view consiglio quindi di dichiarare i namespace specifici per la view nel sorgente della view stessa in modo da non creare confusione) ed lo abbiamo poi valorizzato nell’evento ready con le informazioni recuperate da options che rappresenta, in questo caso, un riferimento all’item passato dalla pagina /html/homePage.html
Per quanto poi riguarda la view avremo il seguente codice:

<h2>Informazioni Contatto</h2>
<div id="divContact" 
     data-win-bindsource="Selected.item">
   <input id="contactName" type="text" data-win-bind="value: name" />
   <br />
   <input id="country" type="text" data-win-bind="value: country" />
   <br />
   <input id="phone" type="text" data-win-bind="value: phone" />
   <br />
   <input id="msn" type="text" data-win-bind="value: msn" />
   <br />
   <input id="skype" type="text" data-win-bind="value: skype" />
</div>

Conclusioni

Bene con questo post abbiamo chiuso il giro del DataBinding, ovviamente questi post rappresentano solo un infarinatura generale per capire come iniziare a lavorare con i dati nelle Metro Style Applications non hanno quindi la pretesa di essere esaustivi… ed inoltre è bello anche sperimentare no?!? 🙂 ..quindi sperimentate, sperimentate, sperimentate…..