Os cards permitem abrir em seu app recursos de outras aplicações, normalmente o card fornece uma capacidade de executar tarefas específicas, por exemplo, o acesso a câmera ou acesso a agenda para selecionar um contato, tudo isso de forma bem simples uma tela sobrepõe o app, uma ação específica é executada em seguida o card fecha assim voltando para aplicação original.
Um aplicativo pode requisitar um card por vez, no entanto um card pode requisitar outro card, mas nesse caso o aconselhável é usar esse recurso com moderação para sua aplicação não ficar confusa. Apesar de parecer parte de aplicação ele é responsável por manter suas ações a aplicação não interfere no card durante o seu funcionamento.
Tipos de Cards
Existem três tipos de Cards: compositores para criação e edição de conteúdo, pickers para escolha de conteúdo e os visualizadores de conteúdo.
O uso de Cards não é restrito para aplicações nativas, também é possível fazer o uso desse recurso com aplicações em WebWorks. Neste tutorial vou listar alguns exemplos com uso de cards. Inicialmente precisamos criar nosso arquivo config.xml, para habilitar o uso de cards vamos adicionar a seguinte linha em nosso config:
<feature id="blackberry.invoke.card" />
Essa API não requer um elemento
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
version="1.0.0"
id="callCards">
<name>Call Cards</name>
<content src="local:///index.html" />
<author>Fellyph Cintra</author>
<description>Tutorial para a chamada de cards.</description>
<feature id="blackberry.invoke.card" />
<rim:permissions>
<rim:permit>access_shared</rim:permit>
</rim:permissions>
</widget>No código abaixo montei uma chamada para o card de email, todas as funções do exemplo já estão comentadas
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>Tutorial Cards</title>
<script src="local:///chrome/webworks.js" type="text/javascript"></script>
<script>
// configurando o objeto para ser repassado ao email. A chamada do card de email é possível configurar o assunto, o corpo de email, para quem vai o email e quem será copiado no email.
var detailsEmail = {
subject: "Assunto do email",
body: "Corpo do email",
to: ["fellyph@gmail.com"],
cc: ["fellyph@hotmail.com"]
}
// adicionamos um listener para quando o webworks estiver pronto ele inicialize a nossa aplicação.
document.addEventListener("webworksready", initApp);
function initApp() {
// quando o app for inicializado ele cria um botão que invoca o card de email.
var buttonDinamic = document.createElement('button');
buttonDinamic.onclick = enviaEmail;
buttonDinamic.innerHTML = ["Clique aqui para enviar um email"];
document.body.appendChild(buttonDinamic);
}
function enviaEmail(){
//invocando o email composer, como o nome sugere criar um email através de cards
blackberry.invoke.card.invokeEmailComposer(detailsEmail,
//função dispara quando ocorreu tudo bem com a utilização do card
function (done) {
alert("done : " + done);
},
//função disparada caso a ação seja cancelada
function (cancel) {
alert("cancel : " + cancel);
},
//função disparada caso ocorra um erro com o card
function (invokeError) {
alert("error : " + invokeError);
});
}
</script>
</head>
<body>
</body>
</html>Quando o usuário clicar no botão ele irá chamar o card e o resultado será o seguinte:
Esse exemplo pode ser útil para uma funcionalidade, por exemplo, uma “fale conosco” onde o usuário do seu app envia um email com dúvidas e sugestões sobre sua aplicação.
Lembrando que os cards são recurso nativos do OS não conseguimos simular esse recurso no Ripple
Para conferir os arquivos deste exemplo você pode acessar o github: