Zyllio Documentation English
Zyllio Documentation English

icon picker
Screen editor

The screen editor provides a user-friendly interface that allows users to create and customize screens for their mobile applications. This section briefly introduces the tool's objectives and highlights its main features

Screen Creation

Screen creation is available from the 'Screen' toolbar, which displays predefined templates to speed up the creation process
⁠
image.png
⁠
⁠
Modèles d'écran
Name
Description
1
Blank
Create a blank screen
2
Header
Create a screen with a title bar
3
Info
Create an informative screen with some text, an image, and a button
4
Welcome
Create a welcome screen with some text, an image, and a button
5
Contact
Create a contact screen with contact buttons: Twitter, Website, Phone, Email, and YouTube Channel
6
Booking
Create a screen that contains a registration form
7
Login
Create a preconfigured authentication screen with Email and Password fields and an authentication button
8
Sign up
Create a user registration screen with fields for Name, Email, Password, Profile Picture, and a registration button
9
List
Create a screen that displays the content of a table in a grid list format
10
Details
Create a screen that displays the details of a selection, with each field displayed according to its type. Use a Text component for text type, a Phone component for phone number type, a Map Marker component for location type, etc.
11
Update
Create a form-type screen that allows modification of each field in the selection. Use a FormText component for text type, a Switch component for boolean type, and a Choose Option component for options type, etc.
12
Create
Create a form-type screen that allows the creation of a record in a table based on the type of each column. Use a FormText component for text type, a Switch component for boolean type, and a Choose Option component for options type, etc.
13
List/Details
Create two screens simultaneously: one that displays the content of a table and another that shows the details of the selected item
14
Liste/Update
Create four screens simultaneously: one that displays the content of a table, another that shows the details of the selected item, a third one with an update form, and a fourth one with a creation form.
There are no rows in this table
⁠

Modification of the screens

⁠
image.png
⁠
⁠

Workspace Management

Spatial Organization of Screens
Align the screens precisely to ensure an efficient layout.
Use arrangement tools to optimize space and improve readability.
Manipulation Tools
Move and resize screens with intuitive tools.

Drag and Drop of Visual Components

Adding Components to Screens
Drag and drop visual components from the library onto the screens.
Choose from a variety of elements such as buttons, text fields, images, lists, etc.
Component Configuration
Customize the properties of each component according to your needs.
Adjust settings such as color, size, and interactive behavior.

Selection, Copy, and Paste

Selecting Screens and Components
Learn different methods for efficiently selecting screens and components.
Use shortcuts to speed up the selection process: CTRL+A to select all screens.
Copy-Paste
Quickly duplicate screens and components to save time.
Copy elements from one screen to another.

Defining the Application Theme

Customization of appearance
Select colors and other graphic elements to define the theme.
Real-time preview of changes for instant visualization.
⁠
image.png
⁠
⁠
Colors
Name
Description
1
Primary Color
Primary color used for the background of the title bar (header)
2
Primary Text Color
Primary color used for the text in the title bar (header)
3
Secondary Color
Secondary color used for the background of list item selections and buttons
4
Secondary Text Color
Secondary color used for the text of list item selections and buttons
5
Tertiary Color
Tertiary color used for the background of input fields, often semi-transparent
6
Terciary Text Color
Tertiary color used for the text in input fields
7
Background Color
Default color used for the background of screens
8
Text Color
Default color used for the text of components
There are no rows in this table
⁠

Properties
Nom
Description
1
Right to left
Toggle text display from right to left, useful for certain languages (e.g., Arabic)
There are no rows in this table
⁠

Theme Application

Easily apply the defined theme across the entire application.
Ability to change the theme at any time based on preferences.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.