Dins del desenvolupament web, hi ha la part més fàcil que és muntar en HTML el formulari que es farà servir per editar dades. L'HTML pertany al que s'anomena part client. Quan es genera l'HTML que dóna estructura a la part client no es posen estils (excepte casos concrets), ni events, ni dades. El que obtenim és un HTML senzill d'entendre i de mantenir, sense barrejar conceptes.
Normalment, tota l'aplicació web fa servir els mateixos fitxers de Javascript i els mateixos CSS, això juntament amb la validació de seguretat ho poso en una MasterPage.
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Blog.Master.cs" Inherits="Blog.Master.Blog" %>
<%
if (Session["IdLogin"] == null) Response.Redirect("login.htm");
%>
<!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">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="icon" href="~/img/favicon.gif" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="~/css/blitzer/jquery-ui-1.8.14.custom.css" />
<link rel="stylesheet" type="text/css" href="~/css/grid/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="~/css/jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="~/css/thickbox.css" />
<link rel="stylesheet" type="text/css" href="~/css/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="~/css/Manteniment.css" />
<link rel="stylesheet" type="text/css" href="~/css/jquery-ui-timepicker-addon.css" />
<script type="text/javascript" src="<%=ResolveUrl("~/js/jquery-1.6.2.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/js/jquery-ui-1.8.14.custom.min.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/js/ui.datepicker-ca.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/js/jquery.bgiframe.min.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/js/jquery.ajaxQueue.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/js/thickbox-compressed.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/js/jquery.autocomplete.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/js/grid/i18n/grid.locale-cat.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/js/grid/jquery.jqGrid.min.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/js/ddsmoothmenu.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/js/deserialize.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/js/jquery-validate/jquery.validate.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/js/jquery-validate/localization/messages_ca.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/js/jquery-ui-timepicker-addon.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/js/helper.js")%>"></script>
<style type="text/css">
#capcalera td
{
padding: 5px 5px 5px 5px;
}
</style>
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<table id="capcalera" border="0" cellspacing="0" style="width: 100%;">
<tr>
<td><a href="<%=ResolveUrl("~/Blog.aspx")%>">
<img src="~/img/laughing_man_p.jpg" alt="Manteniment del blog" runat="server" /></a></td>
<td id="logout">Manteniment del Blog (<a href="<%=ResolveUrl("~/login.ashx")%>?action=logout">Sortir</a>)</td>
</tr>
</table>
<asp:ContentPlaceHolder ID="Contingut" runat="server"></asp:ContentPlaceHolder>
</body>
</html>
Aquesta MasterPage permet que tota l'aplicació tingui la mateixa política de seguretat (excepte la pantalla de login) i també tingui una estructura uniforme. Si l'aplicació té un menú també es posa a la MasterPage. Hi ha dos "placeholders" (en negreta al codi), un pel cap ("head") i una altra pel cos ("body"). Les pàgines filles ompliran aquests dos "forats" amb el seu propi contingut, es a dir cada pàgina farà servir la MasterPage i només tindrà un apartat "head" i un "body", sense declarar res més. Això facilita molt el manteniment, per exemple si es vol canviar una versió d'un component només fent la substitució a la MasterPage hi ha prou. Veiem un exemple del head:
<asp:content id="Contingut_Head" contentplaceholderid="head" runat="server">
<title>Manteniment Blog</title>
<script type="text/javascript" src="<%=ResolveUrl("~/js/posts.js")%>"></script>
<script type="text/javascript">
$(document).ready(function () {
CreatePostEvents();
});
</script>
</asp:content>
En el head va ben poca cosa, però important. El titol de la pàgina, el seu fitxer Javascript particular que gestionarà la pàgina, i la crida a la funció que crea els events. Aquesta funció que crea els events només es crida quan la pàgina ja està carregada. Ara toca un exemple del body, que és força net:
<asp:content id="Contingut_Detall" contentplaceholderid="Contingut" runat="server">
<div style="padding: 0px 5px 5px 10px">
<table id="grdPosts" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager_grdPosts" class="peugrid" style="text-align:center;"></div>
<form id="frmDetall" class="frm" action="">
<input type="hidden" name="IdPost" id="IdPost" />
<fieldset>
<legend>Detall</legend>
<table border="0">
<tr>
<td class="tar"><label for="Titol" id="lblTitol">Títol</label></td>
<td class="tal"><input type="text" name="Titol" id="Titol" size="80" class="required" /></td>
</tr>
<tr>
<td class="tar"><label for="PostText" id="lblPostText">Post</label></td>
<td class="tal"><textarea name="PostText" id="PostText" cols="100" rows="15"></textarea></td>
</tr>
<tr>
<td class="tar"><label for="DataPub" id="lblDataPub">Data pub</label></td>
<td class="tal"><input type="text" name="DataPub" id="DataPub" size="20" class="required" /></td>
</tr>
<tr>
<td class="tar"><label for="IdAutor" id="lblIdAutor">Autor</label></td>
<td class="tal"><select name="IdAutor" id="IdAutor" style="width: 150px;" ></select></td>
</tr>
<tr>
<td class="tar"><label for="Actiu" id="lblActiu">Actiu</label></td>
<td class="tal"><input type="checkbox" name="Actiu" value="True" /></td>
</tr>
</table>
<table border="0" style="width: 100%">
<tr>
<td class="tal">
<input id="btnDelete" type="button" value="Eliminar" class="btn" />
<input id="btnNou" type="button" value="Nou" class="btn" />
</td>
<td class="tar"><input id="btnSave" type="button" value="Guardar" class="btn" /></td>
</tr>
</table>
</fieldset>
</form>
Hi ha detalls MOLT importants que comentar sobre un HTML que sembla tan inofensiu. La forma de maquetar amb taules o div, això ja va a gust del consumidor, donat que les empreses no són donades a fer servir navegadors moderns amb taules és més quadrat, però això ja és una discusió que queda fora d'aquest post.
Els detalls rellevants a comentar són:
- Perque la deserialització funcioni el camp ha de tenir el mateix nom que a la BBDD. Bé, de fet no és obligatori però sí recomanable. Si no acaba sent un galimaties.
- És important que tots els camps dins d'un formulari tinguin un camp id únic.
- Els checkbox han de tenir value=True, així es deserialitzen correctament.
- Els combos no tenen dades, es carreguen amb el comboloader.ashx a la part servidora i el LoadCombos al Javascript.
- Els grids a l'HTML venen representats per una taula i un div. Queda petit en temps de disseny però és un grid ben gran.
- Els calendaris no apareixen aquí, es creen per javascript.
- Els botons es defineixen sense events, es fan per javascript.
|