# Απόδοση ενός σχεδιασμού UI Builder στη δική σας σελίδα

> Εμφανίστε έναν αποθηκευμένο σχεδιασμό οπουδήποτε με το web component j-uibuilder και τη διεύθυνση του αρχείου JSON του, με μόνη απαίτηση το jComponent 20.

Framework: uibuilder
Product: UI Builder (uibuilder@1)
Language: el
Content-SHA256: 5e539b8fda133db3ebdbc79ff1483355fd3744f94e3fd4b5c4b45c3f71dbddb5
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

Ένας σχεδιασμός είναι ένα αρχείο JSON ([η μορφή](/en/uibuilder/the-ui-json-format/)) και η απόδοσή του είναι μία συνιστώσα. Το README του επεξεργαστή το δείχνει με το web component [j-uibuilder](https://componentator.com/components/j-uibuilder/):

```html
<ui-component name="uibuilder" config="url:https://uibuilder.totaljs.com/render.json"></ui-component>
```

Το `config="url:..."` είναι η διεύθυνση του αρχείου JSON του σχεδιασμού. Η σελίδα χρειάζεται το jComponent 20 και τη συνιστώσα `uibuilder`· ο ίδιος ο επεξεργαστής σερβίρει μια έτοιμη σελίδα γι’ αυτό (`public/render.txt`) που φορτώνει το jComponent από το CDN:

```html
<link href="https://cdn.componentator.com/spa.min@20.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.componentator.com/spa.min@20.js"></script>
```

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

## Τι σας δίνει ήδη η σελίδα του Forge

- Ο κατάλογος συνιστωσών του Forge έχει τη σελίδα [uibuilder](/en/components/uibuilder/), που δημιουργείται από το αποθετήριο των συνιστωσών, με το readme και το παράδειγμά της.
- Στον επεξεργαστή, η λίστα συνιστωσών που χρησιμοποιεί ένας σχεδιασμός είναι αυτή στο πεδίο `components`· ένας σχεδιασμός μπορεί να αποδοθεί μόνο εκεί όπου είναι προσβάσιμες αυτές οι συνιστώσες.

## Καλό είναι να ξέρετε

- Δεν χρειάζεστε τον επεξεργαστή για να αποδώσετε: οποιαδήποτε σελίδα με jComponent 20 μπορεί να το κάνει.
- Το runtime που αποδίδει έναν σχεδιασμό είναι το `cdn/uibuilder.min@1.js` στο αποθετήριο του επεξεργαστή.
- Το UI Studio, που αναφέρεται ανάμεσα στα πρότυπα εφαρμογών του Total.js, βασίζεται στην ίδια ιδέα ([εφαρμογές Total.js](https://www.totaljs.com/apps/)).