Desenvolva aplicativos remotos da Web com o Sencha Touch

Uma estrutura JavaScript remota HTML5 para navegadores WebKit

Sencha Touch é uma estrutura de aplicativo da Web remoto que foi desenvolvida usando HTML5, CSS3 e a linguagem JavaScript. Neste artigo, saiba como aplicar suas qualificações atuais de desenvolvimento da Web ao desenvolvimento da Web remoto. Efetue o download e configure o Sencha Touch, e explore o básico usando um aplicativo de amostra. Saiba tudo o que precisa saber para começar a trabalhar com a estrutura Sencha Touch.

Brice Mason, Senior Web Developer, Equip For Quality

Brice MasonBrice Mason é marido e pai no interior do Estado de Nova York. Ele também é desenvolvedor na EQUIP For Quality, onde trabalha em uma equipe desenvolvendo a próxima geração de software de analítica de saúde para o segmento de mercado de assistência a longo prazo. Ele mantém um site pessoal em http://www.bricemason.com.



19/Abr/2011

Visão geral

No mundo do desenvolvimento de software, duas tendências estão se tornando cada vez mais importantes: o desenvolvimento de aplicativos remotos e o desenvolvimento da Web HTML5 baseado em padrões. A curva de aprendizagem para ambos os tipos de desenvolvimento pode ser bastante íngreme. O desenvolvimento de um aplicativo remoto nativo frequentemente requer conhecimento de plataformas e qualificações específicas, como Objective-C para iPhone e Java™ para Android (e essas são apenas duas plataformas). O desenvolvimento HTML5 tornou-se mais popular recentemente porque é baseado em padrões. Apesar dos fornecedores estarem trabalhando rapidamente para incorporar e entrar em conformidade com essas especificações iniciais, o HTML5 ainda é um tanto imaturo.

O release recente do Sencha Touch 1.0 une os mundos de vanguarda do desenvolvimento de aplicativos remotos com o desenvolvimento da Web HTML5 para formar uma estrutura simples e acessível para desenvolver aplicativos da Web remotos. Neste artigo, aprenda tudo o que precisará saber para começar a trabalhar com a estrutura Sencha Touch.


Sencha Touch

Aprender a desenvolver aplicativos remotos—especialmente da perspectiva do desenvolvedor da Web—pode ser complicado. Uma grande variedade de plataformas para escolher e tecnologias para aprender estão disponíveis. O suporte ao HTML5, apesar de estar ganhando força, ainda não está totalmente pronto para ser usado em aplicativos da Web complexos, particularmente em aplicativos de linha de negócios.

Abreviaturas usadas frequentemente

Ajax: Asynchronous JavaScript + XML
API: application programming interface
CSS: Cascading Style Sheets
HTML: Hypertext Markup Language
JSON: JavaScript Object Notation
SDK: software development kit
UI: user interface

O Sencha Touch combina as ricas plataformas de HTML5 e desenvolvimento de aplicativo da Web remoto para atingir um bom equilíbrio. A estrutura é ideal para desenvolvedores e seu uso é similar ao da estrutura Ext JS JavaScript. Se você tiver experiência média ou avançada com JavaScript, o Sencha Touch é acessível. Se já tiver qualificações como desenvolvedor de JavaScript e CSS, o Sencha Touch pode transformá-lo imediatamente em um desenvolver de aplicativo remoto.

A Sencha é uma empresa com uma oferta central de produto comercial, mas também oferece suporte a software livre. O Sencha Touch 1.0 é gratuito tanto para o uso pessoal quanto para o comercial.

Suporte de plataforma

O Sencha Touch é suportado atualmente em navegadores WebKit, incluindo as populares plataformas Apple iOS e Google Android. É possível que alguns argumentem que esse suporte não é suficiente—que todas as plataformas devem ser suportadas para que o Sencha Touch seja levado a sério. Ao adotar uma estrutura na área de desenvolvimento da Web remoto, é sensato procurar duas coisas: riqueza de plataforma e riqueza de recursos. É desejável ter uma estrutura que abstrai o máximo do HTML5/CSS3 em uma forma simples de usar para o desenvolvedor, e que possui um grande alcance. Nesse sentido, a Sencha é perspicaz ao oferecer suporte às duas plataformas mais populares, e usar seus recursos para fornecer recursos ricos e fáceis de usar para desenvolvedores.

O que você precisa saber

Para começar a usar o Sencha Touch, tudo o que você precisa é um conhecimento prático da linguagem JavaScript e CSS. Como mencionado, a estrutura abstrai muitos dos recursos e estilos que normalmente seriam montados da estaca zero.

Se deseja explorar mais adiante, e talvez desenvolver seus próprios componentes customizados ou modificar estilos para sua própria marca, você precisa de qualificações mais aprofundadas em HTML5 e CSS3. Para obter mais informações, consulte a seção Recursos .

Introdução

Para começar a trabalhar com o Sencha Touch:

  1. Efetue o download da estrutura da Sencha. (Consulte Recursos.)
  2. Extraia os conteúdos da raiz do seu Web site de desenvolvimento.

    Cogite renomear a pasta extraída para um nome genérico, como sencha-touch, para que você possa usar esse mesmo nome de folder para versões futuras da estrutura sem atualizar outros arquivos que fazem referência a ele.

  3. Usando um navegador WebKit, como o Google Chrome, abra a página de exemplos em http://localhost/sencha-touch/examples/. Apesar de seu ambiente poder ter uma aparência ligeiramente diferente, você deve ver uma tela similar à Figura 1.
Figura 1. Exemplos do Sencha Touch
Screenshot of the Sencha Touch Examples page

Explore alguns dos recursos da estrutura através do desenvolvimento de um aplicativo Sencha Touch.

  1. Crie um novo arquivo HTML chamado index.html na raiz do seu site com o código de origem da Listagem 1.
    Listagem 1. Documento HTML5 de amostra
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Touch Test</title>
    </head>
    
    <body>
    </body>
    </html>

    Uma vez que tenha criado esse arquivo, você é oficialmente um desenvolvedor HTML5. O doctype <!DOCTYPE HTML> na parte superior é a chave; ele garante que o documento seja interpretado como HTML5.

  2. Modifique o código da Listagem 1 como mostrado na Listagem 2.
    Listagem 2. Instalando scripts e estilos do Sencha Touch
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Touch Test</title>
    
    <!-- sencha touch css -->
    <link rel="stylesheet" type="text/css"
               href="sencha-touch/resources/css/sencha-touch-debug.css" />
    
    <!-- sencha touch javascript -->
    <script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>
    
    </head>
    
    <body>
    </body>
    </html>

    O código acima inclui os arquivos CSS e JavaScript para a estrutura Sencha Touch. Você vinculou as versões de depuração desses arquivos, o que é recomendado para fins de desenvolvimento porque elas geram mensagens de erro melhores. Para implementar, simplesmente substitua as versões de depuração pelas versões reduzidas. Também é possível incluir seu próprio arquivo CSS customizado e um arquivo de JavaScript para desenvolver seu aplicativo.

  3. Para manter o exemplo simples, inclua algum código JavaScript integrado. Comece modificando seu código para que se pareça com a Listagem 3.
    Listagem 3. O aplicativo Sencha Touch mais simples
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Touch Test</title>
    
    <!-- sencha touch css -->
    <link rel="stylesheet" type="text/css"
               href="sencha-touch/resources/css/sencha-touch-debug.css" />
    
    <!-- sencha touch javascript -->
    <script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>
    
    <!-- application script -->
    <script type="text/javascript">
        Ext.setup( {
            onReady: function() {
                // create the root panel
                new Ext.Panel({
                    fullscreen: true,
                    html: "Sencha Touch is ready!"
                });
            }
        });
    </script>
    
    </head>
    
    <body>
    </body>
    </html>
  4. Execute a página no Google Chrome, e você deverá ver algo parecido com a Figura 2.
    Figura 2. O aplicativo mais simples do Sencha Touch
    Output of executed code from Listing 3, which displays Sencha Touch is ready!

Ext.setup

Várias outras opções de configuração úteis para a função Ext.setup estão disponíveis; consulte os documentos de API, encontrados na pasta de documentos da sua instalação do Sencha Touch, para obter mais detalhes.

O código na Listagem 3 apresenta um bloco de código JavaScript que você reutilizará ao longo deste artigo para explorar os recursos da estrutura. Se você já usou o Ext JS, esse código pode parecer familiar. A função Ext.setup é o ponto de partida para seus aplicativos do Sencha Touch. Ela aceita um objeto com diversas opções de configuração. O exemplo usa a opção onReady , que pega uma função e avalia quando o documento está pronto ready. A função onReady cria o painel raiz do aplicativo. O painel raiz ocupa todo o espaço disponível e contém apenas uma cadeia de caractere simples usando as opções fullscreen e opções html , respectivamente.

Executando aplicativos em um emulador do Android

Até agora você usou o navegador Google Chrome durante o trabalho de desenvolvimento. É uma boa abordagem, principalmente ao tentar lidar com erros de JavaScript e CSS. Use um emulador de dispositivo para começar o teste de aplicativo. Esta seção mostra como instalar um emulador do Android.

  1. Faça o download do Android SDK mais recente para sua plataforma de sistema operacional e o extraia para o disco.

    O SDK inclui todos os utilitários necessários para instalar e executar um emulador, mas são necessárias algumas etapas adicionais.

  2. Os emuladores do Android exigem que você crie um Android Virtual Device (AVD), que é basicamente um conjunto de opções de configuração que modela um dispositivo real desenvolvido com Android. Para criar um AVD, execute o utilitário android na pasta de ferramentas do Android SDK.

    O Android SDK e o AVD Manager devem se abrir e serem parecidos com a Figura 3.

    Figure 3. Android SDK e AVD Manager
    Screenshot of Android SDK and AVD Manager, which is used to install add-on packages and manage virtual devices

Nesta altura, se você tenta criar um novo dispositivo virtual usando o botão New… , observe um campo importante rotulado Target, que está desativado. Antes de poder criar um novo dispositivo virtual, faça o download de um complemento para o SDK.

  1. Selecione Available Packages no menu esquerdo.
  2. Expanda o site rotulado https://dl-ssl.google.com/android/repository/repository.xml para revelar uma lista de pacotes disponíveis para instalação.
  3. Selecione a plataforma SDK mais recente, como mostrado na Figura 4, e a seguir clique em Instalar Selecionados.
    Figura 4. Pacotes disponíveis para o Android SDK
    List of available packages for the Android SDK that can be installed via the Android SDK and AVD Manager
  4. Aceite a instalação clicando no botão Install na próxima janela.
  5. Quando o download e a instalação forem concluídos, clique em Close.

Você acabou de instalar um destino potencial para todos AVDs que deseja criar. Este destino é um dispositivo Android executando a versão 2.2. A próxima etapa é criar o AVD.

  1. Selecione Virtual Devices no menu esquerdo no AVD Manager e clique em New….
  2. Digite sencha-avd para o Nome e selecione o destino do Android 2.2 que você acabou de instalar como Target. Deixe todos os outros padrões.
  3. Clique em Create AVD.

    Clique em OK na janela de confirmação e então feche o AVD Manager.

Tudo que você precisa para executar um emulador está agora em seu ambiente de desenvolvimento local. Para executar o emulador: abra uma janela de terminal, mude os diretórios para a raiz da sua instalação do Android SDK e insira o comando na Listagem 4.

Listagem 4. Chamando o emulador do Android
tools/emulator -avd sencha-avd

É possível usar o navegador da Web no emulador Android para navegar até seu aplicativo teste em http://localhost/, mas receberá um grande 404. Isso ocorre porque fazer referência ao localhostou127.0.0.1 no emulador é feito, na verdade, dentro do contexto do próprio emulador. Para fazer referência ao seu ambiente de desenvolvimento local, use o endereço 10.0.2.2, que resulta na tela mostrada na Figura 5.

Figura 5. Exemplo sendo executado em um emulador Android
Screenshot of example defined in Listing 3 running in the Android emulator that displays Sencha Touch is ready!

Um tour dos componentes de interface do Sencha Touch

Agora que você sabe o básico, esta seção oferece um tour de alguns dos componentes de UI do Sencha Touch.

Botões

É possível criar vários estilos de botão usando apenas algumas opções de configuração. O código na Listagem 5 cria uma coleção empilhada verticalmente de todos os botões disponíveis. O aplicativo de exemplo é expandido para incluir um array de itens para serem adicionados ao painel raiz—neste caso, um único painel com uma coleção de botões organizada em pilhas verticais.

Os botões têm o estilo baseado na opção de configuração ui . Os tipos de botão suportados são normal, back, round, action e forward.

Listagem 5. Botões
<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Panel({
        fullscreen: true,
        items: [
          // add a panel to the root panel
          // this will contain a vertical layout of buttons
          { 
            xtype: "panel",
            layout: "vbox",
            items: [
              {
                xtype: "button",
                ui: "normal",
                text: "Normal"  
              },
              {
                xtype: "button",
                ui: "back",
                text: "Back"  
              },
              {
                xtype: "button",
                ui: "round",
                text: "Round"  
              },
              {
                xtype: "button",
                ui: "action",
                text: "Action"  
              },
              {
                xtype: "button",
                ui: "forward",
                text: "Forward"  
              }
            ]  
          }
        ]
      });
    }
  });
</script>

A Figura 6 mostra o resultado.

Figura 6. Estilos de botão disponíveis no Sencha Touch
Screenshot of executed code from listing 5, which displays a vertical stack of all available button styles

Formulários

O conjunto de formulários possui o conteúdo esperado e mais. Fica claro que as funções específicas ao HTML5 estão sendo manipuladas e incorporadas. Há suporte disponível para tipos de campo (como e-mail, endereços da Web e selecionadores de dadas) e atributos (como texto provisório) em HTML5; o Sencha Touch apenas facilita seu uso. A Listagem 6 mostra alguns desses recursos.

Listagem 6. Amostragem de controles de formulários
<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Panel({
        fullscreen: true,
        items: [
          // add a panel to the root panel
          { 
            xtype: "form",
            items: [
              {
                xtype: "textfield",
                name: "name",
                label: "Name",
                placeHolder: "your name here"  
              },
              {
                xtype: "emailfield",
                name: "email",
                label: "Email",
                placeHolder: "you@example.com"  
              },
              {
                xtype: "urlfield",
                name: "url",
                label: "Url",
                placeHolder: "http://www.example.com"  
              },
              {
                xtype: "datepickerfield",
                name: "date",
                label: "Date",
                picker: { yearFrom: 2010 }  
              }
            ]  
          }
        ]
      });
    }
  });
</script>

Executar o código na Listagem 6 deve resultar em uma tela similar à Figura 7. O campo Date está focado, revelando um controle selecionador de datas na parte inferior.

Figura 7. Amostragem de campos de formulários disponíveis
Screenshot of sampling of available form fields

Listas

Ao desenvolver aplicativos da Web remotos, você está trabalhando com recursos limitados. O suporte para componentes de UI baseados em lista se torna importante. O Sencha Touch é equipado com suporte para vários tipos de listas, incluindo simples, agrupado e aninhado. A Figura 8, que foi tirada da demonstração Kitchen Sink no download da estrutura, demonstra uma lista agrupada. A pilha vertical de letras à direita da lista expõe um método útil para pular para partes específicas da lista.

Figura 8. Uma lista agrupada da demonstração Kitchen Sink
Screenshot of grouped list found in the Kitchen Sink demo

Ícones e barras de ferramentas

O Sencha Touch é vendido com um repositório impressionante de ícones integrados e prontos para o uso. Tudo o que você precisa fazer é especificar a cadeia de caractere que representa uma classe CSS para o ícone que deseja. A Listagem 7 mostra como desenvolver duas barras de ferramentas: uma na parte superior do painel raiz, e outra na parte inferior. Cada barra de ferramentas está configurada com uma pequena amostra dos ícones disponíveis como padrão.

Muito mais ícones estão disponíveis. Confira os documentos e exemplos da API para obter mais informações.

Listagem 7. Ícones em barras de ferramentas
<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Panel({
        fullscreen: true,
        dockedItems: [
          {
            xtype: "toolbar",
            dock: "top",
            items: [
              {
                iconMask: true,
                ui: "plain",
                iconCls: "add"
              },
              {
                iconMask: true,
                ui: "plain",
                iconCls: "delete"
              },
              {
                iconMask: true,
                ui: "plain",
                iconCls: "star"
              },
              {
                iconMask: true,
                ui: "plain",
                iconCls: "home"
              }
            ]
          },
          {
            xtype: "toolbar",
            dock: "bottom",
            items: [
              {
                iconMask: true,
                iconCls: "download"
              },
              {
                iconMask: true,
                iconCls: "favorites"
              },
              {
                iconMask: true,
                iconCls: "search"
              },
              {
                iconMask: true,
                iconCls: "user"
              }
            ]  
          }
        ]
      });
    }
  });
</script>

Depois de executar o código da Listagem 7, você deve ver uma tela similar à Figura 9.

Figura 9. Amostragem de ícones e estilos
Screenshot of a sampling of icons and styles available out of the box in the framework

Exibições de carrossel e guias

As exibições de carrossel e guias são fáceis de implementar usando os padrões de codificação que você já explorou. A Listagem 8 mostra uma interface em guias e uma exibição de carrossel.

Listagem 8. Desenvolvendo exibições de carrossel e guias
<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.TabPanel({
        fullscreen: true,
        items: [
          {
            title: "Tab 1",
            html: "First tab"  
          },
          {
            title: "Tab 2",
            html: "Second tab"  
          },
          {
            title: "Tab 3",
            html: "Third tab"  
          }
        ]
      });
    }
  });
</script>

<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Carousel({
        fullscreen: true,
        items: [
          {
            html: "First item"  
          },
          {
            html: "Second item"  
          },
          {
            html: "Third item"  
          }
        ]
      });
    }
  });
</script>

As exibições em carrossel e guias são similares quanto ao código e função. O carrossel se move de cartão a cartão através da execução de um gesto deslizante de um lado para o outro, ou clicando em dos ícones circulares na parte inferior. Por padrão, ambos os controles fazem a transição entre cartões usando a animação deslizante.

A Figura 10 mostra a interface de guias.

Figura 10. Interface de guias de amostra
Screenshot of the tab interface defined in Listing 8

A Figura 11 mostra a interface da exibição de carrossel.

Figura 11. Interface de exibição de carrossel de amostra
Screenshot of the sample carousel interface defined in Listing 8

Sobreposições

É possível usar vários controles de sobreposição. Suas opções incluem controles de alerta padrão, confirmação e prompt, assim como controles modais simples.

Mapas

No desenvolvimento da Web remoto, um dos componentes mais populares são os mapas. O Sencha Touch faz com que seja simples incluir um mapa no seu aplicativo usando o componente Ext.Map . A Listagem 9 mostra como incluir um mapa no aplicativo de amostra. Lembre-se de incluir o arquivo JavaScript para a API do Google Maps para que este exemplo funcione.

Listagem 9. Usando mapas
<!DOCTYPE HTML>
<html>
<head>
<title>Touch Test</title>

<!-- sencha touch css -->
<link rel="stylesheet" type="text/css"
         href="sencha-touch/resources/css/sencha-touch-debug.css" />

<!-- Google Maps API -->
<script type="text/javascript"
              src="http://maps.google.com/maps/api/js?sensor=true"></script>

<!-- sencha touch javascript -->
<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>

<!-- application script -->
<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Panel({
        fullscreen: true,
        items: [
          {
            xtype: "map"  
          }
        ]
      });
    }
  });
</script>

</head>

<body>
</body>
</html>

A janela de mapa resultante é mostrada na Figura 12.

Figura 12. Controle de mapa de exemplo
Screenshot of example map window using code from listing 9

Eventos e acesso de dados

O Sencha Touch oferece suporte para vários eventos-chave esperados de um aplicativo remoto, como início/fim de toque, início/fim de rolagem, toque, toque duplo, passagem de dedos e gesto de aperto. O acesso de dados parecerá familiar se já tiver trabalhado com o Ext JS no passado.

A estrutura do Sencha Touch oferece suporte a JSON com preenchimento (JSONP), Yahoo! query language (YQL) e solicitações Ajax. Em conjunto com o pacote de dados do Sencha Touch, eles oferecem um mecanismo flexível para vincular dados aos seus componentes de UI.

Estilo e design

Criar seu próprio tema pode ser uma tarefa difícil. A estrutura Sencha Touch possui recursos-chave que faz com que seja muito mais fácil modificar os estilos e design padrão.

A estrutura usa Syntactically Awesome Stylesheets (Sass), que é uma extensão de CSS3 que, entre outras coisas, permite o uso de variáveis e herança de seletor para dar mais poder ao desenvolvimento de temas. Mudar uma única variável pode causar impacto no tema inteiro—e é mesmo fácil assim.

Criar um novo tema está fora do escopo deste artigo. Recursos possui diversos links para ajudá-lo a começar.

Conclusão

Este artigo ofereceu uma introdução ao Sencha Touch, uma estrutura de aplicativo da Web remoto desenvolvida usando HTML5, CSS3 e JavaScript. Você aprendeu como criar um aplicativo simples do Sencha Touch, além de testá-lo com o emulador de dispositivos. Você também explorou alguns dos elementos de UI.

Este artigo é apenas uma introdução à estrutura do Sencha Touch. Agora que você sabe o básico, cogite se aprofundar nos conceitos usando os Recursos abaixo.

Recursos

Aprender

  • Saibatudo sobre o Sencha: leia documentos de API, confira o blog, explore os fóruns, faça download de demos e muito mais.
  • Leia "Dive into HTML5", de Mark Pilgrim, para fazer uma arrancada no desenvolvimento HTML5.
  • Saiba mais sobre o Android. O Android Dev Guide possui informações de referência e instruções passo a passo para tarefas comuns.
  • A Web development zone do developerWorks é especializada em artigos que cobrem diversas soluções baseada na Web.

Obter produtos e tecnologias

  • Faça o download do Sencha Touch.
  • Faça o download da versão mais recente do navegadorGoogle Chrome .
  • Obtenha o mais recente SDK do Android.
  • Faça download e saiba mais sobre Sass.
  • Avalie os produtos IBM da forma que melhor lhe convier: Efetue o download de uma avaliação de produto, experimente um produto on-line, use um produto em um ambiente de nuvem ou passe algumas horas no SOA Sandbox aprendendo a implementar Arquitetura Orientada a Serviços de modo eficiente.

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que acessar o developerWorks, um perfil será criado para você. Informações do seu perfil (tais como: nome, país / região, e empresa) estarão disponíveis ao público, que poderá acompanhar qualquer conteúdo que você publicar. Seu perfil no developerWorks pode ser atualizado a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Segmentos de mercado, Software livre
ArticleID=648367
ArticleTitle=Desenvolva aplicativos remotos da Web com o Sencha Touch
publish-date=04192011