Visual Editor Architecture - Moonshine-IDE/Moonshine-IDE GitHub Wiki

Summary

Visual Editor provides a way to design an interface visually and then generate an application based on this design in different languages

There are currently three different versions of the Visual Editor. We would like to unify these designs:

• Flex Visual Editor (#6). Convert mockup components to Flex code. This design is obsolete.
• PrimeFaces Visual Editor (#165). This was intended to be the main framework, which would be used for different languages. Currently this only supports PrimeFaces
• Domino Visual Editor - This has new components that are based on the components in HCL Domino Designer. For now, this is independent of the PrimeFaces Visual Editor components. The following languages are supported for output:
  • Domino - Generate a Domino database. Only forms are supported currently:
  • Apache Royale - Generate an Apache Royale UI application. This will require a backend implementation.

Repository Overview

VisualEditorConverterLib

Repository: https://github.com/Moonshine-IDE/VisualEditorConverterLib

Purpose: Define object representations of the Visual Editor components, and converters for the different target languages.

Major Classes and Packages:

• Components
  • Domino components
• Converters
• DominoConverter
• TODO: Describe any other major packages or directories

MockupVisualEditor

Repository: https://github.com/Moonshine-IDE/MockupVisualEditor

Purpose: Implement the mockup editor UI.

Major Packages and Classes:

surfaceComponents class: work for visual components in the visual editor.

propertyEditors class: work for the property of the visual components.

• Domino
  • Domino surfaceComponents components
  • Domino propertyEditors for components
• Flex
  • Flex surfaceComponents components
  • Flex propertyEditors components
• PrimeFaces
  • PrimeFaces surfaceComponents components
  • PrimeFaces propertyEditors components

TODO: Describe any other major packages or directories

Moonshine-IDE

Repository: https://github.com/Moonshine-IDE/Moonshine-IDE

Purpose: Integration and templates.

Major Packages and Classs:

• Domino converter: VisualEditorViewer#getMxmlCode() will identify projects and files, and perform Domino conversions based on the project and file types.
• Apache Royale converter: This line will convert the current open Domino Visual Editor project to an Apache Royale project.
• TODO: Describe any other major packages or directories

Implementation Guidelines

Flex Visual Editor

This is obsolete, but we will add documentation if we revisit this later.

PrimeFaces Visual Editor

Primary Issue: #165

Primary Branches: None Active

Components:

• Template: TODO
• Mockup Controls: TODO
• Converter: TODO

How to add a new control

TODO: guidelines on what classes need to be added and where to add a new control to the mockup

How to add a new language

TODO: guidelines on where to start when adding support for a new output language. We can keep this as a high-level, theoretical framework for now.

Domino Visual Editor

Primary Issues

• Apache Royale
• Domino

Major Branches:

• Apache Royale: features/issue_675_royale_generate_domino_visual_editor
  • Moonshine-IDE
  • MockupVisualEditor
  • VisualEditorConverterLib
• Domino: features/issue_646_ve_notes_domino_support_fresh (CLOSED)
  • Moonshine-IDE
  • TODO: MockupVisualEditor
  • TODO: VisualEditorConverterLib

Components:

• Template:
  • Royale Template
• Mockup Controls: TODO
• Converter:
  • Domino Conversion: TODO
  • Royale Conversion
    • The conversion is triggered from Project > Generate Apache Royale Project. This triggers this method.
    • This triggers a chain of methods through MockupVisualEditor: CreateProject.as > EditingSurface.as > EditingSurfaceWriter.as > Div.as)
    • The root component is converted in VisualEditorConverterLib, Div.as.
    • This will iterate through the components in the Visual Editor tree and generate a corresponding interface.

How to add a new control

TODO: guidelines on what classes need to be added and where to add a new control to the mockup

How to add a new language

TODO: guidelines on where to start when adding support for a new output language. We can keep this as a high-level, theoretical framework for now.