Passo 16: Gestão de Ativos

Pasta de Conteúdo do Oracle Content Management

Cada site criado no Oracle Content Management vem com a sua própria pasta content. Esta é uma pasta oculta que não verá normalmente. Quando o site é publicado, todos os ficheiros na pasta content são também publicados no sistema de ficheiros.

Por exemplo, quando selecionar uma imagem utilizando o componente Imagem, o Oracle Content Management cria uma cópia da imagem selecionada e coloca-a na pasta de conteúdo. O seu URL aponta sempre para esta versão copiada da imagem para que, se apagar a imagem original, o seu site não se ficará quebrado. Isto também se aplica aos outros componentes fornecidos pelo Oracle Content Management: Galeria, Grelha da Galeria, Documento, Barra Social, Descarregamento de Ficheiros, bem como imagens de fundo para slots e componentGroups.

Para que um componente customizado faça parte deste ciclo de vida de ativos, o componente customizado deve informar o Oracle Content Management sobre quaisquer ativos que pretenda que o serviço faça a gestão em seu nome. Uma vez que isto envolve a criação de uma cópia do ativo, o componente customizado também deve utilizar as APIs do Oracle Content Management para selecionar o ativo de modo a ficarmos a saber como deve ser feita a respetiva gestão.

Gerir URLs

O URL para um ativo é alterado com base num número de critérios.

• O URL de runtime para um componente é diferente do URL do Criador de Sites para o componente

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

• Largar um componentGroup na página cria novas cópias para quaisquer ativos referenciados por um componente no componentGroup

Além disso, enquanto um URL relativo poderá ser adequado para um componente local, os componentes remotos requerem o URL totalmente qualificado para qualquer ativo que pretenda que o Oracle Content Management faça a gestão em seu nome de modo a poderem renderizar o respetivo conteúdo da moldura inline com o URL completo.

Visto que não pode confiar no URL sempre estático, só deve manter referências à ID do ativo no seu código e obter o URL do ativo quando pretender apresentar o ativo.

Gerir Ativos

Estas APIs do Sites SDK estão disponíveis para a gestão de ativos.

SitesSDK.getProperty('componentAssets', callback);

• Desta forma, é obtida a matriz dos ativos atuais

• Cada entrada de ativo consiste em:

  • id: ID exclusiva para o ativo.

  • title: Metadados do título do Oracle Content Management.

  • description: Metadados da descrição do Oracle Content Management.

  • fileName: Nome original do ficheiro selecionado. Útil para apresentar o painel Definições para o seu componente customizado para que os utilizadores saibam qual o ficheiro selecionado. Este não é o nome do ficheiro copiado para a pasta de conteúdo.

  • source: URL ativado por macros para o ativo. Este valor irá sendo alterado ao longo do tempo e não deve ser referenciado pelo seu componente, mas deve ser gravado como parte do ativo.

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

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

• Deve fazer esta chamada para gravar todos os ativos que pretende que o Oracle Content Management faça a gestão em seu nome.

• Se não fizer esta chamada, não será gravado nenhum ativo.

• Quaisquer ativos que não estejam nesta matriz serão apagados quando o site for publicado.

• O parâmetro assets é uma matriz de ativos no mesmo formato quando devolvido por getProperty e é também devolvido por filePicker.

  Nota:

  Não é armazenado nenhum valor url. Esse valor é criado dinamicamente quando os ativos são pedidos.

SitesSDK.filePicker(options, callback);

• Uma API para apresentar o seletor de ficheiros para selecionar a lista de ativos.

• É efetuado o callback na seleção bem-sucedida de ativos que são transmitidos pela matriz de ativos selecionados.

• Nada é gravado até aqui, sendo o componente a chamar setProperty('componentAssets', [assets]); para gravar itens desta seleção combinada com quaisquer outros ativos a gravar.

Exemplo de Ativo Selecionado

Esta secção mostra como selecionar um ativo, armazenar a respetiva ID e voltar a extrair os valores reais dos ativos armazenados.

1. Edite o ficheiro settings.html.

2. Altere o objeto de modelo para incluir 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 acrescentar um elemento observável para armazenar a ID do ativo selecionado.

   self.imageID = ko.observable();

4. Altere o viewModel para gerir a seleção do ativo apresentando o seletor de ficheiros 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 obter primeiro os ativos antes de obter os customSettingsData. Este código também irá fazer com que o self.imageName seja invocado 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 fim, atualize a função save para gravar a imageID e certifique-se de que atualiza os componentAssets com a sua 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);

Verificar os Resultados para o Ativo Selecionado

1. Renove a sua página no site para que o Criador de Sites possa escolher alterações para o componente.

2. Apresente a página no modo de edição.

3. Arraste e largue o seu componente na página.

4. Abra o painel Definições.

5. Clique no botão Selecionar imagem.

6. Procure (ou carregue) e selecione uma imagem.

   Note que o nome da imagem é armazenado a mostrar a imagem selecionada.

7. Feche o painel Definições.

8. Abra novamente o painel Definições.

   Note que o nome da imagem é novamente refletido.

Exemplo de Ativo Apresentado

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

1. Edite o ficheiro render.html.

2. Atualize o modelo para incluir o seu 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 a imageID dos customSetttingsData e armazenar o imageURL obtido da lista armazenada de ativos.

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

4. Atualize o viewModel para que, sempre que a imageID for alterada, obtenha o URL de 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 obter a ID dos customSettingsData.

Verificar os Resultados para o Ativo Apresentado

1. Renove a sua página no site para que o Criador de Sites possa escolher alterações para o componente.

2. Apresente a página no modo de edição.

3. Arraste e largue o seu componente na página.

4. Abra o painel Definições.

5. Clique no botão Selecionar imagem.

6. Procure (ou carregue) e selecione uma imagem.

   Note que o nome da imagem é armazenado a mostrar a imagem selecionada.

7. Feche o painel Definições.

   Neste ponto, deverá ver a sua imagem selecionada apresentada no componente.

Avance para Revisão do Tutorial.