Play That Funky Music, Content Server!

Quem disse que um repositório de conteúdo tem que lidar apenas com documentos chatos e imagens escaneadas? Neste post vamos colocar um pouco de agito no nosso Content Server, criando um componente customizado para tocar arquivos MP3.

Neste tutorial, vamos ver como uma página padrão do Content Server pode ser modificada para oferecer novas funcionalidades. Neste caso, queremos que arquivos .mp3 carregados pelos usuários possam ser tocados diretamente da tela de informações do documento, sem a necessidade de download. Também iremos ver como usar o estilo CSS do Content Server para manter o padrão visual nas informações do componente customizado. Aqui uma visão de como o componente vai ser exibido na página:

image

Para este caso, vamos usar uma ferramenta open source chamada audio.js (http://kolber.github.io/audiojs/). Mas você pode usar qualquer outra que ofereça um player que possa ser embutido em uma página web. Inclusive nos meus testes o audio.js não funcionou bem com o Firefox, por isso se você for desenvolver para produção, recomendo fazer testes mais detalhados.

Como de costume, é muito importante você ler (e concordar) com os seguintes disclaimers:

DISCLAIMER1: Este tutorial serve apenas de exemplo, e não é recomendado ser aplicado como está em ambientes de produção. As instruções contidas neste artigo não são suportadas pela Oracle (ou pelo autor). Lembre-se de testar rigorosamente em ambientes não-produção antes de disponibilizar o componente para os usuários finais.

DISCLAIMER2: Este componente considera um número baixo de usuários concorrentes. Não foi feito nenhum estudo sobre uso de banda de rede ou outros fatores que possam impactar a performance. Para ambientes com grandes volumes de uso, é recomendável considerar outras opções, como streaming, etc.

DISCLAIMER3: O upload e playback de músicas dos gêneros de pagode, axé, sertanejo universitário e outros podem causar danos irreversíveis ao repositório de conteúdo (e aos usuários).

Dito isso, It’s time to rock & roll!

Criando o Componente

O primeiro passo é fazer o download do audio.js. No meu caso, como era um teste simples, eu descompactei os arquivos diretamente no Apache, ficando com a URL http://servidor/audiojs que eu uso no código. Mas caso você queira empacotar e distribuir este componente, o ideal é que ele seja relacionado entre os elementos do componente (mais informações aqui). De qualquer forma, os arquivos do audio.js precisam ficar em algum lugar ‘visível’ para o browser (o que significa que eles não podem ficar nas pastas do componente).

Depois disso, abra o ComponentWizard (acessível pela linha de comando <domain_home>/ucm/cs/bin/ComponentWizard) e crie um novo componente. O meu componente se chama SoundPlayer, mas se você quiser no futuro adicionar um player para vídeos ou outros formatos, pode chamar de MediaPlayer.

O que este componente vai fazer é sobrescrever a página de document information, ao invés de customizar. Isso significa que basta desabilitar o componente para que esta customização deixe de ser usada e a página volte a funcionar da forma nativa. Para sobrescrever a página, clique no botão Add… do painel Custom Resource Definition e selecione Resource – HTML Include/String.

image

Na caixa de pergunta “Você quer abrir o arquivo no editor de textos”, clique em No. Em seguida, clique no botão Add… do painel Custom HTML Includes. O include que queremos sobrescrever é o info_page_content, responsável por montar a tela de informações do documento. Porém, o include monta a página inteira, portanto queremos manter todo o conteúdo original, e apenas incluir a nossa lógica customizada. Desta forma, na tela de criação do include, defina o nome como info_page_content, e copie e cole o código abaixo. As partes em verde mostram o código customizado para inserir o player. Os endereços em vermelho são o caminho para o servidor e devem ser modificados (OBS: Existem variáveis IDOC que trazem o nome e endereço do servidor e devem ser usadas; mais informações aqui).

 

<$include std_page_begin$>
    <!–$IsStagingDoc=1$–>
    <!–$IsFailedIndex=1$–>
    <!– Do a loop on DOC_INFO so that all substitution tags will use DOC_INFO as their
    first place to find their values.  Otherwise their is confusion between this result set
    and the REVISION_HISTORY table that comes later.  For example ‘dStatus’ is a value in both
    tables–>
    <$loop DOC_INFO$>
    <$if dFormat like “*idcmeta*”$>
        <$showPrimaryMetaFileFields = “1”$>
    <$endif$>
    <$include doc_info_notify_data$>

    <$pageTitle = inc(“docinfo_page_title”)$>
    <$exec inc(“docinfo_menus_setup”)$>
    <$include page_menus_js_object_setup$>
    <$include std_page_heading$>
    <$include std_docinfo_doc_action_forms$>

    <table class=”xuiTable” cellpadding=”2″ cellspacing=”0″ summary=””>
    <$include special_checkin_fields1$>
    <$include std_revision_label_field$>
    <$include std_document_type_field$>
    <$include std_document_title_field$>
    <$include author_checkin_field$>
    <$include std_meta_fields$>
    <$include security_checkin_fields$>
    <$include checkout_author_info_field$>
    <$if IsStagingDoc$>
    <$include doc_date_fields$>
    <$endif$>
    <$rptStatus = rptDisplayMapValue(“StatusList”, dStatus)$>
    <$fieldName = “rptStatus”, fieldCaption = lc(“wwStatus”)$><$include std_displayonly_field$>
    <$if HasOriginal$>
    <$fieldName = “dDocFormats”, fieldCaption = lc(“wwFormats”)$><$include std_display_field$>
    <$endif$>
    <$include workflow_list_for_doc$>
    </table>

    <!– warnings and error messages –>
    <$include std_docinfo_error_msg$>
    <$if IsNotSyncRev$>
    <table class=”xuiTable” summary=””>
        <tr>
            <td align=center><span class=errorHighlight>
                <$lc(“wwLocalCopyNotSynced”, dDocName)$></span></td>
        </tr>
    </table>
    <$endif$>

    <$if IsStagingDoc$>
        <$include doc_provider_info$>
    <$endif$>

    <!– SoundPlayer Component Customization –>
    <!– Checks if file has audio extension and adds a player to the page –>
    <$if strEquals(dExtension,”mp3″)$>
      <script src=
http://servidor/audiojs/audio.min.js></script>
          <link rel=”stylesheet” href=
http://servidor/audiojs/index.css media=”screen”>
       <script>
        audiojs.events.ready(function() { audiojs.createAll(); });
       </script>   
    <div class=”xuiSubheading”> Audio File </div>
    <table align=”center” border=”0″ cellpadding=”2″ cellspacing=”0″ summary=”” style=”padding-left: 50px;” width=”40%”>
    <tr> <td class=”idcFieldCaption idcInfoCaption” nowrap=”nowrap”>
    This is an Audio File. Click to Play </td>
    </tr><tr>
    <td class=”idcFieldCaption idcInfoCaption”>
     <div align=”center”>
      <audio src=”<$DocUrl$>” preload=”auto”></audio>
     </div>
    </td> </tr>
    </table>
    <$endif$>
    <!– docinfo links –>
    <$include std_docinfo_links$>

    <!– additional actions and controls –>
    <table class=”xuiTable” summary=””>
    <tr>
        <$if ClientControlled$><$doingPopupActions=1$>
        <td width=”50%” align=right><$include doc_select_actions$></td>
        <$endif$>
        <td width=”50%” align=left><$include doc_info_extra_buttons$></td>
    </tr>
    </table>
    <$include doc_info_extra_controls$>

    <!– applets –>
    <$if HasOriginal and useDownloadApplet$>
        <form name=”downloadForm”>
        <input type=hidden name=dID value=”<$dID$>”>
        <input type=hidden name=dDocName value=”<$dDocName$>”>
        <input type=hidden name=dDocTitle value=”<$xml(dDocTitle)$>”>
        <input type=hidden name=dOriginalName value=”<$dOriginalName$>”>
        <input type=hidden name=docURL value=”<$if HasUrl$><$DocUrl$><$endif$>”>
        </form>
        <$include download_native_applet$>
    <$endif$>
    <$include info_page_content_extra$>

    <!– end loop on DOC_INFO–>
    <$endloop$>
    <br style=”line-height:15px”>
    <$if IsStagingDoc$>
    <!– present a problem report form –>
    <$include doc_add_problem_report$>
    <br style=”line-height:15px”>
    <$elseif IsWorkflowInfo$>
    <$else$>
    <!– Table holding information about all revisions of this document–>
    <$include doc_rev_table$>
    <br style=”line-height:15px”>
    <$endif$>

    <$include custom_info_page_content$>

<$include std_page_end$>

 

image

Depois disso, basta habilitar o componente, reiniciar o Content Server e fazer o check-in de um arquivo MP3 para testar. Você também pode criar um perfil para esconder os campos e manter o layout da página mais limpo. O componente como está oferece o player apenas para arquivos com a extensão .mp3. Você pode modificar o código para aceitar outros formatos de audio, como .wav, por exemplo.

Este foi rápido e fácil. Até a próxima!

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s