Kalipso TechDocs Themes2.6.1. Lookbook Lookbook is where the user can preview pictures of the elements used in the selected Theme, or any other content the Theme designer would like

Kalipso documentation How to Use Themes 1

TECHNICAL NOTE

HOW TO USE THEMES

Document: Kalipso_TechDocs_Themes

Revision: 1.0

Kalipso version: 4.0 20170215

Date: 18/02/2017

Author: RS


Contents 1. About ..................................................................................................................................... 3

1.1. Advantages .................................................................................................................... 3

2. Kalipso Themes...................................................................................................................... 4

2.1. Theme Manager ............................................................................................................ 4

2.2. Project Settings ............................................................................................................. 5

2.3. Style tab ......................................................................................................................... 6

2.4. Icons tab ........................................................................................................................ 7

2.5. Creating Themes ........................................................................................................... 8

2.6. Adding Elements to a Theme ........................................................................................ 8

2.6.1. Lookbook ................................................................................................................... 8

2.6.2. Colors ......................................................................................................................... 9

2.6.3. Controls ................................................................................................................... 10

2.6.4. Icons ........................................................................................................................ 11

2.7. Installing Themes ........................................................................................................ 14

3. Tutorial Demo App .............................................................................................................. 15

3.1. Using Themes .............................................................................................................. 15

3.2. Adding elements to a Theme ...................................................................................... 20

3.3. Creating Themes ......................................................................................................... 24


1. About

A Theme is a main idea or a unified set of design elements and color schemes that can be applied

to applications, in order to give them a consistent look and feel.

They are also an easy and quick way to create applications.

A Theme can affect various aspects of the application’s appearance:

• Colors - themes have a color scheme that consist of predefined colors that are used in

the various Style controls.

• Style - themes can also have a predefined set of font types and sizes.

• Graphics - themes have their own graphic elements like buttons, icons and images.

You can create, change and customize themes, like changing a color or a predefined Style Form.

1.1. Advantages

The main advantages of using themes are:

• Creating Applications with a more appealing presentation.

• Enhanced usability.

• Customizable to specific design guidelines.

• Creating consistent design between applications.


2. Kalipso Themes

All Themes bundled in Kalipso already have some generic Style Forms and some variety of

Controls to use as a starting point.

2.1. Theme Manager

Kalipso has a Theme Manager where you can Add, Edit, Duplicate, Delete and also Reset

Previews. It can be accessed from File->Theme menu, or by clicking in the gear icon located

in the left pane in the Style tab.

1. File Menu Themes

2. Themes Icon


3. Theme Manager: Available default Themes

2.2. Project Settings

When creating a New Project, the user can select from a dropdown list containing various

Themes. After the Theme is selected, it is copied to the Project’s folder so that, when the

Project is opened in different devices, the associated Theme is always available.

The application’s Theme (and the Theme itself) can also be changed at any time after the

Project creation.

After a Theme change or modification, newly created Forms and Controls will have the new

Theme settings. Forms and Controls created prior to that Theme change, will retain their

settings.

4. Theme selector in the Project Properties


2.3. Style tab

5. Style tab

The Style tab is where the Style contents are placed and ready to be used throughout the

Project. It can include Forms and Controls, suitable to the most common operations. They

can be freely adapted and customized to the Project.

There’s also a dropdown list, where elements from other Themes can be selected. To use

them, just drag and drop the selected element to the desired Form.

To create new Forms from the Style tab, the user just needs to double-click them. The user

can also drag and drop any Control from the Style tab to any opened Form.

Although the Styles include Controls, like Buttons, Images and Loopers, their non-graphical

properties and Actions need to be properly configured. You can also reorder elements of

the same type by dragging them around in the Style Tab.


2.4. Icons tab

6. Icons tab

The Icons tab has a collection of icon sets with different dimensions, that are presented and

ready to be used by dragging any icon and dropping into a Form.

Depending on the selected Theme, the displayed Icon Set can change according to those

defined in the recommended Theme settings. Normally a theme should include one or more

recommended Icon Sets.

This tab also includes a search bar where, the user can search icons by their name or tag.


2.5. Creating Themes

There are several ways of creating Themes.

• Use the Theme Manager, duplicate an already made Theme and change, add or

remove the desired elements.

• Using the Theme Manager, create a Theme from scratch by starting with a newly

created Theme, then Theme elements can be added one by one.

• Themes can also be created by opening any Project and use its elements to add to a

new or existing Theme.

Themes included with Kalipso designer cannot be directly modified, its only possible to

add Styles to the Project’s Theme. One way of overcoming this limitation is duplicating

the selected Theme and changing its name so that it also doesn’t start with the letter

‘k’.

2.6. Adding Elements to a Theme

2.6.1. Lookbook

Lookbook is where the user can preview pictures of the elements used in the selected

Theme, or any other content the Theme designer would like to present.

When adding elements to a Theme, Kalipso automatically snaps an image to display in

the Style tab. These images are saved in a Snaps Folder, where the Theme is stored and

can also be added to the Lookbook. You can also use the Reset Preview to refresh the

preview of each style in the Theme.

7. Theme Manager: creating Lookbook images


2.6.2. Colors

Adding a Set of Colors to a Theme is very useful, because they will always be available

for selection, in the Color Properties of any element in the Project, where the Theme is

used.

Using the Theme Manager, when editing the selected Theme Colors can be added in

the Colors tab.

Theme Colors can be added or managed at any time through the Color Picker.

8. Theme Manager: Colors

9. Color Picker


2.6.3. Controls

Any Control or Form used in a Project, can be added to a Theme and will be displayed in

the Style tab, by right-clicking any element (or a free space in a Form), and selecting the

option “Add to Project’s Theme”. If the selected element is a Form (Right Clicking in an

empty space inside a Form), or a Looper, the user will be asked if he also wants to include

the Controls found in that Form or Looper.

10. Adding a Control/Form to a Theme

When there are multiple elements of the same Control or Form, a default Form or

Control can be selected, so that when the user creates a new in the Designer’s menu,

the default will be used as a starting point.

The Style Control or Form can be Renamed or Removed with the Right Click Menu and

also their order can be rearranged with Drag and Drop inside the Styles Tab.

11. Setting a default Form with the Right-Click Menu


2.6.4. Icons

When creating or modifying a Theme (in the Theme Manager), there is also a tab named

Icon Sets, where the user can choose the recommended Icon Sets for that Theme.

12. Adding a recommended Icon Set

This is useful for selecting Icons Sets that will be better suited with the selected Theme,

since they will be positioned first in the list.

13. Recommended Icons in the Icons tab


In Kalipso, Icon Sets are located in the Designer’s Icons Folder, each subfolder has a

single Icon Set. New themes can be installed by copying Icon Sets to this Folder

14. Designer's Icons Folder

15. Icon Set Folder

Each Icon Subfolder contains a Folder per Icon that has the same Icon in various

dimensions and an Icon File containing its searchable tags

16. About Icon Folder


A custom Icon Set can be created by replicating the previous Folder Structure


2.7. Installing Themes

Themes and Icon Sets can be shared between users. To install the obtained contents, the

user just needs to copy to the Designer’s corresponding folder (Themes or Icons), in order

for that content to become available for use in any project.

A Theme from a Project can also be added to Kalipso by copying the Project’s Theme Folder

to the Designer Themes Folder and renaming it.

17. Installing Themes


3. Tutorial Demo App

This is a simple Demo App to show how to use Kalipso Theme features in any Project.

Only the visual aspects of the app will be considered in this tutorial.

3.1. Using Themes

1. Let’s begin by creating a New Project

Here is where the user can choose from a list of Themes. In this case we will be using

K_SimpleDark.

2. Create an empty Form by clicking in the Form Icon

A Form like the one set as Default (or the first on the list if none is set as Default) is

created. This means it has the same properties and Controls.

If you want to create a Form as other than the Default, double-click it in the Style Tab.


The user is then asked to confirm the Form Creation.

3. Now, to add an Image Control, Select and drag the Control to the Form.

This process can be repeated until all the needed controls are in their positions.

4. Controls can also be replaced; one example is when we need to convert a Text Button

to an Image Button.

Text Buttons are native objects provided by the device’s Operating System, while an

Image Button can have more Style elements and advanced styling.


5. After adding a Text Button, just drag and drop over the Text Button an Image Button

where the user can choose to convert the Control.

Also, when Dragging a Control to an empty space while pressing the Ctrl Key in a Form,

the user will be asked to apply the Theme settings to all controls in the current Form, or

to All Forms.


6. To exemplify this, let’s add several Labels.

7. Drag the other Label type to an empty space in the Form.

This changed the Labels Style to match the settings from the one that was dragged.

8. Now, switch to the Icons Tab and Drag the desired Icons. All the installed Icon Sets are

available within the dropdown list.


9. In the Search bar, start typing ‘sett’ and, all icons with those letters in their tags are

listed.

10. Select the second icon in the list and drag it to the Form.

Any icon (Image Button) can be replaced by dragging another icon from the Icons Tab

into it.

11. Let’s replace the settings Icon with another one (a wrench), like explained above, just

select the new Icon and drag it into the icon to be replaced.


3.2. Adding elements to a Theme

When a Project is created, a copy of selected Theme is placed inside the Project Folder,

so all the Theme customizations are only applied to the Project’s Theme locally

Any visual element can be added to the Project’s theme.

Let’s add a customized Button since this Theme in particular doesn’t have one.

1. Drag a Text Button from the Home Ribbon and, in its properties, set its text to Text

Button.

Now change its Colors to fit better in the current Theme

2. Change the Font Color to White, size to “10” and in “Bold”.


3. Change the Background to the “AccentColor”.

4. Right-Click the Button and select Add to Project’s Theme

An entire Form can also be added to the Project’s theme.

Let’s create a form with some elements and Add it to the Theme.

5. Add a new Form, set its Background Color to “#333333”.


6. In the Icons Tab, choose the White Outline.

7. Search for an Icon with the tag ‘left’.

8. Drag the Icon to the Left Arrow. This will retain the icon Properties and Actions,

replacing only the image.

Now adjust the Icons dimensions.


9. Create a Label with the text “Title” and set the Font Color to TitleAndInput.

Now that a Form with basic elements is done, it can be added to the Project’s Theme,

thus, appearing in the Styles

10. Right-click an empty space in the Form and select “Add to project’s Theme” and then

Yes, to include Controls found in the Form.

11. Drag the Form in the Style Tab in order for it to be at the Top.


3.3. Creating Themes

As an example, a new Theme can be created containing the previous customizations.

Since it started from an existing theme, it’s almost the same process as duplicating, that

was explained earlier.

When creating a new Project, the user selects a Theme from the existing ones, and

customizes it to fit the current Project. After those modifications are done, and after

including them in the Theme’s Project, they can easily become available for using with

another Project, or to be shared.

After importing the Theme to Kalipso, additional customizations can be made, like

creating a Lookbook, define Colors, and Recommended Icon Sets.

1. Double-click the New Theme to reveal a Theme Editor.

The Lookbook is useful to display various images related to the theme. It can be used to

display a Customer Logo or picture.


2. To create another Image, click on the top right Add Button

Here the user can create a Lookbook Image.

3. Click on the top right pencil Icon,

This opens the Snaps from the current Theme folder. These are images that Kalipso

Designer automatically creates and uses to show on the Style Tab. These can also be

included in the Lookbook.


4. Select the “About Us” Form and rename it accordingly and click OK.

5. Now Switch to the Colors Tab.

Here, the user can set the default Set of Colors to be presented in the Color Picker when

changing Control color properties in a project using this Theme.


The Color Picker allows choosing from the colors defined above and also further editing

Adding, editing or removing is similar to other operations of the same type.

6. Switch to the Icons Tab.

Here, the user can define the recommended Icon Sets to use with this theme in order to

give quick option when selecting icons to use with this Theme.

7. Add the White Outline Icon Set

Now you have a customized Theme to use in any Kalipso Project.


Since Kalipso always copies the used Theme to the Project folder, another way of adding a

Theme to the available list in Kalipso Designer is by copying that Folder to the Designer’s

Themes Folder

8. Navigate to the Project’s Folder and close Kalipso Designer.

9. Select the Theme folder


10. Copy the selected folder to Kalipso Designer Theme folder.

11. Rename the folder to ThemesDemo001.

12. After Kalipso Designer is restarted, this Theme is available to use with any Project.

Documents

Kalipso TechDocs Themes2.6.1. Lookbook Lookbook is where the user can preview pictures of the elements used in the selected Theme, or any other content the Theme designer would like