O editor de processo gráfico permite definir os processos interativos utilizados no portal. Este editor é um componente "flash" a mesmo de criar as páginas dos textos, das imagens, dos componentes animados, afim de apresentar graficamente os processos ofício de um utilizador.

Estes componentes gráficos podem integrar as relações versus as funções do software, versus outros processos, versus as páginas de ajuda...assim que desencadear os processos de animação (aparição / desaparição de uma parte do processo por exemplo).

O editor permite selecionar um conjunto de imagens numa biblioteca fornecida por defeito. Esta biblioteca se chama "Standard Sage" É o primeiro item de uma lista deslisante que está afixada na caixa de escolhas dos componentes gráficos :

./GES_APR_libraries.jpg

Assim que se vê sobre esta cópia de ecrã, as imagens disponíveis são organizados sob a forma de :

  • bibliotecas (aqui, Sage standard e "Custom vol 1)
  • contendo os grupos (Vetor sombras, Logos, Temas, Botões ...)
  • eles mesmos contêm os temas (Basic shapes, Stars) que são coleções de imagens se afixando num navegador de vinhetas.

É possível de reacrescentar outras bibliotecas, de outros grupos nestas bibliotecas, e de outros temas que serão visíveis na janela bibliotecas presentes em cima.

Isto requer as operações a realizar manualmnte sobre o servidor de aplicação :

  • criaação dos diretórios e sub-diretórios para as bibliotecas, os grupos e os temas.
  • registo das imagens nos diretórios dos temas
  • criação de ficheiros de configuração (escritos em JSON) que descrevem as arborescência de bibliotecas (_param.txt), de grupos(sgx_libsinfo.txt), e de temas (list.txt).

Esta documentação tem por objetivo descrever a maneira de proceder.

Notas :

  • Na medida onde esta fase de configuração manual requere a escrita de código JSON, é aconselhado de se endereçar a algum tendo as noções de JSON ou de JAVASCRIPT ou ao menos, por defeito, de utilizar um editor permitindo indentar o código JSON de maneira à fazer claramnte aparecerá a estrutura.
  • É importante de respeitar escrupolosamente a caixa (maiúscula/minúscula) dos nomes de ficheiros tais que são definidos no documento a seguir.

Acréscimo de livrarias gráficas para o gerador de processo

Processo, Gráficos, Anexo, Técnico.

Notação JSON

A notação JSON, que é a notação permitindo definir as estruturas em javascript, utiliza as sintaxes seguintes :

  • uma estrutura está apresentada ente chavetas, e contém as propriedades seguidas do seu valor, sob a forma seguinte :

{ "prop1" : "valor 1" , "prop2" : "valor2", "prop3" : 25 }

Aqui, descreve-se uma estrutura com 3 propriedades nomeadas sucessivamente prop1, prop2, prop3, com os valores alfanuméricos valor1 e valor2, e um valor numérico (25).

  • um quadro está apresentado entre parenteses retos:

[ "indice_0", "indice_1", "indice_2, "indice_3" ] representa um quadro contendo 4 elementos.

  • As duas notações podem bem entendido se em redor, por exemplo :

{ [ { "age": 25, "nome" : "Martin" },  { "age": 67, "nome" : "Emile" } ], "número" : 2 }

representa uma estrutura contendo um quadro de 2 estruturas, seguidas por um outro valor ("número"). Cada sub-estrutura contém aqui dois campos, "idade" e "nome".

Falta referir que em JSON, não falta nunca cortar uma cadeia por um salto de linha (devolução carruagem)

Assim, por exemplo, tanto a sintaxe :

{ "nom" :
"Martin" }

está correcto, a sintaxe :

{ "nom" : "Mar
tin" }

não o é.

Por outro lado, é importante respeitar a caixa (maiúscula/minúscula) dados por nomes de propriedades, porque são significativos (as propriedades "Nome" e "nome" não são os mesmos)

Diretório de base

O diretório de base no qual se encontra as bicliotecas específicas e os ficheiros de configuração é um sub-directório do directório X3_PUB. O diretório X3_PUB pode ser encontrado, em utilizando a calculadora, e em calculando a expressão seguinte :

filpath("","","","X3_PUB")

A partir deste diretório, pesquisar-se-á o sub-directório :

X3_ROOT\X3CLI\XBLOCK\      (sob Windows)

X3_ROOT/X3CLI/XBLOCK/      (sob Unix ou Linux)

Este diretório contém um sub-directório FLASH, que contém os componentes gráficos standard. Os componentes especificos serão criados numdiretório nomeado FLASH_CUSTOM, situado ao mesmo nível (logo que no diretório XBLOCK). Falta começar para criar este diretório se não existente

Nota : um diretório FLASH_CUSTOMREF existe num sub-diretório FLASH. Se o diretório FLASH_CUSTOM não existe, é aconselhado de copiar FLASH_CUSTOMREF no directório XBLOCK, depois o renomear. Ter-se-á assim um diretório com os exemplos de ficheiros de configuração tais que o parágrafo seguinte vai os descrever.

Considera-se este directório FLASH_CUSTOM como o diretório de base dos componentes, e se descrirá ao presente o conteúdo.

Sub-directório e conteúdo

Os sub-directórios de FLASH_CUSTOM são os seguintes :

  • um primeiro diretório nomeado _params, no qual se encontra um ficheiro de configuração _param_main.txt, que se deixará em lista.
  • um segundo diretório, nomeado FlowCharting, no qual se encontram 3 sub-directórios :
    • os subdiretórios PadDev e PadPlayer. Estes dois diretórios contém cada um um ficheiro de configuração nomeado _params.txt. Mesmo se estes dois ficheiros podem tecnicamente ser diferentes, é desaconselhado de os configurar da mesma maneira. O seu conteúdo, escrito em JSON, dá o nome e acondicionamento das suas bibliotecas (nota : cada uma das suas bibliotecas está um dossier num dossier libraries_custom).
    • o sub-diretório libraries_custom contém as bibliotecas gráficas.

o directório libraries_custom contém na sua volta um sub-directório por biblioteca gráfica, e no sub directório, vai-se encontrar um subdiretório por grupo (um grupo sendo uma lista de temas) depois um sub-direcório por tema (um tema sendo uma coleção de imagens) É neste caso o último diretório que se encontra estas imagens, que são ficheiros podem ter uma das extenções seguintes : .jpg, .gif, .png. Encontraremos também um último ficheiro de configuração nomeado list.txt, que dá a lista dos ficheiros imagem presentes no directório.

Imaginemos, por exemplo, que o software seja instalado num grupo de sociedades. Poder-se-á então ter :

  • uma biblioteca por sociedade : MYCORP, MASOC...MEINGMBH
  • no caso de biblioteca, uma lista de grupos : fotografias, imagens, backgrounds, logospar exemple
  • em cada grupo, os temas Para o grupo fotografias, poder-se-á dispor de um tema Estabeleicmentos, que contém as fotos dos diferentes estabeleicimentos da sociedade, de um tema "People", que contém fotos das pessoas da sociedade, de um tema Produtos, que contêmn as fotos dos produtos, etc.

Ter-se-á então uma hierarquia do tipo seguinte :

 MYCORP

 

 

 

fotografias

 

 

 

Pessoal

 

 

 

 

 list.txt

 

 

 

 MARTIN.jpg

 

 

 

HENRY.png

 

 

 

DAVID.gif

 

 

Estabelecimentos :

 

 

 

 

 list.txt

 

 

 

PARIS.gif

 

 

 

LONDON.jpg

 

 

...

 

 

 imagens

 

 

 

 

esquemas

 

 

 

 

 list.txt

 

 

 

MAP.png

 

...

 

 

MASOC

 

 

 

 

...

 

 

Fichier _params.txt

Este ficheiro se encontra os dois diretório PadDev e PadPlayer, e dá o nome e acondicionamento das suas bibliotecas, como o mostra o exemplo seguinte :

{

  "bibOriginsInfo" :

          [      {"labels" :

                       [

                            {"lang" : "ENG" , "label" : "Company MYCORP"},

                            {"lang" : "FRA" , "label" : "Société MYCORP"},

....

                            {"lang" : "GER" , "label" : "MYCORP Gesellschaft" }

                        ],

                   "originSubpath" : "../FLASH_CUSTOM/FlowCharting/libraries_custom/MYCORP",

                   "id" : "identificateur_1"

                   },

          [      {"labels" :

                            {"lang" : "ENG" , "label" : "Company MASOC"},

....

                              {"lang" : "GER" , "label" : "MASOC Gesellschaft" }

                        ],

                   "originSubpath" : "../FLASH_CUSTOM/FlowCharting/libraries_custom/MASOC",

                   "id" : "identificateur_2"

                   },

...

          [      {"labels" :

                              {"lang" : "ENG" , "label" : "Company MEINGMBH"},

....

                               {"lang" : "GER" , "label" : "MEINGMBH Gesellschaft" }

                      ],

                   "originSubpath" : "../FLASH_CUSTOM/FlowCharting/libraries_custom/MEINGMBH",

                   "id" : "identificateur_M"

                   }

          ],

          "r" : 0,

          "v" : 1

}

No ficheiro que precede :

  • "bibOriginsInfo" referência um quadro cujo cada elemento (entre chavetas) contém as características de uma biblioteca. Como todos os elementos de quadro em JSON, estes elementos são separados por uma vírgula (não existem para além do último elemento).
  • uma biblioteca está caracterizada pelas informações :
    • "labels", que corresponde ao intitulado a afixar por editor de processo, e que é ele mesmo um quadro de estruturas (um elemento por código de conexão, o código língua sendo seguido do elemento intitulado)
    • "originSubpath", que corresponde ao caminho do sub-diretório onde se encontra guardada a biblioteca.
    • "id", que corresponde a um identificador livre mas único.
    • "r" e "v", que são dois parêmetros a não modificar.

Assim, no ficheiro precedente, observar-se-á que os directórios de base das bibliotecas são respectivamente MYCORP, MASOC, MEINGMBH.

Fichier sgx_libsinfo.txt

ESte ficheiro se encontra no diretório de base da biblioteca (MYCORP no exemplo precedente), e contém uma descrição ao formato JSON da estrutura da biblioteca. Em se inspirando do exemplo precedente, ter-se-á um conteúdo tal que este:

{  "libsinfo" :
      [
          { "biblist" :
                [
                   {"bibid" : "mycorp_1",
                     "catsubpath" : "people",
                     "h":70,
                     "w":70,
                     "type":"file",
                     "labels" :
                          [
                                 {"lang" : "ENG" , "label" : "People" },
                                 {"lang" : "FRA", "label" : "Pessoas" },
....
                                 { "lang" : "GER", "label" : "Leute"}
                          ]
                   },                  
....                   
                   { "bibid" : "mycorp_N",
                      "catsubpath" : "sites",
                      "h":30,
                      "w":40,     
                      "type":"file",
                      "labels" :
                          [  
                                 {"lang" : "ENG" , "label" : "Estabeleicmentos" },
...
                                 { "lang" : "GER", "label" : "Standorte"}
                          ]
                   }
                ], 
            "labels" :
                   [
                      {"lang" : "ENG" , "label" : "Fotografias" },
                      {"lang" : "FRA", "label" : "Fotos" },
....
                      {"lang" : "GER", "label" : "Fotos" }
                   ],
            "familysubpath":"pictures",
            "familyid":"pic_mycorp"
          },
          { "biblist" :
                [
                   { "bibid" : "mycorp_2",
                     "catsubpath" : "esquemas",
                     "h":70,
                     "w":70,
                     "type":"file",
                     "labels" :
                          [
                                 {"lang" : "ENG" , "label" : "Esquemas" },
....
                                 {"lang" : "FRA", "label" : "Schemas" }
                          ]
                   },                  
....
                   }
                ], 
            "labels" :
                   [
                      {"lang" : "ENG", "label" : "Imagens" },
                      {"lang" : "FRA", "label" : "Imagens" },
....
                      {"lang" : "GER", "label" : "Bilder" }
                   ],
            "familysubpath":"images",
            "familyid":"img_mycorp"
          }
      ],
   "oid" : "mycorp",
   "r" : 0,
   "v" : 1
}

No ficheiro que precede :

  • "libsinfo" referência um quadro cujo cada elemento contém as características de um grupo. Como todos os elementos de quadro em JSON, estes elementos são separados por uma vírgula (não existem para além do último elemento).
  • um grupo está caracterizado pelas informações :
    • uma lista de temas num quadro, identificados por "bibid", que guarda o subdiretório do tema em "catsubpath", das características "h" e "w" de dimensionamento de vinhetas, um tipo de biblioteca nomeado "tipo" que contém "ficheiro" se se descreve uma lista de ficheiros gráficos no diretório do tema (um outro valor possível está "swf" se se descreve uma lista de ficheiros swf), e um quadro de intitulados por língua para nomear o tema.
    • um quadro de designações por língua que permite dar um nome ao grupo.
    • um caminho pelo grupo ("familysubpath", que corresponde ao caminho do sub-diretório onde se encontra guardado o grupo).
    • "familyid", que corresponde a um identificador livre mas único.

Enfim, encontram-se os últimos parâmetros do ficheiro.

  • "r" e "v", que são dois parêmetros a não modificar.
  • "oid", que referencia de maneira única a biblioteca.

Assim, neste exemplo, vê-se aaprecer os grupos fotografias(com os temas pessoas, e estabelecimetos) e imagens com o tema esquemas).

Os parâmetros "h" e "v", que definem o tamanho das vinhetas em pixeis aparacem em explorador de imagens para um tema dado, tomando o valor 40 cada um se não estão registados.

A título de exemplo, eis que se dá uma lista de vinhetas :

  • em dimensão 40x40 :

 ./GES_APR_img4040.jpg

  • em dimensão 180x60

 ./GES_APR_img18060.jpg

Ficheiro list.txt

Este ficheiro se encontra no directório de base de um tema, a lista dos ficheiros de imagens que se encontram. Deste facto, a sua estrutura é simples, e toma a forma seguinte :

{  "files" :
      [
          { "nome" : "MARTIN.jpg" }
          { "nome" : "HENRY.png" }
          { "nome" : "DAVID.gif" }
      ] 
}

Criação de níveis suplementares na hierarquia

É possível de reacrescentar os níveis suplemetares na hierarquia das bibliotecas / grupo / tema, afim de ter uma herarquia a mais de dois níveis.

Imaginemos por exemplo que, na hierarquia prexcedente, tem-se definido as hierarquias que, a partir das imagens,propõe um diretório de cartas (mapa) nas quais se encontram uma hierarquia país, região ou lista, departamento ou condado, cidade, com diferentes cartas de uma sociedade ao interior de cada dossier. Teremos entõa dossirs tais que :

MYCORP/images/map/USA/tenessee/hamilton/chattanooga (contendo dieferentes planos da cidade)

Para realizar isto, falta :

  • criar as hierarquias de dossier correspondentes
  • modificar os dois ficheiros sgx_libinfo.txt afim de modificar a definição dos sub-dossiers assim que os intitulados correspondentes :
    • "catsubpath":"images/map/USA/tenessee/hamilton/chattanooga"
    • "label":"images;map;USA;tennessee;hamilton;chattanooga"
    • "label":"Images;Maps;US Country;Tennesse State;Hamilton County;City of Chattanooga"

É necessário notar que, mesmo se pretenda multiplicar o número de sub-dossiers da sorte, falta os descrever em extenso na lista, o que pode ser fastidicioso. Por outro lado, apenas um nível terminal da lista pode conter os ficheiros (e o ficheiro list.txtcorrespondente).

É por contra, possível de ter um número de níveis hierarquicos diferem por ramificações. Assim, por exemplo, simultaneamente na hierarquia apresentada em cima, pode-se ter uma hierarquia tal que :

MYCORP/pictures/animals/mammals/cows (o dossier em questão contendo as fotos de vacas)

Geração arquivo

Uma vez as manipulações precendentes criados, é possível de utilizar diretamente as bibliotecas criadas sobre a arborescência servidor sem nenhuma restrição em modo web.

Para os utilizar em modo cliente-servidor, é necessário de criar um arquivo (de nome XCLI.tar( contendo o conjunto dos ficheiros encontrados no diretório FLASH_CUSTOM.

Isto é realizado por um utilitário dedicado.