Create my first theme
In this section, we will create an application displaying a wheel containing icon-type items (image + text). Navigation in this wheel will display a preview in the background which will depend on the selected icon, and clicking on an icon will display an internet search on the chosen theme.
The necessary components
To complete this tutorial we will need 4 components
-
An ItemsPanel which will allow us to display the icons to navigate the list
-
A Preview which will display a preview of the current icon in the background
-
An Image component which will be inside this Preview
-
A web component to display the search resulting from clicking an icon
Step 1: Create a new project
To begin, you must ask the editor to create a new project. This is done either from the home screen (close the current project to return to it, or restart the editor), or from the main menu at the top of the editor (File->New application) .
The editor asks us for the title of the project and where we want to store it then opens the new project template. Indicate “Tutorial” in the title and choose a path on your computer (the directory must be empty).
The project is created and only contains a Launcher in its main page.
Step 2: defining the grid
The Launcher is also a Layout, and will allow us to define a grid in which we can arrange our child components.
Select the Launcher (root of the components list in the properties panel) and click the “Set Grid” button on the toolbar. A window appears and will allow you to add rows and columns.
Add 2 columns, with width 400 and , as well as 2 lines height 50 and .
The column of width 400 will display the wheel, the line of height 50 will display a title.
Once this window is validated, we can see in the editing area the yellow lines which delimit our grid.
Step 3: inserting the wheel (ItemsPanel)
Select the Launcher and click the “Add New Item” button on the toolbar.
The editor asks you to choose the type of element to add. Click on the “ItemsPanel” item. The element is inserted and occupies column 0 of line 0 of the Launcher.
To ensure that the entire left part is occupied (column 0, lines 0 and 1), you must draw the small yellow triangle present at the bottom right of the ItemsPanel. You can also change its “RowSpan” property (number of rows added) to 2.
As it stands, our ItemsPanel displays several columns, we would like it to have only one to obtain a vertical wheel. To do this, you can change the “PanelColumns” property to 1. Or, by right-clicking on the ItemsPanel, you can select the “Vertical: Left” option from the last menu “ItemsPanel Alignment”. .
Our ItemsPanel is partitioned to the first cell of our grid. To make it occupy two lines, set its "RowSpan" property to 2, or drag it with the mouse with the small yellow triangle.
Set its "HorizontalAlignment" property to Stretch so that it takes up the entire width of the first column of the grid.
Step 4: define the ItemsPanel items
The ItemsPanel component can display a list of any component types, even mixed, but the ideal item for this type of list is the “Icon”.
When inserted, the ItemsPanel already had icons. We will simply remove them for the purposes of this tutorial. To do this, simply select the icons one by one in the editor and press “Delete”.
Once done, select the ItemsPanel in the properties pane and click the “Add Item” button. Click on “Icon”. This operation will be repeated 4 times in order to have 4 icons in the ItemsPanel.
Then we will modify the “Caption” and “ImageSource” properties of each icon so that they display what we want:
| Caption | ImageSource | |
|---|---|---|
| Icône 1 | Lapin | https://www.magiczee.com/files/images/animals/rabbit_icon.png |
| Icône 2 | Chat | https://www.magiczee.com/files/images/animals/cat_icon.png |
| Icône 3 | Cheval | https://www.magiczee.com/files/images/animals/horse_icon.png |
| Icône 4 | Eléphant | https://www.magiczee.com/files/images/animals/elephant_icon.png |
You can now save your work and launch your project to see that the wheel is displayed correctly and that it is possible to navigate from one icon to another.
Step 5: preview
We are going to insert a “Preview” component at the bottom of our page in order to display an image that will change each time an icon is selected in the wheel.
To do this, select the Launcher component, click “Add new item” and choose the “Preview” component from the list offered to you. Once inserted, you will have to drag this component so that it occupies the entire page (small yellow triangle at the bottom right), and click on “Put to background” so that it is placed behind the ItemsPanel.
Note: if you hold the "Shift" key when you drag the component with the yellow triangle, this has the effect of resizing it. Basically, the components have no size and occupy a certain space in the grid.
Then select the “Preview” component and click “Set content”. The Preview can only contain one child and we will choose an “Image” component (although in general we prefer to put a Layout there in order to place several other components).
Change the Preview's "PreviewOf" property by selecting the ItemsPanel.
We will now have to return to the icons of our ItemsPanel. For each icon, we will define a variable named “BackgroundImage”. This can be done by selecting the icon and clicking the “Set variables for this item” button in the toolbar.
| Nom de la variable | Valeur de la variable | |
|---|---|---|
| Icône 1 | BackgroundImage | https://www.magiczee.com/files/images/animals/rabbit.jpg |
| Icône 2 | BackgroundImage | https://www.magiczee.com/files/images/animals/cat.jpg |
| Icône 3 | BackgroundImage | https://www.magiczee.com/files/images/animals/horse.jpg |
| Icône 4 | BackgroundImage | https://www.magiczee.com/files/images/animals/elephant.jpg |
Once our 4 variables and their values are defined for our 4 icons, select the image contained in the “Preview” component and modify its “ImageSource” property by setting the value “{$BackgroundImage}”.
We will exploit the power of the Preview component which, when linked to an ItemsPanel, displays content related to the currently selected item (icon). To do this, the Preview simply retrieves the variables of this item each time you navigate from one item to another in the ItemsPanel, and updates the properties of its children accordingly.
Here, the ImageSource property of our preview image will take the value of the BackgroundImage variable of the selected icon.
Step 6: icon targets
We are almost finished with our first project. It will now be necessary to define a target for our icons which should execute when the user clicks on them.
We will define the target of each of our 4 icons, indicating that it is a shell command. Select the first icon and click the “Set Target” button on the toolbar. In the screen that appears, select the “Direct” option and then click “define new item”. Select “Order” from the list of targets offered to you and click Ok to return to editing your page.
In the properties panel (list of page components), you can see your order. By selecting it, it becomes possible to modify its properties as for any other component. We will set in the “Command” property of the first command of the first icon the value “https://www.google.com/search?q=lapin&tbm=isch” in order to launch a Google image search with the word “cat” in the default Windows web browser.
All that remains is to click on “Ok” and repeat the operation for the other 3 icons.
| Valeur de la commande cible | |
|---|---|
| Icône 1 | https://www.google.com/search?q=lapin&tbm=isch |
| Icône 2 | https://www.google.com/search?q=chat&tbm=isch |
| Icône 3 | https://www.google.com/search?q=cheval&tbm=isch |
| Icône 4 | https://www.google.com/search?q=éléphant&tbm=isch |
Step 7: Target testing
Our application can already be tested. Save it and click the “Launch” button.
Clicking on an icon displays our search in the web browser.
Step 8: Creating a target page
We will now create a second page in addition to the main page, which will serve as a target for the icons.
The target page displayed will be unique, but the content displayed will depend on the variables of the icon chosen by the user.
In the same way as for the BackgroundImage variables, you will add for each icon a variable called TargetImage and having the following values:
| Nom de la variable | Valeur de la variable | |
|---|---|---|
| Icône 1 | TargetImage | https://www.magiczee.com/files/images/animals/rabbit.jpg |
| Icône 2 | TargetImage | https://www.magiczee.com/files/images/animals/cat.jpg |
| Icône 3 | TargetImage | https://www.magiczee.com/files/images/animals/horse.jpg |
| Icône 4 | TargetImage | https://www.magiczee.com/files/images/animals/elephant.jpg |
Then add a new page at the root of your project in the “Project” pane, by right-clicking in an empty area of the displayed file tree (Add->New page). Select the “Blank page” page template and name this page “targetpage.lmu”.
The page that appears in the editor is empty. Insert an image there, make sure it takes up all the space by resetting Width and Height, then set its ImageSource property to “{$TargetImage}”. It is normal that no image is displayed at this stage.
We have our target page, now go back to the main page (double click on “mainpage.lmu” in the project explorer).
We will define the target of each of our 4 icons, indicating targetpage.xml. Select the first icon and click the “Set target” button on the toolbar. In the screen that appears, select the “Existing page” option then click in the list on the “targetpage.xml” page. All that remains is to press “Ok” and repeat the operation for the other 3 icons.
The targetpage.xml page when defined as the target of an icon will inherit all the variables of this icon when the theme is run. This will have the effect, while displaying a single page, of varying its content depending on the source icon. Here, the targetpage.xml page image will display what is specified in the icon's TargetImage variable.
Step 9: second test
Launch your application and navigate between the two pages by clicking on the icons. You can use the “Esc” key to return to the previous page or exit.
You will find that the content of the target page varies depending on the icon you clicked.
Step 10: transitions
While testing your application, you have undoubtedly noticed that the pages follow each other directly, without transition. LaunchMeUp allows you to define transition animations for each component which will be executed each time a page appears and disappears.
These animations can be edited by selecting a component and changing its “Appearance” and “Disappearance” properties.
Here are the transitions we will define:
| Page | Composant | Propriété | Animation |
|---|---|---|---|
| mainpage.xml | ItemsPanel | Appearance | ChildrenLeftSlide |
| mainpage.xml | ItemsPanel | Disappearance | Blur, LeftSlide |
| mainpage.xml | Image (Preview) | Appearance | RightSlide, Fade |
| mainpage.xml | Image (Preview) | Disappearance | Fade |
| targetpage.xml | Image | Appearance | Fade |
| targetpage.xml | Image | Disappearance | Fade |
You can now save your theme and launch it. The result is much smoother!
You will have noticed that the ChildrenLeftSlide animation applies to the items in the ItemsPanel and creates a time gap between the animations of each item.
Step 11: definition of items using lists
Before this step, define a variable on the ItemsPanel which has the name "imagesurl" and the value "https://www.magiczee.com/files/images/animals/" ("Define variables for this element" button " in the toolbar). This variable will be accessible for all the icons of our ItemsPanel and will serve as a basis for defining other variables.
We've created each icon in our ItemsPanel, but it would be simpler to define an item template and vary it based on a list of values right?
This is what the definition of items in LaunchMeUp allows.
To do this, select your ItemsPanel and click the “Set items for this item” button. A window appears and gives you the choice between a direct item definition or from an item source. We will choose the source of file items.
The window then displays a certain number of sections that will need to be completed:
-
The definition of the pattern type: this will allow you to select a particular type of item (here the icon) and modify its properties.
-
The visualization of the item: this is an indicative visualization of what the item will look like.
-
Data from the item source: this is a table of values which will serve as the basis for generating variables for our items. Each column represents a variable with a name (the names are on the first row) and each row gives the variable values for an item. There will therefore be as many items generated as there are rows in this table. In fact, this data is saved in a delimited text file (tab separator) that is easily modifiable/copied/pasted in Excel.
You have "+" and "-" buttons to add/remove columns/rows in the table.
Define the item data source table as follows:
| Caption | BackgroundImage | Icon | Target |
|---|---|---|---|
| Lapin | {\$imagesurl}/rabbit.jpg | {\$imagesurl}/rabbit_icon.png | https://www.google.com/search?q=lapin&tbm=isch |
| Chat | {\$imagesurl}/cat.jpg | {\$imagesurl}/cat_icon.png | https://www.google.com/search?q=chat&tbm=isch |
| Cheval | {\$imagesurl}/horse.jpg | {\$imagesurl}/horse_icon.png | https://www.google.com/search?q=cheval&tbm=isch |
| Eléphant | {\$imagesurl}/elephant.jpg | {\$imagesurl}/elephant_icon.png | https://www.google.com/search?q=éléphant&tbm=isch |
We see that this is the same definition as before, but presented as part of an item source.
Now, for the item model to customize for each item, we will define the Caption, ImageSource and Target properties so that they retrieve variable values. In the properties grid, by right-clicking on the "Caption" property of the Icon pattern, the list of available variables is displayed (those present in the ItemsSource table). Select the "Caption" variable, it is inserted into the property and will be replaced by its value at runtime.
Do the same for the ImageSource property (putting the Icon variable there)
We will now configure the target of the Icons. Click on the “Target” option. By default this is a command. In the command's "Command" property, select the "Target" variable.
You can already see that the preview of your item model element changes depending on the row selected in the table. The defined variables are well taken into account.
Now click on “Ok” to validate your item definition. The Icons are present in your ItemsPanel but they appear with hatching and cannot be modified (“freezed”). This is normal for components defined from from a source of items.
Step 12: testing
Save and launch your application. As you will have understood, it is much easier to define the items of an ItemsPanel using an item source when the number of elements is high. Changing the item pattern is done much more quickly and applies to all items at once.
Conclusion
At the end of this tutorial, you understand the spirit of theme design in LaunchMeUp, through the use of ItemsPanels, Previews and item sources. All you have to do is discover all the components available in LaunchMeUp by consulting the reference manual and create your own themes. Have fun J.