comercial-de-natal

A rede de supermercados alemã, Edeka, chegou com um comercial de cortar o coração para nos lembrar que uma das coisas mais importante do Natal é passar o tempo com a família. Começa com um homem aposentado a voltar para casa, com o seu cão, que recebe um correio de voz da filha dizendo que ela e seus filhos não podem passar o Natal com ele, prometendo que fazem no próximo ano. Mas passam três anos e ele continua sozinho no Natal. Depois todos, filhos, filhas e netos recebem mensagens e cartas com a notícia da morte de seu pai. Visivelmente cheios de remorso, voltam para a casa da família para cumprir o luto. Mas quando entram na propriedade é de partir o coração… Vamos apenas dizer que a mensagem de EDEKA para o Natal: É hora de voltar para casa, a bem ou a mal…

O que é o Selenium IDE?

Selenium IDE (Integrated Development Environment) é uma ferramenta utilizada para o desenvolvimento de scripts de teste com o Selenium através de um plugin para o Firefox [1], que torna o desenvolvimento dos scripts mais eficiente pelo método Record and Replay (Gravação e Execução).




[1] Existe somente o Selenium IDE para o Firefox, não existindo para o Internet Explorer e qualquer outro browser. Para uma futura execução dos scripts do Selenium IDE para outros browsers é necessário utilizar o Selenium Remote Control.

Como instalar o Selenium IDE?

Como o Selenium IDE é um plugin para o Firefox só podemos instala-lo pelo Firefox.

Utilize a página oficial de downloads do Selenium http://seleniumhq.org/download/

A primeira sessão chamada Selenium IDE conterá a descrição e um link referente a versão atual do Selenium IDE. Basta clicar neste link e seguir com a instalação do plugin.

Observação

Sempre que há uma atualização do Firefox e o plugins instalado parar de funcionar, ou funcionar parcialmente, clique em um link chamada “unreleased”. Este link irá instalar a versão de desenvolvimento do plugin.

Uma vez lançado o plugin para a nova versão do Firefox, remova o plugin de desenvolvimento e instale o plugin suportado.
Uma mensagem do Firefox será apresentada perguntando se podemos permitir ou não a instalação do Selenium IDE. Clique emPermitir.

Aguarde enquanto o download do Selenium IDE é feito no Firefox

Uma janela contendo o plugin principal do Selenium IDE mais os formatadores (iremos aprender isso mais adiante) será apresentada. Clique em Instalar agora.

Após a instalação um pedido para reiniciar o Firefox será apresentado. Clique em Reiniciar.

Abrindo o Selenium IDE

Após a instalação podemos facilmente abri-lo pelo menu Firefox > Desenvolvedor web > Selenium IDE ou Ferramentas > Selenium IDE dependendo do sistema operacional que você está utilizando.

Exemplo do menu via Ferramentas > Selenium IDE no Firefox para MacOs

A janela do Selenium IDE será apresentada. No primeiro acesso o IDE abre uma página de Release Notes, que são as últimas modificações feitas nesta versão (adição de funcionalidades ou correção de bugs).

Funcionalidades do Selenium IDE

Como o plugin é uma IDE (Ambiente de Desenvolvimento Integrado) ele é dividido em quatro partes.

Toolbar

A toolbar possui diversas funcionalidades importantes na utilização do Selenium IDE.

Speed Control: controla o quão rápido será a execução do script [2]

Run All: Executa uma suíte de teste que contenha múltiplos casos de teste contidos na suíte.

Run: Executa o caso de teste selecionado. Quando há apendas um caso de teste

criado o botão Run All funciona do mesmo modo que o Run.

Pause/Resume: Permite parar e reiniciar a execução do caso de teste.

Step: Habilita a execução de cada passo (step by step) e deve ser utilizado apenas para questões de debug.

Apply Rollup Rules: Funcionalidade que permite a criação de tarefas repetitivas utilizando os comandos do Selenium em uma única ação


Record: Grava as ações do usuário no browser.

[2] Somente utilize o controle de velocidade para testar o seu script. Nunca utilize esta funcionalidade para executar o script de forma mais lenta, a fim de passar por testes que contenham requisições assíncronas (Ajax). Veremos a seguir qual funcionalidade é referente a requisições assíncronas.

Test Case

O test Case é dividido em duas partes:

  • Painel Test Case
  • Abas Tabela e Código-fonte

O Painel Test Case exibe o caso de teste atual ou o conjunto de casos de teste (que irá configurar indiretamente uma suíte de teste).

Abas Tabela e Código-fonte irão exibir os comandos do Selenium e o código-fonte HTML dos comandos, respectivamente.

Há três colunas e três campos referentes a cada coluna:

  • Comando: o comando executado pelo Selenium IDE
  • Alvo: geralmente um elemento HTML
  • Valor: quando o Alvo for uma elemento HTML o Valor pode ser o texto de comparação ou um texto para digitação, dependendo do comando

Podemos modificar qualquer um dos três itens a qualquer momento.

Informações do script

Esta sessão nos dá informações sobre diversos itens do script.

A aba Mensagem apresenta as informações de execução do script de teste e sobre erros.

A aba Reference apresenta a documentação de todos os comandos do Selenium, chamado de Selenese.

A aba UI-Element é uma funcionalidade onde podemos fazer o mapeamento entre nomes de elementos em uma página web.

A aba Rollup apresenta os comandos que foram agrupados através da funcionalidade Rollup Rules.

Como gravar ações no Selenium IDE?

Quando iniciamos o Selenium IDE o botão Record ele já é apresentado pressionado, ou seja, ele já estará gravando todos os passos que executarmos no browser.

As ações gravadas são cliques em links, digitação de valores em caixas de texto, cliques em checkbox ou radio buttons e seleção de dados em uma combobox ou list.

Toda vez que desejarmos parar a gravação, iremos clicar novamente no botão Record.

Garantindo os resultados esperados

Após a gravação inicial do script é necessário colocar os pontos de controle, ou seja, os resultados esperados para garantir que o script tenha executado com sucesso.

No Selenium IDE já duas formas, quase idênticas, de garantir o(s) resultado(s) esperado(s):

  • Verificação (verify): verifica se o resultado esperado está presente. Caso não esteja o Selenium IDE marca o passo com erro e continua a execução do script
  • Asserção (asserts): garante que o resultado esperado está presente. Caso não esteja o Selenium IDE marca o passo com erro e para a execução do script.

Para descobrir todos os comandos referentes a verificação ou asserção basta digitar na caixa de texto Comando o comando iniciando com a palavra “assert” ou “verify”.

Localizando Elementos HTML

O Selenium IDE grava as ações executadas em uma página web através dos elementos HTML contidos na página. Se você não sabe o que são elementos HTML dê uma olhada neste link: http://dev.w3.org/html5/markup/elements.html (página em inglês).

No Selenium IDE há algumas formas de localizarmos os elementos HTML para uma interação. São eles:

ID

É provavelmente o tipo de localização mais comum e mais utilizado. Quando um elemento HTML possui o atributo id, o Selenium IDE logo utiliza o valor deste atributo para localizar o elemento.

Ex: Localizando um campo de usuário

<input type=”text” id=”username” />

Neste caso o Selenium IDE irá colocar na caixa de texto Alvo o valor id=username

Name

Quando o elemento HTML possui o atributo name o Selenium IDE utiliza o valor deste atributo para localizar o elemento.

Na grande maioria das situações o elemento possui os atributos id e name. Há poucos casos que iremos encontrar um elemento apenas com o atributo name.

Ex: Localizando um campo de comentários (text area)

<txtarea name=”comentarios” />

Neste caso o Selenium IDE irá colocar na caixa de texto Alvo o valor name=comentários

Link

Quando o elemento HTML é um link (um elemento tipo a) o Selenium IDE utiliza o texto do hyperlink para sua localização.

Ex: Link que apresenta o texto “Blog Qualister”

<a href=http://qualister.com.br/blog>Blog
Qualister</a>

Neste caso o Seleium IDE irá colocar na caixa de texto Alvo o valor link=Blog Qualister

DOM

O DOM – Document Oriented Model, representa um documento HTML e pode ser acessado através de Javascript.

Como a utilização de um DOM inicia com a palavra document não será necessário colocar um prefixo “ dom”, seguindo a lógica dos outros comandos.

Ex: Localizando um campo senha

<input type=”password” id=”passwd” />

Neste caso o Selenium IDE irá colocar na caixa de texto Alvo o valor document.getElementById(‘loginForm’)

Para conhecer mais sobre o DOM, consulte este link http://www.w3schools.com/js/js_htmldom.asp (em inglês)

CSS

CSS (Cascading Style Sheets) é uma linguagem para descrever e renderizar arquivos HTML ou XML. O CSS utiliza-se de seletores (selectors) para localizar, além de elementos a atributos, os mesmos através de seu estilo.

Ex: Localizando um campo através de seu estilo

<input
class="required" name="username" type="text"
/>

Neste caso o Selenium IDE irá colocar na caixa de texto Alvo o valor css=input.required

Para aprender mais sobre os tipos de seletores CSS, acesse a página http://www.w3.org/TR/css3-selectors/ (em inglês)

XPATH

XPath é uma linguagem de consulta de nós em arquivos XML. Um arquivo HTML pode ser uma implementação do XML (XHTML) e também possui a mesma estrutura de um arquivo XML.

Ele possui algumas funções para facilitar a localização de elemento, que pode ser feita pelo elemento em si, atributos ou posição do elemento.

Todo comando de localização contendo XPATH deve começar com duas barras “//“

Ex: Localizando um campo por posição (localizando o Estado)

Cidade<input type=”text”
class=”required”>
Estado<input type=”text”
class=”required”>

Neste caso o Selenium IDE irá colocar na caixa de texto Alvo o valor //input[2]

Comandos de Espera

Com a popularização das requisições assíncronas (XHTTP Requests) mais conhecidas como “Ajax” a execução do script de teste fica um pouco mais complexa. Quando temos que interagir com algum campo que, por exemplo, demora para ser apresentado em tela, o script do Selenium IDE irá falhar, pois ele não efetua esperas quando gravamos um script.

Para resolver este problema o Selenium IDE disponibiliza uma série de comandos que iniciam com a palavra “waitFor” (esperar por).

Ex: se temos o seguinte código-fonte HTML de um elemento que demora alguns segundos para ser apresentado:

Para inserir um comando de espera primeiro analisamos como iremos criar esta abordagem. Neste caso iremos esperar que o elemento esteja presente na tela (apareça) para depois interagir.

Existe o comando chamado waitForElementPresent (esperar por um elemento presente) que necessita de um único parâmetro que é a forma de localização do elemento. As caixas de texto Comando e Alvo ficariam assim:

  • Comand: waitForElementPresent
  • Alvo: id=cep

Com isso O Selenium IDE irá esperar até 30 segundos (configurável acessando o Menu Opções > Opções na caixa de texto “Tempo de expiração padrão para os comandos gravados“) para passar para o próximo passo do script.

Execução do script

Com o script pronto basta executar o script para garantir que o mesmo está de acordo com o teste que planejamos.

Para executar o script no Selenium IDE apenas clique no botão Run e todas as ações do script serão executadas no Firefox.

Ao final da execução o Selenium IDE irá identificar o script com sucesso ou falha.

No caso abaixo o script executado foi executado com sucesso:

A imagem abaixo apresenta um script com erro. Note que o passo que ocorreu o erro está com a cor vermelha, bem como o indicativo de qual problema ocorreu na aba Mensagens.

Neste caso ele não conseguiu encontrar o elemento de id=enviar

Fonte: http://www.qualister.com.br/blog/introducao-ao-selenium-ide

Home Peixe Urbano
Validade Indeterminada




Boa tarde galera, venho aqui falar sobre o artigo que apresentei no TISE, minha primeira viagem ao Rio Grande do Sul. Ao pegar o avião passei por uma cidade bastante linda que gostei de conhecer em viagens anteriores e que em breve voltarei. Trata-se de Maceió. Indico a todos conhecer as belas praias do litoral alagoano.

DSC_0111

Maceió-AL

Ao chegar em Porto Alegre, achei a cidade bastante encantadora com todas àquelas árvores em quase todas as ruas, além do clima ser bem agradável. Não é por acaso que ostenta mais de 80 prêmios e títulos que a distinguem como uma das melhores capitais brasileiras para morar, trabalhar, fazer negócios, estudar e se divertir. Foi destacada em anos recentes também pela ONU como a Metrópole nº1 em qualidade de vida do Brasil por três vezes.

Em relação ao TISE 2013, este aconteceu durante 3 dias de dezembro com diversos artigos e palestras apresentadas no teatro da PUCRS. Vários foram os trabalhos apresentados, porém um marcou a todos que estavam lá no evento: MOUSEKEY, Teclado Virtual Silábico-Alfabético: Tecnologia Assistiva para Pessoas com Deficiência Física do Cláudio Dusik. Não pela importância de seu belo trabalho, mas sim pelas experiências apresentadas pelo jovem Cláudio que possui uma doença degenerativa e desenvolveu uma ferramenta para ajudar a todos que possuem limitações semelhantes as dele.

Aproveite os Feriados! Rio de Janeiro – Hospedagem/Cafe da manha de R$ 228,80 por R$ 208
Validade: 27/08

Sobre o meu trabalho, eu apresentei o artigo expandido “Projeto e Desenvolvimento de um Módulo de Atividades Sociais para o Ambiente Moodle Utilizando a Metodologia OOHDM“,  sobre a integração do Facebook e do Twitter ao AVA Moodle. Também é apresentado um referencial teórico em torno da utilização de redes sociais na Educação como um caminho para tornar os ambientes de aprendizagem cada vez mais sociais e interativos e fortalecer a construção do conhecimento. A partir de uma pesquisa tecnológica-exploratória, foi possível descrever o processo de desenvolvimento de um módulo de atividades visando a integração dessas redes sociais ao Moodle. Foi utilizada a metodologia OOHDM, que é específica para criação de aplicações hipermídias.

Link para os anais completo do evento: http://www.tise.cl/volumen9/III.html

Algumas fotos da minha viagem:

Abertura do TISE

Abertura do TISE

Cláudio Dusik apresentando seu trabalho.

Cláudio Dusik apresentando seu trabalho.

Pôsteres

Pôsteres

Eu apresentando o pôster.

Eu apresentando o pôster.

Jardim da PUCRS.

Jardim da PUCRS.

OFERTAS HU: Alta Temporada com Preco de Baixa – Ofertas a partir de R$ 50
Validade: Enquanto durarem os estoques

Minicurso 1: Desenvolvendo Websites com Joomla

Link do Slide: Minicurso_Joomla

Para baixar o Joomla, segue o link: http://www.joomla.org/

Minicurso 2: Introdução ao HTML5 e CSS3

Link do Slide: Minicurso_Introducao_ao_HTML5_e_CSS3

Material apresentado no minicurso: material_html5_css3

Quer aprender mais sobre HTML5, entra aqui e confira um tutorial sobre a linguagem: http://tableless.com.br/html5/

Home page Nacional
Nacional Tam

Ganhar dinheiro pela internet é um tema bastante encontrado na procura pelo “felizes para sempre”. Quem nunca se deparou com as famosas mensagens “Ganhe dinheiro sem sair de casa” ou “Como ganhar dinheiro pela internet” ou “Ganhe R$ 200,00 por semana sem investimentos”, ou seja, a fórmula mágica para se ganhar dinheiro parece está andando bem do nosso lado.

A verdade é a seguinte sobre ganhar dinheiro na internet: Há várias possibilidades de se ganhar dinheiro pela internet, porém o pote de ouro na origem do arco-íris pode não existir. Aí você me pergunta: Dá pra somente sustentar-se com o dinheiro ganho pela internet? Depende de n fatores. Vou descrever para vocês como ganhar dinheiro com anúncios:

  1. Você precisa ter um website com uma proposta bem definida e com um público-alvo específico. Aí você diz logo: Vou falar de esporte em um blog para usuários que gostam de crônicas esportivas. Eu lhe digo: Qual o seu diferencial, pois sites desse segmento existe aos montes. Para conseguir acesso você necessita atrair um público. E para atrair o público, você precisa ter um diferencial.
  2. Após definido seu público alvo e você possuir um número significativo de acessos, você já pode definir como você pretende ganhar dinheiro: vendendo produtos, ganhando por click, ganhando por mil visualizações, etc.Continue reading

Firefox OS

Firefox OS chega no Brasil a partir do segundo semestre.

O projeto Firefox OS permite aos desenvolvedores criar experiências aplicações HTML5 que funcionam através de múltiplos dispositivos e fatores de forma (desktop, celular, tablet, etc) usando padrões da Web e tecnologias abertas, como HTML5, CSS e JavaScript. A biblioteca do javascript JQuery e JQuery UI podem ser usadas para ter uma web application. Ainda mais, que visa criar um ecossistema rico distribuído de lojas de aplicativos HTML5, incluindo um mercado operado pela Mozilla. Mozilla pretende colocar o desenvolvedor de volta no controle de todos os aspectos da experiência de aplicação – desde o desenvolvimento fácil de distribuição para a gestão direta de relacionamento com clientes.

Aplicativos são construídos usando tecnologias da Web padrão com metadados adicionais que permite que o agente do usuário para descobrir, instalar, lançamento, e conceder-lhes privilégios adicionais.

Traduzido de https://developer.mozilla.org/en-US/docs/Apps

Com isso é possível observar que essa novo SO para dispositivos móveis já é uma realidade e é uma questão de tempo para que este esteja disponível no mercado. Na Campus Party 2013 foi apresentado algumas palestras sobre o Firefox OS.

Os vídeos abaixo são de autoria do Campus Party Brasil.

Olá pessoal esta semana comecei a estudar Android e me surpreendi com a infinidade de possibilidades que esta plataforma oferece. Por isso estou fazendo esse post e espero que seja o primeiro de muitos sobre esse tema.

O que é o Android?

O Android é conjunto de software para dispositivos móveis que inclui um sistema operacional, middleware e aplicações chave. O Android SDK fornece as ferramentas e APIs necessárias para começar o desenvolvimento de aplicativos na plataforma Android usando a linguagem de programação Java.

Colocarei abaixo algumas imagens do emulador rodando juntamente com E clipse, nas imagens vocês podem ver algumas funcionalidades e aplicações, além de um hello Word que fiz.

Características

  • Framework que permite reutilização e substituição de componentes.
  • Máquina virtual Dalvik otimizada para dispositivos móveis.
  • Browser integrado baseado na engine WebKit que possui código-fonte aberto
  • Gráficos otimizados alimentado por uma biblioteca de gráficos personalizados 2D; gráficos 3D baseado no OpenGL ES 1,0 especificação (aceleração de hardware opcional).
  • SQLite para armazenamento de dados estruturados.
  • Suporte de Media para áudio comum, vídeo e imagem estática nos formatos (MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, GIF).
  • GSM de telefonia (hardware dependente).
  • Bluetooth, EDGE, 3G e WiFi (dependente de hardware).
  • Câmera, GPS, bússola e acelerômetro (dependente de hardware).
  • Rico ambiente de desenvolvimento, incluindo um emulador, ferramentas de depuração, memória e desempenho de perfis, e um plugin para o Eclipse IDE.

Aplicações

Android  já vem com um conjunto de aplicativos, incluindo um cliente de e-mail, programa de envido de SMS, calendário, mapas, navegador, contatos e outros. Todos as aplicações são escritas utilizando a linguagem de programação Java.

Application Framework

Ao fornecer uma plataforma de desenvolvimento aberta, o Android oferece aos desenvolvedores a capacidade de criar aplicações extremamente ricas e inovadoras. Os desenvolvedores estão livres para aproveitar o hardware do dispositivo, as informações de localização de acesso, execução de serviços de background, definir alarmes, notificações para adicionar a barra de status, e muito, muito mais.

Os desenvolvedores têm acesso total às mesmas APIs do mesmo Framework usado pelos aplicativos core. A arquitetura do aplicativo é projetado para simplificar a reutilização dos componentes, qualquer aplicação pode publicar suas capacidades e qualquer outra aplicação pode então fazer uso dessas capacidades (sujeito a restrições de segurança impostas pelo framework). Este mesmo mecanismo permite que componentes possam ser substituídos pelo usuário.

Todas as aplicações são um conjunto de serviços e sistemas, incluindo:

  • Um rico e extensível conjunto de pontos de vista que pode ser usado para construir uma aplicação, incluindo listas, grids, caixas de texto, botões, e até mesmo um navegador web embutido.
  • Os provedores de conteúdo que permitem que aplicativos acessem dados de outros aplicativos (como Contatos), ou para compartilhar seus próprios dados.
  • Um Resource Manager(gerente de recursos), fornece acesso aos recursos non-code como seqüências localizadas, gráficos e arquivos de layout.
  • Um Notification Manager (gerente de notificações)que permite que todos os aplicativos exibam alertas personalizados na barra de status.
  • Um Activity Manager (gerente de atividades) que gerencia o ciclo de vida de aplicações e fornece um backstack comuns de navegação.

Bibliotecas

O Android inclui um conjunto de bibliotecas C / C + + usadas por diversos componentes do sistema Android.Estas capacidades são expostos a desenvolvedores através da estrutura de aplicativos do Android. Algumas das principais bibliotecas estão listados abaixo:

  • System C library – uma implementação de derivados do BSD do sistema de biblioteca padrão C (libc), incrementado para dispositivos baseados em Linux
  • Media Libraries – baseada em PacketVideo’s OpenCORE, as bibliotecas dão suporte a reprodução e gravações de áudio e nos formatos mais populares de vídeo, bem como arquivos de imagem estática, incluindo MPEG4, H.264, MP3, AAC, AMR, JPG e PNG
  • Surface Manager – gerencia o acesso ao display e permite a exibição de gráficos de camadas 2D e 3D para aplicações múltiplas.
  • LibWebCore – uma engine de navegador moderno tanto para um navegador android como para uma navegação web enbutida embutida
  • SGL – engine para gráficos 2D
  • Bibliotecas 3D – uma implementação baseada em OpenGL ES 1.0 APIs; as bibliotecas usam hardware aceleração 3D (quando disponível) ou o incluído, quanto software rasterizer altamente otimizado.
  • FreeType – Renderização de fontes bitmap e vetoriais.
  • SQLite – uma engine poderosa de banco de dados relacional leve à disposição de todos os aplicativos

Android Runtime

O Android inclui um conjunto de bibliotecas que fornece a maioria das funcionalidades disponíveis nas principais bibliotecas da linguagem de programação Java.

Cada aplicação Android roda em seu próprio processo, com sua própria instância da máquina virtual Dalvik. Dalvik foi escrito de forma que um dispositivo pode executar vários VMS eficientemente. O Dalvik VM executa os arquivos em Dalvik executável (. DEX) formato que é otimizado para o mínimo consumo de memória . A VM é baseada em registradores, e executa classes compiladas por um compilador de linguagem Java que foram transformadas para o formato dex. Incluído pela ferramenta”dx”.

O Dalvik VM invoca o kernel do Linux para a funcionalidade subjacente como encadeamento de baixo nível de gerenciamento de memória.

Kernel Linux

Android baseia-se no kernel versão 2.6 para o sistema central de serviços, como segurança, gerenciamento de memória, gerenciamento de processos, rede de pilha, modelo de drivers. O kernel também atua como uma camada de abstração entre o hardware e o resto da pilha de software.

Referências:

Android Developers : http://developer.android.com/guide/basics/what-is-android.html

Fonte: Java e Linux

Na última aula (que faz tempo por sinal), aprendemos a fazer um simples “Hello World!” com o Titanium Mobile. Hoje aprenderemos a fazer um leitor simples de Feeds RSS usando o HTTPClient.

Falo sobre o HTTPClient, pois na próxima aula faremos o mesmo leitor RSS porém usando o YQL, mas na próxima aula eu explico melhor do que o YQL se trata, mas para os apressadinhos de plantão que quiserem dar uma olhada, é só clicar aqui.

Vamos pra aula!

Começaremos com o de prache, criando uma window no “app.js”para que possamos visualizar os feeds e um botão “Voltar” que usaremos depois:

Titanium.UI.setBackgroundColor('#000');

var winReader = Titanium.UI.createWindow({
    title:'RSS Reader',
    backgroundColor:'#fff',
    modal:true,
    barColor: '#000',
});

var btnVoltar = Ti.UI.createButton({
    title: 'Voltar'
});

Agora vamos declarar algumas variáveis para fazermos a mágica:

var httpRSS = Titanium.Network.createHTTPClient();
var listaRSS = [];

O “httpRSS” vai ser o nosso HTTPClient, e o “listaRSS” será nosso array onde iremos colocar o título de um feed.

Agora faremos as chamadas para que o HTTPClient seja iniciado e traga os feeds, e logo em seguida abriremos nossa window para exibição:

httpRSS.open('GET','http://feeds.feedburner.com/OBigola');
httpRSS.send();

winReader.open();

Agora e só rodar e ver o que acontece…NADA!

Não acontece nada pois ainda não implementamos o que o HTTPClient vai fazer, pois ele não é exclusivo para ler feeds, mas sim para uma série de coisas que envolva chamadas HTTP.

Tudo certo e nada resolvido, vamos implementar a exibição dos feeds, para isso, vamos usar o evento “onload” do “httpRSS”:

httpRSS.onload = function() {
   var rssXML = this.responseXML;
   var rssCanal = rssXML.documentElement.getElementsByTagName("channel");
   var rssTitulo = rssCanal.item(0).getElementsByTagName("title").item(0).text;
   var rssItens = rssXML.documentElement.getElementsByTagName("item");

   winReader.title = rssTitulo;

Coloquei nomes bem óbvios para ficar fácil de entender, mas para ficar claro, essas variáveis serão atribuídas da seguinte forma:

  • rssXML: Terá o XML retornado da requisição feita em “httpRSS.open()”, que no nosso caso é os feeds do meu blog;
  • rssCanal: É possível que o link requisitado tenha mais de um canal, mas normalmente feeds de sites possuem somente um, então pegamos somente o primeiro, onde contém as informações do blog;
  • rssTitulo: É onde teremos o nome do site em questão, vamos usar pra colocar como título da nossa window;
  • rssItens: É um array onde terá as postagens do blog;

Agora vamos criar um laço para percorrer os itens recuperados e inserir em um TableView:

   for (var i = 0; i &lt; rssItens.length; i++) {
      var rssPostTitulo = rssItens.item(i).getElementsByTagName("title").item(0).text;
      var rssPostLink = rssItens.item(i).getElementsByTagName("link").item(0).text;

      var rssLinha = Ti.UI.createTableViewRow({
          top:0,
          hasChild: true,
          borderColor:'#000',
          link: rssPostLink
      });

      if (i % 2 == 0){
         rssLinha.backgroundColor='#cddae2';
      } else {
         rssLinha.backgroundColor='#fff';
      }

      var rssLabel = Ti.UI.createLabel({
          text: rssPostTitulo,
          textAlign:'left',
          left:0,
          height:40,
          width:'auto',
          top:3,
          color:'#000',
          font:{fontSize:'x-small'}
      });

      rssLinha.add(rssLabel);
      listaRSS.push(rssLinha);
   }

No laço, iremos pegar o título do post e o link. O link iremos inserir em um objeto TableViewRow,  que nada mais é que uma linha que iremos inserir em nosso TableView.

O legal no Titanium, é que a propriedade “link” não existe no objeto TableViewRow, porém podemos criar uma propriedade de forma implícita, e nesta propriedade iremos guardar o link do post para que possamos abrí-lo posteriormente em um WebView.

Aquele IF que coloquei ali no meio é só pra fazer um efeito zebrado. Fica mais bonito ;-)

E logo abaixo é apenas o label que iremos inserir no TableViewRow através do método “Add”. E o método “Push” do array serve para inserir o “rssLinha” gerado naquele momento como um item do array.

Agora pra finalizar, vamos criar e inserir o TableView na window. Vamos também implementar o evento “click” nele para que abra a página referente ao feed em um WebView. Aquele botão “Voltar” que criamos lá no começo iremos usar aqui para voltar a lista de feeds depois que abrir a página do feed.

var tvRSS = Titanium.UI.createTableView({
       data:listaRSS,
       top:0
   });

   winReader.add(tvRSS);

   tvRSS.addEventListener('click',function(e) {
      var webFeed = Titanium.UI.createWebView({
          url: e.rowData.link
      });

      btnVoltar.addEventListener('click',function(){
          winReader.remove(webFeed);
          winReader.leftNavButton = null;
      });

      winReader.leftNavButton = btnVoltar;
      winReader.add(webFeed);
   });
};

Olha só a cara do meninão:

Agora é só personalizar como bem entender.

Por hoje é só!

Enjoy!

Fonte: O Bigola

Fala galera! Agora que todos já sabem o que é o Titanium Mobile (quem não souber clique aqui), vamos começar a codificar um pouco, e para isso, nada melhor que nosso velho e famoso “Hello World!”.

Ao abrir o Titanium Studio pela primeira vez, o SDK Mobile ainda não estará instalado, mas automaticamente ele inicia o download e já o deixa tudo pronto para o desenvolvimento.

Primeiramente, vamos criar o projeto lá em File > New > Titanium Mobile Project;

Preencha os dados do seu aplicativo e em seguida clique em Finish:

A tela com os dados básicos do aplicativo é parecida com esta.

O Titanium automaticamente cria uma estrutura de aplicativo com duas abas e alguns ícones padrões, daremos destaque aos arquivos tiapp.xml e app.js.

tiapp.xml nada mais é que um arquivo de projeto no qual o Titanium entende, é lá onde se encontra os dados básicos do aplicativo, como:

  • Plataforma no qual ele rodará;
  • ID do aplicativo;
  • Nome do aplicativo;
  • Autor, site, ícone;
  • Orientações de tela que suportará como horizontal direita, horizontal esquerda, vertical ou vertical invertida;
  • Se será tela cheia, se usará WiFi, se terá statusbar;
  • Ou seja, quase tudo que pode existir de setagens padrões.

Já o app.js é o arquivo inicial do aplicativo, é tipo o main() da linguagem C (R.I.P. Dennis Ritchie), onde tudo começará a funcionar como mágica.

O aplicativo inicial gerado pelo Titanium é igual a este:

Agora que você já viu como funciona mais ou menos, pode abrir o arquivo app.js e apagar tudo que tem lá que vamos começar nosso “Hello World”.

Inicialmente vamos criar uma janela na qual vamos inserir os demais componentes. Ela janela terá o título de “Janela Inicial” e terá sua cor de fundo preta:

var winHello = Titanium.UI.createWindow({
  title: 'Janela Inicial',
  backgroundColor: '#000000'
});

Agora que já temos nossa janela criada, vamos criar o nosso label que exibirá a famosa frase, mas no momento vamos deixar sem texto, que será na cor branca, fonte tamanho 32 e alinhado ao centro:

var lblHello = Titanium.UI.createLabel({
   text: '',
   color: '#FFFFFF',
   font:{fontSize:32},
   textAlign: 'center',
   width: 'auto'
});

Só rode o aplicativo quando eu mandar, ok? Pois senão você poderá ficar frustrado, pois não irá funcionar como queremos ainda.

Bom, agora seria legal colocar um botão para fazer o texto aparecer, não é? Veja como faz:

var btnExibir = Titanium.UI.createButton({
   title: 'Exibir',
   top: 20,
   height: 60,
   width: 120
});

Pronto! Já temos a janela, o texto e o botão, porém se você rodar o aplicativo, aparecerá apenas uma janela com o logo da Appcerator. Isso acontece porque devemos adicionar os componentes à janela e, obviamente, abrí-la. É o que vamos fazer agora:

winHello.add(btnExibir);
winHello.add(lblHello);
winHello.open();

Legal! Agora teste aí e veja se funciona. Ainda não? Putz, faltou “falarmos” para o botão o que ele deverá fazer, observem a simplicidade:

btnExibir.addEventListener('click',function(){
   lblHello.text = 'Hello World!';
});

Agora sim está funcionando 100%, e agora você pode estar se perguntando:

Mas como é que eu vou saber quais propriedades cada componente possui?

É só dar uma lida na documentação que está disponível no site da Appcelerator (clique aqui) e logo com o tempo você terá as manhas das propriedades mais usadas e tudo mais.

Segue o código completo do aplicativo criado neste post e a cara dele depois de pronto:

var winHello = Titanium.UI.createWindow({
   title: 'Janela Inicial',
   backgroundColor: '#000000'
});

var lblHello = Titanium.UI.createLabel({
   text: '',
   color: '#FFFFFF',
   font:{fontSize:32},
   textAlign: 'center',
   width: 'auto'
});

var btnExibir = Titanium.UI.createButton({
   title: 'Exibir',
   top: 20,
   height: 60,
   width: 120
});

winHello.add(btnExibir);
winHello.add(lblHello);
winHello.open();

btnExibir.addEventListener('click',function(){
   lblHello.text = 'Hello World!';
});

Bom pessoal, é isso aí! Espero que tenham gostado e desculpem a demora em postar.

Obrigado e até mais.

Fonte: O Bigola

Olá pessoal,

Vamos aprender a instalar o Titanium no Windows. O primeiro passo é baixar a versão 1.6 do Java SDK (até o momento da escrita deste post a versão 1.7 ainda não é suportada) no endereço:

http://www.oracle.com/technetwork/java/javase/downloads/index.html

Clique no link download JDK do Java SE conforme figura 1.

Figura 1. Download do Java JDK 1.6

Outro ponto importante é que o Titanium Studio só é compatível com a versão 32bits do JDK, então selecione esta versão para download conforme figura 2.

Figura 2. Download da versão 32 bits do JDK

Após o download e instalação do JDK, iremos instalar o SDK do Android. Para isso acesse o seguinte endereço:

http://developer.android.com/sdk/index.html

E baixe a versão recomendada do Android SDK conforme figura 3.

Figura 3. Download do SDK do Android

Continue reading