Temple Coding

  • Home
  • Open Source
  • About
    • Books I am reading
    • About
RSS
Tag Archives: asp.net

Menos é mais com .LESS

Posted on 15/03/2010 by vintem
No Comments

CSS é muito útil: já evita muita repetição dentro das páginas HTML, mas o próprio CSS em si permite (e causa) muita repetição.

Por exemplo, imagine que você tenha uma cor padrão no seu site, com certeza você deve ter algumas regras dentro do css usando essa cor.

Estava eu fuçando na internet e achei o .LESS, uma ferramenta (acho q posso chamar de ferramenta) para fazer, como eles mesmos chamam, Dynamic CSS.

O conceito é simples, ali é possível declarar uma variável @cor_padrao, por exemplo, e usar em todo lugar.

Veja o exemplo que fiz abaixo:

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@cor_principal: silver;
@cor_fonte: blue;
@largura_padrao: 400px;
 
body{
    background-color: @cor_principal;
    color: @cor_fonte;
}
 
.bordaVermelha{
    border: dashed red 2px;
}
 
#cabecalho
{
    .bordaVermelha;
    width: @largura_padrao + 40px;
    color: @cor_fonte;
    a
    {
        text-decoration: underline;
    }
    ul
    {
        li
        {
            float: left;
        }
    }
}

Olhando para esse código vemos as funcionalidades do LESS. Primeiro a declaração de duas variáveis que podem ser utilizadas dentro de qualquer parte do css.

Depois na regra do estilo para o id #cabecalho vem algumas coisas bacanas. Por exemplo: dentro dessa regra eu chamei a classe .bordaVermelha e tudo que estava definido ali foi reaproveitado, como um “include”, por assim dizer. Além disso, na largura eu fiz uma operação de adição sobre uma variável que já estava definida com a largura, evitando criar mais uma variável. E por último, e na minha opinião, um dos recursos mais legais, é o aninhamento de regras css. Se não fosse pelo LESS, o código do cabeçalho seria algo assim:

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#cabecalho
{
    border: dashed red 2px;
    width: 440px;
    color: blue;
}
#cabecalho a
{
    text-decoration: underline;
}
#cabecalho li
{
    float: left;
}

Nesse exemplo, pode até não parecer muito diferente, mas a questão é que todas as regras ficaram dispersas, imagine um arquivo grande de CSS, é muito mais fácil quando tudo está definido só em um lugar.

Como usar o .LESS?

Muito simples, é só um assembly que deve ser baixado do site deles. Adicione esse assembly como referência no projeto e a seguinte configuração de httpHandler deve ser adicionada ao seu web.config:


Depois disso, basta renomear seus arquivos .css para .less. E nas páginas faça referência diretamente ao arquivo .less.

Conclusão

O CSS foi feito para (entre outras coisas) minimizar o código que temos que fazer para definir um layout em nossas páginas e o .less veio dar uma forcinha. :)

Tweet
government,politics news,politics news,politics
Categories: Sem categoria | Tags: asp.net, css, less

Utilizando o Asp.Net MVC junto com Asp.Net WebForms

Posted on 14/11/2009 by vintem
2 Comments

Para aqueles que como eu, gostaram muito da implementação do MVC para o Asp.Net (eu relutei no início, mas tive que ceder, ficou muito bom) e gostariam de começar a usá-lo já, mas não tem nenhum projeto novo pra implementá-lo, existe uma forma de utilizar o Asp.Net MVC junto com os costumeiros Web Forms.

A 1a coisa que você precisa verificar, obviamente, é se o servidor onde roda o seu site suporta o .Net Framework 3.5, já que o Asp.Net MVC precisa dessa versão.

1) Se o projeto foi feito no Visual Studio 2005 ou 2003, abra ele no Visual Studio 2008 e siga o wizard pra converter o projeto para o Visual Studio 2008.

2) Se o seu projeto for uma web application (que tem a pasta bin) pode pular essa etapa, se for um web site é preciso convertê-lo para um web application. Veja como aqui http://msdn.microsoft.com/en-us/library/aa983476.aspx.

3) Clique com o botão direito na solução, depois em properties. Na aba Application, verifique se o Target Framework está selecionado para .NET Framework 3.5.

4) Adicione as referências para o projeto System.Web.Mvc, System.Web.Abstractions e System.Web.Routing. Elas estão na aba .NET.

5) Nas suas referências selecione os assemblies que você acabou de adicionar, vá na janela propriedades e na propriedade CopyLocal selecione True.

Marcando referências para CopyLocal = true

6) Se você ainda não tiver, crie um arquivo Global.asax

7) Altere seu arquivo Global.asax para que fique assim:

?View Code CSHARP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class Global : System.Web.HttpApplication
{
    protected void Application_Start(object sender, EventArgs e)
    {
        RegisterRoutes(RouteTable.Routes);
    }
 
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.MapRoute("Default", "{controller}/{action}/{id}",
            new {action = "Index", id = ""});
    }
}

Nesse momento, estamos apenas adicionando uma rota padrão. Veja que a rota padrão não tem um controller padrão, isso para que quando alguém acessar o seu site sem informar nada na url (ex: www.meusite.com.br), ele seja redirecionado para a página default, geralmente a página default.aspx.
8) Ative o UrlRoutingModule no seu web.config.

?View Code XML
1
2
3
4
5
6
7
<system.web>
  ...
  <httpModules>
    <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule, System.Web.Routing"/>
  </httpModules>
  ...
</system.web>

9) Na raiz do seu projeto adicione uma pasta Controllers e outra Views.

10) Para ativar os helpers do MVC, as tags <%= Html.* %>, é preciso adicionar uma tagno web.config.

?View Code XML
1
2
3
4
5
6
7
8
9
10
11
<pages>
...
    <namespaces>
        <add namespace="System.Web.Mvc"/>
        <add namespace="System.Web.Mvc.Html"/>
        <add namespace="System.Web.Routing"/>
        <add namespace="System.Linq"/>
        <add namespace="System.Collections.Generic"/>
    </namespaces>
 ...
</pages>

11) Adicione as configurações abaixo na tag pages e na tag controls para que você consiga usar Views tipadas.

?View Code CSHARP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<system.web> 
.. 
    <pages 
        validateRequest="false" pageParserFilterType="System.Web.Mvc.ViewTypeParserFilter, 
        System.Web.Mvc, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" 
        pageBaseType="System.Web.Mvc.ViewPage, System.Web.Mvc, Version=1.0.0.0, Culture=neutral, 
        PublicKeyToken=31BF3856AD364E35" 
        userControlBaseType="System.Web.Mvc.ViewUserControl, System.Web.Mvc, Version=1.0.0.0, 
        Culture=neutral, PublicKeyToken=31BF3856AD364E35"> 
 
        <controls> 
        ... 
            <add assembly="System.Web.Mvc, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" 
                namespace="System.Web.Mvc" tagPrefix="mvc" /> 
        </controls> 
    ....

Pronto, se você adicionar um Controller HomeController na pasta Controllers com uma action Index, por exemplo, e for na pasta Views, criar uma pasta Home, um arquivo Index.aspx e no code behind da página trocar a classe base de System.Web.UI.Page para System.Web.Mvc.ViewPage, já deve funcionar.

Agora se você quiser que os wizards do Visual Studio para o MVC como o Add -> Controller ou Add -> View, é preciso fazer mais uma coisa.

1) Na janela Solution Explorer, clique com o botão direito em Unload Project.

2) Clique com o botão direito no projeto e em Edit Nome-do-Projeto.csproj

3) Dentro do XML que abriu procure a tag

e adicione o item abaixo na frente dos outros:

{603c0e0b-db56-11dc-be95-000d561079b0};

4) Salve o arquivo, clique com o botão direito no projeto e em Reload Project.

Se der um erro “Unable to read the project file”, clique em OK e depois faça o Reload Project novamente.

Tweet
government,politics news,politics news,politics
Categories: ASP.NET, ASPNET MVC | Tags: asp.net, asp.net mvc
  • Categories

    • .NET (1)
    • ASP.NET (1)
    • ASPNET MVC (15)
    • Blog (1)
    • Source Code Control (2)
    • Development (10)
    • Java (1)
    • JavaScript (2)
    • jQuery (1)
    • Reading (5)
    • Ruby (2)
    • Ruby on Rails (1)
    • Sem categoria (23)
    • Testing (4)
  • Language

    • English
    • Português
  • Tags

    agilidade asp.net asp.net mvc asp.net vc automapper blog code templates controle de versoes css dataaccess dependency injection ebook encoding eventos excecoes firebug git globalizacao hibernate iis ironruby jasypt java javascript jquery json leitura less mvccontrib qcon rails ruby selenium simpledata snippet stored procedures structuremap tdc templates testes testes integrados visualstudio vraptor windsor
© Temple Coding. Proudly Powered by WordPress | Nest Theme by YChong