Etapa 16: Gerenciamento de Ativos

Esta etapa descreve e explica como gerenciar os ativos usados por um componente.

Os ativos incluem os componentes comuns e personalizados que o Oracle Content Management deve conhecer para gerenciar o ciclo de vida dos ativos.

Pasta de conteúdo do Oracle Content Management

Cada site que você cria no Oracle Content Management vem com sua própria pasta content. Essa é uma pasta oculta que você normalmente não verá. Quando o site é publicado, todos os arquivos da pasta content também são publicados no sistema de arquivos.

Por exemplo, quando você seleciona uma imagem usando o componente Imagem, o Oracle Content Management faz uma cópia da imagem selecionada e a coloca na pasta de conteúdo. Seu URL sempre aponta para essa versão copiada da imagem para que, se você excluir a imagem original, seu site não seja interrompido. Isso também se aplica aos outros componentes fornecidos pelo Oracle Content Management: Galeria, Grade de Galeria, Documento, Barra Social, Download de Arquivo, bem como imagens de plano de fundo para slots e componentGroups.

Para que um componente personalizado faça parte desse ciclo de vida do ativo, ele deve informar ao Oracle Content Management sobre qualquer ativo que ele deseja que o serviço gerencie em seu nome. Como isso envolve fazer uma cópia do ativo, o componente personalizado também deve usar as APIs do Oracle Content Management para selecionar o ativo para que saibamos como gerenciá-lo.

Gerenciar URLs

O URL para um ativo é alterado com base em vários critérios.

  • O URL do runtime para um componente é diferente do URL do Site Builder para o componente

  • Se você copiar uma página, o Oracle Content Management também fará uma cópia de todos os ativos referenciados na pasta de conteúdo para que você nunca tenha dois componentes apontando para o mesmo ativo na pasta de conteúdo

  • Soltar um componentGroup na página faz novas cópias de quaisquer ativos referenciados por um componente no componentGroup

Além disso, embora um URL relativo possa ser bom para um componente local, os componentes remotos exigem o URL totalmente qualificado para qualquer ativo que você queira que o Oracle Content Management gerencie em seu nome; assim, eles podem renderizar o conteúdo do frame embutido deles com o URL completo.

Como você não pode confiar que o URL permanecerá estático, basta manter as referências ao ID para o ativo em seu código e recuperar o URL do ativo quando você quiser renderizá-lo.

Gerencie Ativos

Estas APIs de SDK de Sites estão disponíveis para gerenciar ativos.

SitesSDK.getProperty('componentAssets', callback);

  • Isso obtém o array dos ativos atuais

  • Cada entrada de ativo consiste em:

    • id: ID exclusivo para o ativo.

    • title: Oracle Content Management metadados de título.

    • description: Oracle Content Management metadados de descrição.

    • fileName: Nome original do arquivo selecionado. Útil para exibição no painel Definições do seu componente personalizado para que os usuários saibam qual arquivo eles selecionaram. Esse não é o nome do arquivo copiado para a pasta de conteúdo.

    • source: URL ativado por macro para o ativo. Esse valor mudará com o tempo e não deverá ser referenciado por seu componente, mas deve ser salvo como parte do ativo.

    • url: URL totalmente qualificado para o ativo com base no contexto no qual getPropert() foi chamado.

SitesSDK.setProperty('componentAssets', [assets]);

  • Chame essa opção para salvar todos os ativos que você deseja que o Oracle Content Management gerencie em seu nome.

  • Se você não chamar isso, nenhum ativo será salvo.

  • Qualquer ativo que não estiver neste array será excluído quando o site for publicado.

  • O parâmetro assets é um array de ativos no mesmo formato retornado por getProperty e também é retornado por filePicker.

    Nota:

    Nenhum valor url é armazenado. Esse valor é criado dinamicamente quando você solicita os ativos.

SitesSDK.filePicker(options, callback);

  • Uma API para exibir o seletor de arquivo para selecionar a lista de ativos.

  • Ela chama o callback em caso de seleção bem-sucedida de ativos, transmitindo o array dos ativos selecionados.

  • Nada é salvo neste ponto e cabe ao componente chamar setProperty('componentAssets', [assets]); para salvar os itens dessa seleção combinada com qualquer outro ativo a ser salvo.

Exemplo de Seleção de Ativo

Esta seção mostra como selecionar um ativo, armazenar seu ID e extrair novamente os valores reais dos ativos armazenados.

  1. Edite o arquivo settings.html.

  2. Altere o objeto modelo para incluir um Image selection.

    <div>
    <!-- Image selection -->
    <label id="imageLabel" for="imageAsset" class="settings-heading" data-bind="text: 'Image'"></label>
    <input id="imageAsset" data-bind="value: imageName" readonly class="settings-text-box">
    <button id="imageSelect" type="button" class="selectbutton" data-bind="click: showFilePicker">Select Image</button>
</div>

  3. Altere o viewModel para adicionar um elemento observável para armazenar o ID do ativo selecionado.

    self.imageID = ko.observable();

  4. Altere o viewModel para gerenciar a seleção do ativo, exibindo o seletor de arquivo e o nome do ativo selecionado.

    //
// handle component assets
//
self.assets = []
 
// bring up a file picker to select the assets
self.showFilePicker = function () {
    // select an image
    SitesSDK.filePicker({
        'multiSelect': false,
        'supportedFileExtensions': ['jpg', 'png']
    }, function (result) {
        if (result.length === 1) {
            // update the array of assets
            self.assets = result;
 
            // update the image in customSettingsData
            self.imageID(result[0].id);
        }
    });
};
 
// update the display name based on the assets
self.imageName = ko.computed(function () {
    var imageName = '',
        imageID = self.imageID();
    for (var i = 0; i < self.assets.length; i++) {
        if (self.assets[i].id === imageID) {
            imageName = self.assets[i].fileName;
            break;
        }
    }
 
    return imageName
}, self);

  5. Atualize o viewModel para primeiro recuperar os ativos antes de obter o customSettingsData. Esse código também fará com que o self.imageName seja chamado quando o elemento observável self.ImageID() for alterado.

    SitesSDK.getProperty('componentAssets', function (assets) {
    self.assets = assets;
    SitesSDK.getProperty('customSettingsData', function (data) {
        //update observable
        self.imageWidth(data.imageWidth);
        self.imageID(data.imageID);
        self.titleText(data.titleText);
        self.userText(data.userText);
 
        // note that viewModel is initialized and can start saving data
        self.initialized(true);
        self.saveData = true;
    });
});

  6. Por último, atualize a função save para salvar o imageID e certifique-se de atualizar o componentAssets com a lista de ativos referenciados.

    self.save = ko.computed(function () {
    var saveconfig = {
        'imageWidth': isNaN(self.imageWidth()) ? self.imageWidth() : self.imageWidth() + 'px',
        'imageID': self.imageID(),
        'titleText': self.titleText(),
        'userText': self.userText()
    };
 
    // store the selected asset and update custom settings
    if (self.saveData) {
        SitesSDK.setProperty('componentAssets', self.assets);
        SitesSDK.setProperty('customSettingsData', saveconfig);
    }
}, self);

Verifique os Resultados de Selecionar Ativo

  1. Atualize sua página no site para que o Site Builder possa selecionar as alterações no componente.

  2. Coloque a página no modo de Edição.

  3. Arraste e solte o componente na página.

  4. Abra o painel Definições.

  5. Clique no botão Selecionar imagem.

  6. Procure (ou faça upload) e selecione uma imagem.

    Observe que o nome da imagem é armazenado mostrando a imagem selecionada.

  7. Feche o painel Definições.

  8. Abra o painel Definições novamente.

    Observe que o nome da imagem é novamente refletido.

Exemplo de Renderizar Ativo

Esta seção mostra como recuperar os ativos e renderizá-los em seu componente e também como atualizar o componente dinamicamente sempre que valores forem alterados no painel de definições.

Nota:

Embora isso esteja mostrando um exemplo de componente local que está em um iframe na página, um código semelhante funcionará para componentes renderizados em linha na página.

  1. Edite o arquivo render.html.

  2. Atualize o modelo para incluir o ativo.

    <!-- ko if: imageURL -->
<div style="flex-shrink:0;">
    <img data-bind="attr: {style: imageStyle, id: 'imageId', src: imageURL, alt: '', title: ''}, click: imageClicked" />
</div>
<!-- /ko -->

  3. No viewModel, crie dois elementos observáveis para obter o imageID do customSetttingsData e armazenar o imageURL recuperado da lista armazenada de ativos.

    self.imageID = ko.observable();
self.imageURL = ko.observable();

  4. Atualize o viewModel para que sempre que o imageID for alterado, ele obtenha o URL do ativo de imagem correspondente.

    self.imageID.subscribe(function (imageID) {
    // whenever the image changes get the updated referenced asset
    SitesSDK.getProperty('componentAssets', function (assets) {
        for (var i = 0; i < assets.length; i++) {
            if (assets[i].id === imageID) {
                self.imageURL(assets[i].url);
                break;
            }
        }
    });
});

  5. Atualize o viewModel para recuperar o ID do customSettingsData.

Verifique os Resultados de Renderizar Ativo

  1. Atualize sua página no site para que o Site Builder possa selecionar as alterações no componente.

  2. Coloque a página no modo de Edição.

  3. Arraste e solte o componente na página.

  4. Abra o painel Definições.

  5. Clique no botão Selecionar imagem.

  6. Procure (ou faça upload) e selecione uma imagem.

    Observe que o nome da imagem é armazenado mostrando a imagem selecionada.

  7. Feche o painel Definições.

    Neste ponto, você deverá ver sua imagem selecionada renderizada no componente.

Continue em Revisão do Tutorial.