Welcome to NCL Composer’s documentation!

Prefácio

_images/nclcomposer.png

Este manual tem o objetivo de agrupar todas as informações sobre o {nclcomposer} de forma detalhada.

Público alvo

Este manual é destinado a qualquer pessoa que deseja aprender a desenvolver aplicações para o middleware de TV Digital [Ginga-NCL](http://www.ginga.org.br), independente de sua experiência em [NCL (Nested Context Language)](http://www.ncl.org.br).

Requisitos

O único requisito que se espera do leitor são conhecimentos básicos de informática.

Para tirar total proveito deste manual você precisará também de um computador com:

  • Sistema operacional Linux, Windows ou MAC OS X.
  • Versão mais atual do {nclcomposer} (disponível em <http://composer.telemidia.puc-rio.br>) instalada e os plug-ins padrões habilitados.

Introdução

O que é NCL ?

Criada no [Laboratório TeleMídia](http://www.telemidia.puc-rio.br) da [PUC-Rio](http://www.puc-rio.br), a linguagem [NCL (Nested Context Language)](http://www.ncl.org.br) é uma linguagem declarativa para autoria de documentos hipermídia baseados no modelo conceitual NCM - Nested Context Model. NCL define como objetos de mídia são estruturados e relacionados, no tempo e espaço.

O que é o NCL Composer?

O [NCL Composer](http://composer.telemidia.puc-rio.br) é uma ferramenta de autoria que visa facilitar o desenvolvimento de aplicações multimídia interativas usando [NCL (Nested Context Language)](http://www.ncl.org.br). Para isso, ele utiliza-se de várias abstrações gráficas (visões) que permitem ao autor focar em apenas um determinado aspecto, durante cada fase distinta da autoria.

Com isso, o NCL Composer permite que usuários não-programadores possam criar aplicações multimídia interativas. Além disso, o NCL Composer também pode ajudar no ensino/aprendizado dos principais conceitos da linguagem NCL e do modelo NCM.

Principais recursos do NCL Composer

  • Edição gráfica de documentos NCL
  • Edição textual de documentos NCL
  • Integração com ferramentas de execução
  • Multiplataforma (Linux, Windows e MacOS)

Além disso, o NCL Composer foi desenvolvido com o objetivo de ser facilmente extensível. Novas funcionalidades podem ser facilmente adicionadas por meio de plugins.

Instalando o NCL Composer

Windows

Para instalar o NCL Composer em ambiente Windows:

  • Baixe a versão mais atual do NCL Composer para Windows em: <http://composer.telemidia.puc-rio.br/en/download>
  • O arquivo deve ter o nome na forma nclcomposer-installer-X.X.X.exe, onde X.X.X deve conter a versão do NCL Composer. Execute esse arquivo.
  • Caso você tenha alguma versão anterior instalada, o instalador irá perguntar se deseja desinstalá-la antes de prosseguir.
  • Caso contrário, a seguinte tela será exibida:
_images/cap3_install_1.png

Instalando (Passo 1)

  • Clique no botão I Agree para aceitar a licença do NCL Composer.
  • Após aceitar a licença do software, será possível escolher quais plugins serão instalados na sua máquina, por meio da tela (em caso de dúvida não altere):
_images/cap3_install_2.png

Instalando (Passo 2)

  • Clique no botão Next, e será possível escolher o local onde o NCL Composer será instalado:
_images/cap3_install_3.png

Instalando (Passo 3)

  • Por fim, o NCL Composer será instalado, e a seguinte tela exibida:
_images/cap3_install_4.png

Instalando (Passo 4)

  • Caso não tenha ocorrido nenhum problema, feche o instalador. Será possível executar o NCL Composer através do menu Iniciar->TeleMídia->NCL Composer.

Linux (Ubuntu/Debian)

Para instalar o NCL Composer em ambiente Linux (Ubuntu/Debian):

  • Baixe a versão mais atual do NCL Composer para Linux (Ubuntu/Debian) em: <http://composer.telemidia.puc-rio.br/en/download>
  • O arquivo deve ter o nome na forma nclcomposer_X.X.X_i386.deb, onde X.X.X deve conter a versão do NCL Composer. Para instalar o arquivo que foi baixado, execute o seguinte comando na linha de comando:
$ dpkg -i nclcomposer-X.X.X.deb
  • Caso a instalação ocorra sem problemas, é possível acessar o NCL Composer através do menu de aplicações, ou por meio do comando:
$ nclcomposer

MacOS

Para instalar o NCL Composer em ambiente MacOS:

  • Baixe a versão mais atual do NCL Composer para MacOS em: <http://composer.telemidia.puc-rio.br/en/download>
  • O arquivo deve ter o nome na forma nclcomposer-X.X.X-YYYYMMDD.dmg, onde X.X.X deve conter a versão do NCL Composer e YYYYMMDD a data do lançamento.

Note

O release do NCL Composer para MacOS é realizado através de um arquivo [DMG](https://pt.wikipedia.org/wiki/.dmg). O arquivo DMG é uma imagem de disco, que se assemelha a um arquivo compactado (ZIP ou RAR). Dessa forma, para instalar a aplicação é necessário extraí-la de dentro do aquivo DMG.

  • Para instalar (extrair) o NCL Composer, clique duas vezes no arquivo DMG baixado. Assim, uma janela será exibida contendo a aplicação do NCL Composer. Clique e arraste a aplicação do NCL Composer para dentro da pasta de aplicações do sistema (normalmente /Applications/).
  • Pronto!

Note

Este processo é semelhante para qualquer arquivo DMG. Caso queira assitir um vídeo explicativo, acesse o [Doutor Apple](https://www.youtube.com/watch?v=gNqDTE7Vvwc).

Executando o NCL Composer

As duas formas mais comuns de iniciar o NCL Composer são clicando no ícone do NCL Composer (por exemplo, na Área de Trabalho ou no Menu Iniciar) ou através de uma linha de comando.

Plataformas conhecidas

As plataformas nas quais é sabido que o NCL Composer funciona são: “GNU/Linux”, “Apple Mac OS”, e “Microsoft Windows”.

Línguas

Atualmente o NCL Composer está disponível em três línguas: Inglês, Português e Espanhol. É possível alterar a língua corrente em Edit->Preferences->General.

Argumentos da linha de comando

Ao executar o NCL Composer por meio de uma linha de comando, os seguintes argumentos são reconhecidos.

--help, -h

Mostra a lista de opcoes.

--version, -v

Mostra a versao.

Conceitos Básicos

A linguagem NCL—e, consequentemente, o NCL Composer—baseiam-se no modelo NCM (Nested Context Model) para modelar aplicações multimídia interativas. Esta seção discute os principais conceitos do NCM e da NCL, os quais são úteis para utilizar o NCL Composer de forma eficiente.

NCM

Nós e elos

No NCM, aplicações multimídia são modeladas por meio de nós (nodes) e elos (links) (Figura 1).

Os nós de mídia representam os objetos de mídias da aplicação (vídeos, imagens, textos etc.), enquanto os elos representam relacionamentos entres esses nós. Exemplos de relacionamentos entre os nós são os relacionamentos causais (por exemplo, no NCM é possível criar um elo entre dois nós, informando que quando a apresentação de um nó começar, a apresentação de outro nó também deve ser iniciada).

_images/05-basic-concepts-nodes-and-links.png

Além dos nós de mídias, o NCM também permite agrupar nós e links em nós de composição (ou contextos), que permitem agrupar logicamente os nós e elos de uma aplicação. Contextos podem também agrupar outros contextos, recursivamente (veja figura abaixo).

_images/05-basic-concepts-context.png

Modelar uma aplicação multimídia no NCM então é definir quais os objetos de mídia fazem parte da aplicação (através dos nós de mídia), como eles estão estruturados (definindo-se nós de contextos) e quando esses objetos de mídia serão apresentados (o que é realizado por meio da definição de elos entre os nós de mídia).

Propriedades, regiões e descritores

Objetos de mídia podem conter um conjunto de propriedades. Propriedades definem várias características dos objetos de mídia, como, por exemplo, o seu posicionamento (propriedades top e left), a sua dimensão (propriedades width e height), a sua transparência (propriedade transparency) etc. Para uma lista completa das propriedades suportadas pela NCL é possível consultar o [NCL Handbook](http://handbook.ncl.org.br/doku.php?id=property#predefined-properties). Propriedades também podem ser modificadas dinamicamente durante a exibição do objeto de mídia.

As propriedades de um objeto de mídia são definidas no próprio objeto de mídia. Porém, a NCL também define dois outros elementos que possibilitam reusar um conjunto de propriedades em mais de um objeto de mídia, são eles: a: descritores e regiões.

Um descritor é usado para agrupar um conjunto qualquer de propriedades e, assim, é possível compartilhá-las por mais de uma mídia. Por exemplo, se duas mídia tocam na mesma região da tela e com a mesma transparência, podemos criar um descritor meudescritor que agrupa essas propriedades. Em vez de definí-las novamente para cada um dos objetos de mídia, cada objeto de mídia pode apenas referenciar este descritor.

Uma região permite agrupar o conjunto de propriedades espaciais de um objeto de mídia. Além disso, por meio de regiões também é mais fácil definir

Portas e âncoras

Conectores

O software NCL Composer

O NCL Composer é uma feramenta de autoria para aplicações multimídia baseada no NCM. Por meio do NCL Composer é possível criar uma aplicação multimídia através de diversas visões sobre um documento NCL. Cada visão traz alguma representação diferente do documento NCL que permite visualizar/editar algumas características específicas.

Atualmente, as principais visões do NCL Composer são: Visão Estrutural, Visão de Leiaute, Visão de Outline, Visão Proprieades, Visão de Regras, Visão de Validação e Visão de Execução.

Exemplo 01: Reproduzindo um objeto de mídia

Objetivo

Neste primeiro exemplo, o objetivo é apenas exibir um objeto de mídia, em tela cheia.

Para isso, iremos:

  1. Criar um novo projeto;
  2. Adicionar o objeto de mídia (no exemplo, usaremos um vídeo) na aplicação;
  3. Informar que esse objeto será iniciado quando a aplicação começar, e
  4. Determinar a região da tela onde esse objeto de mídia será exibido.

Passo 0: Criando um novo projeto

Para criarmos o nosso exemplo, o primeiro passo é criarmos um novo projeto.

Ao abrir o NCL Composer, a seguinte tela de boas-vindas é apresentada:

_images/nclcomposer-welcomescreen.png

Tela de boas-vindas do NCL Composer.

Nessa tela, é possível criar um novo projeto por meio do menu File-&gt;New Project, por meio do botão New Project no canto esquerdo inferior da tela de boas-vindas, ou simplesmente pressionando Ctrl+N.

Feito isso, a seguinte janela será exibida:

_images/nclcomposer-exemplo-01-newproject.png

Criação de um novo projeto.

Atribua um nome para o projeto que você está criando (aqui atribuímos o nome exemplo-01), selecione o diretório onde deseja salvá-lo e deixe as opções Copy and Import the default Connector Base (Copie e importe a base de conectores padrão) e Add a default region to the project (adicione uma região padrão ao projeto) selecionadas.

Note

Nas próximas seções serão discutidos em detalhes o que são os conectores e bases de conectores. Por enquanto, apenas deixe esta opção marcada, pois ela será útil para os próximos exemplos.

Por fim, pressione o botão Finish, e o seu novo projeto será criado e aberto.

A animação a seguir exemplifica a criação de um projeto.

_images/ex01-step00-new-project.gif

Criando um novo projeto.

Ao criar o novo projeto, o NCL Composer irá automaticamente abrí-lo, onde teremos acesso às visões: Visão Estrutural, Visão de Leiaute, Visão de Outline, Visão Proprieades, Visão de Regras, Visão de Validação e Visão de Execução.

Passo 1: Adicionando um objeto de mídia (O que?)

Com o nosso projeto criado e aberto, podemos começar a desenvolver a nossa aplicação. Como primeiro passo, temos que adicionar o objeto de mídia da nossa aplicação (neste primeiro exemplo, teremos apenas um objeto de mídia, um vídeo).

Para inserir os objetos de mídia (áudio, vídeo, imagens etc.) em nossa aplicação, a forma mais simples é apenas arrastá-los do seu gerenciador de arquivos para dentro da Visão Estrutural do NCL Composer.

_images/nclcomposer-exemplo-01-drag_and_drop_video.png

Arraste o objeto de mídia do seu gerenciador de arquivos para a Visão Estrutural do NCL Composer para inserí-lo como objetos de mídia da aplicação

Note

Outra forma de inserir um objeto de mídia, na Visão Estrutural é clicar com o botão direito sobre o corpo do documento e selecionar o menu Insert -> Media. Neste caso, é importante não esquecer de definir o caminho para o objeto de mídia, o que poder ser realizado selecionando o objeto que você acabou de editar e alterando o valor do atributo src (ou na Visão de Propriedades ou na Visão Textual).

A animação a seguir, exemplica como podemos adicionar um novo objeto de mídia, arrastando a partir do gerenciador de arquivos.

_images/ex01-step01-insert-media.gif

Passo 2: Informando o objeto de mídia que serão inicialmente exibidos (Quando?)

Para informar que o objeto de mídia que acabamos de inserir deve iniciar quanto a nossa aplicação iniciar, é suficiente criarmos uma porta no corpo do documento, mapeando-a para o objeto de mídia. As portas de um contexto (inclusive do corpo do documento, que nada mais é do que o contexto inicial do documento) definem quais os objetos daquele contexto serão iniciados quando aquele contexto for iniciado.

Para inserirmos uma porta no corpo do documento pela Visão Estrutural é suficiente clicarmos com o botão direito sobre o corpo e selecionarmos o menu Insert->Port.

_images/ex01-step02-insert-port.png

Para mapearmos a porta que acabamos de criar para o objeto de mídia, podemos selecionar a ferramenta Link na barra de tarefas e clicar sobre a porta e, mantendo o botão do mouse pressionado, arrastar o ponteiro até o objeto de mídia.

Note

Outra forma de ativar a ferramenta Link é segurando a tecla SHIFT enquanto faz-se o mesmo procedimento acima.

_images/ex01-step02-port-mapping.png

Mapeando porta para objeto de mídia.

Com isso, já definimos que nossa aplicação é constituída apenas de um objeto de mídia e que quando a aplicação começar, esse objeto de mídia será executado.

A animação a seguir exemplica como criar e mapear uma porta no corpo do documento.

_images/ex01-step02-insert-port.gif

Mapeando porta para objeto de mídia.

Passo 3: Definindo a região onde o objeto de mídia será apresentado (Onde?)

Para finalizar este primeiro exemplo só falta agora definirmos onde (em que região da tela) o objeto de mídia da nossa aplicação será exibido.

Como ao criarmos o nosso projeto, deixamos a opção “Add a default region to the project” selecionada, ao criarmos o projeto já criamos também uma região que ocupa toda a tela.

Para associarmos a mídia que adicionamos no nosso projeto à essa região, basta arrastamos essa mídia (por exemplo, a partir da visão de outline) para a região na visão de leiaute. Veja a animação a seguir:

_images/ex01-step03-media-to-region.gif

Associando uma media à uma região.

Ao fazermos isso, o NCL Composer irá nos perguntar se queremos “copiar os dados da região” para a mídia ou se queremos criar um descritor. Um descritor serve para podermos reusar as mesmas propriedades em mais de uma mídia. Exemplos destas propriedade são o posicionamento e a largura e a altura do objeto de mídia. Na grande maioria das vezes (inclusive aqui) iremos querer criar um descritor.

Passo 4: Executando o exemplo

Feito isso, o nosso primeiro exemplo já está completo.

Para executá-lo, basta executar o projeto no botão “Run NCL Project” ![](../img/run-button.png) na Run view.

_images/ex01-step04-run.gif

Executando a aplicação.

Exemplo 02: Reproduzindo um vídeo e uma imagem

Objetivo

O objetivo deste exemplo é apresentar um vídeo e uma imagem na tela.

Para isso, iremos:

  • Adicionar os dois objetos de mídia (um vídeo e uma imagem) na nossa aplicação;
  • Criar duas regiões (uma para cada objeto) e associá-las aos objetos de mídia; e
  • Informar que os dois objetos devem ser apresentados quando a aplicação começar.

Passo 1: Adicionando os objetos de mídia (O que?)

Neste exemplo, queremos uma aplicação com dois objetos de mídia (um vídeo e uma imagem). Para inserí-los no seu projeto, basta arrastar as duas mídias do seu gerenciador de arquivos para a Visão Estrutural do NCL Composer.

Note

Caso precise de mais informações sobre como criar um novo projeto veja o [Passo 0 do Exemplo 01](01.hello_world).

_images/ex02-step01-insert-media.gif

Passo 2: Onde os objetos de mídia serão apresentados

Agora iremos definir onde os objetos de mídia serão apresentados. Para isso iremos criar regiões na tela, por meio da Visão de Leiaute e associar os objetos de mídia à essas regiões.

Criando as regiões

Como podemos perceber ao acessar a Visão de Leiaute, por padrão, o NCL Composer já cria uma região region0 que ocupa toda a tela. Iremos reusar essa região para o vídeo (queremos que ele ocupe toda a tela) e iremos criar uma nova região para a imagem. Para isso, podemos clicar com o botão direito do mouse na região existente e acessar a opção Add region do menu contextual. Uma nova região será criada, e podemos agora redimensioná-la e posicioná-la da forma que nos convier.

_images/ex02-step02-create-region.gif

Associando os objetos de mídia às regiões

Depois de criarmos as regiões, agora devemos associar cada um dos objetos de mídia (o vídeo e a imagem) a cada uma das suas regiões. Para isso, basta arrastar o objeto de mídia a partir da Visão de Outline para a sua respectiva região na Visão de Leiaute.

_images/ex02-step02-media-to-region.gif

Passo 3: Quando os objetos de mídia serão apresentados

Como os dois objetos de mídia iniciarão no começo da aplicação, uma forma simples de definir esse comportamento é criando-se uma porta para cada um desses objetos.

_images/ex02-step03-insert-port.gif

Diferente de objetos de mídia de vídeo e áudio, objetos de mídia estáticos—como, por exemplo, imagens—não possuem duração implícíta. Neste caso, caso iniciemos sua execução ela sendo apresentada indefinidamente. Para definirmos a duração de uma mídia (por exemplo, uma imagem) de forma explícita podemos o atributo explicitDur no descritor associado à esta mídia (veja a animação abaixo, onde definimos que a imagem irá durar 5s).

_images/ex02-step03-explicit-dur.gif

Passo 4: Executando o exemplo

Feito isso, o nosso exemplo já está completo e podemos executá-lo na Visão de Execução.

_images/ex02-step04-run.gif

Exemplo 03: Iniciando e terminando dois objetos de mídia simultaneamente

Objetivo

O objetivo deste exemplo é iniciar e terminar dois objetos de mídia simultaneamente.

Para isso, iremos:

  1. Adicionar os dois objetos de mídia que fazem parte da aplicação (um vídeo e uma imagem);
  2. Criar duas regiões, uma para o vídeo e uma para a imagem, e associar os respectivos objetos de mídia à suas regiões;
  3. Informar que o vídeo começará a ser apresentado no início da aplicação; e
  4. Criar dois elos:
  • Um informando que a imagem iniciará sua apresentação quando o vídeo começar a ser executado; e
  • Outro informando que a imagem irá terminar a sua execução quando o vídeo terminar a sua execução.

Passo 1: Adicionando os objetos de mídia (O que?)

Da mesma forma que no exemplo anterior iremos arrastar os dois objetos de mídia que ainda fazem parte da nossa aplicação (um vídeo e uma imagem) para a Visão Estrutural.

_images/ex03-step01-insert-media.gif

Arrastando um vídeo e uma imagem para a Visão Estrutural.

Passo 2: Onde os objetos de mídia serão apresentados (Onde?)

Agora iremos definir onde os objetos de mídia serão apresentados. Para isso, iremos criar regiões na tela por meio da Visão de Leiaute e associar os objetos de mídia à essas regiões.

Criando as regiões

Como podemos perceber ao acessar a Visão de Leiaute, por padrão, o NCL Composer já cria uma região region0 que ocupa toda a tela. Iremos reusar essa região para o vídeo (queremos que ele ocupe toda a tela) e iremos criar uma nova região para a imagem. Para isso, podemos clicar com o botão direito do mouse na região existente e acessar a opção Add region do menu contextual. Uma nova região será criada, e podemos agora redimensioná-la e posicioná-la da forma que nos convier.

_images/ex03-step02-create-region.gif

Arraste um vídeo e uma imagem para a Visão Estrutural.

Associando os objetos de mídia às regiões

Depois de criarmos as regiões, agora devemos associar cada um dos objetos de mídia (o vídeo e a imagem) a cada uma das suas regiões. Para isso, basta arrastar o objeto de mídia a partir da Visão de Outline para a sua respectiva região na Visão de Leiaute.

_images/ex03-step02-media-to-region.gif

Passo 5: Executando o exemplo

Pronto! O nosso Exemplo 03 está pronto. Para testá-lo basta executá-lo na Visão de Execução. O resultado deve ser o início do vídeo e da imagem no início da aplicação e os dois devem continuar apresentando até o final do vídeo, quando os dois devem ser finalizados, e a aplicação termina a sua execução.

Passo 0: Salvar como…

Para reusarmos o que já foi feito no exemplo anterior, vamos abrí-lo e criar um novo projeto baseado nele, por meio do menu File-&gt;Save as….

_images/ex03-step00-save-as.gif

Telas e Menus do NCL Composer

Janela Principal

Barra de título

Evidencia o nome do NCL Composer e do projeto corrente.

Barra de projetos

Lista a tela de boas-vindas e a lista de projetos abertos, permitindo navegar entre eles.

Área das Visões

Área de desenho das diversas visões. Cada visão pode ter seus próprios elementos de interface. Também é possível organizar e salvar a disposição das diversas visões por meio das perspectivas.

Barra de perspectivas

Apresenta as perspectivas salvas pelo usuário e permite facilmente alternar entre elas.

Barra de menus

Mostra as entradas de menu disponíveis.

Menu Screnshot

File: Da acesso às seguintes opções:

  • Novo projeto
  • Abrir
  • Salvar
 menu_file_img
Edit: menu_edit_img
View: menu_view_img
Share: menu_share_img
Help: menu_share_img

Atalhos

Os atalhos globais (válidos em qualquer visão) do NCL Composer são:

  • ``Ctrl``+``n`` - Novo projeto.
  • ``Ctrl``+``o`` - Abrir projeto.
  • ``Ctrl``+``s`` - Salvar o projeto corrente.
  • ``Ctrl``+``Shift``+``s`` - Salvar todos os projetos abertos.
  • ``Ctrl``+``Alt``+``s`` - Salvar como…: Salva o projeto corrente com outro nome.
  • ``Ctrl``+``F4`` - Fechar projeto.
  • ``Alt+F4`` ou ``Ctrl``+``Q`` - Fechar o |nclcomposer|.
  • ``F11`` - Habilita/desabilita visualização em tela cheia.
  • ``F1`` - Abre a ajuda do |nclcomposer|.
  • ``F5`` - Atualiza o modelo da visão com foco.
  • ``Ctrl``+``1``, ``Ctrl``+``2``, … - Alterna entre as perspectivas.

Visão Estrutural

A Visão Estrutural permite que os autores de aplicações interajam visualmente com a estrutura lógica do documento NCL. Em NCL, a estrutura lógica é representada pelos seus objetos (nós de conteúdo e nós de composição) e os elos entre esses objetos (representadas pelos elementos ).

|structural_view|

Ações

As ações são as diversas atividades que o usuário pode realizar durante o processo de autoria. Uma ação pode ser executada de várias formas: através da barra de ferramenta, do menu contextual, de um atalho de teclado, do mouse e da combinação de várias dessas formas. Abaixo são descritas cada uma das ações disponíveis na Visão Estrutural e como elas podem ser executadas.

Ação Descrição  
Desfazer Desfaz a última ação realizada na visão. Esta ação é ignorada caso não exista nenhuma ação para ser defeita. Inserir, remover, mover e redimencionar são exemplos de ações que podem ser desfeitas. Por outro lado, selecionar não é uma ação que pode ser desfeita. Na versão atual, não existe um limite na quantidade de ações que podem ser desfeitas. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas), menu contextual e atalho.
Refazer Refaz a última ação realizada na visão. Esta ação é ignorada caso não exista nenhuma ação para ser refeita, ou seja, nenhuma ação foi desfeita anteriormente. Na versão atual, não existe um limite na quantidade de ações que podem ser desfeitas. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas), menu contextual e atalho.
Recortar Copia a entidade selecionada para a área de trânsferencia e remove ela da visão. Esta ação é ignorada caso nenhuma entidade tenha sido selecionada e se a entidade selecionada é do tipo body. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas), menu contextual e atalho.
Copiar Copia a entidade selecionada para a área de trânsferencia. Esta ação é ignorada caso nenhuma entidade tenha sido selecionada e se a entidade selecionada é do tipo body. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas), menu contextual e atalho.
Colar Adiciona a entidade copiada para área de trânsferencia como filha da entidade selecionada. Esta ação é ignorada caso nenhuma entidade tenha sido recortada ou copiada e se a entidade selecionada não permita que seja adicionado como um de seus filhos entidades do tipo selecionada. Por exemplo, não é possível colar um contexto em uma mídia. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas), menu contextual e atalho.
Deletar Remove a entidade selecionada da visão. Esta ação é ignorada caso nenhuma entidade esteja selecionada na visão. Esta ação pode ser executada através do: menu contextual e atalho.
Mover Move a entidade selecionada para uma entidade de destino. Para a structural_view, mover significa alterar o parêntesco da entidade selecionada. A entidade de destino é determinada manipulando a entidade selecionada por meio de drag-n-drop para o interior da entidade de destino. Esta ação é ignorada caso a entidade de destino não permita que seja adicionado como um de seus filhos entidades do tipo selecionado. Esta ação pode ser executada através de atalho.
Aumentar Zoom Aumenta o zoom na visão. Esta ação é ignorada caso a visão tenha alcançado seu zoom máximo. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas) e atalho.
Diminuir Zoom Diminue o zoom na visão. Esta ação é ignorada caso a visão tenha alcançado seu zoom mínimo. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas) e atalho.
Tirar uma Foto Exporta o projeto como imagem (.png). O projeto pode ser exportado mesmo que nenhuma entidade tenha sido adicionada. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas) e menu contextual.
Habilitar Ferramenta de Ponteiro Altera o modo de edição da structural_view para “ponteiro”. Quando no modo de “ponteiro”, a structural_view permite selecionar, mover e redimencionar as entidades da através do mouse. O modo de “ponteiro” é desabilitado sempre o modo de “link” é habilitado. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas) e atalho.
Habilitar Ferramenta de Link Altera o modo de edição da structural_view para “link”. Quando no modo de “link”, a structural_view permite criar links (relacionamentos) entre duas entidades. Para criar um novo link, o usuário deve: i) clicar com o botão esquerdo do mouse na entidade de origem, ii) arrastar o mouse até a entidade de destino e, em seguida, iii) soltar o botão esquerdo do mouse. O modo de “link” é desabilitado sempre o modo de “ponteiro” é habilitado. Caso seja permitido criar um relaciomaneto entre as entidades de origem e destino, uma caixa de diálogo será apresentada para finalizar o processo de criação de link. Caso contrário, a ação é ignorada. Detalhes sobre o diálogo de criação de link será discutido mais a frente. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas) e atalho.
Criar uma Mídia Adiciona uma entidade do tipo mídia como filha da entidade selecionada. Esta ação é ignorada caso a entidade selecionada não permita que seja adicionada como um de seus filhos entidades do tipo mídia. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas), menu contextual e atalho.
Criar uma Contexto Adiciona uma entidade do tipo contexto como filha da entidade selecionada. Esta ação é ignorada caso a entidade selecionada não permita que seja adicionada como um de seus filhos entidades do tipo contexto. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas), menu contextual e atalho.
Criar um Switch Adiciona uma entidade do tipo switch como filha da entidade selecionada. Esta ação é ignorada caso a entidade selecionada não permita que seja adicionada como um de seus filhos entidades do tipo switch. Esta ação pode ser executada através da: barra de ferramentas, menu contextual e atalho.
Criar o Body Adiciona uma entidade do tipo body na visão. Esta ação é ignorada caso um body já tenha sido adicionado previamente. Esta ação pode ser executada através da: barra de ferramentas, menu contextual e atalho.
Criar uma Área Adiciona uma entidade do tipo área como filha da entidade selecionada. Esta ação é ignorada caso a entidade selecionada não permita que seja adicionada como um de seus filhos entidades do tipo área. Esta ação pode ser executada através da: barra de ferramentas, menu contextual e atalho.
Criar uma Propriedade Adiciona uma entidade do tipo propriedade como filha da entidade selecionada. Esta ação é ignorada caso a entidade selecionada não permita que seja adicionada como um de seus filhos entidades do tipo propriedade. Esta ação pode ser executada através da: barra de ferramentas, menu contextual e atalho.
Criar uma Porta Adiciona uma entidade do tipo porta como filha da entidade selecionada. Esta ação é ignorada caso a entidade selecionada não permita que seja adicionada como um de seus filhos entidades do tipo porta. Esta ação pode ser executada através da: barra de ferramentas, menu contextual e atalho.
Criar uma Porta de Switch Adiciona uma entidade do tipo porta de switch como filha da entidade selecionada. Esta ação é ignorada caso a entidade selecionada não permita que seja adicionada como um de seus filhos entidades do tipo porta de switch. Esta ação pode ser executada através da: barra de ferramentas, menu contextual e atalho.
Habilitar/ Desabilitar Minimapa Habilita/Desabilita o minimapa. Quando habilitado, o minimapa é exibido no canto inferior direito da visão. Esta ação pode ser executada através da: barra de ferramentas e atalho.

Barra de Ferramentas

A partir da versão 0.3.0 a Visão Estrutural disponibiliza uma barra de ferramentas com as principais ações da visão.

|structural_view} - Barra de Ferramenta

A figura acima apresenta a barra de ferramentas, cujo detalhes de cada ferramenta são descritos a seguir:

  • (a) - Desfazer: Desfaz a última ação realizada na visão. Mais detalhes.
  • (b) - Refazer: Refaz a última ação reallizada na visão. Mais detalhes.
  • (c) - Recortar: Copia a entidade selecionada para a área de trânsferencia e remove ela da visão. Mais detalhes.
  • (d) - Copiar: Copia a entidade selecionada para a área de trânsferencia. Mais detalhes.
  • (e) - Colar: Adiciona a entidade copiada para área de trânsferencia como filha da entidade selecionada. Mais detalhes.
  • (f) - Aumentar o *Zoom:* Aumenta o Zoom na visão. Mais detalhes.
  • (g) - Diminuir o *Zoom:* Diminue o Zoom na visão. Mais detalhes.
  • (h) - Tirar uma Foto: Exporta o projeto como imagem (.png). Mais detalhes.
  • (i) - Ferramenta de Ponteiro: Altera o modo de edição da visão para “ponteiro”. Mais detalhes.
  • (j) - Ferramenta de *Link*: Altera o modo de edição da visão para “link”. Mais detalhes.
  • (k) - Adicionar Mídia: Adiciona uma entidade do tipo mídia como filha da entidade selecionada. Mais detalhes.
  • (l) - Adicionar Contexto: Adiciona uma entidade do tipo context como filha da entidade selecionada. Mais detalhes.
  • (m) - Adicionar *Switch*: Adiciona uma entidade do tipo switch como filha da entidade selecionada. Mais detalhes.
  • (n) - Adicionar *Body*: Adiciona um body na visão. Mais detalhes.
  • (o) - Adicionar Área: Adiciona uma entidade do tipo área como filha da entidade selecionada. Mais detalhes.
  • (p) - Adicionar Propriedade: Adiciona uma entidade do tipo propriedade como filha da entidade selecionada. Mais detalhes.
  • (q) - Adicionar Porta: Adiciona uma entidade do tipo porta como filha da entidade selecionada. Mais detalhes.
  • (r) - Adicionar Porta de *Switch*: Adiciona uma entidade do tipo porta de switch como filha da entidade selecionada. Mais detalhes.

Diálogos

Referência

É possível especificar uma referência através da ação de colar. Assim que a ação de colar é realizada o diálogo abaixo é exibido, solicitando que o autor escolha entre copiar ou criar uma referência da entidade copiada para área de tranferência.

|structural_view| - Diálogo para Criação de Referência

Quando uma entidade é uma referência, ela fica levemente transparente (figura abaixo) e herda todas as interfaces da entidade referenciada. Não é possível referenciar uma entidade que já referencia uma outra. Nesta versão ainda não é possível fazer referência para entidades do tipo: contexto, switch e body.

|structural_view| - Referência

Atalhos

Abaixo segue a lista de atalhos da Visão Estrutural:

  • ``Ctrl``+``z`` - Desfazer: Desfaz a última ação realizada na visão. Mais detalhes.
  • ``Ctrl``+``Shift``+``z`` - Refazer: Refaz a última ação reallizada na visão. Mais detalhes.
  • ``Ctrl``+``x`` - Recortar: Copia a entidade selecionada para a área de trânsferencia e remove ela da visão. Mais detalhes.
  • ``Ctrl``+``c`` - Copiar: Copia a entidade selecionada para a área de trânsferencia. Mais detalhes.
  • ``Ctrl``+``v`` - Colar: Adiciona a entidade da área de trânsferencia como filha da entidade selecionada. Mais detalhes.
  • ``Del`` - Deletar: Remove a entidade selecionada da visão. Mais detalhes.
  • *Segurar* ``Ctrl``+*Drag-n-drop* - Mover: Remove a entidade selecionada da visão. Mais detalhes.
  • ``Ctrl``+``+`` ou ``Ctrl``+*Roda do mouse para cima* - Aumentar o *zoom*: Aumenta o zoom na visão. Mais detalhes.
  • ``Ctrl``+``-`` ou ``Ctrl``+*Roda do mouse para baixo* - Diminuir o *zoom*: Diminue o zoom na visão. Mais detalhes.
  • ``1`` - Habilitar Ferramenta de Ponteiro: Altera o modo de edição da visão para “ponteiro”. Mais detalhes.
  • ``2`` ou *Segurar* ``Shift`` - Habilitar Ferramenta de Link: Altera o modo de edição da visão para “link”. Mais detalhes.
  • ``3`` - Adicionar Mídia: Adiciona uma entidade do tipo mídia como filha da entidade selecionada. Mais detalhes.
  • ``4`` - Adicionar Contexto: Adiciona uma entidade do tipo context como filha da entidade selecionada. Mais detalhes.
  • ``5`` - Adicionar *Switch*: Adiciona uma entidade do tipo switch como filha da entidade selecionada. Mais detalhes.
  • ``6`` - Adicionar *Body*: Adiciona um body na visão. Mais detalhes.
  • ``7`` - Adicionar Área: Adiciona uma entidade do tipo área como filha da entidade selecionada. Mais detalhes.
  • ``8`` - Adicionar Propriedade: Adiciona uma entidade do tipo propriedade como filha da entidade selecionada. Mais detalhes.
  • ``9`` - Adicionar Porta: Adiciona uma entidade do tipo porta como filha da entidade selecionada. Mais detalhes.
  • ``0`` - Adicionar Porta de *Switch*: Adiciona uma entidade do tipo porta de switch como filha da entidade selecionada. Mais detalhes.
  • ``Ctrl``+``m`` - Habilitar/Desabilitar Minimapa: Habilita/Desabilita o minimapa. Mais detalhes.

Outros detalhes

Todo plugins do NCL Composer permite sincronizar (ou resincronizar) o estado atual da visão com o modelo do núcleo da ferramenta. Esta tarefa é realiza através de um botão na aba de cada visão. No caso da Visão Estrutural, sempre que a visão é resincronizada com o modelo do núcleo da ferramenta, todo o histório de ações é perdido, de modo que não é possível desfazer ou refazer uma ação.

Visão de Leiaute

A Visão de Leiaute permite que os autores de aplicações NCL interajam visualmente com as regiões onde os objetos de mídia serão inicialmente apresentados. Nesta visão, os autores podem criar e manipular as regiões e a hierarquia de regiões do documento.

|layout_view|
Ação Descrição  
Criar uma região Cria uma nova região, filha região que está selecionada. Esta ação pode ser executada através da:
Remover uma região Remove a região que está atualmente selecionada e seus filhos. Esta ação pode ser executada através da: barra de ferramentas
Copiar região Copia a região selecionada para a área de trânsferencia. Esta ação é ela da visão. Esta ação é ignorada caso nenhuma entidade esteja selecionada. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas), menu contextual e atalho.
Colar região Cola a região que está na área de transferência como filha da região selecionada. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas), menu contextual e atalho.
Esconder região Esconde a região atualmente selecionada da visão de leiaute. A região continua existindo no modelo (e pode ser mostrada depois) apenas não é visualizada. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas), menu contextual e atalho.
Mostrar/esconde r grade Copia a entidade selecionada para a área de trânsferencia. Esta ação é ignorada caso nenhuma entidade tenha sido selecionada e se a entidade selecionada é do tipo body. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas), menu contextual e atalho.
Tirar um instantâneo Permite salvar uma imagem com a disposição atual das regiões da visão de leiaute. Esta ação pode ser executada através da: barra de ferramentas (#barra-de-ferramentas), menu contextual e atalho.

Visão de Outline

A Visão de Outline apresenta a estrutura do documento NCL como uma árvore, permitindo aos autores navegarem no documento.

|outline_view|

Visão de Propriedades

A Visão de Propriedades apresenta o conjunto de propriedades da entidade selecionada. Essa entidade selecionada por ser, por exemplo, uma região na Visão de Leiaute, um objeto de mídia na Visão Estrutural etc.

|properties_view|

Visão Textual

A Visão Textual permite aos usuários interagirem diretamente com o código-fonte da aplicação NCL. Ela é um editor de texto avançado focado na linguagem NCL e traz funcionalidades como: coloração sintática, sugestão de código contextual e formatação de código.

A Visão Textual é recomendada especialmente para usuários avançados e que se sentem à vontade com a sintaxe XML.

|textual_view|

Visão de Regras

Permite a definição de uma base de regras, as quais podem ser utilizada em switchs para adaptação do conteúdo a ser apresentado.

|rules_view|

Visão de Validação

A Visão de Validação é responsável por notificar erros e alertas no documento NCL. A figura a seguir apresenta um exemplo.

|validator|

Visão de Execução

Possibilita ver o resultado da execução do seu projeto.

{run_view}

Todo

Executar embedded or not embedded

Como mudar o tema do NCL Composer

_images/how-to-change-style.gif

Indices and tables