System Designer

System Designer

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

›Guides

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

Create a Component

A component is the instance of one class of your model. You can define them graphically but you can of course create them with code.

Component creation

To create a component in System Designer:

  • click on the Components tab,
  • select a model on the right panel,
  • click on the '+' button on the left toolbar,
  • a new component is now created and appears in the Components list:

Image Alt

What are the values set by default?

System Designer creates components based on the model you have selected: the created component has got all the default values defined by model.

Component edition

  • then click a component,
  • an editor will open the content of the component,
  • you can now edit your component:

Image Alt

Component creation with code

Always prefer to create your components graphically

You can of course create your component with code, but we encourage you to do it graphically. By doing so, you always know what components are in your system and your code will be cleaner.

Lets imagine you have a Person schema with a name property and that you want to create a component:

  • edit the behavior where you want to create a component,
  • add this code:
// require the Person class
const Person = this.require('Person');

// create the component
const luke = new Person({
  name: 'luke'
});

// then you can use your component
luke.name();
← Create a TypeRun your System →
  • Component creation
  • Component edition
  • Component creation with code
System Designer is distributed under Apache License 2.0 - Copyright © 2024 Erwan Carriou