Create visual IDE companion for Material UI

 

WARNING - THIS PARTICULAR BLOG ENTRY IS A WORK IN PROGRESS. (SINCE IT COVERS SUCH A LARGE PROGRAM AND IS LIKELY GOING TO BE BROKEN UP).

"Today, over 10,000 JavaScript UI libraries are available for web developers." - Source: Hackr.io magazine, Article: "Top 10 JavaScript UI library You should know in 2023", Written By: Swapnil Banga, 01 Mar 2022

Challenge: How improve things for the Material UI library (https://mui.com/)
Problem: Code editors and IDEs for Javascript and React have no VCL and GUI like Delphi does.
Goal: Write a visual IDE companion for Material [Design] UI (https://mui.com) controls.
Target Audience: Developers

Research:  Codux at https://www.codux.com
     Module Federation - https://malcolmkee.com/blog/a-plugin-based-frontend-with-module-federation/

1) Demo Visual Studio Code editor actively showing the change of the text file
2) Demo how master and detail screens work in HTML environment.
3) Show Material UI website.
 (What if Delphi met React (specifically Material UI)?)
4) Demo Delphi v11
5) Demo writing React code in Visual Studio code

======================================================

Plugin or Module Federation Notes:

  Plugin or module federation architecture is achieved through interfaces, APIs, or hooks that conform to a contract.  Usually the introduction of a plugin occurs with the presence of a new file in a particular directory.  An example for plugins could be that instead of controls on the customer detail screen with hard-coded controls at hard-coded placement there controls that dynamically change when read-in that field's label and control.

  A core question is how often do we detect the new plugin option.  Overall, we have to: 1) detect control changes, 2) render item / refresh the screen. Our timing options ares: 1) On app startup?  2) On screen load?  3) Polling every X seconds?  4) Event subscription via operating system?

========================================================

IMPLEMENTATION - PICK JAVASCRIPT FOLDER
  Need to have intro screen that picks the folder

IMPLEMENTATION - DIRECTORIES
1) C:\Controls directory with UILibraries.json.
2) Each myFramework directory (such as C:\Controls\MaterialUI ) will have myControl.txt and myControl.jpg

IMPLEMENTATION - POLLING AND HASH
  We want dynamic changing when new control or new properties are added OR depreciation of controls or properties happens.
1) C:\Controls directory with UILibraries.json is polled or event raised for changes looking for has its hash value changed

IMPLEMENTATION - FILE CONTENTS
1) C:\Controls directory with UILibraries.json that contains "language", "framework":

[
    {
      "language": "Javascript",
      "framework": "React",
      "UI Library": ["Angular Material", "NGX Bootstrap", "DHTMLX", "Webix", "Base web", "MaterialUI", "Evergreen", "Rebass", "Grommet", "VMware Clarity"]
    },
    {
      "language": "Rust",
      "framework": "N/A",
      "UI Library": ["Tauri", "Druid", "Slint", "gtk-rs", "iced", "relm", "The Azul framework", "egui"],
    }
]

This translates to tabsheets on the Control Palette.

2) Each myFramework directory (such as C:\Controls\MaterialUI ) will have Library.json that contains "category", and "control"
[
    {
      "category": "Inputs",
      "controls": ["Autocomplete", "Button", "ButtonGroup", "Checkbox", "Floating Action Button", "Radio Group", "Rating", "Select", "Slider", "Switch", "Text Field", "Transfer List", "Toggle Button"],
      "favorites": ["Button", "Text Field"],
      "isCollapsed": "true"
    },
    {
      "category": "Data Display",
      "controls": ["Avatar", "Badge", "Chip", "Divider", "Icons", "Material Icons", "List", "Table"]
      "favorites": [],
      "isCollapsed": "true"
    }
]

Show controls in order as per file.
This translates to icons displayed on the Control Palette (see myControl.jpg).
The selected control will appear different than the other icons.

3) Each myFramework directory (such as C:\Controls\MaterialUI ) will have a JSON per control such as Autocomplete.json that has:

[
    {
      "category": "Clearing",
      "displays": ["Clear on Escape", "Clear on Blur"],
      "hints": ["If true, clear all values when the user presses escape and the popup is closed.", "If true, the input's text is cleared on blur if no value is selected."],
      "properties": ["clearOnEscape", "clearOnBlur"],
      "types": ["bool", "bool"],
      "default": ["false", "false"],
      "controlToUse": ["checkBox", "checkBox"],
      "isCollapsed": "true"  
    },
    {
      "category": "Disabled",
      "displays": ["Disable Close On Select" "Disable Clearable", "Disable List Wrap", "Disabled", "Disabled Portal", "Disabled Caption", "Disabled Rows"],
      "hints": ["If true, the popup won't close when a value is selected.", "If true, the input can't be cleared.", "If true, the list box in the popup will not wrap focus.", "If true, the component is disabled.", "If true, the Popper content will be under the DOM hierarchy of the parent component.", "Button caption when disabled", "Rows of choices disabled"],
      "properties": ["disableCloseOnSelect", "disableClearable", "disableListWrap", "disabled", "disabledPortal", "disabledCaption", "getOptionDisabled"],
      "types": ["bool", "bool", "bool", "bool", "bool", "string", "rowList"],
      "default": ["false", "false", "false", "false", "false", "Inactive", "[]"],
      "controlToUse": ["checkBox", "checkBox", "checkBox", "checkBox", "checkBox", "textBox", "multiSelectComboBox"],
      "isCollapsed": "true"
    },
    {
      "category": "Default Value",
      "displays": ["Default"],
      "properties": ["defaultValue"],
      "types": ["string"],
      "default": ["-1"],
      "controlToUse": ["singleSelectComboBox"],
      "isCollapsed": "true"  
    },
]

Show properties in order as per file.
This translates to list of properties on the Properties Explorer for the last selected control.

Types:
   1) For these the shorter abbreviations will be used such as "bool" for "boolean" or "int" for "integer".
   2) Special type is "rowList" which List<Int>() which will have the rows affected (see Disabled Options on Material UI)
   3) "default" of "-1" = undefined
   4) "default" of "[]" = empty collection. (Items will be referred to by position/index rather than id.)
   5) "default" of "countries[] of countries.json" = collection of countries in the file countries.json.
   6) "type" on "Default Value" is string so it could be int, double, string, or other.

Categories:
   The program will do the categories as bold label that is collapseable.

Big Important Questions:
   1) How handle required/important properties?
   2) What code to fire to edit on the text file on drag-and-drop?
   3) How handle events on things like buttons?
   4) How handle developer's code on things like buttons?
   5) How handle data bound against control?

IMPLEMENTATION - ON DRAG AND DROP, HOW DO ALL NON-DEFAULT VALUE PROPERTIES?

IMPLEMENTATION - ON DRAG AND DROP, HOW KNOW LOCATION OF PARENT?  ASSUME IT IS WHERE YOU DRAG TO.

IMPLEMENTATION - ON DRAG AND DROP, HOW DOES IT READ THE CODE IT NEEDS TO IMPLEMENT?


CONTROL PALETTE
  Holds all control options.
* Html page that assumes form is body has div, h1, h2, etc., p, hr, img, t, ul, and "li" (if ul is on the page)
* New library = new tab sheet on palette
* After control selected, allow drag and drop from the control palette onto screen layer. WYSIWYG.
* FEATURE: Has new tabsheet of favorites
* FEATURE: Right-click menu should offer "Add to Favorites"

PROPERTIES EXPLORER
  Shows all the properties of the last selected control
* Inline settings of component are visual properties

SCREEN
* Has HTML body page properties and reload when they change such as:

Delphi example:

object Form3: TForm3
  Left = 0, Top = 0, Caption = 'Form3', ClientHeight = 442, ClientWidth = 628, Color = clBtnFace,  Font.Charset = DEFAULT_CHARSET, Font.Color = clWindowText, Font.Height = -12, Font.Name = 'Segoe UI', Font.Style = [], TextHeight = 15
end

Our example:


* This needs to read the HTML file and show visually the effects of the properties
* Can select controls on this including the overall form.
* Visual components drag and drop from the control palette onto screen layer. WYSIWYG.
   After drag and release, it needs to:
       1) update the file with the control and its default properties
       2) set focus on the Properties Explorer
    Maybe error version if certain properties are empty.
    Maybe inactive version if empty.

Delphi example:
  object Edit1: TEdit
    Left = 176,  Top = 53, Width = 121, Height = 23, TabOrder = 0, Text = 'Edit1'
  end

Our example:
       

So maybe Non-Dialog button is dragged to screen, then:
  1) button1 created in HTML
  2) button1.OnClick command created on Command page
  3) button1.OnError command created on Command page
  4) button1 is loaded into ObjectInspector and its properties listed
     [need some way to add OnPreClick command later]
     [need some way to add OnPostClick command later]

So maybe Dialog button is dragged to screen, then:
  1) pageSetupDialogButton1 created in HTML
  2) pageSetupDialogButton1.OnClick command created on Command page
  3) pageSetupDialogButton1.OnError command created on Command page
  4) pageSetupDialogButton1 is loaded into ObjectInspector and its properties listed
 
* Show his design set
How show empty ones?

DATA
* "Test Data" layer
  * Static - (maybe choose the type of test data - such as countries, times, movies)
  * Database Direct - so hits database directly bypassing the web services
  * Web API - (like places using Google Maps Places Autocomplete. WebSite component)
* "Real Data" layer
  * Static - (maybe choose the type of test data - such as countries, times, movies)
  * Database Direct - so hits database directly bypassing the web services
  * Web API - (like places using Google Maps Places Autocomplete. WebSite component)

CODE
* Code/Error layer
* Perhaps an event or action or command layer. How intergrate with Code layer? Maybe each thing has OnError event?
* Perhaps a dialog layer with specific buttons. How intergrate with Code layer?

* Add general tools like MS Paint such as color picker
Maybe: Secrets component
 
How images are done?


ADVANTAGES:
1) Faster development time. (Github's Copilot helps)
2) Can visually check your work. (hot reload)
3) Not need to learn the code that makes the components (Intellisense but only if type first few letters)
4)