A Adobe recomenda o uso do Editor de SPA para projetos que exigem renderização do cliente baseada em estrutura de aplicativo de página única (por exemplo, Reagir). Saiba mais.
Crie um filtro de grupo de dispositivos para definir um conjunto de requisitos de capacidade do dispositivo. Crie quantos filtros forem necessários para público alvo dos grupos necessários de recursos do dispositivo.
Projete seus filtros para que você possa usar combinações deles para definir os grupos de recursos. Normalmente, há sobreposição dos recursos de diferentes grupos de dispositivos. Portanto, você pode usar alguns filtros com várias definições de grupos de dispositivos.
Depois de criar um filtro, você pode usá-lo na configuração de grupo.
Um filtro de grupo de dispositivos é um componente OSGi que implementa a interface com.day.cq.wcm.mobile.api.device.DeviceGroupFilter. Quando implantada, a classe de implementação fornece um serviço de filtro que está disponível para configurações de grupos de dispositivos.
A solução descrita neste artigo usa o plug-in Apache Felix Maven SCR para facilitar o desenvolvimento do componente e do serviço. Portanto, a classe Java de exemplo usa as anotações @Component
e @Service
. A classe tem a seguinte estrutura:
package com.adobe.example.myapp;
import java.util.Map;
import com.day.cq.wcm.mobile.api.device.DeviceGroup;
import com.day.cq.wcm.mobile.api.device.DeviceGroupFilter;
import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Service;
@Component(metatype = false)
@Service
public class myDeviceGroupFilter implements DeviceGroupFilter {
public String getDescription() {
return null;
}
public String getTitle() {
return null;
}
public boolean matches(DeviceGroup arg0, String arg1, Map arg2) {
return false;
}
}
É necessário fornecer código para os seguintes métodos:
Os métodos getTitle
e getDescription
retornam o nome e a descrição do filtro, respectivamente. O código a seguir ilustra a implementação mais simples:
public String getDescription() {
return "An example device group filter";
}
public String getTitle() {
return "myFilter";
}
A codificação do texto do nome e da descrição é suficiente para ambientes de criação unidilingues. Considere a externalização das strings para uso multilíngue ou para permitir a alteração de strings sem recompilar o código fonte.
A função matches
retornará true
se os recursos do dispositivo atenderem a todos os critérios de filtragem. Avalie as informações fornecidas nos argumentos do método para determinar se o dispositivo pertence ao grupo. Os valores a seguir são fornecidos como argumentos:
A interface com.day.cq.wcm.mobile.api.devicespecs.DeviceSpecsConstants contém um subconjunto dos nomes dos recursos WURFL™ em campos estáticos. Use essas constantes de campo como chaves ao recuperar valores do Mapa de recursos do dispositivo.
Por exemplo, o exemplo de código a seguir determina se o dispositivo suporta CSS:
boolean cssSupport = true;
cssSupport = NumberUtils.toInt(capabilities.get(DeviceSpecsConstants.DSPEC_XHTML_SUPPORT_LEVEL)) > 1;
O pacote org.apache.commons.lang.math
fornece a classe NumberUtils
.
Verifique se o banco de dados WURFL™ implantado no AEM inclui os recursos que você usa como critérios de filtragem. (Consulte Detecção de Dispositivo.)
O exemplo de implementação DeviceGroupFilter a seguir determina se o tamanho físico do dispositivo atende aos requisitos mínimos. Esse filtro destina-se a adicionar granularidade ao grupo de dispositivos de toque. O tamanho dos botões na interface do usuário do aplicativo deve ser o mesmo, independentemente do tamanho físico da tela. O tamanho de outros itens, como texto, pode variar. O filtro permite a seleção dinâmica de um CSS específico que controla o tamanho dos elementos da interface.
Esse filtro aplica critérios de tamanho aos nomes das propriedades physical_screen_height
e physical_screen_width
WURFL™.
package com.adobe.example.myapp;
import java.util.Map;
import com.day.cq.wcm.mobile.api.device.DeviceGroup;
import com.day.cq.wcm.mobile.api.device.DeviceGroupFilter;
import org.apache.commons.lang.math.NumberUtils;
import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Service;
@Component(metatype = false)
@Service
@SuppressWarnings("unused")
public class ScreenSizeLarge implements DeviceGroupFilter {
private int len=400;
private int wid=200;
public String getDescription() {
return "Requires the physical size of the screen to have minimum dimensions " + len + "x" + wid+".";
}
public String getTitle() {
return "Screen Size Large ("+len + "x" + wid+")";
}
public boolean matches(DeviceGroup deviceGroup, String userAgent,
Map<String, String> deviceCapabilities) {
boolean longEnough=true;
boolean wideEnough=false;
int dimension1=NumberUtils.toInt(deviceCapabilities.get("physical_screen_height"));
int dimension2=NumberUtils.toInt(deviceCapabilities.get("physical_screen_width"));
if(dimension1>dimension2){
longEnough=dimension1>=len;
wideEnough=dimension2>=wid;
}else{
longEnough=dimension2>=len;
wideEnough=dimension1>=wid;
}
return longEnough && wideEnough;
}
}
O valor String retornado pelo método getTitle aparece na lista suspensa das propriedades do grupo de dispositivos.
Os valores String que os métodos getTitle e getDescription retornam são incluídos na parte inferior da página de resumo do grupo de dispositivos.
O seguinte código POM é útil se você usar o Maven para criar seus aplicativos. O POM faz referência a vários plug-ins e dependências necessários.
Plug-ins:
Dependências:
cq-wcm-mobile-api-5.5.2.jar
: Fornece as interfaces DeviceGroup e DeviceGroupFilter.
org.apache.felix.scr.annotations.jar
: Fornece as anotações Componente e Serviço.
As interfaces DeviceGroup e DeviceGroupFilter estão incluídas no pacote de API do Day Communique 5 WCM Mobile. As anotações do Felix estão incluídas no pacote Apache Felix Declarative Services. Você pode obter esse arquivo JAR do repositório Adobe público.
No momento da criação, 5.5.2 é a versão do pacote de API do WCM Mobile que está na versão mais recente do AEM. Use o Console Web do Adobe (http://localhost:4502/system/console/bundles) para garantir que esta seja a versão do pacote implantada no seu ambiente.
POM: (seu POM usará uma groupId e uma versão diferentes.)
<project xmlns="https://maven.apache.org/POM/4.0.0"
xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.adobe.example.myapp</groupId>
<artifactId>devicefilter</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>my app device filter</name>
<url>https://dev.day.com/docs/en/cq/current.html</url>
<packaging>bundle</packaging>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>1.5</source>
<target>1.5</target>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.felix</groupId>
<artifactId>maven-scr-plugin</artifactId>
<executions>
<execution>
<id>generate-scr-scrdescriptor</id>
<goals>
<goal>scr</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.apache.felix</groupId>
<artifactId>maven-bundle-plugin</artifactId>
<version>1.4.3</version>
<extensions>true</extensions>
<configuration>
<instructions>
<Export-Package>com.adobe.example.myapp.*;version=${project.version}</Export-Package>
</instructions>
</configuration>
</plugin>
</plugins>
</build>
<dependencies>
<dependency>
<groupId>com.day.cq.wcm</groupId>
<artifactId>cq-wcm-mobile-api</artifactId>
<version>5.5.2</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.apache.felix</groupId>
<artifactId>org.apache.felix.scr.annotations</artifactId>
<version>1.6.0</version>
<scope>compile</scope>
</dependency>
</dependencies>
</project>
Adicione o perfil que a seção Obtenção do Plug-in Content Package Maven fornece ao seu arquivo de configurações maven para usar o repositório Adobe público.