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: