Javascript

Tutorial - Créer une application mobile et desktop avec Mvc3

De Admin dans Javascript


 6/2/2015

Dans ce tutorial nous allons voir la facon la plus simple de développer une application web a la fois compatible 'desktop' et mobile. Avec l'apparence d'une apps.

Pour cela nous allons utiliser le plugin 51Degrees et Jquery Mobile.

Avec cette méthode, le contenu de l'application web et le contenu de l'application desktop seront les memes mais présentés de facon tres différentes. Dans une application professionnelle, souvent on souahite un site assez différent de l'application web. Nous verrons cela dans un autre tutorial mais le principe de base sera quasiment le meme.

Avec MVC4, tout sera déja intégré, mais en attendant l'arrivée de MVC4 c'est ici que ca se passe !

1) Créer une nouvelle application web de type MVC3:

 

 

2) Créer une nouvelle mise en page (layout) pour les mobiles

Copier coller le layout par defaut et le renommer _LayoutMobile.cshtml. Pour les futurs tests, vous pouvez rajouter un texte pour différencier les vues:

3) Modifier le "sélectionneur de mise en page" /Views/_ViewStart.cshtml

Remplacer:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Par:

@{
    Layout = Request.Browser.IsMobileDevice ? "~/Views/Shared/_LayoutMobile.cshtml" : "~/Views/Shared/_Layout.cshtml";
}

4) Tester notre application avec un navigateur de type Desktop et avec un émulateur mobile

Si vous ne voullez pas vous embeter avec un émulateur je vous conseil d'utiliser firefox avec l'extension User Agent Switcher

Sinon vous pouvez utiliser l'émulateur windows phone fournit par le windows phone sdk, ou l'émulateur iphone/ipad disponnible ici.

C'est partit pour les tests:

- Desktop (ici avec Firefox)

- Mobile (ici avec ibbdemo3)

Nous pouvons voir le texte "Hello I am a mobile"affiché

5) Probleme avec cette technique :

Tous les appareils et navigateur mobiles ne sont pas détecté par défaut avec le framework .Net

Example avec opera mobile :

C'est la version desktop qui est affiché

Pour remédier a ce problème, c'est ici que le plugin 51Degrees intervient

6) Installation du plugin 51Degrees

Pour cela, ouvrir la console NuGet package manager (Ou directement avec l'outil NuGet) et entrer la commande : Install-Package 51Degrees.mobi

Première chose a faire :

Plusieurs fichiers ont été créés, ouvrir le fichier de configuration 51Degrees.mobi.config et commenter ces lignes (Ces lignes servent uniquement pour une application ASP.NET):

<!--<redirect firstRequestOnly="false"
              mobileHomePageUrl="~/mobile/default.aspx"
              timeout="20"
              devicesFile="~/App_Data/Devices.dat"
              mobilePagesRegex="mobile">
</redirect>-->

Apres avoir compiler et rafraichi opera mobile, notre application est opérationelle pour la pluspart des mobiles du marché (De plus 51Degrees peut recevoir des mises a jour)

7) Maintenant a vous de personnaliser le design de votre application mobile

Courte introduction a jQueryMobile:

Retour a la console NuGet: Install-Package jquery.mobile

Que se passe t-il, il y a des fichiers partout ! Pas de panique... On va arranger ca.

Dans le dossier theme, creer un dossier 'mobile' et déposez y tous les fichiers liés a Jquery mobile. Deplacez le fichier Site.css dans le theme 'base'.

Ne pas oublier de mettre a jour _Layout.cshtml avec le theme par defaut et la nouvelle version de JQuery.

Voici a quoi ressemble le layout _LayoutMobile.cshtml pour utiliser jQueryMobile:

<link href="@Url.Content("~/Content/themes/mobile/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/mobile/jquery.mobile-1.1.1.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.mobile-1.1.1.min.js")" type="text/javascript"></script>

Nous pouvons maintenant commencer a faire joujou avec les éléments jQuery mobile :

<div data-role="page" class="page">
        <div data-role="header">
            <div id="title">
                <h1>My Mobile MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <div data-role="navbar">
                <ul>
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </div>
        </div>
        <section id="main" style="min-height: 300px">
            @RenderBody()
        </section>
        <div data-role="footer" style="text-align: center">
            Copyright : @DateTime.Now.Year
        </div>
</div>

Pour plus d'exemples : go to http://jquerymobile.com/demos

8) Résultat final:

Voila c'est fini !

Lire >>

Mise en place du lazy loading en asp.net

De Admin dans Javascript


 5/27/2015

Dans ce post nous allons voir comment utiliser le lazy loading de façon simple.

1) Télécharger le scripts requis:

http://www.appelsiini.net/projects/lazyload/jquery.lazyload.js

2) Dans le header de la page web: (Html, asp.Net, MVC,...)

Référencer les scripts :

<scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"type="text/javascript"></script>

<scriptsrc="Scripts/jquery.lazyload.js"type="text/javascript"></script>

<scripttype="text/javascript">
     $(document).ready(function () {
         $("img.lazy").lazyload({
             effect: "fadeIn"
         });
     });
</script>

3) Ajouter les images:

Liste des images :

   <ul>
            <li>
                <img class='lazy' data-original='images/img1.jpg' src='images/grey.png' width='640' height='480'>
            </li>
            <li>
                <img class='lazy' data-original='images/img2.jpg' src='images/grey.png' width='640' height='480'>
            </li>
            <li>
                <img class='lazy' data-original='images/img2.jpg' src='images/grey.png' width='640' height='480'>
            </li>
        </ul>

L'image avec la source grey.png correspond a une image grise de 1px/1px qui sera affichée avant l'appel de la fonction lazy load.

Le chargement des

...

Lire >>

Détecter l'état d'un CollapsiblePanel, collasped ou expand

De Admin dans Javascript


 5/27/2015

// Est il est fermé

if (cpe.ClientState == "true")
{
 
}

 

// Est il est ouvert

if (cpe.ClientState == "false")
{
 
}

Lire >>

Utiliser l'attribut MaxLength dans une TextBox Multiligne avec du JavaScript

De Admin dans Javascript

Tags: TextBox

 5/27/2015

La TextBox multiligne :

<asp:TextBox runat="server"
       ID="txtMulti"
       Width="100%"
       Rows="7"
       TextMode="MultiLine"
       Style="resize: none;"
       OnKeyPress="CaracMax(this, 10)"
       MaxLength="10" />

La fonction JavaScript :

function CaracMax(texte, max) {
    if (texte.value.length >= max) {
        texte.value = texte.value.substr(0, max - 1);
    }
}

Lire >>

Simple ajax loader en javascript

De Admin dans Javascript


 5/27/2015

Code Javascript

<script language="javascript" type="text/javascript">
function displayProgress()
{
    var hdn = document.getElementById('<%=hdnStatus.ClientID%>');
    var div = document.getElementById('<%=pnlBackGround.ClientID %>');
    if (div !=null)
    {
        var feedback = document.getElementById('<%=divFeedback.ClientID%>');
        if (hdn.value!=1)
        {
            feedback.innerHTML = "<img src='../Images/ajax-loader.gif'>Please wait...<br />";
            div.style.display = "block";
            setTimeout("displayProgress()", 1000);
            return true;
        }
        else
        {
            div.style.display = "none";
            return true;
        }
    }
    else
    {
        return true;
    }
}
</script>

Style Css

.popup-div-background
{
    position:absolute;
    top: 0;
    left: 0;
    background-color:#ccc;
    filter:alpha(opacity=90);
    opacity:0.9;  
    height: 100%;
    width: 100%;
    min-height: 100%;
    min-width: 100%
}
.popup-div-front
{
    background-color: #ffffff;
    color: black;
    width: 70%;
    text-align: left;
    vertical-align: middle;
    position: absolute;
    top: 5%;
    left: 15%;
    bottom:5%;
    font-weight:bold;
    padding: 10px 5px 5px
...

Lire >>

Ajouter à un CollapsiblePanelExtender, les événements OnExpanded et OnCollapsed

De Admin dans Javascript


 5/27/2015

<script type="text/javascript">

//Ajout de deux événements au collapsible pannel
function cpeInit()
{
try
{
var cpe = $find('<%= cpe.ClientID %>');
cpe.add_expanded(cpeExpanded);
cpe.add_collapsed(cpeCollapsed);
}
catch (e)
{
 
}
}
 
//  A l’ouverture du panel
function cpeExpanded()
{
 
}
 
//  A la fermeture du panel
function cpeCollapsed()
{
 
}
 
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(cpeInit);

</script>

Lire >>

JQuery - Javascripts tricks

De Admin dans Javascript


 5/20/2015

Supprimer tous les tags HTML d'une chaine de caracteres :

var stringWithoutHtmlTags = OriginalStringWithTags.replace(/(<([^>]+)>)/ig,"");

 

Utiliser replace all avec javascript, ex : Remplacer tous les points d'une chaine de caractere:

var chaineSansPoints = chaineAvecPoints.Replace(/\./g, "");

Replace(".","") remplacera seulement le premier point

 

Tester une date en jQuery avec une expression réguliere

- Fonction javascript

function testDate(str) {
   var m = str.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
   return (m) ? new Date(m[3], m[2] - 1, m[1]) : null;
}

- Utilisation

if (testDate(date) == null) {
    // Date false  

} else {
     // Date true

}

 

Tester si une chaine de caractere contient une sous chaine de caracteres (String contains substring)

if ($("#spnMessage").text().toLowerCase().indexOf("error") >= 0) {
…
}

 

Lire et obtenir le parametre dans une url (get query string parameter)

function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

 

Ajouter et supprimer une classe en jQuery

$("#theTextBox").addClass('highlightErrors');
 
$("#theTextBox").removeClass('highlightErrors');

 

Déclencher

...

Lire >>