Δέσμευση HTML · System Designer

Σε αυτό το σεμινάριο θα δείξουμε:

πώς να ορίσετε ένα μοντέλο HTML,
πώς να δημιουργήσετε ένα στοιχείο HTML,
πώς να το χρησιμοποιήσετε στην εφαρμογή σας και
πώς να το εγκαταστήσετε σε μια άλλη εφαρμογή.

Υπάρχουν πολλοί τρόποι για τη δέσμη αρχείων HTML

Αυτό είναι ένα παράδειγμα για το πώς να ομαδοποιήσετε και να εγκαταστήσετε html πρότυπα με το System Designer. Αλλά δεν είναι ο μόνος τρόπος. Βρείτε αυτή που ταιριάζει με τις ανάγκες σας.

Ορισμός του μοντέλου HTML

First create a schema that:

έχει όνομα HTML
έχει ιδιότητα πηγής και
μια μέθοδο απόδοσης.

Image Alt

Στη συνέχεια, επεξεργαστείτε το μοντέλο:

change the type of source in from any to html and
change the type of the fist parameter from any to string.

Image Alt

Code the behavior of render method

Edit the render method of the model as follow:

function render(id) {
  let dom = null;

  if (id === 'body') {
    dom = document.body;
  } else {
    dom = document.getElementById(id);
  }

  dom.innerHTML = this.source();
}

Image Alt

Create a HTML component

Now create a HTML component from the interface.

Image Alt

Then edit the component. You will notice that a source tab appears. It will allow you to add your html in your component. Put the HTML you want. In this example we set:

<input type="text" name="input" placeholder="Enter some text here">

Image Alt

What happens?

Because in the model you tell that source property has for type html. System Designer let you edit this property as HTML. It means that System Designer will check that the html you write is correct.

Στη συνέχεια, κάντε κλικ στην καρτέλα Εφαρμογή για να επεξεργαστείτε την τιμή ιδιότητας _id του στοιχείου:

Image Alt

Render your component in your application

Επεξεργαστείτε τη μέθοδο έναρξης του συστήματός σας και:

require the HTML component and
call the render method.

function start() { 
  this.require('inputComponent').render('body');
}

Image Alt

Run your bundle

Τώρα μπορείτε να εκτελέσετε το σύστημά σας και να δείτε το αποτέλεσμα.

Image Alt

Install your bundle in another system

Πρώτα, εξάγετε το πακέτο σας κάνοντας κλικ στο κουμπί εξαγωγής. Επιλέξτε JSON για να εξαγάγετε το πακέτο σας σε ένα αρχείο JSON. Το πακέτο σας είναι έτοιμο στη συνέχεια να εισαχθεί σε άλλο σύστημα.

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>App</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- your bundle -->  
        <link rel="system" type="application/json" href="myhtml.json">

        <!-- other systems --> 
        <link rel="system" type="application/json" href="system1.json">
        <link rel="system" type="application/json" href="system2.json">
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/system-runtime/dist/system-runtime.min.js"></script>
    </body>
</html>

More info?

See in this guide to have more details on how to install your bundle client-side.