Ei, Equipe de Scripts!Nos scripts, assim como na vida, a aparência é muito importante

A Equipe de Scripts da Microsoft

Por centenas, e talvez milhares, de anos, filósofos e sábios vêm nos dizendo que devemos observar além da aparência física quando julgamos algo ou alguém (não que devamos julgar as pessoas, imagine; afinal de contas, a beleza está nos olhos de quem a vê). Você sabe o que dizem por aí: a verdadeira beleza vem de dentro e o seu caráter é muito mais importante do que a sua beleza.

A Equipe de Scripts só tem uma coisa a adicionar: besteira.

É isso mesmo: besteira. A Equipe de Scripts é a primeira a admitir que, em um mundo perfeito, a aparência física não faria a menor diferença. No entanto, nós não vivemos em um mundo perfeito. Se vivêssemos, as batatas fritas e os sundaes com calda de chocolate quente estariam entre os principais grupos alimentares. Queira você ou não, a aparência é importante. E isso se aplica tanto à criação de scripts quanto a qualquer outra coisa.

A Equipe de Scripts sabe que algumas pessoas são levadas às lágrimas por causa da beleza simples de um script VBScript executado em uma janela de comando (bem, talvez isso aconteça com um de nossos membros, Guy Dean Tsaltas, mas ele é o único de quem nos lembramos).

Por outro lado, também é verdade que, neste nosso mundo de alta tecnologia, os autores de scripts não estão mais limitados a escrevê-los para execução em uma janela de comando. Graças aos HTAs (Aplicativos HTML), os autores de scripts podem chamar o poder do DHTML para criar GUIs para seus scripts. Essas mesmas habilidades do HTML podem ser usadas na criação de gadgets do Windows Vista™, algo novo que tem o potencial de revolucionar os scripts de administração do sistema como o conhecemos hoje. Mas sabe de uma coisa? Assim que você começa a falar sobre GUIs, algumas noções antigas e ultrapassadas sobre beleza superficial aparecem imediatamente. Para scripts executados em um ambiente gráfico, a aparência é tão importante quando a função e o desempenho.

E esse é o problema. Afinal, nós escrevemos scripts, o que sabemos sobre a criação de interfaces gráficas de usuário? Parece que não estamos com sorte, não é?

Talvez. Ou, quem sabe, talvez não. Será que ouvimos alguém dizer: "Meu Deus, obrigado pela Equipe de Scripts?"

Fala sério. Será que não acabamos de ouvir alguém dizendo isso? Talvez tenham balbuciado ou dito um pouco baixo...

Bem, não importa. Alguém deve ter dito isso, já que a Equipe de Scripts está aqui para ajudar (queira você a nossa ajuda ou não).

Para apresentar o magnífico mundo das GUIs para você, vamos dar uma olhada nos primórdios de um HTA pequeno e simples (se quiser obter mais informações sobre a criação de HTAs, consulte o Centro de desenvolvedores de HTA).

O que temos na Figura 1 é a primeira parte de um belo sistema de informações de desktop. Como você pode ver, começamos pela colocação de um pequeno gráfico interessante no canto superior direito da janela do HTA. A idéia é que, na primeira vez em que o HTA é carregado, ele irá recuperar o nome do usuário conectado e o exibirá, além do nome do computador, acima dessa imagem. Mais adiante, adicionaremos outros tipos de recursos bacanas ao HTA mas, como dizem, primeiro o mais importante.

Figura 1** O início da nossa interface gráfica adorável para o HTA **

Não, não temos muita certeza de quem está por trás do "dizem". Provavelmente outro daqueles filósofos. Voltaire, provavelmente. Isso se parece com algo que Voltaire poderia ter dito.

Certo, esse é somente um pequeno aplicativo simples e a sua... beleza... pode não comover nem mesmo o Dean da Equipe de Scripts. Mas ele serve como uma ferramenta de demonstração muito útil, com um conceito básico que pode ser aplicado em muitas situações diferentes. Afinal, muitos daqueles gadgets superestimados do Windows Vista funcionam de acordo com um princípio similar; eles simplesmente exibem gráficos bonitos (digamos, um medidor ou um mostrador de relógio) e então escrevem um texto sobre esse gráfico. Com isso, parece que você tem um pequeno medidor bacana que exibe o espaço disponível em disco, quando, na verdade, tudo o que tem é um gráfico genérico com um texto dinâmico por cima.

Tudo bem, para dizer a verdade, isso também não faz muito sentido para nós. Mas tudo deve ficar mais claro à medida que formos avançando nesta coluna.

Só existe um problema com a noção de que podemos exibir um gráfico e escrever um texto sobre ele: não funciona. Em vez disso, com a marcação HTML básica, podemos obter algo como a Figura 2. Não é exatamente isso que tínhamos em mente. Talvez Nietzsche, quando disse "não há esperança para os humanos que desejam colocar texto sobre um gráfico, pelo menos não em um HTA", estivesse certo.

Figura 2** Uma primeira tentativa de sobrepor o texto **

Ou talvez Nietzsche estivesse errado: nós não acabamos de ouvir alguém dizendo... Bem, deixa para lá. Acontece que não conseguimos fazer o que queremos usando o HTML simples; simplesmente não funciona dessa forma. É claro que, teoricamente, poderíamos transformar o nosso gráfico em um gráfico de plano de fundo e então usar tabelas e espaços sem quebra e todos os tipos de pequenos truques para tentar colocar o texto sobre a imagem. Mas dissemos "teoricamente" por um bom motivo; exceto no mais simples dos casos, essa estratégia nunca funciona.

Existe uma forma muito melhor de criar layouts bonitos em um HTA ou em um gadget do Windows Vista: Cascading Style Sheets, também conhecidas como CSS.

As CSS são usadas na definição das fontes, das margens e alinhamentos, das cores e de outros aspectos da apresentação de um documento (particularmente, isso se aplica a páginas da Web. No entanto, como os HTAs e os gadgets no fundo são nada mais do que páginas da Web, as CSS também se aplicam bem a eles). Não podemos nem começar a discutir tudo o que podemos fazer com CSS e, portanto, para obter mais informações, talvez seja melhor consultar a documentação de referência das CSS no MSDN®, muito útil e completa. Por ora, é suficiente dizer que podemos usar as CSS para controlar minuciosamente o layout do HTA, incluindo a capacidade de colocar um item (o nosso texto) sobre outro (o nosso gráfico).

Explicaremos como fazemos tudo isso. Mas antes da explicação, vamos examinar o código de um HTA simples, mostrado na Figura 3.

Figure 3 Finalmente, chegamos ao script...

<SCRIPT LANGUAGE=”VBScript”>

Sub Window_OnLoad
 Set objNetwork = CreateObject(“Wscript.Network”)

 strUser = objNetwork.UserDomain & “\” & objNetwork.UserName
 strComputer= objNetwork.ComputerName

 UserData.InnerHTML = “<p align = ‘center’> “ & _
 “<font style=’font-size:18pt;color:white’>” & _
 strUser & “<br>” & strComputer & “</font></p>”
End Sub

</SCRIPT>

<img src=“test2.jpg“ align=“right“>
<span id=UserData style=“position:absolute;left:770px;top:150px“></span>

Como você pode ver, não há mesmo nada complicado. Temos uma sub-rotina Window_Onload que (como seu nome já diz) é automaticamente executada sempre que o HTA é iniciado ou atualizado. Falaremos sobre essa sub-rotina em um minuto. Além disso, temos dois elementos HTML: o nosso gráfico e uma marca span. Como você já deve saber, usamos um pouco de marcação para inserir o gráfico, usando o atributo align para garantir que a imagem apareça no lado direito da tela:

<img src=”test2.jpg” align=”right”>

Isso nos traz até a marcação HTML para uma marca span:

<span id=UserData style=”position:absolute;
left:770px;top:150px”></span>

Tá, então usamos uma marca span aqui. Mas que diabos é uma marca span? Bem, para todos os efeitos, uma marca span é simplesmente uma área nomeada do seu HTA; é uma seção "marcada" da janela do HTA que podemos identificar por meio de programação (principalmente porque demos a ela a identificação UserData). Depois da configuração da marca span, podemos escrever uma sub-rotina para atribuir o texto ou a codificação HTML a ele. Na verdade, não só podemos fazer isso como já o fizemos em nosso HTA.

Mas, como dissemos, falaremos sobre isso mais tarde. Antes, precisamos verificar o parâmetro style adicionado à marca span:

style=”position:absolute;left:770px;top:150px”

Esse parâmetro, como você poderia suspeitar, é a chave para o posicionamento bem-sucedido do nosso texto dinâmico sobre o gráfico. Na verdade, estamos especificando três atributos style separados aqui.

Position Dissemos ao nosso HTA que queremos que a posição do nossa marca span seja, bem, absoluta. Essencialmente, isso quer dizer que queremos que a marca span fique sempre no mesmo lugar, mesmo que isso signifique — e, neste caso, significa — que o texto tenha de ser escrito sobre outro item (como, por exemplo, outro gráfico).

Left Simplesmente especifica a posição da marca span relativa à extremidade esquerda da janela do HTA. Neste caso, queremos que a marca span comece em 770 pixels (770px) a partir da esquerda.

Top Essa configuração é muito similar ao atributo Left, exceto pelo fato de que, desta vez, estamos especificando a posição da marca span relativa à extremidade superior da janela do HTA. Neste caso, queremos começar no topo da janela e contar 150 pixels (150px) para baixo antes de começar a marca span.

Como sabíamos que devíamos definir o lado esquerdo da nossa marca span como 770 pixels e o lado superior como 150 pixels? Para falar a verdade, não sabíamos. Em vez disso, nós fizemos uma suposição; colocamos o gráfico na página e atribuímos valores aos atributos Left e Top da marca span. Em seguida, abrimos o HTA e verificamos os resultados. Como você poderia esperar, erramos por pouco e, portanto, ajustamos os valores, atualizamos o HTA e verificamos novamente. Fizemos isso algumas vezes até que, assim como Cachinhos Dourados, encontramos algo que nos servia.

Observação: claro que você conhece Cachinhos Dourados e os três ursos, suas camas e cadeiras, o mingau que estava muito quente ou o que estava muito frio e assim por diante. E não, não temos certeza se Cachinhos Dourados poderia ser considerada uma grande filósofa. Mas você poderia argumentar que, vendo como ela não teve problema algum para invadir a casa de outra pessoa, comer seu mingau, sentar em suas cadeiras e dormir em suas camas, ela definitivamente tinha uma filosofia própria.

Seja como for, a Figura 4 mostra a aparência atual do HTA. Certo, talvez não seja uma obra de arte, mas gostaríamos de ver Picasso exibir informações programaticamente sobre um gráfico.

Figura 4** Observe o poder do estilo **

Falando nisso, como podemos exibir informações programaticamente sobre um gráfico? Bem, temos boas notícias para você: finalmente chegou a hora de falarmos sobre a nossa sub-rotina Window_OnLoad, mostrada na Figura 5.

Figure 5 A sub-rotina Window_OnLoad

Sub Window_OnLoad
 Set objNetwork = CreateObject(“Wscript.Network”)

 strUser = objNetwork.UserDomain & “\” & objNetwork.UserName
 strComputer= objNetwork.ComputerName

 UserData.InnerHTML = “<p align = ‘center’> “ & _
 “<font style=’font-size:18pt;color:white’>” & _
 strUser & “<br>” & strComputer & “</font></p>”
End Sub

Você sabe, agora que olhamos para essa sub-rotina um pouco mais de perto, vemos que não há muito que falar sobre ela, não é mesmo? Como você pode ver, começamos pela criação de uma instância do objeto Wscript.Network. Em seguida, usamos essas linhas de código para recuperarmos o nome de usuário, o domínio e o nome do computador:

strUser = objNetwork.UserDomain & “\” & _
 objNetwork.UserName
strComputer= objNetwork.ComputerName

É claro que essas informações são aquelas que queremos exibir na janela do nosso HTA. Tudo o que precisamos fazer é combinar as variáveis strUser e strComputer a um pouco de marcação HTML e depois atribuir a cadeia de caracteres resultante à propriedade InnerHTML da sua marca span:

UserData.InnerHTML = _
 “<p align = ‘center’> “ & _
 “<font style=’font-size:18pt;color:white’>” _
 & strUser & “<br>” & strComputer & _
 “</font></p>”

Sim, sabemos que esse código parece complicado. Mas, na verdade, não é tão ruim assim. Parece complicado porque estamos combinando vários itens em uma única cadeia de caracteres. Começamos pela marca de parágrafo de abertura, que especifica que queremos centralizar o texto no parágrafo.

“<p align = ‘center’> “

Em seguida, temos uma marca font de abertura, que especifica a utilização de texto de 18 pontos branco:

“<font style=’font-size:18pt;color:white’>”

strUser é a variável que armazena o nosso nome de usuário, no formato Domínio\NomedeUsuário. "<br>" insere uma quebra de linha. Nós o inserimos para que o nome de usuário seja exibido em uma linha e o nome do computador em outra. strComputer é a variável que armazena o nome do nosso computador. Finalmente, adicionamos as marcas font e paragraph de fechamento:

“</font></p>”

Quando examinamos as partes individualmente, podemos ver que o código não é nem um pouco complicado, como você poderia esperar.

Casualmente, você pode posicionar quase todos os elementos HTML que quiser. Por exemplo, suponha que você queira centralizar um botão abaixo do gráfico. Para isso, basta adicionar este código ao seu HTA:

<input type=”button” value=”Test Button” style=”position:absolute;left:820px;top:300px”>

O resultado deve ser um HTA como o da Figura 6.

Figura 6** Que botão adorável **

Novamente, você terá de brincar um pouco para fazer com que o botão seja posicionado no lugar certo, mas isso não deve demorar muito. Na verdade, se você estiver disposto a fazer os cálculos, provavelmente conseguirá determinar o posicionamento correto antes do tempo. Você só precisa conhecer a largura e a altura de cada objeto — algo que você consegue especificar usando o parâmetro style — e a largura e a altura da janela do HTA. Por padrão, pelo menos no computador de testes da Equipe de Scripts, os HTAs têm, aproximadamente, 1020 pixels de largura por 685 pixels de altura (é claro que os resultados podem variar). No mínimo, você pode começar com aqueles números e, em seguida, ajustá-los para que atendam às suas necessidades.

Obviamente, essa é uma introdução muito breve às CSS, mas deve ajudá-lo a começar a trilhar o caminho para scripts mais bonitos. Os filósofos podem desprezar esse trabalho e dizer a você que a verdadeira beleza de um script vem de dentro e não de fora. Mas veja desta forma: quem são os maiores filósofos de todos os tempos? É isso mesmo: Platão, Sócrates, Aristóteles, esses caras. Com isso em mente, gostaríamos de fazer uma pergunta: você já viu alguma fotografia de qualquer um desses filósofos? Você não acha interessante o fato de que não há fotos das pessoas que dizem que a beleza não importa? Isso não lhe parece estranho? Algo em que devemos pensar.

A Equipe de Scripts da Microsoft trabalha para a – bem, é empregada da – Microsoft. Quando não está jogando/treinando/assistindo beisebol (e diversas outras atividades), ela administra o Script Center da TechNet. Confira no site www.scriptingguys.com.

© 2008 Microsoft Corporation e CMP Media, LLC. Todos os direitos reservados. A reprodução parcial ou completa sem autorização é proibida..