Como configurar estilos de sistema

Olá, internautas! Hoje gostaria de falar um
pouco sobre a configuração de estilo do sistema ou website. Cada um tem o seu, e
o importante é ter sempre o controle do layout em mãos. 

Requisitos:

• Visual Studio .NET
• Linguagem C#
• Style CSS
• Themes

Está certo que a
maioria dos desenvolvedores estão cansados de saber esse tipo de coisa, porém algumas pessoas
sequer sabem como usar esse tipo de tecnologia, ou seja, a tecnologia
interpretada pelo browser.

O que é mais difícil hoje em dia?
Fazer com que o site ou a aplicação funcione em qualquer browser web, celular,
ou qualquer dispositivo que o acesse, concorda?! Para que funcione em qualquer
browser, de qualquer sistema operacional, o melhor é usar style com div e,
para tabulação, usar table.

O menu de uma aplicação que tem sub
e sub opções é, geralmente, o mais difícil de fazer funcionar. A melhor coisa é
usar <div> ou usar alguns componentes prontos e já testados, por exemplo:

• Framework SkyMenu
• Criando menu dinâmico com C#.Net – parte 01
• Criando menu dinâmico com C#.Net – parte 02

Os links acima mostram como criar e
deixar um menu dinâmico na aplicação, funciona em qualquer browser.

Codificando

Voltando à parte
de style, o primeiro passo para quem usar Visual Studio .NET é criar um
App_Themes. Clique com o botão direito do mouse em cima do projeto, clique em ADD, escolha a opção ADD ASP.NET Folder e a última opção é Themes:

Imagem 01

Procurei utilizar e deixar todas as
imagens dentro de uma pasta criada e dentro da pasta App_Themes. Veja:

Imagem 02

O segundo passo é colocar
a referência dentro do arquivo Web.config.
A maioria dos desenvolvedores colocam dentro da página MASTER. Eu prefiro
referenciar no arquivo de configuração do projeto para não me preocupar mais
com isso:

Imagem 03

Na primeira linha da Imagem 03 coloquei e referenciei o
“theme” igual ao default criado na pasta da Imagem 02. Esse é só uma referência
para não precisar mais colocar o arquivo .css no projeto todo. Só no arquivo de
configuração já basta.

Configurando componentes com style

Agora eu vou mostrar como configurar
os componentes que vou usar na página com o style indicado anteriormente.
Lógico que primeiro precisei criar o arquivo .css dentro da pasta; estou
partindo do ponto de que o arquivo .css já foi criado por você e para o seu
site. Lembrando que este artigo não tem o objetivo de te ensinar css.

Dentro da pasta existe um arquivo
com extensão .skin. Veja na Imagem 02. O mesmo chama formatacao.skin. Dentro do código, coloquei todos os componentes
que vou utilizar junto ao desenvolvimento do site, já com style cada um.
Prefiro usar assim, porque não preciso configurar os componentes da
página, por exemplo: ao utilizar um gridView com cores padronizadas do site,
caso não tivesse o arquivo .skin, teria que colocar cor em todos os componentes
e em todas as páginas que fosse usar.

Como a ferramenta Visual Studio .NET
facilita muito o desenvolvimento, configurei os styles dentro do .skin e não
preciso mais mexer com configuração de layout:

<asp:GridView runat="server" cssclass="CssGridView" CellPadding="3"<br /><br />    CellSpacing="1" GridLines="None"<br /><br />    EmptyDataText="Nenhum registro encontrado."<br /><br />    AutoGenerateColumns="False"><br /><br />    <RowStyle cssclass="CssRowStyle" HorizontalAlign=Left/><br /><br />    <AlternatingRowStyle cssclass="CssAlternatingRowStyle" HorizontalAlign=Left /><br /><br />    <SelectedRowStyle cssclass="CssSelectedRowStyle" /><br /><br />    <HeaderStyle cssclass="CssHeaderStyle" /><br /><br />    <PagerStyle HorizontalAlign="Center" /><br /><br /></asp:GridView>

Code 01

Como o exemplo falado foi o
GridView, veja como coloquei a configuração dentro do skin. Note que tem o cssclass indicando uma classe cssgridview criada no arquivo .css.
Mais abaixo, coloquei o EmptyDataText
para aparecer Nenhum registro encontrado.
Depois mudei o layout para as propriedades RowStyle,
AlternatingRowStyle, SelectedRowStyle, Header e, por final, PagerStyle.

Na minha página relatorio.aspx, quando eu for utilizar o grid, basta colocar assim:

<asp:GridView runat="server" id="grid"/><br /><br />... //colocar as colunas e linhas<br /><br /></asp:GridView>

Code 02

Note que criei
para todos os componentes que utilizo em tela:

<asp:Button cssclass="CssButton"  runat="server" /><br /><br /><asp:CheckBox runat="server"  controlstyle-cssclass="CheckBox" /><br /><br /><asp:DropDownList runat="server" /><br /><br /><asp:DropDownList SkinID="RightAlignedDropDownListSkin" runat="server" cssclass="CssTextBox CssTextBoxRightAligned" /><br /><br /><asp:Label runat="server" CssClass="CssLabel" /><br /><br /><asp:Label SkinID="LeftAlignedLabelSkin" runat="server" CssClass="CssLabel CssLabelLeftAligned" /><br /><br /><asp:LinkButton runat="server" cssclass="CssLink" /><br /><br /><asp:Panel SkinID="ModalPopupPanelSkin" runat="server" CssClass="CssPanelModalPopup" /><br /><br /><asp:TextBox runat="server" class="CssTextBox" /><br /><br /><asp:TextBox SkinID="RightAlignedTextBoxSkin" runat="server" cssclass="CssTextBox CssTextBoxRightAligned" /><br /><br /><br /><asp:GridView runat="server" cssclass="CssGridView" CellPadding="3"<br /><br />    CellSpacing="1" GridLines="None"<br /><br />    EmptyDataText="Nenhum registro encontrado."<br /><br />    AutoGenerateColumns="False"><br /><br />    <RowStyle cssclass="CssRowStyle" HorizontalAlign=Left/><br /><br />    <AlternatingRowStyle cssclass="CssAlternatingRowStyle" HorizontalAlign=Left /><br /><br />    <SelectedRowStyle cssclass="CssSelectedRowStyle" /><br /><br />    <HeaderStyle cssclass="CssHeaderStyle" /><br /><br />    <PagerStyle HorizontalAlign="Center" /><br /><br /></asp:GridView><br /><br /><asp:DetailsView runat="server" cssclass="CssDetailsView" CellPadding="3" CellSpacing="1" Width="780px" GridLines="None" AutoGenerateRows="False"><br /><br />    <FieldHeaderStyle Width="200px" /><br /><br />    <EditRowStyle CssClass="CssRowStyle" /><br /><br />    <RowStyle HorizontalAlign="Left" cssclass="CssRowStyle"/><br /><br />    <HeaderStyle cssclass="CssHeaderStyle" /><br /><br />    <FooterStyle cssclass="CssHeaderStyle" HorizontalAlign="Right" VerticalAlign="Middle" /><br /><br />    <CommandRowStyle VerticalAlign="Middle" HorizontalAlign="Right" /><br /><br /></asp:DetailsView>

Code 03

É muito simples, quando se padroniza
tudo e não precisa mais se importar com layout, style, cor, imagem e tudo mais.
Definindo isso, basta programar o sistema. Mas existe ainda um segredo
importante para quem precisa entender o style.

Na Imagem 04, note que tenho um css
com o nome de uma página.

Imagem 04

Existe uma página chamada naoAutorizado.aspx e quero utilizar a
classe do css apenas dentro dessa página, com isso coloquei o nome do css naoAutorizado.aspx.cs. Automaticamente,
a classe dentro do css pode ser acessada de dentro da página .aspx sem qualquer
problema.

Para deixar mais claro, veja o que
está dentro da página .aspx: 

<%@ Page Title="" Language="C#" MasterPageFile="~/Principal.Master" AutoEventWireup="true"<br /><br />    CodeBehind="NaoAutorizado.aspx.cs" Inherits="Retaguarda.Web.NaoAutorizado" %><br /><br /><br /><br /><asp:Content ID="Content1" ContentPlaceHolderID="header" runat="server"><br /><br /></asp:Content><br /><br /><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"><br /><br />    <div id="divMensagem"><br /><br />        " Você não tem autorização para acessar este recurso! "<br /><br />    </div><br /><br />    <br /><br /><br /></asp:Content>

Code 04

E agora veja dentro do CSS:

  <br /><br />#divMensagem<br /><br />{<br /><br />    background-image: url('image/pad_opaque.png');<br /><br />    background-repeat: no-repeat;<br /><br />    background-position: center;<br /><br />    width: 950px;<br /><br />    line-height: 256px;<br /><br />    text-align: center;<br /><br />    vertical-align: middle;<br /><br />    font-style: italic;<br /><br />    font-weight: bold;<br /><br />    font-size: 16pt;<br /><br />}

Code 05

O mesmo div foi utilizado e não
houve qualquer referência no HTML da página sobre o arquivo .css.

Bom, espero que tenha esclarecido um
pouco mais sobre layout, css e themes utilizando a ferramenta Visual Studio
.NET. Fico por aqui e qualquer dúvida pode entrar em contato pelo site.
Abraços!