Zyllio Documentation English

Explore

Zyllio Documentation English

Zyllio Documentation English

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

⁠

Modèles d'écran

Modèles d'écran

Name

Description

Blank

Create a blank screen

Header

Create a screen with a title bar

Info

Create an informative screen with some text, an image, and a button

Welcome

Create a welcome screen with some text, an image, and a button

Contact

Create a contact screen with contact buttons: Twitter, Website, Phone, Email, and YouTube Channel

Booking

Create a screen that contains a registration form

Create a preconfigured authentication screen with Email and Password fields and an authentication button

Create a user registration screen with fields for Name, Email, Password, Profile Picture, and a registration button

List

Create a screen that displays the content of a table in a grid list format

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.

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.

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.

List/Details

Create two screens simultaneously: one that displays the content of a table and another that shows the details of the selected item

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

⁠

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.

⁠

Colors

Colors

Name

Description

Primary Color

Primary color used for the background of the title bar (header)

Primary Text Color

Primary color used for the text in the title bar (header)

Secondary Color

Secondary color used for the background of list item selections and buttons

Secondary Text Color

Secondary color used for the text of list item selections and buttons

Tertiary Color

Tertiary color used for the background of input fields, often semi-transparent

Terciary Text Color

Tertiary color used for the text in input fields

Background Color

Default color used for the background of screens

Text Color

Default color used for the text of components

There are no rows in this table

⁠

Properties

Properties

Nom

Description

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.

Gallery

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.