Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Liens

Un Date Range Slider pour vos projet MVC
Un Date Range Slider est le mariage entre un Range Slider (un composant graphique permettant de sélectionner une plage de valeurs, soit un minimum et un maximum) et un Date Picker.

Voici un petit aperçu du composant :



Au début je pensais que le composant MVC Telerik Slider prenait en charge ce type de comportement mais en fait non, le composant ne gère que des nombres.
L'astuce est donc de traduire à la volée le chiffre minimum et le chiffre maximum en date. Pour cela je prends une date pivot qui correspond à ma date minimum. Cette date pivot sera le minimum saisissable dans le Slider. Pour chaque nombre (le minimum saisissable, le minimum choisit, le maximum choisit, le maximum saisissable) je compte le nombre de jours par rapport à cette date pivot et donc j'en déduis les dates.

Voici le code razor pour définir le composant Slider :

<div id="timewrapper">
  @(Html.Telerik().RangeSlider<int>()
    .Name("DateRange")
    .Tooltip(tooltip => tooltip.Enabled(false))
    .ClientEvents(events => events
      .OnChange("CustomTelerikExtensions.dateRangeSlider().updateDates")
      .OnSlide("CustomTelerikExtensions.dateRangeSlider().updateDates"))
    .Min(1)
    .Max(22)
    .Values(1, 22)
    .SmallStep(1)
    .LargeStep(21)
    .Orientation(SliderOrientation.Horizontal)
    .TickPlacement(SliderTickPlacement.BottomRight)
  )
</div>

<p>
  Début : <span id="minValueDiv"></
span>
  <br />
  Fin : <span id="maxValueDiv">
</span>
</p>



Je dois cacher le tooltip car le composant Telerik ne permet pas de surcharger son rendu. Si quelqu'un a une technique je suis preneur :)

J'indique donc la fonction à exécuter sur le changement ou le slide : updateDates.

Voici le code JavaScript pour gérer l'affichage et le calcul des dates :

<script type="text/javascript">
  (function () {
    CustomTelerikExtensions = window.CustomTelerikExtensions || {};

    CustomTelerikExtensions.dateRangeSlider = function (tId, minValueId, maxValueId, pDate, step) {
      var self = this;
      self.id = tId ? tId : "timewrapper";
      self.minBlocId = minValueId ? minValueId : "minValueDiv";
      self.maxBlocId = maxValueId ? maxValueId : "maxValueDiv";
      self.pivotDate = pDate ? pDate : new Date();
      self.col = $("#" + self.id + " .t-tick-large .t-label");
      self.largeStep = step ? step : 21;

      self.formatDate = function (d) {
        var day = d.getDate();
        var month = d.getMonth() + 1;
        day = (day < 10) ? "0" + day : day;
        month = (month < 10) ? "0" + month : month;
        return day + "/" + month;
      };

      var my = {};
      my.init = function (min, max) {
        my.updateValues(min, max);
      };
      my.updateDates = function (e) {
        var rangeSlider = $(this).data('tRangeSlider');
        var start = e.values[0];
        var end = e.values[1];
        my.updateValues(start, end);
      };
      my.updateValues = function (valueMin, valueMax) {
        var fDate = new Date(self.pivotDate);
        for (var i = 0; i < self.col.length; i++) {
          var j = (i < 1) ? 0 : self.largeStep;
          fDate.setDate(fDate.getDate() + j);
          var d = fDate.getDate();
          var m = fDate.getMonth() + 1;
          d = (d < 10) ? "0" + d : d;
          m = (m < 10) ? "0" + m : m;
          var txt = d + "/" + m;

          $(self.col[ i ]).text(txt);
        }

        var min = new Date(self.pivotDate);
        min.setDate(min.getDate() + valueMin - 1);
        $("#" + self.minBlocId).html(self.formatDate(min));

        var max = new Date(self.pivotDate);
        max.setDate(max.getDate() + valueMax - 1);
        $("#" + self.maxBlocId).html(self.formatDate(max));
      };
      return my;
    };
  })();

</
script>


Il reste à initialiser une première fois les dates à l'affichage de la page :

<script type="text/javascript">
  $(function () {
    CustomTelerikExtensions.dateRangeSlider().init(1, 22);
  });

</script>

Pour que le code fonctionne, il faut que la propriété LargeStep du RangeSlider possède la même valeur que la variable largeStep de la classe JavaScript dateRangeSlider.

Par défaut le code utilisera le slider contenu dans un bloc HTML avec l'Id "timewrapper", et les éléments HTML "minValueDiv" et "maxValueDiv" pour l'affichage des dates sélectionnées. La date pivot par défaut et la date du jour et le largeStep par défaut est de 21 jours.
Ces éléments peuvent être bien sûr redéfinis dans la création de la classe dateRangeSlider.

Pour utiliser le code et le rendre dynamique, il reste donc à utiliser des propriétés du ViewModel mais pour cela je vous laisserez écrire le code qui n'a rien de compliqué.

Il doit sûrement rester beaucoup de points d'optimisation du code, si vous avez des questions ou suggestions n'hésitez pas.

Julien Lefebvre
Asp.Net MVC Cascading Ajax DropDown avec les composants Telerik
Le composant Telerik ComboBox est un bon compromis si vous avez besoin d'une dropdown list avec un système d'autocomplétion tout en gardant un code html sémantique.
Je vous laisse découvrir les démos de ce composant en suivant ce lien.

Dernièrement, j'avais besoin d'avoir un effet de filtre automatique sur un deuxième ComboBox en fonction de la saisie sur le premier Combox.
Je vous propose donc de partager ma solution avec vous.

Dans votre View, sur la définition de vos ComboBox, rajoutez un appel Javascript sur la fonction OnChange de votre première liste :

<% Html.Telerik().ComboBox()
   .Name("Liste1")
   .ClientEvents(events => events.OnChange("Liste1_onChange"))
   .AutoFill(true)
   .BindTo(new SelectList(Model.Liste1, "Id", "Nom"))
   .HighlightFirstMatch(true)
   .Filterable(filtering => { filtering.FilterMode(AutoCompleteFilterMode.Contains); })
   .Render();
%>


<% Html.Telerik().ComboBox()
   .Name("Liste2")
   .AutoFill(true)
   .BindTo(new SelectList(Model.Liste2, "Id", "Nom"))
   .HighlightFirstMatch(true)
   .Filterable(filtering => { filtering.FilterMode(AutoCompleteFilterMode.Contains); })
   .Render();
%>


A la fin de votre View, rajoutez le code Javascript permettant de faire un appel Ajax pour alimenter votre deuxième ComboBox en fonction du premier choix.

<script type="text/javascript">
  function Liste1_onChange() {
    var combobox = $(this).data('tComboBox');
    if (combobox != null) {
      var value = combobox.value();
      $.getJSON('<%=Url.Action("_AjaxGetData", "MonController") %>?id=' + value, null, function (data) {
        if (data != null) {
          var body = $('#List2').data('tComboBox');
          body.dataBind(data);
          body.select(0);
        }
      });
    }
  }
</script>


En résumé, on récupère la sélection dans la variable value, puis on fait un appel Ajax (Controller : MonController, Méthode : _AjaxGetData) en passant la value dans le paramètre id. On récupère les valeurs en Json que l'on assigne à la ComboBox List2.
Bien sûr, en fonction du comportement que vous souhaitez, il faut rajouter du code dans les else des if pour indiquer ce que vous voulez si l'utilisateur met vide dans la première liste ou si vous ne récupèrez aucune valeur dans l'appel Ajax.

Puis, il suffit de créer la méthode dans votre Controller MonController pour renvoyer les données en Ajax.

public JsonResult _AjaxGetData(string id)
{
   var mesvaleurs = monRepository.GetData();
   if (!string.IsNullOrEmpty(id))
   {
     mesvaleurs = mesvaleurs.Where(v => v.MaProprieteId.Equals(id));
   }

   return new JsonResult {
     Data = new SelectList(mesvaleurs.ToList(), "Id", "Nom"),
     JsonRequestBehavior = JsonRequestBehavior.AllowGet
   };
}


Voilà, vous avez des cascading ComboBox avec l'ergonomie des composants Telerik. N'hésitez pas à faire un commentaire si vous avez des remarques ou des solutions pour améliorer la solution (ou des liens vers d'autres solutions).

Julien Lefebvre

Un bon jeu flash pour occuper vos journées d’intercontrat

Ca fait quelques jours que ma femme me parle sans arrêt d’un nouveau jeu qu’elle a découvert : Way of Wizdom.

Alors j’ai jeté un œil, curieux (et un peu obligé :P) et j’avoue que le principe du site est sympa.
D’après ce que j’ai pu en voir, il s’agit d’un jeu proposant des énigmes à résoudre et qui peut faire gagner plus de 3000€ de gains.
En fait, le principe est que plus il y a d’inscrits, plus le trésor augmente.

Bon, il s’agit d’un site en php / flash, pas de Silverlight ;), mais l’interface est facile à utiliser et les énigmes sont suffisamment dures pour animer les débats entre amis.

J’ai envoyé un petit mail au créateur du jeu pour qu’il m’en dise un peu plus sur le fonctionnement du site.
Je vous tiens au courant.

Liens du 07 Mai 2009 : Jeux, Web, Wallpapers & Ressources Graphiques
Voici une compilation des différentes choses qui ont attiré mon attention dernièrement. Une compilation de liens vers des articles, des blogs ou des ressources sur le web.
Bonne lecture !

Divers :
  • Google Fight 2 : utilise le volume de recherche effectué sur Google pour déterminer un gagnant entre deux expressions.
Jeux :
  • Grow Tower : trouver le bon ordre d'utilisation des ressources pour gagner. A tester aussi : les autres minis jeux disponible sur le site et le mini jeu de plateforme Dwarf Complete.
Web :
Wallpapers :
Ressources Graphiques :
Julien Lefebvre
Liens du 22 Avil 2009 : référencement, iPhone et ie8
Voici une compilation des différentes choses qui ont attiré mon attention dernièrement. Une compilation de liens vers des articles, des blogs ou des ressources sur le web.
Bonne lecture !

Internet Explorer :
iPhone :
Référencement :
Divers :
Julien Lefebvre
Articles choisis pour le référencement de votre site
Voici quelques liens vers des articles pour vous aider pour améliorer la visibilité et le référencement de votre site :
Julien Lefebvre
Liens du 24 Mars 2008 : Pong, Menus & Templates

Voici une compilation des différentes choses qui ont attiré mon attention dernièrement. Une compilation de liens vers des articles, des blogs ou des ressources sur le web. Bonne lecture !

Divers :

XHTML/CSS :

Julien Lefebvre
CMA CGM

Liens du 05 Mars 2008 : Jeux, Domino, CSS & Ressources Graphiques

Voici une compilation des différentes choses qui ont attiré mon attention dernièrement. Une compilation de liens vers des articles, des blogs ou des ressources sur le web. Bonne lecture !

Jeux :

  • MazeFrenzy : tout à la souris...
  • Mad : enfin un jeux un peu bourin :)

Vidéo :

XHTML/CSS :

Design :

Divers :

Julien Lefebvre
CMA CGM

Liens du 25 Février 2008 : iBand, Accessibilité, Fonts & CSS...

Voici une compilation des différentes choses qui ont attiré mon attention dernièrement. Une compilation de liens vers des articles, des blogs ou des ressources sur le web. Bonne lecture !

Divers :

  • SkyDrive : un espace de stockage de 5 Go disponible aussi pour les français
  • iBand : premier groupe sous iPhone !
  • Axe : le réveil selon Axe
  • Barbatruc : trop fort ce chat !
  • Neutrogena : voilà ce qu'il s'appelle glacé ses produits !

XHTML/CSS :

  • Propriété display : un tutoriel sur Alsacréations parlant de la mise en page avancée grâce à la propriété display

Javascript :

Accessibilité :

Software :

  • ExeLibrary : un site internet pour rechercher des informations sur les process Windows
  • Jottit : un eBloc Note pour tous !

Ergonomie :

Design :

  • Gallery of Date Stamps And Calendars : un article sur Smashing Magazine autour des calendriers et sélecteur de date
  • Vermeersch : un design sympa et une ergonomie originale pour ce portfolio
  • HDView : Benjamin Gauthey présente un tutorial pour utiliser HDView
  • Whitevoid : un autre exemple d'interface originale
  • Fonts & co : des fonts, des fonts et des fonts...

Julien Lefebvre
CMA CGM

Mais où trouver des Wallpapers qui tuent ?

Le monde se divise en 2 catégories. Les geek qui ont toujours un Wallpaper hyper classe qui rend tout le monde jaloux, et les autres, pas ceux qui creusent, mais ceux qui posent des questions pour savoir où trouver ces Wallpapers.

Voici une petite liste de favoris contenant des vrais Wallpapers :

  • Desktopography : un ensemble d'images créées à partir de photos de paysages retouchées
  • InterfaceLIFT : un site qui propose un nombre impressionnant de Wallpapers Wide Screen haute résolution
  • (Really) Stunning Desktop Wallpapers : un post sur le blog Smashing Magazine proposant une sélection de Wallpapers
  • Inewind : un petit site proposant des Wallpapers abstraits
  • Mandolux : la ressource indispensable pour les Wallpapers multi écrans
  • WSTaylor : un ensemble de Wallpapers autour du thème Windows

Si avec tout ceci vous n'arrivez pas à craner avec votre Wallpaper :)

Julien Lefebvre
CMA CGM

Liens du 18 Février 2008 : Honda, Freeze à New York, Javascript, Mind-blowing Gadgets...

Voici une compilation des différentes choses qui ont attiré mon attention dernièrement. Une compilation de liens vers des articles, des blogs ou des ressources sur le web. Bonne lecture !

Divers :

Jeux :

Animation :

  • Hema : un domino cascade sur une boutique en ligne

Vidéo :

Humour :

Musique :

  • Moby : la musique de Moby gratuit

Ajax :

  • DynAjax : un framework ASP .Net basé sur la librairie Prototype

HTML/CSS :

  • 10 best CSS hacks : no comment... à connaître, même si les hacks css c'est le mal !

Javascript :

Software :

Design :

Emploi :

Julien Lefebvre
CMA CGM

Techdays J+4

C'était les premiers Techdays pour moi et c'était vraiment excellent !

Avec 300 sessions techniques différentes, on peut dire que c'était assez intense. Bien sûr le plus dur était de faire un choix entre les différentes sessions. J'attends donc avec impatience les webcasts pour voir ce que j'ai manqué.

En résumé, les sessions marquantes :

  • ADO .Net Entity Framework qui propose une solution de Mapping/Objet (et qui marche avec Oracle !)
  • ADO .Net Data Services (projet Astoria), super session présenté par Pierre et Mitsu
  • Microsoft Search Server qui pourrait me permettre d'avoir une solution simple pour le système de recherche sur le site de ma boîte
  • Linq, la présentation de l'utilisation avancée de Linq par Mitsu
  • ASP .Net (ce que l'on a peut être manqué) qui ma permis d'apprendre un/deux trucs sur ASP .Net
  • ASP .Net Futures avec la présentation des Dynamic Data Controls et la gestion de l'historique & bouton back
  • Sync Services qui propose une solution élégante pour gérer le mode connecté/déconnecté
  • Multi-touch interface qui permet d'avoir un aperçu sur les différentes solutions proposant une interface utilisateur basée sur l'utilisation de nos 2 mains (Surface & co...)
  • Windows Server 2008 avec principalement IIS 7 et la version Core Server

Ce que j'ai manqué : F#, la session de Cyril Durand autour de Javascript et la présentation de II7 pour les développeurs.

Enfin, j'aurais bien aimé assister à une session autour du Framework MVC pour ASP .Net ainsi qu'une session de présentation du projet Volta.

En conclusion, 3 jours assez intenses, des sessions très intéressantes, le plaisir de mettre un visage sur certains noms et beaucoup de nouveautés à tester que je redescend avec moi sur Marseille.

Julien Lefebvre
CMA CGM

Premier post...

Premier post sur mon blog pour présenter en 2 mots ce que vous trouverez ici.
Architecte et responsable d'une équipe de fadas dans une société du sud de la France (Marseille), je vais essayer de partager les p'tites choses qui trainent dans mon cerveau ainsi que les différentes bétises que je trouve sur le web qui font bien rire le geek que je suis.

Je tiens à remercier Pierre Lagarde pour m'avoir pousser à avoir un blog pour partager avec la communauté.

A bientôt pour la suite.

Julien Lefebvre
CMA CGM



Les 10 derniers blogs postés

- Retrouvez-moi aux Microsoft experiences18 ! par Blog de Jérémy Jeanson le 11-06-2018, 22:25

- Office 365: Script PowerShell pour extraire les Teams associés à un utilisateur spécifié par Blog Technique de Romelard Fabrice le 11-06-2018, 13:37

- SharePoint: Extraire les pages publiées dans un site de publishing en CSV par Blog Technique de Romelard Fabrice le 11-06-2018, 11:04

- Office 365: Comment créer un jeu de Pages Modernes dans un Modern Site SharePoint Online en utilisant PowerShell depuis un fichier CSV par Blog Technique de Romelard Fabrice le 10-17-2018, 12:50

- Office 365: Comment Utiliser les Modern Pages dans un Site Intranet SharePoint basé sur le Publishing site par Blog Technique de Romelard Fabrice le 10-16-2018, 15:34

- Office 365: Comment changer le nom “Auteur” dans les pages modernes d'un Modern Site SharePoint Online par Blog Technique de Romelard Fabrice le 10-16-2018, 15:07

- Reprise des articles Codes-Sources de 2011 à 2013 par Blog de Jérémy Jeanson le 08-21-2018, 16:08

- Office 365: Modifier les jeux de couleur dans les Thèmes des pages classiques de SharePoint Online par Blog Technique de Romelard Fabrice le 08-08-2018, 17:27

- Office 365: Modifier les jeux de couleur dans les Thèmes des pages modernes de SharePoint Online par Blog Technique de Romelard Fabrice le 07-04-2018, 13:26

- Office 365: Script PowerShell pour fixer le Quota Warning de toutes les collections d’un tenant par Blog Technique de Romelard Fabrice le 07-03-2018, 14:16