Como receber HTML (HTML)
[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]
Conteúdo HTML pode consistir em uma variedade de conteúdo, incluindo texto, imagens e outras informações. Segue abaixo como o seu aplicativo pode receber conteúdo HTML que um usuário queira compartilhar.
Ao adicionar essa funcionalidade ao seu aplicativo, considere também aceitar conteúdo em formato textual. É fácil converter texto em HTML, de maneira que adicionar suporte para esse formato pode lhe ajudar a garantir a disponibilidade mais frequente do seu aplicativo para usuários. Para saber mais, veja Como receber texto.
O que você precisa saber
Tecnologias
Pré-requisitos
- Você deve estar familiarizado com o Visual Studio e com os modelos a ele associados.
- Você deve ter familiaridade com JavaScript.
Instruções
Etapa 1: Suporte o contrato de Compartilhamento.
Antes que seu aplicativo possa receber conteúdo compartilhado, você deve declarar que ele suporta o contrato de Compartilhamento. Esse contrato permite, essencialmente, que o sistema saiba que o seu aplicativo está disponível para receber conteúdo. Se estiver usando um modelo do Microsoft Visual Studio para criar seu aplicativo, aqui está como ter suporte para o contrato de Compartilhamento de Destino:
- Abra o arquivo de manifesto. Ele deve ser nomeado como algo semelhante a package.appxmanifest.
- Abra a guia Declarações.
- Escolha Compartilhar Destino na lista Declarações Disponíveis.
Etapa 2: Especifique que o seu aplicativo suporta html.
Para especificar que você suporta HTML como um formato de dados:
- Abra arquivo de manifesto.
- Na seção Formatos de dados, clique em Adicionar novo.
- Digite html.
Observação Você pode especificar um ponto de entrada diferente quando seu aplicativo for ativado para o contrato de Compartilhamento de Destino. Para fazer isso, modifique a entrada da página Iniciarna seção de configurações do Aplicativoda declaração do Destino de Compartilhamento no manifesto do pacote. É altamente recomendável que você também use um arquivo JavaScript separado que cuide da ativação desta página. Por exemplo, dê uma olhada em Exemplo de aplicativo de compartilhamento de destino de conteúdo.
Etapa 3: Adicione um manipulador de eventos para detectar quando o seu aplicativo é ativado.
Quando um usuário seleciona o seu aplicativo para compartilhar conteúdo, o sistema ativa o aplicativo. Como existem muitas maneiras disso acontecer, você precisa adicionar o código a seu manipulador de eventos activated que detecta o motivo pelo qual ocorreu a ativação. Você pode fazer isso verificando o valor da propriedade kind.
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
// The application has been launched. Initialize as appropriate.
} else if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {
...
}
};
Se você usar uma página de início dedicada para o contrato de Compartilhamento de Destino, você pode ignorar a verificação da propriedade kind
Etapa 4: Obtenha o objeto ShareOperation.
O objeto ShareOperation contém todos os dados necessários para que o seu aplicativo obtenha o conteúdo que o seu usuário quiser compartilhar.
shareOperation = args.detail.shareOperation;
Etapa 5: Retorne do manipulador de eventos ativados rapidamente.
O manipulador de eventos activated deve retornar rapidamente. Coloque na fila um evento assíncrono a partir do manipulador de eventos activated dessa forma, o processamento de compartilhamento dedados ocorre depois que o evento ativado retorna.
WinJS.Application.addEventListener("shareready", shareReady, false);
WinJS.Application.queueEvent({ type: "shareready" });
As etapas remanescentes implementam a função shareReady.
Etapa 6: Verifique se DataPackageView contém HTML.
O objeto ShareOperation contém um objeto DataPackageView. Esse objeto é, em essência, uma versão apenas leitura do objeto DataPackage que o aplicativo de origem usou para criar os dados. Use esse objeto para verificar se o conteúdo compartilhado está no formato HTML.
if (shareOperation.data.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {
// Code to get HTML goes here.
}
Verificar se o DataPackage contém o formato de dados em que você está interessado é uma prática recomendada, mesmo se o seu aplicativo aceitar somente um formato. Isso facilita o suporte futuro a outros tipos de formatos de dados e formatos de arquivos.
Etapa 7: Processe o HTML.
Para obter o HTML, chame o método getHtmlFormatAsync. Este método retorna o conteúdo em HTML na especificação do formato HTML. Você pode usar o DataTransfer.HtmlFormatHelper.getStaticFragment para extrair o fragmento HTML do formato HTML. O fragmento resultante também é limpo para ter qualquer conteúdo dinâmico, como marcas de script, removido e é seguro renderizar em seu aplicativo
shareOperation.data.getHtmlFormatAsync().then(function (htmlFormat) {
var htmlFragment = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.getStaticFragment(htmlFormat);
// In this example, we only display the HTML. To do this, you need
// a <div> element with an id of "output" in your HTML page.
// In your app, replace this with whatever is appropriate for your scenario.
document.getElementById("output").innerHTML = htmlFragment;
});
Evidentemente, o que você faz com o HTML depende do seu aplicativo.
Etapa 8: Resolve quaisquer referencias de imagem local para o HTML.
O aplicativo de origem de compartilhamento pode incluir imagens no HTML que são localizadas em seu contexto de armazenamento local (por exemplo, ms-appx, ms-appdata etc.). Neste caso, o aplicativo de origem deve ter preenchido o mapa do recurso com referencias adequadas para habilitar o compartilhamento de destino para acessar esses recursos.
Para resolver as imagens locais a partir do aplicativo de origem, use a propriedade resourceMap para consultar cada referencia de imagem e obter o RandomAccessStreamReference correspondente. O exemplo a seguir cria o objeto URI (Uniform Resource Identifier) para renderizar as imagens no HTML. Em seu aplicativo, substitua este código por quaisquer modificações adequadas para seu cenário.
var images = document.getElementById("output").getElementsByTagName("img");
if (images.length > 0) {
shareOperation.data.getResourceMapAsync().done(function (resourceMap) {
if (resourceMap.size > 0) {
for (var i = 0, len = images.length; i < len; i++) {
var streamReference = resourceMap[images[i].getAttribute("src")];
if (streamReference) {
// Call a helper function to map the image element's src to a
// corresponding blob URL generated from the streamReference.
setResourceMapURL(streamReference, images[i]);
}
}
}
});
}
Etapa 9: Chame reportCompleted.
Depois que seu aplicativo concluir o compartilhamento do conteúdo, chame reportCompleted. Depois que você chamar este método, o sistema ignora seu aplicativo.
shareOperation.reportCompleted();
Comentários
Dê uma olhada em nosso exemplo de código Exemplo de aplicativo de compartilhamento de destino de conteúdo para ver a experiência ponta a ponta inteira de um aplicativo que recebe uma imagem como parte do compartilhamento.
Exemplo completo
var shareOperation = null;
function setResourceMapURL(streamReference, imageElement) {
if (streamReference) {
streamReference.openReadAsync().done(function (imageStream) {
if (imageStream) {
var url = URL.createObjectURL(imageStream, { oneTimeOnly: true });
imageElement.src = url;
}
}, function (e) {
imageElement.alt = "Failed to load";
});
}
}
function shareReady(args) {
if (shareOperation.data.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {
shareOperation.data.getHtmlFormatAsync().then(function (htmlFormat) {
var htmlFragment = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.getStaticFragment(htmlFormat);
// In this example, we only display the HTML. To do this, you need
// a <div> element with an id of "output" in your HTML page.
// In your app, replace this with whatever is appropriate for your scenario.
document.getElementById("output").innerHTML = htmlFragment;
// Now we loop through any images and use the resourceMap to map each
// image element's src.
var images = document.getElementById("output").getElementsByTagName("img");
if (images.length > 0) {
shareOperation.data.getResourceMapAsync().done(function (resourceMap) {
if (resourceMap.size > 0) {
for (var i = 0, len = images.length; i < len; i++) {
var streamReference = resourceMap[images[i].getAttribute("src")];
if (streamReference) {
// Call a helper function to map the image element's
// src to a corresponding blob URL generated from the
// streamReference.
setResourceMapURL(streamReference, images[i]);
}
}
}
});
}
});
}
}
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
// The application has been launched.
args.setPromise(WinJS.UI.processAll());
} else if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {
// This application has been activated for the Share contract
args.setPromise(WinJS.UI.processAll());
// We receive the ShareOperation object as part of the eventArgs.
shareOperation = args.detail.shareOperation;
// We queue an asychronous event so that working with the ShareOperation
// object does not block or delay the return of the activation handler.
WinJS.Application.addEventListener("shareready", shareReady, false);
WinJS.Application.queueEvent({ type: "shareready" });
}
};
Tópicos relacionados
Exemplo de aplicativo de compartilhamento de destino de conteúdo
Compartilhando e trocando dados
Início rápido: recebendo conteúdo compartilhado
Windows.ApplicationModel.DataTransfer