Personalização do aplicativo

Funcionalidade exposta na estrutura de extensão

Expusemos um conjunto de funções e getters em um proxy que pode ser usado para acessar dados, configuração e eventos de acionador. Abaixo está uma lista e como acessá-las.

interface EventData {
  key?: string,
  keys?: string[]
  view?: any,
  next?: any,
  error?: any,
  completed?: any,
  id?: any
}

* getValue(key)
* setValue(key, value)
* subject // getter
* subscribe(opts: EventData)
* subscribeAppEvent(opts: EventData)
* subscribeAppModel(key, next)
* subscribeParentEvent(opts: EventData)
* parentEventHandlerNext(eventName: string, opts: any)
* appModelNext(eventName:string, opts)
* appEventHandlerNext(eventName:string, opts)
* next(eventName:string, opts, eventHandler?)
* viewConfig //getter
* args //getter

Nosso aplicativo segue uma estrutura MVC (Model, View, Controller)

Modelo

O modelo define os vários atributos e armazena seus valores. Os valores dos vários atributos armazenados no modelo podem ser acessados do controlador usando a sintaxe

this.getValue('attributeName')

Para personalização no aplicativo, todos os atributos recém-criados serão adicionados a um mapa no modelo.
Para definir um novo atributo no modelo, usaremos a seguinte sintaxe no controlador:

// If a key is not already in model then it will be added to extraProps
this.setValue('key', value)

Para acessar um atributo adicionado ao modelo, usaremos a seguinte sintaxe:

const value = this.getValue("key")

Exibir

A exibição define a interface do usuário do aplicativo. Usamos arquivos JSON para definir a visualização dos arquivos. Aqui, definimos os componentes, o css (conforme fornecido na classe de extração de componentes) e renderizamos os valores armazenados no modelo.
Em nosso aplicativo, cada exibição é definida usando um JSON. Os JSONs são referenciados usando suas IDs exclusivas chamadas de id.

Controlador

O controlador é usado para manipular eventos e processar os dados. O controlador é usado para buscar e enviar dados do servidor, é a interface entre o que é exibido na interface do usuário e armazenado no back-end.

methodName: function(args){
    // functionality
}

O methodName aqui serve como key para fazer referência ao método no JSON (exibição) ou em outras funções

this.next('methodName', args)

Exemplo

Agora vamos usar um exemplo simples para mostrar como esses três componentes interagem entre si.
Adicionaremos um botão que alterna o valor do rótulo em um clique

Exibir exemplo

Abaixo, definimos o JSON para um botão que mostra um texto dinâmico armazenado no modelo sob o nome da variável buttonLabel.
Neste exemplo, clicar no botão altera seu rótulo.

{
    "component": "button",
    "label": "@extraProps.buttonLabel",
    "variant": "cta",
    "on-click": "switchButtonLabel",
}

Exemplo de modelo

neste caso, extraProps.buttonLabel contém o rótulo do botão

Exemplo de controlador

  controller: {
    init: function () {
      this.setValue("buttonLabel", "Submit")
    },

    switchButtonLabel(){
        const buttonLabel = this.getValue("buttonLabel") === "Submit"? "Cancel" : "Submit"
        this.setValue("buttonLabel", buttonLabel)
    }
  }

O GIF abaixo mostra o código acima em ação

Exibir exemplo de configuração

Nesse caso, acessamos o evento de modo de pesquisa usando viewConfig e acionamos um evento para atualizá-lo

  {
    id: 'repository_panel',
    controller: {
      init: function () {
        console.log('Logging view config ', this.viewConfig)
        this.next(this.viewConfig.items[1].searchModeChangedEvent, { searchMode: true })
      }
    }
  }

Exemplo de assinatura

Nesse caso, adicionamos a assinatura no arquivo renomear ao log do console quando a opção de renomeação de arquivo é clicada

  {
    id: 'repository_panel',
    controller: {
      init: function () {
        this.subscribe({
          key: 'rename',
          next: () => { console.log('rename using extension') }
        })
      }
    }
  }

Exemplo de evento de aplicativo de assinatura

Nesse caso, console-se logon no documento ativo alterado (alterando guias na interface do editor)

  {
    id: 'repository_panel',
    controller: {
      init: function () {
        this.subscribeAppEvent({
          key: 'app.active_document_changed',
          next: () => { console.log('Extension: active document changed') }
        })
      }
    }
  }

Assinar o exemplo de eventos do modelo de aplicativo

Exemplo para assinar eventos de modelo de aplicativo, como app.mode

  {
    id: 'repository_panel',
    controller: {
      init: function () {
        this.subscribeAppModel('app.mode',
          () => { console.log('app mode subs') }
        )
      }
    }
  }

Exemplo de eventos do controlador pai

Neste exemplo, adicionamos a assinatura no evento tabChange, que é um evento do controlador left_panel_container que atua
como controlador pai para repository_panel

  {
    id: 'repository_panel',
    controller: {
      init: function () {
        this.subscribeParentEvent({
          key: 'tabChange',
          next: () => { console.log('tab change subs') }
        })
        this.parentEventHandlerNext('tabChange', {
          data: 'map_panel'
        )
      }
    }
  }

Próximo modelo de aplicativo e controlador de aplicativo

Elas podem ser acionadas diretamente ao conhecer o evento correto a ser acionado e seus dados

  {
    id: 'file_options',
    controller: {
      init: function () {
        this.appModelNext('app.mode', 'author')
        this.appEventHandlerNext('app.active_document_changed', 'active doc changed')
      }
    }
  }