Docs / Recursos do IDE / Ferramentas Bidirecionais

Ferramentas Bidirecionais: Designer ↔ Sincronizacao de Codigo

O motor de Ferramentas Bidirecionais do HarbourBuilder garante que seu design visual de formulario e seu codigo fonte estejam sempre perfeitamente sincronizados. Cada alteracao feita no Designer de Formularios visual e imediatamente refletida no codigo gerado, e cada alteracao estrutural feita no codigo e instantaneamente visivel no designer.

Sua Logica Esta Segura

O motor de regeneracao de codigo atualiza apenas linhas de definicao de UI (DEFINE, @ POSITION, propriedades). Suas implementacoes de METHOD, manipuladores de eventos e logica customizada nunca sao tocados ou sobrescritos.

Como Funciona

Quando voce trabalha no Designer de Formularios, cada acao — soltar um controle, redimensionar, mover, alterar uma propriedade — aciona uma regeneracao de codigo direcionada. O motor analisa seu arquivo fonte existente, identifica as secoes de definicao de UI, atualiza-as e deixa tudo mais intacto.

sequenceDiagram participant D as Designer de Formularios participant E as Motor de Codigo participant F as Arquivo Fonte participant P as Analisador D->>E: Controle solto no formulario E->>P: Analisar arquivo existente P->>P: Encontrar blocos de definicao de UI P->>P: Preservar corpos de METHOD E->>F: Regenerar apenas linhas de UI E->>D: Atualizar visao do designer Note over D,F: Implementacoes de METHOD nunca sao modificadas

O Que e Regenerado

O motor de codigo identifica e atualiza apenas estas categorias:

Categoria	Exemplo	Regenerado?
Instrucoes DEFINE	`DEFINE FORM`, `DEFINE BUTTON`	Sim
Linhas @ POSITION	`@ 10, 20 BUTTON ...`	Sim
Atribuicoes de propriedade	`::cTitle := "Ola"`	Sim
Definicoes CLASS	`CLASS TForm1 FROM TForm`	Sim
Criacao de controle via codigo	`TButton():New()`	Sim
Implementacoes de METHOD	`METHOD OnClick() CLASS TForm1`	Nao
Corpos de manipuladores de eventos	`bAction := { \|\| ... }`	Nao
Funcoes customizadas	`static function MyHelper()`	Nao
Comentarios	`// TODO: ...`	Nao

Antes e Depois: Regeneracao de Codigo

Antes: Voce solta um botao no designer

CLASS TForm1 FROM TForm

   DATA oBtn1

   METHOD CreateForm()
   METHOD OnBtnClick()

ENDCLASS

METHOD CreateForm() CLASS TForm1
   ::cTitle  := "Form1"
   ::nWidth  := 400
   ::nHeight := 300
return nil

METHOD OnBtnClick() CLASS TForm1
   // Sua logica customizada - PRESERVADA
   MsgInfo( "Botao clicado!" )
return nil

Depois: Codigo regenerado (botao adicionado, metodo intacto)

CLASS TForm1 FROM TForm

   DATA oBtn1

   METHOD CreateForm()
   METHOD OnBtnClick()

ENDCLASS

METHOD CreateForm() CLASS TForm1
   ::cTitle  := "Form1"
   ::nWidth  := 400
   ::nHeight := 300

   // --- NOVO: Botao adicionado pelo designer ---
   @ 120, 140 BUTTON ::oBtn1 PROMPT "Button1" ;
      OF Self SIZE 120, 32 ;
      ACTION ::OnBtnClick()
return nil

METHOD OnBtnClick() CLASS TForm1
   // Sua logica customizada - PRESERVADA
   MsgInfo( "Botao clicado!" )
return nil

Observe a preservacao

O corpo do metodo OnBtnClick permanece completamente inalterado. Apenas o metodo CreateForm recebeu a nova definicao do botao.

Fluxo de Trabalho

graph TD A["Comecar com formulario vazio"] --> B["Soltar controles da paleta"] B --> C["Definir propriedades no Inspetor de Objetos"] C --> D["Codigo gerado automaticamente"] D --> E{"Precisa de logica customizada?"} E -->|"Sim"| F["Alternar para Visao de Codigo"] E -->|"Nao"| G["Compilar e executar"] F --> H["Escrever implementacoes de METHOD"] H --> I["Voltar ao Designer"] I --> J["Continuar design visual"] J --> B G --> K["Concluido"] style A fill:#d2a8ff,stroke:#bc8cff,color:#0d1117 style F fill:#58a6ff,stroke:#388bfd,color:#0d1117 style H fill:#3fb950,stroke:#2ea043,color:#0d1117 style K fill:#3fb950,stroke:#2ea043,color:#0d1117

Regras de Analise de Codigo

O motor de regeneracao usa estas regras para identificar secoes seguras para modificar:

Blocos CLASS / ENDCLASS — Declaracoes DATA e METHOD sao atualizadas; corpos de METHOD existentes sao ignorados.
Blocos DEFINE FORM — Propriedades dentro de blocos DEFINE sao regeneradas.
Instrucoes @ POSITION — Posicao, tamanho e clausulas de propriedade sao atualizadas.
Blocos ACTIVATE FORM — Clausulas de ativacao sao regeneradas.
Todo o resto — Funcoes estaticas, corpos de METHOD, comentarios e codigo customizado sao deixados intactos.

Boa Pratica

Mantenha sua logica customizada em implementacoes de METHOD separadas ou funcoes estaticas em vez de inline dentro de blocos DEFINE. Isso facilita para o motor de regeneracao identificar e preservar seu codigo.

Tratamento de Conflitos

Se voce editar manualmente uma linha que o designer tambem gerencia (ex: alterar a posicao de um botao no codigo enquanto ele tambem esta na tela do formulario), a visao do designer prevalece na proxima regeneracao. Para evitar conflitos:

Use o Inspetor de Objetos para alterar propriedades em vez de editar o codigo diretamente.
Use a tela do Designer para mover e redimensionar controles.
Use o Editor de Codigo apenas para implementacoes de METHOD, manipuladores de eventos e funcoes customizadas.

Bidirecional e Confiavel

O motor de regeneracao foi testado com mais de 200 casos de borda, incluindo blocos DEFINE aninhados, multiplos formularios em um arquivo, sintaxe mista baseada em classes e procedural, e arquivos com comentarios extensivos.

Alternando Entre Visoes

Use o botao de alternancia na barra de ferramentas ou o atalho de teclado para alternar entre as visoes Designer e Codigo:

Atalho	Acao
F12	Alternar entre visoes Designer e Codigo
Ctrl+Tab	Circular pelas abas do editor abertas
Ctrl+S	Salvar (dados de design e codigo)

Nesta Página

Primeiros Passos Paleta de Componentes Recursos do IDE Tutoriais Referencia Plataformas Como Funciona O Que e Regenerado Antes e Depois: Regeneracao de Codigo Antes: Voce solta um botao no designer Depois: Codigo regenerado (botao adicionado, metodo intacto) Fluxo de Trabalho Regras de Analise de Codigo Tratamento de Conflitos Alternando Entre Visoes