Customizando CSS dos controles do GASweb

<< Exemplo de loja Virtual com o GASweb | Inserindo “Loading” em suas Páginas de dados. >>

Apr 08

Customizando CSS dos controles do GASweb

Uma das coisas mais legais que você tem no GASweb , é que ele nunca te deixa amarrado ao gerador, você sempre tem a possibilidade de customizar sua aplicação.

Nos controles gerados pela aplicação do GASweb você pode escolher SKINS , que são o visual que o controle irá aparecer na sua página.

Nós disponibilizamos para cada controle 2 ou 3 skins diferentes, mas as vezes existe a necessidade de mexer nesse skin e mexer no layout desses controles.

Vamos ver então como podemos mexer no controle de window gerado pelo GASweb.

Originalmente se você usar o skin chamado "GAS" no controle window você terá um layout da window conforme a tela abaixo.

Note que nesta window existe uma barra de status que tem uma determinada cor altura , comprimento, todas estas propriedades estas definidas num arquivo CSS do controle window

Veja abaixo a tela onde mostramos o arquivo CSS gerado pelo GASweb dentro do Visual Studio.

Veja abaixo os dois arquivos e as modificações realizadas.

/* cor do fundo da aplica??o */
body
{
background-color: #CCCCCC;/* #DED8C0;*/
}

/* Gas.window default embedded skin */

iframe.GasWContentFrame
{
background: white; /* Mozilla overlay */
}

.GasWContentFrame
{
    scrollbar-face-color: #0099CC;
    scrollbar-highlight-color: #9900AA;
    scrollbar-shadow-color: #7E9FD2;
    scrollbar-3dlight-color: #E6EEFC;
    scrollbar-arrow-color: #4D6185;
    scrollbar-track-color: #F7F7F3;
    scrollbar-darkshadow-color: #C6D1DC;
}

.GasWStatus
{
   height: 19px;
    cursor :default;
    background: white url( 'CssImg/GasWStatus.gif' ) repeat-x;
}

.GasWModalImage
{
background: url( 'Img/ModalImageBg.gif' );
}

.GasWStatusRow
{
background-color: #FFFFFF;
}

.GasWStatus input
{
    position:absolute;
    font: normal 9px Tahoma, Arial, Verdana, Sans-Serif !important;
    cursor: default;
    color: #999999;
    margin-top: 2px;
    margin-left: 2px;
    border: none;
    background-color: #FF0000;
}

.GasLoadingAjaxVisible
{
display:inline;
text-align:right;

}
.GasLoadingAjaxInvisible
{
display:none;
text-align:right;
}

.GasWDragHelper
{
/* Drag and Drop */
      border : solid 3px #cccccc;
    border: dashed 1px #006A8C;
    background-color :#56738C;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    -moz-opacity: 0.6;
    margin: 0px;
    padding: 0px;
    position: absolute;
    z-index: 50000;
    overflow: hidden;
}

.GasWMinimizedPageLoaded
{
    width: 60px;
    height: 24px;
    border: solid 1px #006A8C;
    background: url( 'CssImg/GasWWrapperHeaderCenter.gif' ) repeat-x;
}

.GasWMinimizedActive,
.GasWMinimizedOver
{
    width: 120px;
    height: 24px;
    border: solid 1px #006A8C;
    background: transparent url( 'CssImg/GasWWrapperHeaderCenter.gif' ) repeat-x;
}

.GasWMinimizedInactive
{
    border: solid 1px #FFFFFF;
    background: #F3BA0F url('CssImg/GasWWrapperHeaderCenter.gif') repeat-x;
    width: 60px;
    height: 24px;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); /* IE */
    -moz-opacity: 0.6; /* Moz */
    opacity: 0.6; /* CSS3 */
}

.GasWLoadingWrapper
{
    width: 80px;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    font: normal 11px Verdana, Arial, Sans-Serif;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=99); /* IE */
}

.GasWIcon
{
    display: none;
    cursor: default;
    vertical-align: middle;
}

.GasWTitleText
{
    font-family: Tahoma;
    font-weight: bold;
    font-size: 11px;
    color: #FFFFFF;
    vertical-align: middle;
    padding-left: 8px;
}

.GasWButton
{
cursor: hand;
vertical-align: top;
}

.GasWWrapperActive
{
background-color: #FFFFFF;
border: solid 1px #006A8C;
}

.GasWWrapperInactive
{
    background-color: #FFFFFF;
    border: solid 1px #FFFFFF;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); /* IE */
    -moz-opacity: 0.6; /* Moz */
    opacity: 0.6; /* CSS3 */
}

.GasWWrapperModal
{
border-right: solid 1px #404040;
    border-bottom: solid 1px #404040;
    border-left: solid 1px #d4d0c8;
    border-top: solid 1px #d4d0c8;
    font-size: 0px;
}

.GasWTitleRow
{
cursor:move;
}

.GasWWrapperHeaderLeft
{
   width: 3px;
    background: white url( 'CssImg/GasWWrapperHeaderCenter.gif' ) repeat-x;
    height: 25px;

}

.GasWHeaderTopResizer
{
    height: 3px;
    font-size: 0px;
    background: white url( 'CssImg/GasWWrapperHeaderCenter.gif' ) repeat-x top;
}

.GasWWrapperHeaderCenter
{
    height: 22px;
    text-align: left;
    vertical-align: middle;
    background: white url( 'CssImg/GasWWrapperHeaderCenter.gif' ) repeat-x bottom;

}

.GasWWrapperHeaderRight
{
   height: 25px;
    width: 3px;
    background: white url( 'CssImg/GasWWrapperHeaderCenter.gif' ) repeat-x;

}

.GasWWrapperBodyLeft
{
    width: 3px;
    font-size: 0px;
    background: white url( 'CssImg/GasWWrapperBodyLeft.gif' ) no-repeat bottom;
}

.GasWWrapperBodyCenter
{
width: 100%;
height: 100%;
}

.GasWWrapperBodyRight
{
    width: 3px;
    font-size: 0px;
    background: white url( 'CssImg/GasWWrapperBodyLeft.gif' ) no-repeat bottom;
}

/* Mozilla 1.5 Fix */
.GasWWrapperBodyLeft:before
{
    content: " ";
    display: block;
    width: 3px;
}

/* Mozilla 1.5 Fix */
.GasWWrapperBodyRight:before
{
    content: " ";
    display: block;
    width: 3px;
}

.GasWWrapperFooterLeft, .GasWWrapperFooterCenter, .GasWWrapperFooterRight
{
    border:none;
    font-size: 0px;
    background: white;
    height: 3px;
}

/* cor do fundo da aplica??o */
body
{
background-color: #CCCCCC;/* #DED8C0;*/
}

/* Gas.window default embedded skin */

iframe.GasWContentFrame
{
background: #F3F3F3; /* Mozilla overlay */
}

.GasWStatus
{
    height: 19px;
    cursor :default;
    background: #F3F3F3 url( 'CssImg/GasWStatus.gif' ) repeat-x;
}

.GasWModalImage
{
background: url( 'Img/modalimagebg.png' );
}

.GasWStatusRow
{
background-color: #FFFFFF;
}

.GasLoadingAjaxVisible
{
display:inline;
text-align:right;

}
.GasLoadingAjaxInvisible
{
display:none;
text-align:right;
}

.GasWMinimizedPageLoaded
{
    width: 60px;
    height: 24px;
    border: solid 1px #006A8C;
    background: url( 'CssImg/GasWWrapperHeaderCenter.gif' ) repeat-x;
}

.GasWMinimizedActive,
.GasWMinimizedOver
{
    width: 120px;
    height: 24px;
    border: solid 1px #006A8C;
    background: transparent url( 'CssImg/GasWWrapperHeaderCenter.gif' ) repeat-x;
}

.GasWIcon
{
    display: none;
    cursor: default;
    vertical-align: middle;
}

.GasWTitleText
{
    font-family: Tahoma;
    font-weight: bold;
    font-size: 11px;
    color: #FFFFFF;
    vertical-align: middle;
    padding-left: 8px;
}

.GasWButton
{
cursor: hand;
vertical-align: top;
}

.GasWWrapperActive
{
background-color: #FFFFFF;
border: solid 1px #006A8C;
}

.GasWWrapperModal
{

font-size: 0px;
}

.GasWTitleRow
{
cursor:move;
}

.GasWWrapperHeaderLeft
{
    width: 0px;
    background: #F3F3F3 url( 'CssImg/GasWWrapperHeaderCenter.gif' ) repeat-x;
    height: 25px;

}

.GasWHeaderTopResizer
{
    height: 0px;
    font-size: 0px;
    background: #F3F3F3 url( 'CssImg/GasWWrapperHeaderCenter.gif' ) repeat-x top;
}

.GasWWrapperHeaderCenter
{
    height: 22px;
    text-align: left;
    vertical-align: middle;
    background: #F3F3F3 url( 'CssImg/GasWWrapperHeaderCenter.gif' ) repeat-x bottom;

}

.GasWWrapperHeaderRight
{
   height: 25px;
    width: 0px;
    background: #F3F3F3 url( 'CssImg/GasWWrapperHeaderCenter.gif' ) repeat-x;

}

.GasWWrapperBodyLeft
{
    width: 0px;
    font-size: 0px;
    background: #F3F3F3 url( 'CssImg/GasWWrapperBodyLeft.gif' ) no-repeat bottom;
}

.GasWWrapperBodyCenter
{
width: 100%;
height: 100%;
}

.GasWWrapperBodyRight
{
    width: 0px;
    font-size: 0px;
    background: #F3F3F3 url( 'CssImg/GasWWrapperBodyLeft.gif' ) no-repeat bottom;
}

/* Mozilla 1.5 Fix */
.GasWWrapperBodyLeft:before
{
    content: " ";
    display: block;
    width: 0px;
}

/* Mozilla 1.5 Fix */
.GasWWrapperBodyRight:before
{
    content: " ";
    display: block;
    width: 0px;
}

.GasWWrapperFooterLeft, .GasWWrapperFooterCenter, .GasWWrapperFooterRight
{
    border:none;
    font-size: 0px;
    background: #F3F3F3;
    height: 0px;
}

Após esta mudança no arquivo CSS da window o resultado foi uma window como a que segue abaixo.

Agora como colocar as customizações que você acabou de fazer no seu projeto do GASweb sem que o GAS regere e apague o que você fez.

Primeiro você deve colocar no seu projeto do GASweb a mesma estrutura de pastas que o GAS gera os arquivos.

Então você terá no seu projeto GASweb algo assim:

As pastas Window e Gas foram criadas no projeto do GAS

Depois disso você adiciona um arquivo do tipo CSS dentro da pasta Gas.

Renomeie este arquivo para o mesmo nome do arquivo que o GASweb gera que no nosso caso será window.css

Cole agora o conteúdo do CSS que foi modificado para este arquivo do projeto do GASweb, desta forma quando sua solução for gerada o GAS vai gerar o seu arquivo em vez de usar o que é padrão.

Bom nos próximos posts vamos mostrar mais sobre como você pode melhorar sua produção de aplicativos usando o GASweb.

Tags:

Utilizando gradiente em css com o GASwebCriamos uma solução no GASweb como exemplo que utiliza gradiente em css que pode ser colocado em sua...Processos Pré definidos no GASwebUm dos recursos mais importantes do GAS será implementado na versão web. Os proc...Controles Customizados 12º EdiçãoNeste novo artigo vamos falar um pouco sobre controles customizados , quando usar e quais as fa...

Comentarios (3) -

Московские путаны

Posted on Tuesday, 16 August 2011 14:57

Зачетные девочки в Москве и других городах России и Украины только здесь.

Украшения из натуральных камней

Posted on Monday, 22 August 2011 07:14

Лучший выбор украшений из натуральных камней.

VICTOR QUINTERO SAVOGAL JR.

Posted on Wednesday, 19 October 2011 10:27

Não consigo ver as imagens. Uso IE 8 e Win XP Professional.

Victor

Add comment

Name*
E-mail*
Website
b i u quote

Notify me when new comments are added

GAS Team Blog

Tags

Categories

Archive

Customizando CSS dos controles do GASweb

Comentarios (3) -

Páginas

Blogroll