Stiod Blog

O comando que extrai todo o conteudo de um arquivo rpm, criando as pastas que o rpm criaria a partir do diretório atual:

rpm2cpio arquivo.rpm | cpio -idmv

Link sobre cpio

Segue a segunda parte do tutorial de introdução ao framework do ExJs.

Vamos falar dos Widgets, que são aplicativos feitos com o Extjs para facilitar o desenvolvimento das aplicações web.

E pra começar crie um arquivo HTML [não esqueça de baixar os fontes do ExtJs] e :
No HEAD do arquivo HTML referencie os arquivos script e de formatação de estilo.

 
<!-- CSS pegue o arquivo na pasta ext-2.2\resources\ -->
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
 
<!-- Ext-base.js pegue o arquivo na pasta ext-2.2\adapter\ext\ -->
<script type="text/javascript" src="js/ext-base.js" ></script>
<!-- Ext-all.js pegue o arquivo na pasta raiz ext-2.2\ -->
<script type="text/javascript" src="js/ext-all.js"></script>
 

E insira no corpo do documento esses elementos:

 
<div id="quadro-id"></div>
<div id="quadro-conteudo"><span>Conte&uacute;do</span></div>
 

Coloquei essa formatação em um STYLE pra deixar os textos mais harmônicos e definir um tamanho para o quadro que irá gerar o Ext Panel

 
body{
  font:normal normal 12px/1.8em arial, 'trebuchet ms', verdana;
}
#quadro-id{
  width:500px;
}
 

Agora indo para a parte mais importante os Scripts:

 
//Verificando se o ExtJs foi carregado
Ext.onReady(function(){
  //Instanciando um novo objeto do Extjs
  var quadro = new Ext.Panel({
    title:'meu quadro',
    //referenciando um objeto no corpo do HTML
    renderTo:'quadro-id',
    //tem a opção de ser expansível
    collapsible:true,
    //Opção de ser arrastado, mas volta ao ponto original
    //Necessita incluir as propriedades de Drag n' Drop
    draggable:true,
    //icone de fechar,  precisa de programação pra interatividade
    closable:true,
    //Inserção e programação dos botões do cabeçalho do PANEL
    tools:[{
      id:'help',
      handler:function(){
          Ext.Msg.show({
          width:350,
          title:'titulo do texto de ajuda',
          msg:'corpo do  quadro de ajuda'
        })
      }
    },{
    id:'close',
    handler:function(){
      Ext.destroy(quadro);
    }
    }],
    // conteúdo a ser renderizado dentro do PANEL
    contentEl:'quadro-conteudo'
  })
  //Centralizando quadro no centro da tela
  Ext.get("quadro-id").center();
});
 

O Widget PANEL e seus elementos visuais podem ser customizados, os arquivos de imagens e css desse objeto estão separados na pasta RESOURCES com seu respectivo nome.

Bom.. é só isso :).

Coloquei esse exemplo no nosso servidor pra quem quiser acessar e ver funcionando.

Abraços a todos e em seguinda colocarei mais funcionalidades do ExtJs.

Já percebemos que o mercado exige que as novas interfaces alcancem níveis de usabilidade ainda maiores, e a interface com o usuário seja a mais agradável possível, com efeitos de navegação, crossbrowser, folksonômica, microformatada e assim vai.

Recentemente, em um cliente, tive que utilizar o framework javascript Extjs pra constuir uma interface no famoso estilo web 2.0 , com vários efeitos de navegação(Drag 'n Drop, Fade, Slides) e como não a conhecia tive que entrar em debugLearning mode on.

Extjs já está na sua versão 2.2 e não me aprofundei nos conhecimentos das versões anteriores e nesse post quero ser mais objetivo e pouco introdutório nos seus conceitos e ir por as mãos na massa.

Você pode começar baixando o código fonte com exemplos e documentação que estão em http://www.extjs.com/download e aconselho também a baixar a documentação que esta em arquivo de AdobeAir.

Pra prática logo né ?!

Você já deve conhecer o getElementById, o getElementsByTagName e um monte de outras propriedades em javascript.

Segue alguns Exemplos de como funciona no ExtJs:

- document.getElementsById("id") = ExtJs fica Ext.get("id")
- document.getElementsByTagName("tag") =  Ext.select("tag")
- Recuperar todos os elementos com a classe "red-link" = Ext.select(".red-link")
- Todos os DIVs com a classe "box" =  Ext.select("div .box")
- Centralizar um objeto no centro da tela = Ext.get("obj").center()
- E NÃO É SÓ ISSO! [Polishop Rules]

Pra quem conhece frameworks javascript já nota a semelhança com Jquery, Prototype e outras similares.

Mas o ponto forte do ExtJs são os seus widgets pra montar Panels, Grids, MsgBoxes, Drag'n Drop e muitos outros objetos e efeitos de navegação que tanto enchem os olhos do usuário final.

A seguir estarei publicando mais textos sobre as funcionalidades, dicas e algumas outras coisas que acredito serem interessantes sobre esse framework.

That's not all folks.

See you in a while!

Para aqueles que não sabem, uma tag HTML pode receber inúmeras classes de um CSS.

Uma boa utilidade para ser aplicada é quando precisamos customizar apenas um elemento dentro de tantos que já tem uma formatação pré-definida por outra Classe mas não queremos incluir mais um seletor no CSS para fazer algo relativamente simples.
Continue Reading »

Utilize 6 folhas de estilo diferentes em seu site para determinados horários do dia somente utilizando JavaScript, utilize-se do seguinte código:
Continue Reading »