Show Menu
TÓPICOS×

Aplicativos de página única

A Adobe recomenda usar o Editor SPA para projetos que exigem renderização do lado do cliente baseada em estrutura de aplicativo de página única (por exemplo, Reagir). Saiba mais .
Os aplicativos de página única (SPA) atingiram massa crítica, amplamente considerada o padrão mais eficaz para criar experiências ininterruptas com a tecnologia da Web. Ao seguir um padrão de SPA, é possível criar um aplicativo que tenha um desempenho idêntico a um aplicativo desktop ou móvel, mas alcance várias plataformas de dispositivos e fatores de forma devido à sua fundação em padrões da Web abertos.
De modo geral, as SPAs parecem mais eficientes do que os sites baseados em páginas tradicionais, pois normalmente carregam uma página HTML completa apenas uma vez (incluindo CSS, JS e conteúdo de fonte de suporte) e carregam somente o que é necessário sempre que uma mudança de estado ocorre no aplicativo. O que é necessário para essa mudança de estado pode variar com base no conjunto de tecnologias escolhidas, mas geralmente inclui um único fragmento HTML para substituir a 'exibição' existente, e a execução de um bloco de código JS para conectar a nova exibição e executar qualquer renderização de modelo do lado do cliente que possa ser necessária. A velocidade dessa alteração de estado pode ser melhorada ainda mais ao suportar mecanismos de cache de modelos, ou até mesmo acesso offline ao conteúdo de modelo se o Adobe PhoneGap for usado.
O AEM 6.1 é compatível com a criação e o gerenciamento de SPAs por meio de aplicativos AEM. Este artigo fornecerá uma introdução aos conceitos por trás do SPA e como eles aproveitam o AngularJS para trazer sua marca à App Store e ao Google Play.

SPA em aplicativos AEM

A estrutura de aplicativo de página única em aplicativos AEM permite o alto desempenho de um aplicativo AngularJS, ao mesmo tempo que permite que autores (ou outras pessoas não técnicas) criem e gerenciem o conteúdo do aplicativo por meio do ambiente otimizado para toque, do editor de arrastar e soltar, tradicionalmente reservado para o gerenciamento de sites. Já tem um site criado com o AEM? Você descobrirá que reutilizar seu conteúdo, componentes, fluxos de trabalho, ativos e permissões é fácil nos aplicativos AEM.

Módulo de aplicativo AngularJS

Os aplicativos AEM lidam com grande parte da configuração AngularJS para você, incluindo a criação do módulo de nível superior do aplicativo. Por padrão, esse módulo é chamado de 'AEMAngularApp' e o script responsável pela sua geração pode ser encontrado (e sobreposto) em /libs/mobileapps/components/angular/ng-page/angular-app-module.js.jsp.
Parte da inicialização do aplicativo envolve especificar em quais módulos AngularJS o aplicativo depende. A lista de módulos usados pelo seu aplicativo é especificada por um script localizado em /libs/mobileapps/components/angular/ng-page/angular-module-list.js.jsp, e pode ser sobreposta pelo componente de página do seu aplicativo para receber quaisquer módulos AngularJS adicionais necessários para o seu aplicativo. Por exemplo, compare o script acima com a implementação do Geometrixx (localizado em /apps/geometrixx-outdoors-app/components/angular/ng-geometrixx-page/angular-module-list.js.jsp).
Para suportar a navegação entre os estados distintos no aplicativo, o script angular-app-module repete por todas as páginas descendentes da página do aplicativo de nível superior para gerar um conjunto de "rotas" e configura cada caminho no serviço $routeProvider da Angular. Para ver um exemplo de como isso ocorre na prática, consulte o script angular-app-module gerado pela amostra de aplicativo Geometrixx Outdoors: (link requer uma instância local) http://localhost:4502/content/phonegap/conference-app/en/home.angular-app-module.js
Ao acessar o AEMAngularApp gerado, você encontrará uma série de rotas especificadas da seguinte maneira:
$routeProvider
.when('/content/phonegap/geometrixx-outdoors/en/home/products/:id', {
    templateUrl: 'home/products.template.html',
    controller: 'contentphonegapgeometrixxoutdoorsenhomeproducts'
})

A amostra acima ilustra um exemplo de envio de um parâmetro como parte do caminho. Neste exemplo, estamos indicando que quando um caminho que atende ao padrão especificado (/content/phonegap/geometrixx-outdoors/en/home/products/:id) é solicitado, ele deve ser manipulado pelo modelo home/products.template.html e usar o controlador 'contentphonegapgeometrixoutorsenhomeproducts'.
O modelo a ser carregado quando essa rota for solicitada é especificado pela propriedade templateUrl. Este modelo conterá o HTML de componentes AEM que foram incluídos na página, bem como quaisquer diretivas AngularJS necessárias para a conexão do lado do cliente do aplicativo. Para ver um exemplo de uma diretiva AngularJS em um componente Geometrixx, veja a linha 45 do swipe-carousel's template.jsp (/apps/geometrixx-outdoors-app/components/swipe-carousel/template.jsp).

Controladores de página

Nas próprias palavras de Angular, "um Controlador é uma função de construtor JavaScript usada para aumentar o Escopo Angular". ( fonte ) Cada página em um aplicativo AEM é automaticamente conectada a um controlador que pode ser aumentado por qualquer controlador que especifique um frameworkType de angular . Examine o componente ng-text como um exemplo (/libs/mobileapps/components/angle/ng-text), incluindo o nó cq:template, que garante que cada vez que esse componente for adicionado a uma página ela inclua essa propriedade importante.
Para obter um exemplo de controlador mais complexo, abra o script ng-template-page controller.jsp (localizado em /apps/geometrixx-outdoors-app/components/angle/ng-template-page). De particular interesse é o código javascript gerado quando executado, que renderiza da seguinte forma:
// Controller for page 'products'
.controller('contentphonegapgeometrixxoutdoorsenhomeproducts', ['$scope', '$http', '$routeParams',
    function($scope, $http, $routeParams) {
        var sku = $routeParams.id;
        var productPath = '/' + sku.substring(0, 2) + '/' + sku.substring(0, 4) + '/' + sku;
        var data = $http.get('home/products' + productPath + '.angular.json' + cacheKiller);

        /* ng-product component controller (path: content-par/ng-product) */
        data.then(function(response) {
            $scope.contentparngproduct = response.data["content-par/ng-product"].items;
        });

        /* ng-image component controller (path: content-par/ng-product/ng-image) */
        data.then(function(response) {
            $scope.contentparngproductngimage = response.data["content-par/ng-product/ng-image"].items;
        });
    }
])

No exemplo acima, você observará que estamos pegando um parâmetro do $routeParams serviço e, em seguida, o colocando na estrutura de diretório em que nossos dados JSON estão armazenados. Ao lidar com o sku id dessa forma, nós somos capazes de fornecer um único modelo de produto que possa renderizar os dados do produto para milhares de produtos potencialmente distintos. Este é um modelo muito mais escalonável que requer uma rota individual para cada item em um (potencialmente) grande banco de dados de produtos.
Há também dois componentes em funcionamento aqui: ng-product aumenta o escopo com os dados que extrai da $http chamada acima. Também há uma ng-image nesta página que, por sua vez, também aumenta o escopo com o valor que recupera da resposta. Em razão do $http serviço do Angular, cada componente aguardará pacientemente até que a solicitação seja concluída e a promessa criada seja cumprida.

Próximas etapas

Depois de saber mais sobre os aplicativos de página única, consulte Desenvolvimento de aplicativos com CLI PhoneGap.