Maak je web applicatie mobiel via jQuery Mobile

Responsive web applicaties, kan je nog zonder? In deze post hebben we het over de mogelijkheid om een bestaande ASP.NET MVC 4 applicatie snel uit te breiden naar een mobiele applicatie. Op basis van het toestel wordt bepaald of de volledige applicatie of de mobiele applicatie getoond zal worden.

Wij maken gebruik van Visual Studio 2012 Web Express, ASP.NET MVC 4 en JQuery Mobile 1.1.1. Al deze software is gratis te gebruiken.

jQuery Mobile

jQuery Mobile is een op HTML5 gebaseerd user interface framework. Het laat je toe om je huidige website om te vormen tot een mobiele website. Deze oogt mooi en is gebruiksvriendelijk op elk mobiel toestel. Je mobiele website heeft de look en feel van een applicatie, maar is er geen. Het is en blijft een website die dus platform onafhankelijk is.

Starten met jQuery Mobile

Van start gaan is kinderspel. Je kan beginnen met een nieuwe website of je kan een bestaande website omvormen. In het voorbeeld vertrekken we van een bestaande ASP.NET MVC 4 applicatie. Dit omwille van de kracht van de combinatie met jQuery Mobile aan te tonen.

Kookboek applicatie

We hebben een applicatie die verschillende uitstekende recepten bevat. De gebruiker krijgt direct een lijst te zien van recepten, gegroepeerd per categorie. Dit toont mooi op een desktop.

Go Mobile

De website oogt niet mooi als het wordt getoond op een smartphone. Een mobiele ervaring is hier een echte must. Met jQuery kunnen we de gebruikers het gevoel geven dat ze met een mobiele applicatie aan het werken zijn.

Om jQuery Mobile in je project te voorzien zal je volgende stappen moeten doorlopen:

1. Installeer jQuery Mobile via NuGet
   
2. Installeer de volgende handige package. Deze zorgt ervoor dat je web applicatie kan worden opgesplitst in een standaard- en mobiele versie.
   PM> Install-Package jQuery.Mibile.MVC

Wat is er achter de schermen gebeurd?

Tijdens het installeren van de jQuery.Mobile.MVC package zijn er enkele zaken gebeurd. Enkele belangrijke elementen om te weten:

• Mobile.cshtml toegevoegd
  • Master page die gebruikt zal worden wanneer web applicatie op een mobiel toestel geopend wordt
  • Verwijzingen naar CSS en JavaScript bestanden van jQuery Mobile
• ViewSwitcher
  • Toont link waarmee je tussen de standaard – en mobiele versie kan wisselen

Werkt dit? Wees maar zeker!

We kunnen snel te weten komen of de mobiele website al werkt. Een handige tool hiervoor is ‘Opera Mobile Emulator’. Je kan dit hier downloaden.

Build en run de applicatie in je standaardbrowser. Je krijgt een normale web applicatie te zien.

Kopieer nu de link, open de Opera Mobile Emulator en kies een toestel. Plak vervolgens de link in de adresbalk en surfen maar! Je krijgt meteen een heel ander resultaat.

Merk op dat er verschillende dingen zijn veranderd:

• Link naar ‘Desktop View’
• Geen CSS
• Geen Menu

Look and feel met jQuery Mobile

Er is nog werk aan de winkel. De mobiele versie bevat nog geen mooie opmaak. Om een mooie mobiele look en feel te creëren, gaan we de mogelijkheden van jQuery Mobile gebruiken.

Include JavaScript en CSS

Voordat we gebruik kunnen maken van jQuery Mobile moeten we de referenties nog leggen.

<script src="~/Scripts/jquery.mobile-1.1.1.min.js" type="text/javascript">script>

    <link rel="stylesheet" type="text/css" href="~/Content/jquery.mobile-1.1.1.min.css" />

Attributen

jQuery Mobile is gebaseerd op attributen die zeer eenvoudig te implementeren zijn. Een mobiele pagina wordt standaard onderverdeeld in drie delen: header, content en footer. Dit wordt bekomen door gebruik te maken van het ‘data-role’ attribuut.

• Data-role=”page”>
• Data-role=”header>…
• Data-role=”content”>…
• Data-role=”footer”>…

Kookboek

We gaan een bestaande ASP.NET MVC 4 web applicatie omvormen. Zo is deze mobile friendly. We vertrekken van een simpele kookboek applicatie.

Per categorie worden de recepten getoond. Rechtsboven zie je ons standaardmenu. Hiermee kunnen we al van start gaan!

Menu

Zoals we daarnet opgemerkt hadden, is ons menu in de mobiele website verdwenen. Als we dit terugplaatsen krijgen we het volgende te zien:

<div data-role="header">

            <ul id="menu">

                <li>@Html.ActionLink("Home", "Index", "Home")li>

                <li>@Html.ActionLink("About", "About", "Home")li>

                <li>@Html.ActionLink("Contact", "Contact", "Home")li>

            ul>

        div>

We hebben ons lijstje van menu items, maar het geheel zier er niet als een menu uit. Gelukkig biedt jQuery Mobile hier een handige oplossing voor. Namelijk: data-role=”navbar”. Plaats je <ul> in een <div>. Voorzie je div van data-role=”navbar”. Je krijgt het volgende resultaat:

Dankzij deze navbar data-role wordt er achterliggend de nodige CSS/JavaScript toegepast. Zo ziet het menu er uit als een echt menu.

Receptenlijst

Via de HomeController wordt op de Index view een lijst getoond van de recepten, gegroepeerd op categorie. Zo’n lijstje is nu misschien goed, maar wat als er duizenden recepten zijn? Op je smartphone oneindig blijven scrollen naar beneden om de desserts te kunnen zien? Ik denk het niet! We kunnen dus best op zoek naar een control dat jQuery Mobile voorziet om gegroepeerde data weer te geven: de collapsible set.

Omdat we onze standaard Index.cshtml willen houden, kunnen we deze gewoon kopiëren en hernoemen. Bijvoorbeeld naar Index.Mobile.cshtml. De mobiele versie van index zal enkel getoond worden op een mobiel toestel.

Onze recepten worden als volgt opgebouwd:

@foreach (var cat in receptList)

{

        <h3>@cat.Keyh3>

        <ul>

            @foreach (var rec in cat)

            {

                <li>@rec.Naam : @rec.BereidingsTijdMinuten minutenli>

            }

        ul>

}

In onze <h3> tonen we de categorie, per categorie tonen we een ul van de recepten die tot deze categorie behoren. Het is belangrijk om dit formaat (<h3>, <ul>) te gebruiken, omdat jQuery Mobile dit verwacht bij het omvormen naar een collapsible set.

Collapsible set

Eenvoudiger kan het haast niet zijn om een Collapsible Set te maken. We moeten twee zaken doen:

• Wrapper div met data-role=”collapsible-set”
• Per catergorie div met data-role=”collapsible”

<div data-role="collapsible-set">

    @foreach (var cat in receptList)

    {

        <div data-role="collapsible">

            <h3>@cat.Keyh3>

            <ul>

                @foreach (var rec in cat)

                {

                    <li>@rec.Naam : @rec.BereidingsTijdMinuten minutenli>

                }

            ul>

        div>

    }

div>

Als resultaat krijgen we een mooie uitklapbare Collapsible Set te zien:

Merk op dat er aan onze standaard web applicatie niet verandert. Al hetgeen je in de Mobile.cshtml’s doet, wordt enkel toegepast als web applicatie op een mobiel toestel bezocht wordt.

ListView + zoekmogelijkheid

Een ListView is even eenvoudig te implementeren als een collapsible set:

<ul data-role="listview" data-inset="true" data-filter="true">

    @foreach (var r in Model)

    {

        <li>@r.Naamli>

    }

ul>

Het attribuut data-role=”filter” zorgt automatisch voor een tekstvak waarin je de zoekcriteria kan invullen.

Themes

Standaard voorziet jQuery Mobile vijf thema’s: a, b, c, d en e. Een thema gebruiken doe je door middel van data-theme=”a”. Je kan dit doen op elk niveau (page, div, …). De thema’s zijn op deze site beschreven.

Je kan zelf ook een thema maken via ‘Themeroller’.

Conclusie

jQuery Mobile zorgt er samen met ASP.NET MVC 4 voor dat je snel en eenvoudig een mobiele versie van je webapplicatie kan maken. Dit door enkel de bestaande pagina’s te kopiëren en te voorzien van de benodigde jQuery Mobile attributen. Dankzij de separation of concerns (Model-View-Controller) moet er aan de Controller en het Model niets gewijzigd worden. Ze zijn 100% herbruikbaar.

Geniet van al het moois dat jQuery Mobile en ASP.NET MVC 4 jou als programmeur aanbieden.

Probeer het zelf eens uit en laat ons weten of het lukt. Het is zeker de moeite.

Succes!