Architecture n-tiers Ajax .NET
WPF : les interfaces homme machine de demain
.NET 3.0 est sorti récemment en version RTM. Il comprend les briques WinFX soit WPF (Windows Presentation Fondation), WCF (Windows Communication Fondation) et WWF (Windows Workflow Fondation).
Après quelques jours de test sur ces nouveautés, je me demande si WPF ne va pas bientôt révolutionner les interfaces homme machine et je pense sincèrement qu'il nous donne un aperçu de l'espace de travail de demain (genre bureau métier futuriste) et que dans la mouvance Web 2.0, WPF permettra de redonner un sens aux applications côté utilisateur en lui proposant des interfaces riches et fonctionnelles.
WPF est composé d'un runtime et d'un langage de description des interfaces pur XML qui se nomme XAML. WPF permet, ce que tout les dévelopeurs attendaient depuis des années, de définir des IHM indépendantes du device (navigateur sur poste de travail, application standalone sur poste de travail, tablet pc, mobile device sous Windows Mobile, PDA). Néanmoins cette indépendance reste cantonner au monde Microsoft mais je vous engage à surveiller de près les évolutions de WPF/E (WPF Everywhere) qui permettra d'exécuter des applications WPF sur n'importe quel OS et n'importe quel navigateur.
Modèle MVC et AJAX
Le modèle MVC (Modèle Vue Controller) permet de découpler la présentation des couches applicatives inférieures.
AJAX permet de concevoir des IHM plus riches où une partie de la navigation est gérée dans une logique cliente.
Il me semble que la confusion entre controller côté serveur et contrôleur côté client risque de semer le trouble et de compliquer la tâche des développeurs. En tout cas, MVC perd son sens contrôleur des actions de l'utilisateur car manifestement celui-ci ne contrôle plus grand chose.
Il n'est pas, à mon sens, insensé de se passer de ce pattern pour les applications de type Web Ajax surtout si les éléments graphiques sont liés à une source de données de type "business object" à la sauce Visual Studio.
Gridview et DetailView avec ASP.NET AJAX
Le but de cet article est de construire une page AJAX contenant une gridView et une detailView du genre master/detail.
Les pré-requis sont :
- Visual studio 2005
- asp.net ajax 1.0 beta2
L'installation de asp.net ajax fournit un ensemble d'outils supplémentaires dans la toolbox :
- Timer : permet le rafraichissement partiel et périodique d'une page
- ScriptManager : objet de base qui permet d'éviter le postback (à condition de positionner à true la propriété EnablePartialRendering
- ScriptManagerProxy (gestion du scriptmanager dans des pages complexes avec des frames par exemple)
- UpdatePanel : permet de définir une entité (un panel) pour le rafraîchissement partiel
L'installation permet également de disposer d'un template de projet et de page pour asp.net ajax.
Pour commencer :
- construire un nouveau site Web Ajax : File-->New-->Web site et choisir Asp.Net Ajax Enabled Web Site
- Le template génère une page par défaut (Default.aspx) blanche qui contient le code suivant :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"> <title>Untitled Page</title>
</head>
<body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> </div> </form>
</body>
</html>
CODE HTML COMPLET DE LA PAGE
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="comptes.aspx.cs" Inherits="comptes" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server"> <title>Consultation des comptes</title> <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"> </asp:ScriptManager> <div id="header" style="width: 678px; height: 65px"> <br /> <asp:Menu ID="Menu1" runat="server" BackColor="#E0E0E0" DynamicHorizontalOffset="2" Font-Names="Arial" Font-Size="Large" ForeColor="#0000C0" Orientation="Horizontal" StaticSubMenuIndent="10px" Width="780px"> <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" /> <DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" /> <DynamicMenuStyle BackColor="#F7F6F3" /> <StaticSelectedStyle BackColor="#5D7B9D" /> <DynamicSelectedStyle BackColor="#5D7B9D" /> <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" /> <Items> <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Accueil" Value="Accueil"></asp:MenuItem> <asp:MenuItem NavigateUrl="~/comptes.aspx" Text="Comptes" Value="Comptes"></asp:MenuItem> <asp:MenuItem NavigateUrl="~/mouvements.aspx" Text="Mouvements" Value="Mouvements"></asp:MenuItem> <asp:MenuItem Text="Données personnelles" Value="Données personnelles" NavigateUrl="~/client.aspx"></asp:MenuItem> <asp:MenuItem Text="Etats" Value="Etats"></asp:MenuItem> </Items> <StaticHoverStyle BackColor="#7C6F57" ForeColor="White" /> </asp:Menu> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:ObjectDataSource ID="comptesDS" runat="server" SelectMethod="getComptesForClient" TypeName="bankdemoBL.Operations"> <SelectParameters> <asp:SessionParameter Name="idclient" SessionField="idclient" Type="Int64" /> </SelectParameters> </asp:ObjectDataSource> <div style="text-align: center"> <table> <tr> <td style="width: 500px; height: 210px;"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" DataKeyNames="id" DataSourceID="comptesDS" ForeColor="Black" GridLines="Vertical" SelectedIndex="0" Width="347px"> <FooterStyle BackColor="#CCCCCC" /> <Columns> <asp:CommandField ShowSelectButton="True" /> <asp:BoundField DataField="id" Visible="False" /> <asp:BoundField DataField="numcompte" /> <asp:BoundField DataField="libcompte" /> </Columns> <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" /> <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="#CCCCCC" /> </asp:GridView> </td> <td style="width: 850px; height: 210px;"> <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" CellPadding="4" DataSourceID="compteDS" ForeColor="#333333" GridLines="None" Height="50px" Width="265px"> <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <CommandRowStyle BackColor="#E2DED6" Font-Bold="True" /> <EditRowStyle BackColor="#999999" /> <RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> <Fields> <asp:BoundField DataField="id" HeaderText="id" SortExpression="id" /> <asp:BoundField DataField="numcompte" HeaderText="N° compte" SortExpression="numcompte" /> <asp:BoundField DataField="libcompte" HeaderText="Libellé" SortExpression="libcompte" /> <asp:BoundField DataField="datecreat" DataFormatString="{0:dd/MM/yyyy}" HeaderText="Date création" HtmlEncode="False" SortExpression="datecreat" /> </Fields> <FieldHeaderStyle BackColor="#E9ECF1" Font-Bold="True" /> <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> </asp:DetailsView> <asp:ObjectDataSource ID="compteDS" runat="server" SelectMethod="getFicheCompte" TypeName="bankdemoBL.Operations"> <SelectParameters> <asp:ControlParameter ControlID="GridView1" Name="idcompte" PropertyName="SelectedValue" Type="Int64" /> </SelectParameters> </asp:ObjectDataSource> </td> </tr> </table> </div> </ContentTemplate> </asp:UpdatePanel> </form> </body>
</html>
Custom membership provider minimaliste appelant une fonction métier
- Nous allons voir comment mettre en place une authentification pour un site WEB en utilisant les outils Microsoft et en customisant un MembershipProvider.
Par défaut, les fonctions d'authentification et de gestion des rôles peuvent être délèguer au provider par défaut (AspnetMembership provider). Celui-ci va lire les données dans une base SQL. Cette manière de faire pose des problèmes d'architecture et de sécurité car : la couche présentation accède directement à la couche DATA.
Nous allons donc construire notre propre fournisseur pour l'authentification qui respectera les règles habituelles.
Pour cela :
- Identifier la fonction métier qui réalise l'authentification : ici ce sera l'interface IOperations via la fonction authentifie
System.Int64 op.authentifie(string username, string password);
- Créer une classe (par exemple MonMembershipProvider qui dérive de la classe MembershipProvider)
public class MonMembershipProvider : MembershipProvider
Il faut ensuite surcharger les nombreuses méthodes et propriétés.
- Au minimum, il faut implémenter :
- la propriété Name (nom du provider)
public override string Name
{
get
{
return "MonMembershipProvider";
}
}
- la méthode ValidateUser
- public override bool ValidateUser(string username, string password)
- {
- IOperations op = new Operations();
- Int64 res = op.authentifie(username, password);
- if (res != 0)
- {
- HttpContext.Current.Session.Add("idclient", res.ToString());
- return true;
- }
- else
- return false;
- Modifier le fichier Web.config
<authentication mode="Forms">
<forms loginUrl="login.aspx" timeout="20">
</forms>
</authentication>
<authorization>
<deny users="?" />
</authorization>
<membership defaultProvider="MonMembershipProvider">
<providers>
<add name="MonMembershipProvider"
passwordFormat="Hashed"
minRequiredPasswordLength="2"
minRequiredNonalphanumericCharacters="0"
requiresQuestionAndAnswer="False"
requiresUniqueEmail="True"
type="bankdemoAJAX.MonMembershipProvider"/>
</providers>
</membership>
Il ne reste plus qu'à faire glisser sur la page login.aspx un contrôle "Login" et modifier la propriété membershipProvider à MonMembershipProvider. Voilà c'est fini. Pour aller plus loin, il est possible de surcharger CreateUser, ChangePassword ...
Quelques astuces rails
Rails NomAppli
(dans script) ruby generate migration nomTable
Dans dbmigrate