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.

picker_previewer_composer

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 para liberar o seu uso. Abaixo veja como ficou o config.xml:

<?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:
IMG_00000066

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:

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *