Developing a reusable menu in iX Developer, Video 2 by Beijer Electronics


This iX instruction video will present how
reusable screens and menus can be developed. We will build a menu on one Screen and then
reuse it on all other screens in the application. This application has three screens. Let’s start
by renaming one of the screens by right clicking
on it and selecting Rename. Next type “Background” and then click on OK.
We will start by creating a menu consisting of
buttons. Add a Button object to the screen and resize it. Click on the General Ribbon menu, from here we
can define the object’s text and symbol. In this example we will select a Picture from the
Component Library. It’s also possible to browse
for a picture. It’s easy to create duplicates of an object and
then order them in rows and/or columns. Right
click and select Create Series. For this example we will generate a menu
header consisting of 5 buttons. Therefore we will
set it to 5 columns and 1 row. Each button is modified so that it gets an unique
symbol or picture. The browse dialogue allows you to select
pictures from either the Component Library or
from folders on your computer. The folder called Project Pictures displays all
pictures used in the current application. Now that all the buttons have a unique picture,
we will now assign each one with an Action. An Action can be executed in many different
ways, including clicking on the button. We select the action that should be
executed when clicking on the button, here we
select Show Screen. From the drop down menu we select
which screen should be opened. In this
case we select Screen1. The second button is configured to show
Screen2. The navigation buttons are assigned with Show
Previous and Show Next actions. We will now select all button objects and
change their Shape Fill. All of the selected
objects will change to the same fill color. Let’s add a rectangle in order to finalize the
menu design. It will contain a Digital Clock
object. The Format Painter tool can be used to copy
visual properties from one object to another. Select the template object, click on the Format
Painter button and then on the object that you
want to receive the format. To change the color of the screen, click
somewhere in the screen to switch the focus to
it. The Screen’s Fill color can now be easily
modified. Select the Digital Clock object and
draw it on top of the rectangle. To keep a consistent design the font color is
changed to white instead of black. The design is finalized by adding two rectangles
to the screen. The first one will be the header
which will contain the Screen’s title. The rectangle’s color is changed to Green. Copy the rectangle by right clicking and
selecting Copy. Right click again and select
Paste. The copied rectangle’s size is adjusted and the
fill color is changed to white. Select one of the Screens in the Screen
Explorer. Click on the drop down menu and select which
screen should be used as a background. A Text object is added for the screen’s header. In
this case we type “Screen 1”. Let’s change font color to white. Copy the
text by right clicking and selecting Copy. Let’s also reuse the Background for Screen2 as
well. Right click and select Paste. Change the text to
“Screen 2”. We add a Circular Meter to the Screen so that
we will see a difference between the screens
when simulating the application. Click on Run to start a simulation. This allows
us to test the application and verify our new
developed menu. When the application is running we can easily
check that it executes as expected.

One comment on “Developing a reusable menu in iX Developer, Video 2 by Beijer Electronics”

  1. trần nam says:

    Could you give me your component library, it looks beautiful.

Leave a Reply

Your email address will not be published. Required fields are marked *