 |
Por Mauricio Gonzatto mauriciogonzatto@hotmail.com Trabalho com desenvolvimento de software há 3 anos, atualmente com foco no desenvolvimento Web com ASP.NET. Sou moderador do fórum de Oracle ( http://glufke.net/oracle ). |
|
|
|
| Facilitando as instruções ao usuário em aplicativos Web | |
|
|
|
aplicativos winForm.
Alternar funções de teclas, enter por tab, execução de inserção com chamada por atalho no teclado e n outras funções.
Foi então que pensei em uma maneira de instruir o usuário a preencher formulários, ou seja, informá-lo
obrigatoriamente com as informações necessárias sobre determiando campo.
Inicialmente teremos um arquivo XML que guardará todas as mensagens, centralizando assim o controle e armazenamento:
teremos o nó principal e dividiremos em seções por página e por controle, o id é o próprio id do controle e o msg
é a mensagem a ser mostrada ao usuário quando ele receber o foco.
webMsg.xml
----------
<Mauricio>
<pagina id="Default.aspx">
<controle id="tb01" msg="Primeiro." />
<controle id="tb02" msg="Segundo teste para mensagens de instrução." />
</pagina>
</Mauricio>
em seguida montamos um mini-formulário como exemplo:
<form id="form1" runat="server">
<div>
<div id="divWebMsg" class="cssLoading">
</div>
Primeiro<asp:TextBox runat="server" ID="tb01" Width="200px"
onfocus="retornawebMsg(this);"
pag="Default.aspx" onfocusOut="removeFoco();">
</asp:TextBox><br />
Segundo:<asp:TextBox runat="server" ID="tb02" Width="200px"
onfocus="retornawebMsg(this);"
pag="Default.aspx" onfocusOut="removeFoco();">
</asp:TextBox>
</div>
</form>
veja que adicionamos uma tag XHTML ao componente ASP.NEt que informa a qual página ele pertence, para podermos
retornar futuramente a sua respectiva mensagem no documento XML.
adicionamos então uma referência a um documento JavaScript, onde estarão as funções que farão o trabalho "sujo" :D
<script type="text/javascript" src="webMsg.js"></script>
webMsg.js
---------
/*
Retorna posição x y do elemento html
Essa função irá nos informar em que posição da tela se encontra o componente
*/
function cumulativeOffset(element)
{
var valueT = 0, valueL = 0;
do
{
valueT += element.offsetTop || 0;
valueL += element.offsetLeft || 0;
element = element.offsetParent;
}
while (element);
return [valueL, valueT];
}
/*
Essa função se encarrega de limpar o o div que irá conter a mensagem e escondê-lo do usuário
*/
function removeFoco()
{
var divMsg = document.getElementById('divWebMsg');
document.getElementById('divWebMsg').innerText = "";
divMsg.style.visibility = "hidden";
}
/*
Essa função é responsável pela leitura da mensagem do componente no documento XML
Da inserção dessa mensagem no div e do posicionamento do div ao lado do componente que recebeu o foco
*/
function retornawebMsg(el)
{
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("webMsg.xml");
var xmlObj = xmlDoc.documentElement;
var elemento = xmlDoc.selectNodes("//Mauricio/pagina[@id='"+el.pag+"']/controle[@id='"+el.id+"']" );
var divMsg = document.getElementById('divWebMsg');
divMsg.style.visibility = "visible";
if(elemento.length == 1)
{
divMsg.innerText = elemento[0].getAttribute("msg");
var xy = cumulativeOffset(el);
divMsg.style.left = (parseInt(xy[0]) + parseInt(el.style.width) + 10) + 'px';
divMsg.style.top = xy[1] + 'px';
}
}
e por fim, estilizamos o nosso div com a classe css
.cssLoading
{
font-size:12px;
color:White;
font-family: Verdana, Arial;
font-weight: bold;
background-color:#0066CC;
text-align:center;
vertical-align:middle;
position:absolute;
}
veja em funcionamento
é a Web rumo aos futuros aplicativos.