System Designer

System Designer

  • Languages iconΕλληνικά
    • English
    • Português (Brasil)
    • Svenska
    • 繁體中文
    • Help Translate
  • SUPPORT
  • GITHUB

›Tutorials

Introduction

  • What is System Designer?
  • What is Design First?
  • Quick Start
  • Quick Start in videos

Guides

  • Installation
  • Create a System
  • Create a Schema
  • Edit a model
  • Create a Behavior
  • Create a Type
  • Create a Component
  • Run your System
  • Export a System
  • Import a System
  • Generate a diagram
  • Sync your systems with GitHub
  • Design a remote client system
  • Design a remote server system
  • Manage Extensions
  • Extend System Designer
  • Shortcuts

Tutorials

  • List of Examples
  • Bundle your CSS
  • Bundle your JavaScript
  • Δέσμευση HTML
  • Test a server-side application
  • Create a NPM module
  • Create a website
  • Listen to a model event
  • Listen to a data store event
  • Send messages
  • Send messages to other systems
  • Create an extension
  • Generate a model from a JSON file
  • Create a Graph system

Articles

  • Άρθρα σχετικά με το έργο

About

  • Who is behind System Designer?
  • Privacy Policy
  • License
Translate

Generate a model from a JSON file

In this tutorial we will show how to generate a model from a JSON file.

Install the extension

  • click on the extension manager button on the left toolbar,

Image Alt

  • a dialog is shown,
  • select the extension Generate a model from a JSON file

Image Alt

  • click on the Add button.

You will see a message that tells that the extension is installed and a new icon appears on the left toolbar.

Image Alt

Generate the model

  • click on it,

Image Alt

  • set a name for your model, MENU for example,
  • set a JSON, example:
{
  "menu": {
    "id": "file",
    "value": "File",
    "popup": {
      "menuitem": [
        { "value": "New", "onclick": "CreateNewDoc()" },
        { "value": "Open", "onclick": "OpenDoc()" },
        { "value": "Close", "onclick": "CloseDoc()" }
      ]
    }
  }
}
  • click on 'OK' button.

You will see a message that says that a model has been generated,

You can go have a look on the model that has been generated.

Create a component

  • now click on Components tab,
  • click on MENU under Models on the right,
  • click on '+'' button on the left toolbar

Image Alt

A new component is created.

  • click now on the component to edit it,
  • click on Component tab,
  • paste the JSON you put to create the model,

Image Alt

We use the same JSON for creating the model and creating the component to validate that the model can validate this JSON.

  • save it,

Use APIs to navigate through your component

  • click on the Behaviors tab,
  • click on your system name under System on the right,

Image Alt

  • click on start behavior to edit it,
  • edit the code:
function start() { 
  // get the component
  // replace this 'id' with the one of the compoenent
  // you have just created.
  const component = this.require('f14a101ae4913ffd');

  this.require('logger').info(component.menu().popup().menuitem(1).value());
}

As you see, every property of the JSON in now a property or a collection of the new model.

  • save it,
  • run your system.

You will see a message on the bottom right.

Image Alt

Because we have no warning or error message, the JSON has been correctly validated by the model we have created.

← Create an extensionCreate a Graph system →
  • Install the extension
  • Generate the model
  • Create a component
  • Use APIs to navigate through your component
System Designer is distributed under Apache License 2.0 - Copyright © 2024 Erwan Carriou