embedded wizard user manual - pudn.comread.pudn.com › downloads563 › ebook › 2319518 ›...

TARA Systems

Copyright TARA Systems GmbH www.tara-systems.de www.embedded-wizard.de

Embedded Wizard User Manual

Version 6.30 1 May 2012

Authors: Dipl. Ing. Paul Banach, Dipl. Ing. Manfred Schweyer Copyright © TARA Systems GmbH

System Overview TARA Systems

Embedded Wizard © TARA Systems GmbH User Manual www.embedded-wizard.de

Contents 1 System Overview .................................................................................. 4

1.1 Introduction......................................................................................................................................4 1.2 Features ..........................................................................................................................................5 1.3 Basic Concepts ...............................................................................................................................6

1.3.1 Chora.........................................................................................................................................6 1.3.2 Mosaic .......................................................................................................................................7 1.3.3 Platform Packages ....................................................................................................................8

1.4 Installation .......................................................................................................................................9 1.5 Getting Started ............................................................................................................................. 11

2 Quick Tour........................................................................................... 12 2.1 Starting Embedded Wizard .......................................................................................................... 12 2.2 Loading a Project ......................................................................................................................... 15 2.3 Navigating through a Project ........................................................................................................ 17 2.4 Working with the Composer ......................................................................................................... 18 2.5 Working with the Inspector ........................................................................................................... 23 2.6 Working with the Gallery .............................................................................................................. 30

2.6.1 The Templates view ............................................................................................................... 30 2.6.2 The Browser view................................................................................................................... 35

2.7 Starting the Prototyper ................................................................................................................. 38 2.8 Working with the Editor ................................................................................................................ 44 2.9 Working with the Debugger.......................................................................................................... 48 2.10 Generating Code ........................................................................................................................ 50 2.11 Creating an Application .............................................................................................................. 50 2.12 Generating Documentation ........................................................................................................ 53

3 User Interface...................................................................................... 55 3.1 Main Window................................................................................................................................ 57

3.1.1 Project Menu .......................................................................................................................... 58 3.1.2 Edit Menu ............................................................................................................................... 58 3.1.3 Arrange Menu......................................................................................................................... 59 3.1.4 Search Menu .......................................................................................................................... 60 3.1.5 Navigate Menu ....................................................................................................................... 61 3.1.6 Build Menu ............................................................................................................................. 62 3.1.7 Debug Menu........................................................................................................................... 67 3.1.8 Extras Menu ........................................................................................................................... 68 3.1.9 Window Menu......................................................................................................................... 69 3.1.10 Help Menu ............................................................................................................................ 70

3.2 Gallery .......................................................................................................................................... 71 3.2.1 Templates view ...................................................................................................................... 71 3.2.2 Browser .................................................................................................................................. 73

3.3 Composer ..................................................................................................................................... 76 3.3.1 Project Composer................................................................................................................... 80 3.3.2 Profile Composer.................................................................................................................... 81 3.3.3 Unit Composer ....................................................................................................................... 82



3.3.4 Enum Composer .................................................................................................................... 84 3.3.5 Set Composer ........................................................................................................................ 85 3.3.6 Class Composer..................................................................................................................... 85

3.4 Inspector....................................................................................................................................... 88 3.4.1 Member Area.......................................................................................................................... 89 3.4.2 Attribute and Property Area.................................................................................................... 92 3.4.3 Description Area..................................................................................................................... 96

3.5 Editor ............................................................................................................................................ 97 3.5.1 Declaration Area..................................................................................................................... 97 3.5.2 Implementation Area .............................................................................................................. 98

3.6 Prototyper ................................................................................................................................... 101 3.7 Variables Window....................................................................................................................... 103 3.8 Callstack Window....................................................................................................................... 103 3.9 Chora Objects Window............................................................................................................... 104 3.10 Garbage Collector Window ...................................................................................................... 105 3.11 Log Window.............................................................................................................................. 106



1 System Overview The chapter “System Overview” gives you an “Introduction” (Chapter 1.1) into the highlights of Embedded Wizard, explains the “Basic Concepts” (Chapter 1.3) of Embedded Wizard and describes the idea of “Platform Packages” (Chapter 1.3.3). The end of the chapter explains the “Installation” (Chapter 1.4) process of Embedded Wizard.

1.1 Introduction Embedded Wizard is a platform independent solution for developing and prototyping of graphical user interfaces (GUI) on embedded systems, like e.g. set-top box menus, dialogs, multimedia applications and Human-Machine-Interfaces (HMI) in automotive and CE devices, as well as industrial GUI applications for surveillance and controlling. Moreover, almost every kind of embedded application that requires the display of graphical components can be realized easily with Embedded Wizard. Embedded Wizard provides a flexible and user-friendly authoring tool, which combines the development of appearance and behavior of the GUI application. It can solve almost any given 2D GUI task. Moreover, if the particular target system provides 3D hardware acceleration, attractive 3D effects can enrich the GUI appearance significantly. With Embedded Wizard you will increase the productivity and improve the structure of your project. Embedded Wizard enables you to develop, customize and port your GUI faster on various product platforms. Rather than developing the code for each GUI application from scratch, engineers today want to rely on GUI solutions that take on basic development tasks and thereby reduce their implementation effort. This is imperatively needed because of the expanding amount of features and the increasing complexity of software today. Ever-growing projects must be handled in an ever-reducing time. An important step on the way to shorten time-to-market is the ability to re-use existing software parts for new projects, a quality that can be achieved by proper structuring and encapsulation of software. But short time-to-market should not be the only important concern, when setting up a new project. In order to react on the fast changing demands of the market, developers must be able to modify and extend their existing software with minimal effort. Besides that, the reasonable consumption of resources like memory and processing time are quite essential, when dealing with embedded systems. The different approaches on GUI development today, namely GUI libraries, code generating tools and interpreters like e.g. web browsers are more or less suited to cope with the requirements described above. Although, Embedded Wizard basically belongs to the section of code generating tools, it combines the advantages of different GUI approaches and goes beyond all existing attempts. It reduces the effort for many standard development tasks, while guaranteeing developers full control of every aspect of their project at the same time. With Embedded Wizard TARA Systems has established a development tool that facilitates GUI development in a way hitherto unknown. Embedded Wizard is a development of TARA Systems GmbH invented and written by Paul Banach and Manfred Schweyer.



1.2 Features When we started to design Embedded Wizard at TARA Systems, the main idea was to create a tool that enables developers to solve each task of GUI development within an embedded software project in the easiest way possible. Being developers ourselves, our long-time experience in both the development of embedded software and the creation of graphical user interface tools resulted in several improvements, which – we believe – are of great advantage when using Embedded Wizard (EmWi). The following features characterize the tool:

Object oriented software development – Object oriented programming makes software clear and reusable.

Visual programming – GUI applications can be created easily with “Drag & Drop”.

Easy to learn and safe programming language – The integrated programming language Chora is suitable for GUI applications and avoids typical programming errors.

High software quality – Automatically generated source code reduces possible sources of error.

Runtime and code size – The automatic generated code is suitable to the requirements of embedded systems.

Portability – Development of platform independent GUI applications. Multilingual GUI applications – Embedded Wizard supports the development

of localized GUI applications. Variants - The variants allow the development of GUI applications, whose

appearance and behavior can be changed at the runtime. This unique feature simplifies the implementation of skins, themes, target and resolution dependent GUIs, etc. This feature also provides the customization of existing software in a way very transparent to the customer.

The software documentation – Automatically generated HTML documentation contains the description of the GUI application.

Real prototyping – Testing and presenting the complete GUI application is possible during the development on the PC.

Integrated debugger – An integrated debugger helps you to find programming errors.



Software development with the Embedded Wizard is completely object oriented and based on the idea of components. The components are encapsulated, independent building blocks, which can be combined with other components to a complex GUI. The modeling of components is done with Embedded Wizard in a graphical way. To implement the functionality of components, a suited programming language called Chora is available. This language is easy to learn and similar to C or Java. Embedded Wizard is delivered with a set of predefined components, which can be used as a base for your own components. This library is called Mosaic. The complete GUI application, consisting of several components, can be executed, tested and debugged on PC by the integrated Prototyper. Finally, a code generator can translate the complete GUI application into the desired target platform. All target dependencies are implemented in so called Platform Packages. The following chapters describe detailed the development of an GUI application by using the Embedded Wizard.

1.3 Basic Concepts To understand the concepts of Embedded Wizard it is important to know the following terms: Chora, Mosaic and Platform Package.

1.3.1 Chora Chora is an object-oriented, platform independent Embedded Wizard’s own programming language. It is used to implement the desired behavior of an GUI application. The syntax of this language is based on C++ and JAVA, so it is very easy to learn it. The language supports the definition of expressions, conditions, loops, local variables, etc. In order to simplify the development of GUI applications Chora also provides a set of enhanced data types and operators (e.g. data type rect and color). Additionally Chora provides special language constructs for the development of multilingual and multivariant GUI applications. The term multivariant stands for the ability to implement GUI applications with several different look&feels. In contrast to other languages, Chora does not provide unsafe constructs like the pointer arithmetic or open arrays. In this manner the developed applications remain highly stable. Due to the object-oriented approach, GUI applications developed in Chora always consist of components (also called classes). At the runtime instances (objects) of these classes will be created in order to display the GUI or to provide it with user inputs, etc. The runtime environment of Chora integrates a Garbage Collector, which takes care of the used memory. The Garbage Collector recognizes which Chora objects are not used anymore, and disposes them automatically. This mechanism makes it unnecessary to delete objects explicitly. Thus, typical software bugs like memory leaks or multiple memory deallocation are avoided. For more details see the document “Chora User Manual”.



1.3.2 Mosaic Mosaic is the framework (class library) of Embedded Wizard. It is developed platform independent in the programming language Chora. Mosaic provides the developer with a rich set of ready-to-use components:

Simple viewable components (views) like lines, rectangles, images or texts. Complex widgets like push buttons, select boxes or edit fields. Invisible components like events, timers or animation effects.

When developing a GUI application, the developer combines the existing Mosaic components to a new user-defined component (e.g. a menu item, a list entry, an icon, a scrollbar, a gauge, etc.). All user-defined components can then be reused in other components to build up more complex components (e.g. a menu, a list box, a control pabnel, etc.). Components can be derived from other components according to the principles of object-oriented programming. Thus, the definition of a component is given to the derived component by inheritance. This results in a high reusability of the software and improves the structure of the software. A component can additionally by enhanced by variables and methods. Variables can be used to store internal states. Methods can be implemented to add any functionality to a component. Additionally, components can be provided with so-called Properties to simplify the control of the component. First of all, a property is a variable which can be read and written from outside (e.g. from another component). Each access to a property causes a call to the property’s own ‘onget’ or ‘onset’ method. By implementing these methods, a component can react immediately to the performed access. For example, the visibility of a component can be affected by a change of its property Visible.

Furthermore, properties can be used as inputs and outputs. By connecting input properties with output properties, interactions between components can be established. Today, Embedded Wizard is delivered with two versions of the Mosaic framework:

Mosaic 1.0 – This is the original framework, supplied with Embedded Wizard since its first release in the year 2002. It provides a wide range of components including the infrastructure for the customization of widgets. The development of GUI applications based on Mosaic 1.0 requires a deep understanding of the provided framework and the object oriented programming approach. The Mosaic 1.0 framework will be still available in the future for compatibility reasons and it will be maintained and updated if necessary.

Mosaic 2.0 – This is the new and fully redesigned version of the framework, introduced with Embedded Wizard version 6.00. It provides a wide range of components and ready-to-use widget templates. Mosaic 2.0 provides additional graphical effects and contains the necessary support for touch devices. The Mosaic 2.0 framework provides a very simple programming model expecting less development experience and less time for training. The new Mosaic 2.0 framework should be selected as the development foundation for all new GUI projects.



For more details see the documents “Mosaic10 User Manual” and “Mosaic20 User Manual”.

1.3.3 Platform Packages To execute the created GUI application within an embedded system, the following prerequisites have to be fulfilled:

The application has to be translated in a programming language, which can be compiled with the target system compiler (e.g. ANSI C).

All used resources (e.g. fonts or bitmaps) have to be stored in a color format and resolution supported by the target graphics platform.

All drawing functions (e.g. for drawing lines, transferring bitmaps, …) necessary for displaying components have to be available.

An adaptation layer has to adapt the GUI application to the environment (e.g. to get access to the memory management, timer and the operating system).

These tasks are solved by the Platform Package. A Platform Package contains on the one hand a set of extension modules for the Embedded Wizard and on the other hand a set of libraries, which are used within the target system. In detail, a Platform Package consists of:

Code Generator – The Code Generator works like a compiler. It evaluates the GUI application, the Chora source code and the developed components and translates them into a programming language supported by the compiler for the target system, e.g. ANSI C. The Code Generator is an extension module, which is loaded into the Embedded Wizard environment on-request during the code generation.

Resource Converter – Several Resource Converters adapt all used resources (e.g. colors, fonts, bitmaps) to the graphical capabilities of the target system. For example, True-Type fonts are converted into bitmap fonts or all colors of a bitmap are mapped to a global color palette. The converted resources are compressed automatically in order to reduce the memory wastage. The Resource Converters are extension modules, which are loaded into the Embedded Wizard environment on-request during the code generation.

Graphics Engine – The Graphics Engine is a basic graphics driver containing all necessary functions to display the GUI. The Graphics Engine contains a set of functions to draw lines, rectangles, to copy or 3D transform bitmaps and to print texts. The Graphics Engine has to be linked together with the generated GUI application.

Runtime Environment – The Runtime Environment is an interface between the generated code and the target system as well as its operating system. It contains a set of functions to allocate and free memory, to access the timer, etc. The Runtime Environment has to be linked together with the generated GUI application.

The following figure illustrates the idea of Platform Packages as an extension of Embedded Wizard:



1.4 Installation The installation of the Embedded Wizard is done from the setup program. Please follow the instructions. During the installation following folders are created:

\EmbeddedWizard The root directory of Embedded Wizard contains the application and all other necessary files. Additionally, a command line version of the Chora compiler is installed (chorac.exe). This command line compiler can be used in batch jobs for an automatic translation of Embedded Wizard projects.

\EmbeddedWizard\Chora\Sdk The Chora\Sdk directory contains a set of *.h and *.c files necessary for the development of so-called intrinsic modules. These modules are used while prototyping as a replacement for parts of the not existing target system.

\EmbeddedWizard\Doc The Doc directory contains this “Embedded Wizard User Manual”, the “Chora User Manual” and the “Mosaic User Manual” (one version for Mosaic 1.0 and one version for Mosaic 2.0).

\EmbeddedWizard\Examples_Mosaic10 The Examples_Mosaic10 directory contains a set of example applications based on the Mosaic 1.0 framework to give you a quick start into the workflow. Please use these examples as inspiration only if you intend to work with the Mosaic 1.0 framework.



\EmbeddedWizard\Examples_Mosaic20 The Examples_Mosaic20 directory contains a set of examples created by using the new Mosaic 2.0 framework. Feel free to re-use these examples (or parts of them) for your own developments.

\EmbeddedWizard\HtmlDoc The HtmlDoc directory contains HTML style sheet files used while the generating of the HTML documentation. (see “Generating Documentation” (Chapter 2.12) for more details).

\EmbeddedWizard\Icons The Icons directory contains images displayed in the Embedded Wizard Gallery (see “Working with the Gallery” (Chapter 2.6) for more details).

\EmbeddedWizard\Mosaic10 The Mosaic10 directory contains all units of the class library Mosaic 1.0. These classes can be used to build up your own components. The Mosaic classes are also written in Chora and they are delivered in source code format. Please do not modify these classes to be compatible with further versions.

\EmbeddedWizard\Mosaic20 The Mosaic20 directory contains all units of the new class library Mosaic 2.0. This class library should be used for new GUI developments. The classes of Mosaic 2.0 can be used to build up your own components. The Mosaic classes are also written in Chora and they are delivered in source code format. Please do not modify these classes to be compatible with further versions.

\EmbeddedWizard\Platforms The Platforms directory contains all currently installed Platform Packages (see “Platform Packages” (Chapter 1.3.3)). The subdirectory Tara\Win32 contains Platform Packages for the Microsoft Windows operating system. These packages are useful to create test or demo applications with different color resolutions for the PC target. To install other Platform Packages, separate setup applications have to be executed after the installation of Embedded Wizard.

\EmbeddedWizard\QuickTour The QuickTour directory contains a small demo application to give you a quick start into the workflow. You can load this project into Embedded Wizard, you can prototype it, generate the ANSI C code and you can execute it as a Windows application (see “Quick Tour” (Chapter 2) for more details).

\EmbeddedWizard\Templates10 This directory contains all templates of the Embedded Wizard Gallery in case that the current project is based on Mosaic 1.0. Each template is stored as a single *.ewg file containing a piece of Chora code. The *.ewgf subdirectories correspond to the folders within the Gallery.

\EmbeddedWizard\Templates20 This directory contains all templates of the Embedded Wizard Gallery in case that the current project is based on Mosaic 2.0. Each template is stored as a single *.ewg file containing a piece of Chora code. The *.ewgf subdirectories correspond to the folders within the Gallery.



\EmbeddedWizard\Tutorial_Mosaic10 This directory contains a set of tutorials, which guide you step by step through the different aspects of developing GUI applications with Embedded Wizard based on the Mosaic 1.0 framework. Please note, that these tutorials are intended only for users of the Mosaic 1.0 framework. The development of GUI applications based on Mosaic 1.0 requires a deep understanding of the provided framework and the object oriented programming approach. For any new project, we recommend to use the new Mosaic 2.0 framework

\EmbeddedWizard\Tutorial_Mosaic20 This directory contains a tutorial which guides you step by step through the different aspects of developing GUI applications based on Mosaic 2.0. The Mosaic 2.0 framework provides a very simple programming model expecting less development experience and less time for training. The new Mosaic 2.0 framework should be selected as the development foundation for all new GUI projects.

\EmbeddedWizard\Vfs Embedded Wizard is delivered with a Virtual File System Switch. The Virtual File System Switch is an abstraction of a generic file system. It is responsible for the management and the access distribution to volumes registered (mounted) during the runtime. It hides the differences between the registered volumes and allows a uniform access to the files stored on them. The unit Vfs.ewu implements a set of classes to access the virtual file system. The adaptation to the respective file system has to be done by the user. For details see the inline documentation of the delivered *.c and *.h files and the sample implementation of the Win32 file system interface (vfswin32.h and vfswin32.c).

1.5 Getting Started It is assumed, that you are familiar with software development for embedded systems and with object-oriented software design (e.g. ‘classes’, ‘instances’, ‘inheritance’ and ‘polymorphism’ should be well known concepts). To get a short introduction and a first impression of Embedded Wizard, please follow our “Quick Tour” (Chapter 2). After that, we recommend to read the “Embedded Wizard Tutorial - Mosaic 2.0” to get more familiar with the concepts and the workflow of Embedded Wizard. This document is stored within your Embedded Wizard installation in the subdirectory \EmbeddedWizard\Tutorial_Mosaic20.

Additional information, frequently asked questions, updates and examples are available on www.embedded-wizard.de.

Quick Tour TARA Systems


2 Quick Tour The following steps will give you a short introduction into Embedded Wizard. Please take a little time (~90 min) and follow the quick tour step by step:

Starting Embedded Wizard (Chapter 2.1) Loading a Project (Chapter 2.2) Navigating through a Project (Chapter 2.3) Working with the Composer (Chapter 2.4) Working with the Inspector (Chapter 2.5) Working with the Gallery (Chapter 2.6) Starting the Prototyper (Chapter 2.7) Working with the Editor (Chapter 2.8) Working with the Debugger (Chapter 2.9) Generating Code (Chapter 2.10) Creating an Application (Chapter 2.11) Generating Documentation (Chapter 2.12)

The idea of the quick tour is just to give you an impression about the possibilities and the philosophy of Embedded Wizard. Additionally with this quick tour we would like to introduce and explain the very basic concepts and denominations you will find later when working with Embedded Wizard. For a better training, please study our “Embedded Wizard Tutorial”.

2.1 Starting Embedded Wizard

Before you can start working with Embedded Wizard you have to install it on your PC.

If you have a USB dongle (the security device), connect it on the USB port of your PC. In case of the demo version no dongle is required. However, the demo version is not able to save any project modifications.

From the Windows menu select the Embedded Wizard application and start it. An empty Embedded Wizard Main window will appear.

Embedded Wizard provides a very efficient environment for the development of GUI applications. It is based on the idea of visual programming, where software components are arranged, connected and configured in a visual way. The following figure shows the Embedded Wizard Main window at work:



The main menu and the toolbars occupy the area on the top of the main window. They allow a quick access to the common commands. Context sensitive commands are covered in context menus, available after the right mouse button click. Almost all of these commands do react to predefined shortcuts, so they can be activated directly from the keyboard.

The central area of the main window is called Composer. The Composer is used to build up the components of a GUI application, to arrange and connect all members in a visual way.

The Navigation bar above the Composer is used for fast switch between different Composer pages.

The area of the Gallery window is shared between the Templates and the Browser view:



The Templates view provides you with a set of predefined templates. They are ready to use and can be simple dragged with the mouse into the Composer. To improve the clearness, the templates are stored in several folders. A single left mouse button click on the folder name opens the corresponding folder and displays its content. The Browser gives an overview about all members defined in your project. To inspect a member, double click on it. Similarly to the templates described above, the displayed members can also be dragged with the mouse into the Composer.

The window on the right side is called Inspector. The Inspector is used to inspect and modify the members and their attributes or properties.

The Editor is located by default in the bottom right corner. It is used to implement the desired behavior of your GUI components in the Embedded Wizard own object-oriented and platform independent programming language Chora. With Chora you can realize different kinds of GUI components without the necessity to code their behavior in a separate development tool. The programming language Chora is the main basis of Embedded Wizard. Thanks to its sophisticated syntax, Chora is able to describe the appearance and the behavior of GUI components. An integrated Chora interpreter allows then the test and the prototyping of the entire GUI application just at the development time. For the target, Embedded Wizard converts the Chora code in the ‘C’ code. Don’t be afraid, the Embedded Wizard hides the most Chora aspects from you behind an appropriate visual representation. Anyway, Chora is an easy language with the syntax similar to ‘C’ or Java.

The Log Window in the bottom left corner displays all warnings and errors. A double click on a message guides you to the location, which causes the message.



The Status bar displays additional, context dependent information like mouse cursor position, etc.

2.2 Loading a Project Before you can start working with Embedded Wizard an existing *.ewp project file has to be loaded or a new project should be created.

From the menu Project select the command Open… In the dialog go to the directory EmbeddedWizard\QuickTour and select

the file QuickTour.ewp.

Immediately after loading of the project, its content appears in the Composer and the Inspector window. Due to the idea of visual programming the parts of the project are displayed as small symbols called ‘bricks’:



As you can see, the project consists of a lot of bricks signed with different icons. Each brick provides the visual representation of the corresponding Chora definition. For example, the brick Win32_RGBA8888 in the top left corner of the Composer window defines a profile. In Chora profiles store the configurations for the particular targets, in this case for the target ‘Microsoft Windows PC’ (Win32). The job of the profile is to determine how your GUI application is converted for the target system. In contrast the brick Example at the bottom of the Composer window represents a unit. In Chora units serve as ‘folders’ for GUI components. In this manner all project members can be organized. When you select a brick in the Composer by a single left mouse button click, the attributes of the corresponding brick are displayed in the Inspector window on the right hand side. The double click causes the Embedded Wizard to open the brick in the Composer or Editor (depending on the role of the clicked brick) so its content can be edited. On the right hand side you can see the Inspector. Inspector provides an alternative view on the members stored within the Composer. If you select a member within the Inspector, the selection changes automatically to the corresponding brick within the Composer and vice versa. Beside of this, the Inspector is used to inspect and modify attributes of selected members.



2.3 Navigating through a Project From your point of view, a brick serves as a touchable visual representation for the corresponding Chora definitions. You can select it and inspect or modify its attributes in the Inspector. This approach improves the efficiency and hides all the unimportant details of Chora programming. Some of the bricks can be also opened and their content can be edited. For example the unit brick serves as ‘folder’ for GUI components. When the brick is opened the content of the unit appears in a new Composer page.

Double click on the unit brick Example with the left mouse button.

As you can see, a new Composer page is opened and the content of the unit Example is displayed. There you will find several bricks containing the GUI components implemented in this Quick Tour example as well as a lot of resources and constants. The brick RotaryKnob, for example, contains the implementation of a rotary knob GUI component. The brick VoltageText on the right hand side serves as multi-lingual text constant for the english text “Voltage”. In contrast the yellow bitmap resource brick LogoOfEmwi contains an image:

On top of the Composer is the Navigation bar, where you can switch between all currently opened Composer pages. A single left mouse button click on one of the symbols in the bar causes the Composer to switch to the corresponding Composer page.



A single click with the right mouse button displays a list of currently opened Composer pages. This is very convenient, if a lot of Composer pages are opened:

To switch back to the previous Composer page you can also select in the main menu Window the command Previous Composer or you can use the shortcut Ctrl+Shift+F6. To switch forward to the next Composer page you can select the command Next Composer or you can press the shortcut Ctrl+F6.

2.4 Working with the Composer The Composer is the visual editor of the Embedded Wizard. It provides a simple visual programming technique, where software components (bricks and views) are arranged and connected by drag & drop with the mouse. The idea behind the bricks is based on the fact, that a human can percept visual symbols in a very effective way, often better than a pure text is percept. Unfortunately it is not possible to replace all aspects of programming by symbols. Many of these aspects can be expressed much more effective with simple words. For this reason we have decided to use bricks as visual representation for entire software components and to write the particular behavior directly in Chora. This compromise reduces the necessary effort for developers, who are already familiar with programming languages C or Java. The displayed icon and the shape of the brick reflect the role of the corresponding software component within the GUI application. Depending on the shape of the brick, the bricks can be divided in following three categories:

Bricks with beveled sides define entities of logic. They are used for methods, slots, etc. The methods can be edited in the Editor. To edit the method double click on the brick with the left mouse button.

Bricks with angle sides define entities of data. They are used for variables, properties, arrays, embedded objects, constants and resources. To initialize these entities, the desired initialization expressions can be specified in the Inspector.

Bricks with rectangular shape stands for all others entities like profiles, units, GUI components, etc.



Per default all bricks are displayed with black text color. Only members of GUI components can appear with different colors accordingly to their origin in so-called inheritance hierarchy. In Chora, one GUI component can be derived from other component and thus inherit its entire appearance and behavior. Moreover, the inherited members can be overridden and modified in the derived component. This technique is very particular to all object-oriented programming languages:

All new, not inherited members are signed with the black text color.

Inherited and overridden members will be signed with the gray text color.

In case of errors in the inheritance of the particular member, its brick’s name is drawn in red color. Such errors are detailed reported in the Log Window.

Please note, the Composer shows only new and explicitly overridden members. For members, which are inherited but not overridden no bricks are displayed. However, these members can still be accessed from the Inspector window. This approach should help you to focus on the important members only. The inheritance concept is very common for all object-oriented programming languages. Usually it is used together with the correct denominations ‘class’ and ‘class inheritance’. In fact, ‘class’ is only a more general denomination for a ‘GUI component’. Therefore we incline sometimes to mix these both denominations. However, a class can also stand for a non-GUI component, e.g. timer, data container, interface to the underlying target, etc. From Chora’s point of view there are only classes available. Whether a class is a GUI component or not depends on its inheritance. If you are still not familiar with the object-oriented concepts, don’t worry. For the present it is sufficient to understand, that GUI components can also be called ‘classes’.

Double click on the class brick Application in order to open this component in a new Composer page.

After the double click a new Composer page is opened and the component name Example::Application appears in the Navigation bar:



In Chora all classes (thus also GUI components) are stored within units. The unit serves therefore as a kind of namespace for the definitions included in it. To address such definition, its name is always prefixed with the name of the unit – this results in the full classified name e.g. Example::Application. The approach of namespaces prevents the possibility of name conflicts, so it is legal to use the same name for GUI components if they are stored in different units. As you can see in the screenshot above not all members are displayed as bricks. Many of them have their own appearance. They are displayed as images or text in the same manner as they will appear on the screen in the target system. Such members are not represented as bricks but as graphical objects. For this purpose the composer contains two areas:

The area inside the thick blue frame shows all graphical objects. This corresponds to the appearance in the target system. All graphical objects can be selected and arranged with the mouse in the same manner as the bricks are. The graphical objects, which are moved outside the blue frame, are clipped and not visible. This area is called 'Canvas area'. Canvas area is only available in the Composer when the GUI component is edited. In all other cases no Canvas area appears.

The area outside the blue frame can be used to arrange all bricks. The integrated Chora interpreter executes the Chora code and ensures, that the graphical objects do appear and behave in the same manner as they do in the target system. This is important to understand, that the Composer is working on ‘living’ objects.



The graphical objects you see in the above screenshot originate from the framework Mosaic. This framework provides a wide range of simple ready-to-use GUI and non-GUI components, like the views Views::Text and Views::Image for text and image output or the auxiliary component Core::Timer for animations, etc.

You can consider the Mosaic as a kind of ‘Lego construction set’, which are used to compose your own complex GUI components. For example, the both rotary knob widgets in the screenshot above are such complex GUI components. They are realized in the class Example::RotaryKnob. Within this class the appearance and the behavior of such rotary knob is implemented. Do you want to see it?

Double click on one of the both rotary knobs.

Now you should be able to see the implementation of the rotary knob widget. In the top-left corner you can see the Canvas area with all graphical objects. The remaining bricks determine the behavior of this widget, how it should react to user interactions, what should be done, when the user has touched it on the touch screen, and so far.

Now close the Example::RotaryKnob Composer page again. To do this, click in the Navigation bar on the small close button.

To select more than one member in the Composer hold down the Shift key and click with the left mouse button on the desired members. A group of members can be selected by dragging a selection frame around the desired members. For this purpose click and hold down the left mouse button and move the mouse cursor.



Within the Composer the bricks can be moved. The position of the bricks is not important for the functionality of the GUI application; however, they should be arranged expedient into logical groups to make the project more comprehensible for other developers. Unlike the arrangement of bricks, the arrangement of the graphical objects is important for the appearance of the GUI application. You can try to move some widgets of this Quick Tour example.

First press the key Escape to deselect all members. Click on the left rotary knob (with the label Voltage) to select it. A selection

frame appears around the widget. After a short pause click in the selection frame and move it with the mouse few

pixels. For more precise arrangement pixel by pixel you can use the cursor keys Left,

Right, Up and Down.

Embedded Wizard records all modification steps, so if necessary you can undo them. For example if you want to undo the last movement of the widget, select the command Undo in the main menu Edit. You can repeat this command until all undesired operations are undone. Alternatively you can use the shortcut Ctrl+Z. Last but not least, the Composer supports copy and delete commands for the currently selected members. In this manner, the bricks or the graphical objects can be duplicated. Try to create the copy of the rotary knob:

Because the copy operation can be performed on selected members only, select this member first by a single click.

Then press the Ctrl key and click again with the mouse in the selection frame area.

While holding down the Ctrl key and the mouse button move the mouse. At the end release the mouse button and the Ctrl key.

Now you should be able to see the third rotary knob as the following screenshot demonstrates:



By coping of members all attributes and properties of the affected member are taken over. After the copy operation you can move and modify the duplicate without any influence on the original member. The editing commands are also available in the main menu Edit. Alternatively you can use the shortcuts Ctrl+C for copy and Ctrl+V for paste. If you want to delete a member, select it and press the Del key. Try to do this with the copied rotary widget:

First, ensure the object is selected. Then press the Del key.

Note, if you delete an overridden class member, the origin, inherited state of the member is restored. This is because the member is inherited from the base class. In the derived classes you can modify (override) the member, but you cannot delete it. If you want to delete an inherited member, you have to do this in the base class, where the member is defined for the first time.

2.5 Working with the Inspector The Inspector provides an alternative view on the project’s content. All members displayed in the Composer are also shown in the Inspector. They can be selected, copied and deleted in the similar manner as it can be done in the Composer.



The Inspector is divided into three parts: In the upper part a list of members is displayed. The Inspector and the

Composer work always together, so the members can be selected as well as in the Inspector and in the Composer. Unlike the Composer, the Inspector always shows all members: the new or overridden members as well as the inherited and not overridden members. You remember, inherited but not overridden members of a GUI component are not shown in the Composer. The Search edit field above the members list allows you to input a filter. If a filter is specified, the Inspector displays only these members, whose name does match the given filter. This is very comfortable when there are hundreds of members in the Inspector and you are looking for a special one.

In the middle area you see the initialization expressions for attributes and properties of the currently selected members. If there is more than one member selected, only the common attributes and properties available by the selected members are displayed here. In this manner you can modify the common attributes or properties of multiple members at once!

In the lower part you can find a description of the currently selected member and its attributes or properties. Each time, a member, an attribute or a property is selected the description area is updated.



Per default all members are displayed with black text color. Only class members are signed with different text colors and fonts in order to reflect their origin in the inheritance hierarchy similar to the colors of bricks.

All new defined, not inherited members are drawn bold with the black text color.

Inherited and overridden members will be drawn bold with the gray text color.

Inherited but not overridden members will be displayed with the gray text color and thin font.

In case of errors in the inheritance of the particular member, the member is drawn in red color. Such errors are detailed reported in the Log Window.

Take a look at the list of members. As you can see there is a lot of inherited, but not overridden members (displayed with the thin font and gray text color). These members appear in Inspector but not in the Composer. This is because of the object-oriented approach of Chora, where a class may inherit hundreds of members from its base classes. Usually only few of these members are overridden e.g. Bounds and few new members are added to the class e.g. RotaryKnobVoltage. All other members still exist and can be accessed, but they do not appear in the Composer. The type of the particular member is displayed in Inspector in the column Type. The member RotaryKnobVoltage is e.g. an embedded object of the class Examples::RotaryKnob and Bounds is a property (a kind of variable), which is able to store a single rect (rectangle) value:

The column Order reflects the initialization order of the members and the Z-order of graphical objects. The Z-order determines, how the graphical objects are drawn one upon the other. It represents the value of the z coordinate in three-dimensional space. In the following figure the circle A has a higher Z-order than the square B i.e. it lays in front and partially covers it in the two-dimensional view.



To change the order of a member, select it in Inspector or Composer and use the commands in the main menu Arrange. Let’s restack back most the button labeled ‘Settings’ in the bottom left corner of the GUI.

First, ensure the button is selected. If you have a problem with the selection, press the key Escape to deselect all members and try again.

In the main menu Arrange select the command Restack back most. Alternatively you can use the shortcut Ctrl+Shift+Down.

Now, the button is drawn back most behind all other graphical objects and it is obscured by the background view, thus the button is not visible anymore. With the command Restack top most you can arrange the button again on the top.

Restack the button top most. Use the shortcut Ctrl+Shift+Up.

Note, the Z-order not only influences the appearance of graphical objects within a GUI application, it also affects the order in which the GUI members are initialized, i.e. the properties of a member with the lowest Z-order are initialized first. This can become important if one member depends on the value of another member. Within the Inspector you can select more than one member by holding down the Ctrl key or you can select a range of members by holding down the Shift key. When you select a member, you can see its attributes and properties in the middle part of the Inspector. For example, if you select the member LabelVoltage, all attributes and properties of the text label below the left rotary knob are shown in the Inspector. Now you can inspect and modify them.

In the upper area of the Inspector select the member LabelVoltage.

Then in the middle area of the Inspector click on the property String. This property stores the text to display.

In the edit field input the following text “Quick Tour”. Don’t forget to set the both “ double quote signs!

Press the Enter key.

Now you should be able to see in the Composer, that the label has changed its text. The following figures show the Inspector and the label after the modification is done. In the same manner other properties of the selected member can be changed.



Please note the colors used to display the attributes and properties in the Inspector. These colors reflect the state of the affected attribute or property:

All attributes, which are still not modified, are drawn with thin font and gray text color. These attributes are initialized with a value inherited from the base class, or they are initialized with default values.

Modified attributes are displayed bold with the gray text color.

Properties are always displayed in the black text color. Properties, which are not modified, are displayed with the thin font.

Modified properties are displayed bold with the black text color.

Attributes or properties signed with the red color are invalid. The appropriate error message is displayed in the Log window when the affected attribute is evaluated by the Prototyper or during the code generation.

In the example above you have modified a property by entering the new value directly in the Inspector. This is very common and can be applied on all properties and attributes. However, the value you enter should always match to the type of the affected property. Chora supports several different data types, like color, point, string, etc. The try to assign a string literal to e.g. a color property will cause Chora to report an error in the Log window. An alternative way to modify properties is provided by so-called Assistants. By using them you can modify the attributes or properties of selected members much faster. For example, the Color Assistant provides a convenient way to modify properties where color values are stored. Assumed, you wish to change the color of the just modified label:

Ensure that the label member is still selected. Then in the middle area of the Inspector window click on the member’s

property Color.



On the right hand side of the clicked property a small button should appear. Click this button.

Thereupon an assistant window should appear where. Use the mouse to change the color in the assistant window.

At fin click on the button at the bottom of the assistant window to apply the modification

The following figures show the Color Assistant window and the resulting label after the color modification is done:

Well, you don’t like the text font in the just modified label? No problem, use the Resource Assistant to determine the font by selecting it from a list of existing font resources in the project:

Ensure that the label member is still selected. Similarly to the color modification above click in Inspector on the member’s Font property and then on the small button . The Resource Assistant should appear.

In the assistant window click on the font Resources::FontArial24.

Press the key Enter to apply the selection.

Now you should be able to see in the Composer, that the label has changed its font. The following figures show the Inspector and the label after the modification is done:



As long as the assistant is visible, you can also apply a search filter to the displayed entries in order to find the desired one in a more convenient way. To do this simply input a part of its name. Thereupon the displayed list is limited to these members, whose names do contain the given search filter and you can select the desired one much faster. Assumed you wish to change the Embedded Wizard logo at the bottom area of our quick tour sample to the Spain flag and you can’t find it because there is a lot of bitmaps in the Assistant window.

First select this member. You can click on it in the Composer or you can select it by its name ImageEmWiLogo in the Inspector.

The properties of the selected member appear in the middle area of the Inspector. Click on the member’s property Bitmap and then on its small button .

An assistant with a list of bitmaps appears. Now input some few signs of the name of the bitmap you are looking for. In our case input spain.

Thereupon the assistant shows only the entry Example::FlagSpain so you can select it now by e.g. pressing the Enter key.

The following figures show the Assistant window with the entered filter ‘spain’ and the resulting appearance after the modification is done:

Sometimes it is necessary to restore the origin value inherited from an ancestor property or attribute. For this purpose, the command Restore default value in the Inspector’s context menu is available. This menu appears after a right mouse button click on the affected attribute or property. Assumed, you want to restore the origin value of the just modified Bitmap property:



Ensure, that the ImageEmWiLogo is still selected.

In the Inspector click with the right mouse button on the selected member’s property Bitmap.

From the context menu select the command Restore default value. Optionally you can press the shortcut Ctrl+R.

Thereupon you can see that the value of the property has changed to null and the property itself appears now in a thin font. The value null comes from the class of this image view. It determines, that per default there is no bitmap to show in the image view:

As long as this default value has not been explicitly modified, the affected image view remains empty. The thin font indicates now, that the property is not modified and the value comes from the origin class. For the next quick tour chapter undo the last modifications.

To do this, press the shortcut Ctrl+Z. Repeat the command until the origin Embedded Wizard logo and the original

‘Voltage’ label are shown again.

2.6 Working with the Gallery The Gallery window accommodates two different views:

The Templates view The Browser view

2.6.1 The Templates view The Templates view contains different software components ready-to-use for your GUI application. These templates are stored in folders. The folder Chora e.g. contains the templates for Chora entities, like the Variable. If you want to add a new variable to your GUI component, just drag the Variable template from the Gallery and drop it into the Composer at an empty location.



The folder Views on its part contains the basic views, necessary if GUI components are composed. You will find here a rectangle, line, border, image, text and much more. Even views able to perform lightweight 3D transformations are available here. All these graphical objects can be dropped and arranged in the Composer. Let’s try it.

In the Gallery open the folder Views. To do this click with the left mouse button on the bar with the caption Views.

In the shown templates list click on the entry with the name Filled Rectangle. Drag this template by holding down the left mouse button and drop it into the

Composer inside its canvas area.

After this, a new white rectangle should appear in the Composer as the following screenshot demonstrates:



Now you can arrange the rectangle in the Composer window. You can move and resize it with the mouse. The properties of the rectangle can be changed in the Inspector. You can e.g. assign different colors to the rectangle corners so color gradients can be shown. In the previous chapter you learned how to change the color values by using the convenient Color Assistant. However, the initialization values can also be entered directly as Chora literals. The color literals in Chora are stored as an 8-digit hexadecimal number prefixed with the # number sign. The format of the color literal is #rrggbbaa where rr stands for the red component, gg for the green, bb for blue and aa for the alpha channel. The alpha channel is very useful for semi transparence and fading effects. The yellow color is thus expressed with the literal #FFFF00FF.

Let’s enter color literals for the bottom-left and the top-right corner of the rectangle:

Ensure first that the just added rectangle is still selected. Then in the middle area of the Inspector click on its property ColorBL and

input the value #FF7B16FF.

Now click on the property ColorTR and input the value #28FF7FFF.

Press Enter key.



The following figures show the altered properties and the rectangle after the modification is done. As you can see the rectangle is filled with a color gradient accordingly to the color values you have entered. The both remaining corners still appear with their default white color:

This is exactly the workflow you will follow when new GUI components are designed. You drag members from the Gallery, drop and arrange them in the Composer and finally configure their properties or attributes in the Inspector. The Gallery is also the place where you can store your own templates of members. For example, if you like to have the just prepared gradient rectangle always ready to hand, you can copy and paste it into the Gallery for the future. You can also create your own folders in the Gallery to manage your templates.

Click with the right mouse button in the Gallery window. A context menu appears.

From the context menu select the command Create new folder. Thereupon a new folder with a random name is added at the end of the Gallery.



To change this random name open again the context menu and select the command Rename folder.

In the Rename folder dialog enter your desired name e.g. My Templates.

Apply with the push button OK or press the Enter key.

After this, the Gallery contains a new empty folder for your own templates as the following screenshot demonstrates:

So far so good, the new folder is ready to store your own templates. Now we can place there the just prepared rectangle member.

In the composer ensure, that the rectangle member is selected. Then press and hold down the key Ctrl. With the left mouse button click in the

rectangle area. While holding down the mouse button and the Ctrl key drag the rectangle to

the newly created folder in the Gallery window. Release the mouse button and then the Ctrl key. Thereupon a new template

should appear in the Gallery. To change the name of the new template click on it with the right mouse

button and select from the context menu the command Rename template. In the Rename template dialog enter the desired name, e.g. Rectangle Gradient.

Apply with the button OK or press the key Enter.

Now, the new template is ready to use and can be dragged and dropped into the Composer in the same manner as it can be done with other, preinstalled templates. You can try it!



For the further Quick Tour steps it is necessary that all just added views are deleted again from the Composer.

In the Composer ensure, that the members are selected. Press the key Del to delete them.

2.6.2 The Browser view The second view of the Gallery, the Browser is very useful if you want to get an overview about all members of the project. The classes, constants, resources, etc. are displayed there.

To switch to the Browser view click with the left mouse button on the Browser tab in the upper area of the Gallery window:

Now, the Gallery appearance changes from the Templates view to the Browser view:



Within the Browser the members are arranged in several categories like Classes, Constants or Resources. The organization of the displayed items within the Browser reflects the inheritance hierarchy of the corresponding members. Let’s try to explore the inheritance hierarchy of classes:

In order to show all descends of a member simply click on the small icon on its left hand side.

The click on the icon will collapse the member and thus hide its descends.

Beside the list of members, the Browser also provides a filter feature. If applied, the Browser will highlight the members, which match the filter condition. This is very useful, if you are looking for a member, but you have forgotten, where the member is defined or from whom it has been derived. To set the filter condition, please use the Search edit field in the upper area of the Browser. For example take a look at the GUI component Example::RotaryKnob. As you remember, this GUI component contains the implementation of the rotary knob widget:

In the Browser click in the Search edit field.



Enter the name rotary.

Now, the Browser should highlight all members, which match the given filter. Other members are hidden or they appear gray if they belong to the inheritance of the found members:

Maybe your Browser will display some additional members. This is because you have expanded them before by clicking on the icon. Usually, if a filter is set, the Browser will expand the items automatically in order to show the descend members, which do fit the filter. In the Browser you can see, that the rotary knob widget descends from the base class Core::Group, which on its part is derived from Core::View. These base classes belong to the previously mentioned Mosaic framework and they provide the base functionality for the development of all GUI components: Unlike the Composer or Inspector window, the Browser does not provide any editing or modifications on the displayed members. But you can select and drag a member from the Browser into the Composer area in the similar manner as it is done with the templates from the Templates view. To insert a new rotary knob widget do following:

First press and hold down the keys Ctrl+Alt. This key combination determines, that you want to create an object (an instance) of the GUI component.

While holding down the both keys, click with the left mouse button on the found RotaryKnob item.

Drag the member to the composer and release the mouse button. Finally release the both keys.

Now, an additional rotary knob should appear as the following picture demonstrates:



For the further Quick Tour steps it is necessary that the just added widget is deleted again from the Composer.

In the Composer ensure, that the widget is selected. Press the key Del to delete it.

Although it is not possible to edit members within the Browser, you can inspect the location, where the affected member is defined. In the Browser you can double click on the item, and the member is shown in the Composer automatically. Now you could inspect and change the attributes of the member, etc.

2.7 Starting the Prototyper Although the Composer is already able to execute the Chora code, the Embedded Wizard provides you with a specialized integrated prototyping environment. In this environment the GUI application can be tested and you can interact with the application.

To start the prototyper, press the key F5.

Thereupon the integrated prototyping machine translates the Chora code and interprets it. After a short pause the Prototyper window appears and you can begin interacting with the GUI application. Depending on the kind of the application you can use the keyboard and/or the mouse to control it. The results you see in the Prototyper window will be the same as on the target. As you probably supposed, our quick tour example implements the user interface for a simple ‘power supply unit’. In the practice this interface can control a real power supply device.

To switch on this ‘power supply unit’ click on the Power switch at the left hand side of the Prototyper window.

To change the voltage or the maximum current click and rotate the corresponding rotary knobs.



For demonstration purpose we have integrated in this example a kind of ‘virtual consumer’. Its power consumption changes with the time what can be seen in current gauge.

To terminate the prototyping simply close the Prototyper window.

The Mosaic framework provides timers and so-called effect components, which can be used to drive animations. For example the color animation can be done by an object of the effect class Effects::ColorEffect. All you have to do is to connect the effect object with the graphical object you want to animate:

If there is still the Browser view opened in the Gallery switch to the Templates view first.

In the Templates view open the templates folder Effects. From the Effects folder drag the template Pulse Color and drop it into the

Composer area. A new brick should appear as the following screenshot demonstrates:



In the next step let’s connect the effect with e.g. the Settings label and animate its color. To do this some properties of the just added effect should be changed:

At first ensure, that the effect brick is still selected. Its properties and attributes are shown thus in the middle area of the Inspector window.

Change the effect’s property Enabled to the value true. This property determines whether the effect is active or not.

Change the property CycleDuration to the value 500. This is the time in milliseconds for a single animation pass.

Change the property Value1 to #FF0000FF. This is the color value at the beginning of the animation. The effect starts with the color red.

Change the property Value2 to #00FF00FF. This is the color value at the end of the animation. The effect terminates with the green color.

Please note the property Outlet; this property stores a reference to another property, which should be animated by the effect object. The concept of references follows the idea of plugs and sockets. It allows one object to access indirectly a property of another object, without the necessity, that the affected objects do know themselves. Per default the property Outlet is set null, this means, the effect is still not connected to any objects. To establish a connection there are several ways. The most facile way to do this is to use one of the assistants available in the Inspector: the Reference Assistant. The assistant shows a list of all available properties, which are compatible to the appropriate ‘socket’:

In Inspector click on the property Outlet.



On the right hand side of the clicked property a small button should appear; click on it. Thereupon an assistant window appears, where a list of all compatible properties is displayed.

Search in the list for the following one LabelSettings.Color and select it. While the assistant is visible you can also enter e.g. setting as the filter condition for the shown members.

Press Enter to apply the selection.

In this manner the property Color of the object LabelSettings has been connected to the effect object and can be controlled from it now. The following screenshot demonstrates how the connection is established. The second screenshot shows the modified properties of the effect:

To test the just added effect, press the key F5 to start the prototyper.

You should be able to see the label with animated color. Note, the prototyping environment interprets the Chora code. This can be slower than the execution in the target system. For the target system Embedded Wizard converts the Chora code in ‘C’ code, thus the code is not interpreted anymore and runs with the full speed. Let’s extend this animation example by a simple user interaction. Assumed, you would like to switch on/off the animation by pressing the keys 1 and 0. The key 1 should start the animation. The key 0 should stop it. To do this you will need to add so-called event handlers to your GUI component and connect them with the effect object:

If still opened, close the Prototyper window first. In the Templates view open the templates folder Event Handlers. From the Event Handlers folder drag the template Key Press Handler and drop

it into the Composer area.



Repeat the last step and create a second event handler object. You should be able to see two additional bricks called KeyHandler1 and Keyhandler0 in the Composer window:

Now you will need to configure the event handlers and to connect them with the color effect object.

At first ensure, that the brick KeyHandler1 is selected. Its properties and attributes are shown thus in the middle area of the Inspector window.

In Inspector click on the property Filter. This property determines which keyboard keys should be handles by the handler.

Use the small button to open an assistant window. The assistant shows a list of available keyboard keys. Here you can select the desired key or even an entire key category.

Search in the list for the following one Key1 and select it. While the assistant is visible you can also enter e.g. key1 as the filter condition. This handler should thus react to the key 1.


The connection between the handler and the effect object is established by assigning a slot method of the effect object to a property of the handler. As soon as the user presses the predetermined keyboard key, the handler can send a signal to the slot method. In Chora slot methods are entities of logic. This logic is executed when a signal is sent to the slot method. The idea is similar to the slot - socket approach.

At first ensure, that the brick KeyHandler1 is still selected.

In Inspector select its property OnPress and then use the small button to open the corresponding assistant window.



In the assistant window select the entry ColorEffect.StartEffect. This entry corresponds to a slot method of the color effect. When a signal is sent to the method, the animation will start.


The handler is thus configured to send signals to the color effect object in response to user inputs if the key 1 has been pressed. The following screenshots show the both initialization steps for this handler:

Now we need to repeat these configuration steps for the second handler KeyHandler0. However, this handler should stop the animation if the user has pressed the key 0:

At first ensure, that the second handler brick KeyHandler0 is selected.

As described above change the property Filter to the value Key0.

As described above connect the property OnPress with the following slot method ColorEffect.StopEffect.

The following screenshots show the both initialization steps for this second handler:

The both handler are connected now with the effect. Try it with the prototyper:

Press the key F5 to start the prototyper. Press the key 0 to stop the animation. Press the key 1 to start the animation again.

As you can see, with Embedded Wizard you can implement a lot of nice things without coding a single line of code!



2.8 Working with the Editor Although Embedded Wizard provides the visual programming, it is sometimes necessary to implement more sophisticated behavior directly in the Chora syntax. For this purpose the Editor is available. In Chora all entities of logic are called ‘methods’. Don’t worry if you are not familiar with object-oriented programming languages, a method can be compared to an ordinary ‘C’ function. Similarly to other Chora entities you learned in the previous chapters, methods are represented as bricks. You can select them, modify their attributes in the Inspector and you can open them for editing. Take a look at the method onShowMenu in our example:

If still opened, close the Prototyper window first. In Composer select the brick onShowMenu. It can be found just below the

bottom thick blue border of the Composer’s Canvas area. Double click the brick to open it in the Editor window. The following screenshot

demonstrates the operation:

As you can see, the content of the method is shown in the Editor window. Now you could explore and modify it:



As you can see, the Chora syntax is very simple; especially for developers, who are already familiar with C or Java. For your convenience, the Editor supports syntax highlighting with the Chora keywords. From the inline comments in this method you can deduce that the job of the method is to open a settings menu of our ‘power supply unit’:

Press the key F5 to start the prototyper. In the Prototyper click on the Settings push button. A menu should appear

where the language for the GUI can be selected. If you like, you can try to select other language. You can do this by clicking on

the corresponding menu item or you can use the keys Up and Down to navigate in the menu and then press the key Enter to activate the selected language.

Close the Prototyper window again.

This method is thus connected with the Settings push button. When the button is pressed, the method is activated, its logic is executed and the menu appears. The behavior of the menu results from the logic implemented in the menu and menu item class. With Chora you have the full flexibility to implement your very particular behavior of GUI components. Assumed, you plan to develop a GUI application for a touch screen device. In the application you want that the user can touch an object on the screen and drag it with the finger. Let’s try to implement it. In our example we will drag the both gauge widgets. The first thing you need is a special event handler to react to touch events. Then you will need to implement a slot method with the logic to move the both gauge widgets. Finally the method is connected with the touch event handler.

If still opened, close the Prototyper window first. In the Templates view open the templates folder Event Handlers. From the Event Handlers folder drag the template Simple Touch Handler and

drop it into the Composer area.

Unlike the previously used key press handler, the touch handler appears as a semitransparent red rectangle in the Composer. This ‘hot’ area is where the handler can react to user taps and touches:



For our example, arrange the area so it covers the both gauge widgets. You can click and drag the entire area as well as you can move each corner separately.

As you can see the simple touch handler is not limited to be a boring rectangle – it can assume any quad shape.

In the next step a new slot method should be added and connected with the touch handler:

In the Gallery’s Templates view switch to the templates folder Chora. From the Chora folder drag the template Slot Method and drop it into the

Composer area. As you can see a new method brick with the name Slot appears.

Rename the new brick so you can identify it better. Press the key F2 and enter the name onDrag.

Press the key Enter to apply the name modification. You should always name new members otherwise you will lose the overview in large projects:



To connect the method with the touch handler select the handler first so its properties appear in the Inspector.

In Inspector select the property OnDrag and then use the small button to open the corresponding assistant window.

In the assistant window select the just added slot method onDrag.


The handler is thus connected with the slot method. Now, you will implement the logic of the slot method:

Open the newly added slot method in the Editor. To do this double click on the method brick onDrag.

In the Editor enter the following Chora code:

While editing the code of a method, the Editor helps the developer by showing different assistant windows. Similar to the assistants from the Inspector, the Editor assistants display lists of available members, resources, etc. The content of the list depends on the scope (the context of the edited expression). All you have to do is to select the appropriate item from the list. In case of large lists, you can also input a filter text. The entered filter will appear directly in the Editor window:



Let’s try the implementation. Press the key F5 to start the prototyper. Now you should be able to move the gauges with the mouse.

In the upper part of the Editor you see the declaration of the method. By pressing the button on its right hand side you can drop down the Declaration Area to inspect and modify the parameter of the edited method. Note, this works for ‘normal’ methods only. Beside the normal methods, Chora also supports onget, onset and slot methods, which have a fixed predefined set of parameters; so you cannot drop down the Declaration Area to modify them.

2.9 Working with the Debugger Sometimes the developed GUI application does not do, what you have expected. To help you finding the errors, Embedded Wizard integrates a powerful Debugger. The Debugger allows you to set breakpoints and execute the Chora statements step by step. You can evaluate the call stack and inspect the content of objects and variables. To control the Debugger a set of commands is available in the main menu Debug. For you convenience the corresponding shortcuts are similar to the Microsoft Visual Studio. For example the breakpoints are set in the Editor with the shortcut F9.

Ensure that the onDrag method is still opened in the Editor.

In the editor move the blinking caret to the first text row and press the key F9 to set a breakpoint.



The breakpoints are shown as small red spheres left to the text. When you start the Prototyper again and touches the touch handler area, the onDrag method is invoked. Well, due to the breakpoint at the first statement in the method, the execution will be halted and the current statement is shown in the Editor:

As long as the Prototyper is halted, the Variables window is displayed, so you can inspect the operands for the imminent statement.

In the Callstack window, you can evaluate from whom the slot method has been called. The Chora Objects window is useful for the inspecting of dynamically created Chora objects. To open these monitor windows select the commands Callstack and Chora Objects in the main menu Window.

Last but not least a simple profiler can be used during the runtime of the GUI application in order to inspect the memory consumption. In Chora the garbage collection disposes the dynamically created objects automatically - you cannot delete them ‘manually’. For this purpose the Garbage Collector evaluates the dependencies between the objects, recognizes which objects are no more accessible and disposes them. The window Garbage Collector displays the status of the garbage collection:



Unlike other Debugger windows, the Garbage Collector window is always available even the GUI application is not halted, so you can interact with the GUI application while observing how many objects are created and disposed.

2.10 Generating Code When the GUI application is completely designed and tested within the Embedded Wizard, it is time to generate the code for the desired target platform.

Select the command Build this profile in the main menu Build or simply press the key F8 to start the code generation process.

The code generation will take few seconds.

The name of the currently active profile is determined in the left combo box of the Build toolbar. Here you can also select the profile and language for prototyping.

At the end of the code generation, a set of *.c and *.h files are created within the directory EmbeddedWizard\QuickTour\Win32_RGBA8888. If there are any errors, these are shown in the Log window:

2.11 Creating an Application For the demonstration purpose we have already a Microsoft Visual Studio project prepared to compile the generated code. You only need to open it:



Start your Microsoft Visual Studio. From its File menu open the project QuickTour.dsw located in the directory EmbeddedWizard\QuickTour.

In the Solution Explorer ensure that the project Win32_RGBA8888 is the startup project. If necessary use the following context menu:

Press the key F5 to compile and start the application.

Now you can play with the GUI again in the same manner as you did it in the Prototyper window. But this is not a simulation this is a real compiled C code (for Win32 target). The following screenshot shows the Quick Tour example running as a native Microsoft Windows application:



You should take few minutes to analyze the generated C code. You can open the generated *.c and *.h files directly from the Microsoft Visual Studio. As you can see, the generated code is well documented and clear enough to understand. For example the slot method onDrag is stored in the file example.c. You can recognize the similarity to the Chora code?



2.12 Generating Documentation Embedded Wizard is able to extract documentation from the project and to store it as a single compressed HTML help file. Of course, in order to benefit from this feature, all affected members should be described before. The description for the members should be left in their attributes Description in Inspector.

The Documentation Generator is controlled by the settings in the Extract documentation dialog. The extraction process is started by the command Extract documentation… from the main menu Build. During the documentation generation, Embedded Wizard evaluates the dependencies between the classes and their members. In the resulting document these dependencies are shown as inheritance diagrams. Additionally, the dependent classes and members are connected with hyperlinks. This feature is very useful. For example, we use it to extract the documentation for the Mosaic framework, which on its part is implemented in Chora. The following screenshot shows the Extract documentation dialog:

The extracted documentation can be shown with the Microsoft HTML Help Viewer:

User Interface TARA Systems


3 User Interface The user interface of the Embedded Wizard is designed to create and modify GUI applications in a comfortable way. Complex GUIs can be build up by combining basic components without writing a single line of code. Only the implementation of methods requires direct source code editing. Like other modern Windows applications, the Embedded Wizard supports several editing features:

Drag & Drop – move software components between the different windows and applications with the mouse, e.g. you can take a template with the mouse from the Gallery and move it into the Composer.

Copy & Paste – move or copy software components into the clipboard, e.g. you can copy an object from the Composer into the clipboard by pressing Ctrl+C.

Undo & Redo – go back and forward in the edit history, e.g. you can restore a deleted object by pressing Ctrl+Z.

Context Menu – display a popup menu containing the most important actions by pressing the right mouse button.

The Embedded Wizard user interface consists of the following windows and editors:



Main Window (Chapter 3.1) Gallery (Chapter 3.2) Composer (Chapter 3.3) Inspector (Chapter 3.4) Editor (Chapter 3.5) Prototyper (Chapter 3.6) Variables Window (Chapter 3.7) Callstack Window (Chapter 3.8) Chora Objects Window (Chapter 3.9) Garbage Collector Window (Chapter 3.10) Log Window (Chapter 3.11)



3.1 Main Window The main window of the Embedded Wizard contains a menu bar, several toolbars and the workspace for other windows and the Composer. The menu, the toolbar the Gallery, the Inspector, the Editor and the Log Window are dockable, this means, that each window (or toolbar) can either be integrated into the main window or it can be displayed as a standalone floating window. Just double click on the gripper or on the caption of the affected dockable window to toggle between these two display modes. When you click with the right mouse button onto the menu bar or onto the toolbar, a context menu appears where you can hide and show the different toolbars and windows. The following image shows the context menu:

The menu bar of the main window contains the following menu items:

Project Menu (Chapter 3.1.1) Edit Menu (Chapter 3.1.2) Arrange Menu (Chapter 3.1.3) Search Menu (Chapter 3.1.4) Navigate Menu (Chapter 3.1.5) Build Menu (Chapter 3.1.6) Debug Menu (Chapter 3.1.7) Extras Menu (Chapter 3.1.8) Window Menu (Chapter 3.1.9) Help Menu (Chapter 3.1.10)



3.1.1 Project Menu The ‘Project’ menu contains general commands for creating, loading and saving an Embedded Wizard project:

‘New…’ – Create a new Embedded Wizard project. ‘Open…’ – Open an already existing Embedded Wizard project. ‘Close’ – Close the currently opened Embedded Wizard project. ‘Save’ – Save the currently opened Embedded Wizard project. ‘Exit’ – Quit the Embedded Wizard application.

Additionally, the ‘Project’ menu contains a list with the recently used projects. These commands are also available in the ‘Project’ toolbar:

3.1.2 Edit Menu The ‘Edit’ menu contains commands for Undo/Redo, for controlling the clipboard and for renaming the currently selected members:

‘Undo’ – Cancel the last modification. Each selection of ‘Undo’ goes one step back through the history of modifications.



‘Redo’ – Cancel the last ‘Undo’ operation. Each selection of ‘Redo’ goes one step ahead through the history of modifications.

‘Cut’ – Cut the currently selected members or text and put it on the clipboard. ‘Copy’ – Put a copy of the currently selected members or text on the clipboard. ‘Paste’ – Insert the current clipboard contents. ‘Delete’ – Delete all currently selected members or text. ‘Select all’ – Select all members or the entire text in the Editor. ‘Rename …’ – Rename the currently selected member. ‘Override class member’ – This command is used to override an inherited

class member. Thereupon the member can be modified. To return to the origin, inherited member, delete the overridden member.

‘Restore default value’ – Restores the inherited value of an attribute or property. In derived members, the values of attributes and properties can be overridden. To restore the origin, inherited value of such attribute or property use this command.

These commands are also available in the ‘Edit’ toolbar:

3.1.3 Arrange Menu The ‘Arrange’ menu contains commands for restacking the currently selected members:

‘Restack up’ – Restack all currently selected members up (increase Z-order). ‘Restack down’ – Restack all currently selected members down (decrease Z-

order). ‘Restack top most’ – Restack all currently selected members topmost (set

topmost Z-order). ‘Restack back most’ – Restack all currently selected members backmost (set

backmost Z-order). These commands are also available in the ‘Arrange’ toolbar:



3.1.4 Search Menu The ‘Search’ menu contains commands for searching members within the project and for searching or replacing text within the Editor.

‘Find in project…’ – Search in the project for members containing the given text. All found locations are reported in the Log Window. A double click onto a message will guide you to the location. When selecting this menu item, a small dialog box appears, where the search text can be inserted and search options can be defined.

Please note the option ‘Limit to members of the currently opened Composer’. This option limits the scope of search to the content of the currently opened Composer page.

‘Find…’ – Search in the Editor (“Editor” (Chapter 3.5)) for a given text. When selecting this menu item, a small dialog box appears, where the search text can be inserted and search options can be defined. The ‘Find Next’ button moves the caret in the Editor to the next location relative to the current caret position.

‘Replace…’ – Search in the Editor for a given text and replace it by a new term. The command displays a dialog to insert the search term, the substitution term and some search options. The ‘Find Next’ button moves the caret in the Editor to the next location relative to the current caret position without substitution. The ‘Replace’ button replaces the next found term. The ‘Replace All’ button substitutes all search terms without any further confirmation.

‘Find next’ - Repeat the search operation in order to move the caret to the next occurrence of the search text in the Editor. You can simply press F3 to jump the caret to the next occurrence of the search text.



These commands are also available in the ‘Search’ toolbar:

3.1.5 Navigate Menu The ‘Navigate’ menu contains helpful commands to navigate quickly inside a project. These commands are context sensitive – they depend on the currently edited content or the selected members.

‘Open’ – Open the selected member or its type definition. After selecting this command, the content of the selected member is shown in the Composer (“Composer” (Chapter 3.3)) or Editor (“Editor” (Chapter 3.5)). The content of a member can be also opened by a double click.

‘Project’ – Navigate to the project. After selecting this command, the project page is shown in the Composer (“Composer” (Chapter 3.3)).

‘Unit’ – Navigate to the unit, where the currently edited class or enumeration is defined in. After selecting this command, the unit is displayed in the Composer.

‘Origin’ – Navigate to the location, where the currently edited content is defined. After selecting this command, the Composer is opened, where the brick of the edited content is defined in.

‘Super class’ – Navigate to the super class of the currently edited class. After selecting this command, the content of the super class is displayed in the Composer.

‘Ancestor’ – Navigate to the ancestor of the selected or edited member. This command is useful by derived members only. The location of the immediate ancestor is shown in the Composer.

‘First ancestor’ – Navigate to the first ancestor of the selected or edited member. This command is useful by derived members only. The location of the origin (the oldest) ancestor is shown in the Composer.

‘From selected text’ – Navigate to the member, whose name is selected in the text field of the Editor (“Editor” (Chapter 3.5)) or the Inspector window (“Inspector” (Chapter 3.4)).



‘Next Log message’ – Inspects the next Log window message. (“Log Window” (Chapter 3.11))

‘Previous Log message’ – Inspects the previous Log window message. (“Log Window” (Chapter 3.11))

These commands are also available in the ‘Navigate’ toolbar:

Within the Editor, the navigation commands ‘Origin’, ‘Ancestor’ and ‘First ancestor’ can be used to find the location, where the method brick is defined and to inspect the base version of a derived method.

3.1.6 Build Menu The ‘Build’ menu contains commands to start the code generation and to control the Prototyper:

‘Build this profile’ – Start the code generation process for the currently selected profile.

‘Build in batch mode …’ – Display a dialog box to select one or more profiles and start the code generation process for all selected profiles.

‘Extract documentation …’ – Display the following dialog to choose the options for the generated documentation:



The upper part of the dialog contains a list of all units of the currently loaded project. Each unit can be included or excluded from the documentation generation. The center part of the dialog contains a set of check boxes, to generate an additional class overview diagram, to include the description of all languages, profiles or macros and to exclude some superfluous documentation. The lower part of the dialog contains three edit fields to include some external introduction documentation (as an extern HTML file), to define the document title and to select an output directory. After starting the process by pressing ‘Extract’, Embedded Wizard evaluates the content of your project, the dependencies between the classes, constants, resources, etc. and stores it together with the associated inline documentation within a set of HTML files. In a second step a single Microsoft HTML Help file is created. This help file contains detailed documentation of your project and it can be used or distributed as your 'software reference manual'. For more details about the documentation features of Embedded Wizard see “Chora User manual”).

‘Reload class’ – Reload the currently edited class once again into the Composer and reinitialize it. Sometimes, if the implementation of a method has been changed, new bricks are added to, some bricks are removed from the class, or members are renamed you have to reload the class in order to refresh the Chora interpreter.



‘Start prototyper’ – Open the Prototyper window (“Prototyper” (Chapter 3.6)) and load the currently edited or in Composer selected class into the Prototyper.

‘Start prototyper with application class’ – Open the Prototyper window (“Prototyper” (Chapter 3.6)) and load the application class into the Prototyper. The name of the application class has to be defined before in the attribute ApplicationClass within the current profile. For more details about profiles see ‘Chora User Manual’.

‘Start prototyper with color statistic …’ – Open the Prototyper window (“Prototyper” (Chapter 3.6)) and load the currently edited or in Composer selected class into the Prototyper. During the prototyping session, a statistic about all used colors of the prototyped GUI application is generated and stored as a text file within the project directory. The statistic file contains all used color values and their number of usage. This color statistic is used as input for the CLUT generation (see below). The prototyping session with color statistic can be seen as a learning phase for the CLUT generation: the more GUI screens are displayed during the prototyping session, the more color values are added to the color statistic and the better results can be created from the CLUT generator. If there is already an existing color statistic file available, a dialog appears at the beginning of the prototyping session: the user can either add all colors of the new prototyping session by selecting ‘Resume’ or create a new color statistic by selecting ‘Discard’. Please note, to run the color statistic you have to select a profile, which is using the platform package ‘Tara.Win32.RGBA8888’.

.‘Generate CLUT file …’ – Convert a color statistic file into a color-lookup-table (CLUT). Generally, the CLUT generator converts a color statistic (see above) of the current project into a CLUT file containing the 256 best fitting colors. This CLUT file can be used later within an Index8 Platform Package as a global color palette.

After selecting this menu item, the following dialog appears:



Within the first line, the number of reserved CLUT entries can be defined. Reserved CLUT entries are only used for external applications (so called Applets) sharing the CLUT with the Embedded Wizard GUI application. Within the second line of the dialog, the strategy for CLUT generation can be selected:

- The ‘Majority’ strategy takes care on colors with a high occurrence, whereas colors with low occurrence are merged.

- The ‘Diversity’ strategy takes care that all different colors are kept within the CLUT, independent from their real occurrence.

- The ‘Popularity’ strategy takes care on all different colors, which are often used, and combines very different colors only if they are used rarely. This strategy can be seen as a compromise between Majority and Diversity.

Within the third line of the dialog, the name of the resulting CLUT file can be defined. The given path is relative to the current project directory. Within the lower part of the dialog, user defined colors can be given to the CLUT generator. These colors are included within the final CLUT, independent from their occurrence within the color statistic. User defined colors can be selected comfortable by the following dialog, which appears after selecting the buttons ‘Add user defined color …’ or ‘Edit selected color …’:



User defined colors may be useful for external applications (Applets), which expects a CLUT with a set of fixed colors. Normally, the CLUT generation should be based only on the color statistic file. The CLUT generation is started by pressing the button ‘Generate’. This process may take between a few seconds and several minutes. The number of colors, which are reduced by the CLUT generator are reported within the Log window. Additional remark: In order to use the generated CLUT within your Index8 based platform, the CLUT file has to be specified in the Profile. For this purpose enter the name of the CLUT file in the attribute Clut of the affected profile.

These commands and additional combo boxes are available in the ‘Build’ toolbar:

‘Profile’ combo box – In the first combo box the profile used for prototyping purposes and for code generation can be selected. The selected profile is used when a class is loaded into the Prototyper or when the code generation process is started by selecting the menu item ‘Build this profile’.

‘Language’ combo box – In the second combo box the active language for prototyping purposes can be selected. The currently active language determines the language dependent variant of a resource or constant. This selection can be compared with the Chora global variable language, which changes the currently active language at the runtime. See “Chora User Manual”.



‘Styles’ combo box – In the third combo box the set of active styles for prototyping purposes can be selected. The active styles determine the used variants of multivariant classes, constants and resources. This selection can be compared with the Chora global variable styles, which changes the active styles at the runtime. See “Chora User Manual”.

3.1.7 Debug Menu The ‘Debug’ menu contains commands for debugging GUI applications:

‘Continue’ – Continue the code execution in the Prototyper. ‘Cancel’ – Cancel the execution of the current event or timer expiration and

continue with the next event. The Prototyper window still keeps opened. ‘Force garbage collection’ – Start immediately the next garbage collection

cycle. ‘Step over’ – Step over the next statement. ‘Step into’ – Step into the statement. In case of a method call, step into the

method. ‘Step out’ – Execute code until the currently debugged method is left. ‘Step through’ – Like ‘Step over’, but don’t break at initialization expressions,

defined in the Inspector (see “Inspector” (Chapter 3.4)). Execute until the next statement in a method has been reached.

‘Toggle breakpoint’ – Set or remove the breakpoint at the current text row in the Editor (see “Editor” (Chapter 3.5))

‘Remove all breakpoints …’ – Allows you to remove all breakpoints at once. ‘Show current statement’ – Shows the location where the execution is halted in

the Editor or Inspector. ‘Track screen updates’ – Determines whether the Prototyper should highlight

the redrawn screen areas. This function can help you to analyze and optimize the screen updates in your GUI application.



If enabled, the Prototyper masks the redrawn screen areas with green color, which after a short period is faded out again.

These commands are also available in the ‘Debug’ toolbar:

3.1.8 Extras Menu The ‘Extras’ menu contains helpful commands to customize the appearance and to set a grid and zoom factor in the Composer (see “Composer” (Chapter 3.3)).

‘Customize toolbars …’ – Display a dialog box to configure the toolbars. Buttons can be added to a toolbar by dragging the button from the dialog box to the toolbar. Buttons can be removed from a toolbar by dragging the button from the toolbar back to the dialog box.

‘Grid’ – Enable or disable the grid in the Composer. When a grid is activated, all objects and bricks, which are moved with the mouse, are aligned to the grid points.

‘Zoom in’ – Increases the zoom factor of the currently active page of the Composer.

‘Zoom out’ – Decreases the zoom factor of the currently active page of the Composer.

‘Enable auto save’ – Determines whether Embedded Wizard should save periodically the last project modifications. If enabled, Embedded Wizard performs every 20 minutes the usual project save operation as if it would be triggered by the menu item ‘Save’. Please note, like the usual save operation, auto save overwrites your project files if there are changes in the project only.

These commands and three additional combo boxes are available in the ‘Extras’ toolbar:

‘Grid’ combo box – Select the size of the grid for the currently active Composer page. The grid is displayed as gray points in the background of the Composer window.

‘Zoom’ combo box – Select the zoom factor for the currently active Composer page.



‘Aspect Ratio’ combo box – Change the aspect ratio of the currently active Composer page. The combo box contains a list of predefined aspect ratios. Additionally a user-defined aspect ratio can be specified. In this case you have to input both, the horizontal and the vertical expansion divided by a colon sign : directly in the edit field of the combo box.

3.1.9 Window Menu The ‘Window’ menu contains commands to navigate through the Composer pages and the dockables of the Embedded Wizard:

‘Previous Composer’ - Navigate to the previous Composer page (see “Composer” (Chapter 3.3)).

‘Next Composer’ - Navigate to the next Composer page. ‘Close this Composer’ – Close the currently active Composer page. ‘Close all Composers …’ – Close all Composer pages excepting the project

page (which is always opened as long as a project is loaded). ‘Composer’ – Activate the Composer window. ‘Gallery’ – Shows and activates the Gallery window (see “Gallery” (Chapter

3.2)). ‘Inspector’ – Shows and activates the Inspector window (see “Inspector”

(Chapter 3.4)). ‘Editor’ – Shows and activates the Editor (see “Editor” (Chapter 3.5)). ‘Message Log’ – Shows and activates the Log window (see “Log Window”

(Chapter 3.11)). ‘Variables’ – Shows and activates the Variables monitor window (see

“Variables Window” (Chapter 3.7)).



‘Callstack’ – Shows and activates the Callstack monitor window (see “Callstack Window” (Chapter 3.8)).

‘Chora Objects’ – Shows and activates the Chora Objects monitor window (see “Chora Objects Window” (Chapter 3.9)).

‘Garbage Collector’ – Shows and activates the Garbage Collector window (see “Garbage Collector Window” (Chapter 3.10)).

‘Show/hide monitor windows’ – Hides temporary the monitor windows and restores their state again.

‘Connect Editor to Inspector’ – Connect the Inspector with the Editor. If the option is active, the Editor shows the content of attributes and properties selected in the Inspector.

Some of these commands are also available in the ‘Window’ toolbar:

3.1.10 Help Menu The ‘Help’ menu contains commands for displaying the online documentation and the version information:

‘Embedded Wizard Help …’ – Display this Embedded Wizard User Manual. ‘Chora User Manual …’ – Display the Chora User Manual. ‘Mosaic User Manual …’ – Display the Mosaic User Manual. ‘Visit Embedded Wizard product page …’ – This command guides you to the

Embedded Wizard webpage, where updates, documentations and examples can be found.

‘Visit Embedded Wizard registration form …’ – This command guides you to a registration webpage. We recommend you to register your Embedded Wizard license in order to be able to receive updates and news.

‘Always check for latest version’ – This command determines, whether Embedded Wizard automatically checks for new updates.

‘About Embedded Wizard …’ – Display a window with version and copyright information.

These commands are also available in the ‘Help’ toolbar:



3.2 Gallery The Gallery of the Embedded Wizard accommodates two different views:

Templates view (see “Templates view” (Chapter 3.2.1)) Browser view (see “Browser” (chapter 3.2.2))

To switch between the different views, the Gallery window provides a tab control. To switch to the Browser view, click on the Browser tab. To switch to the Templates view, click on the Templates tab:

As long as the Gallery is the active window, you can also press the keys Ctrl+Tab to toggle between these two views.

3.2.1 Templates view The Templates view can be regarded as a pool of templates, which can be used to build up your GUI application. Any kind of template may be stored in the Gallery, e.g. a simple variable, a complex method or the implementation of a complete class. The Templates view is organized in folders, which can be opened by a single click on the caption (on the bar) of the folder. As soon as a project is loaded into Embedded Wizard, a set of default folders is loaded into the Templates view:



The templates can by dragged from the Gallery and dropped into the Composer in order to use them. You can also copy a selected template on the clipboard by pressing Ctrl+C and insert it into the Composer by pressing Ctrl+V. Additionally, the Templates view can be used to store your own, frequently used templates. For example, a member selected in the Composer can be copied by Ctrl+C on the clipboard and then be pasted by Ctrl+V into an opened folder of Templates view. You can also drag selected members from the Composer by holding down the Ctrl key and drop them into the Templates view. In the same manner, you can copy or move templates between the several folders of the Templates view. As long as the Templates view is active, you can press a key in order to open a folder, whose name starts with the pressed key. For example, if you want to open the folder Panels, press the key P. If there are more folders, which start with the sign P, press the key P more times until the desired folder has been reached.



In the same manner you can select a template within the opened folder. In order to distinguish between the shortcuts for the folder selection and the shortcuts for the template selection, the templates selection has always to start with the Space key. For example, you wish to select a Push Button template in the currently opened folder. In this case press one after another the keys Space and P. If there are more templates, which starts with P, press the key P more times until the desired template has been reached. By using these shortcuts you can copy templates very quickly without the necessity to click with the mouse on them. For example to copy and paste a method from the Default folder into the Composer use following shortcuts: First press Alt+1 to switch to the Gallery. Then press D to open the Default folder. Then press Space key followed by M M to select the method template. With Ctrl+C copy the method template and with Ctrl+0 switch to the Composer where the copied template can be pasted via Ctrl+V. When clicking with the right mouse button into the Templates view, the following context menu appears, which provides commands to create, delete and rename folders and templates:

All folders within the Templates view are mapped to a subdirectory of the Embedded Wizard installation. All templates are stored as readable Chora code within these subdirectories. If you want to transfer some of your template folders to another PC, you have to copy the subdirectories into the other Embedded Wizard installation and to restart Embedded Wizard. To avoid the deletion of a template by mistake, you can set your template files to write protected.

3.2.2 Browser The Browser is the second view of the Gallery window. It displays a list of project members and gives you an overview about the project structure:



The Browser view is divided in 2 parts. In the bottom area a list of project members is displayed. The members are arranged in six categories ‘Classes’, ‘Constants’, ‘Resources’, ‘Enumerations’, ‘Auto objects’ and ‘Sets’. The organization of the displayed items within the Browser does reflect the inheritance hierarchy of the corresponding members. In order to show all descends of a member simply click on the small icon. The click on the icon will collapse the member, so its descends are hidden:



The multi-variant members are handled in a special manner by the Browser view. They are always signed with the icon in the first column. This sign should help you to recognize multi-variant members at a glance. The concept of variants allows the development of GUI applications, whose appearance and behavior can be changed at the runtime. This unique feature simplifies the implementation of skins, themes, target and resolution dependent GUIs, etc. This feature also provides the customization of existing software in a way very transparent to the customer. When a class, constant or resource has been overridden by a variant, it becomes multi-variant and will be signed with this small icon:

For details concerning the variants, please see the Chora User Manual. Unlike the Composer or Inspector window, the Browser does not provide any modifications on the displayed members. Anyway, the Browser can serve as the source for all drag&drop operations. It is not necessary to switch between the Composers, if you need to drag a member from one Composer to another. Drag the member directly from the Browser instead. In this manner you can create a copy of a member, you can derive a sub-class or a variant of a member, or a new object of a class can be embedded into another class.



To copy a member, drag it by holding the Ctrl key down. To derive a new sub-class from another class, drag the base class member by holding the Ctrl+Shift keys down into a unit Composer. To derive a variant from a class, resource or constant, the keys Ctrl+Shift+Alt should be hold down. To derive an object of a class, the keys Ctrl+Alt should be hold down. The members displayed in the Browser can also be inspected. For this purpose double click on the member or press Return key after a member has been selected. Thereupon the location, where the member is defined is shown in the Composer and the member can be edited as described in “Composer” (Chapter 3.3). The Browser provides a context menu. Depending on the affected member, following menus do appear after a right mouse button click:

The upper area of the Browser provides a ‘Search’ edit field. This edit field can take a filter condition. If the filter is set, the Browser will highlight all members, whose name does fit the given filter condition:

The condition is fulfilled, if the filter text does appear anywhere within the members name. The filter evaluation is case insensitive. For example, if the filter is set to menu, the members DemoMenu::MainMenu, Menu::MenuItem, etc. are highlighted. Optionally, parts of the filter can be specified using the wildcards '*' and '?'. The sign '*' stands for an arbitrary number of any signs. The '?' wildcard, on the other hand, stands for exactly one sign. When using wildcards, the entire name of the member has to fit the filter condition otherwise it will not become highlighted. To filter all members, set the filter to a single * sign.

To deactivate the filter click on the icon on the right hand side of the edit field or press the Esc key as long as the edit field is focused.

As long as the Gallery is the active window, you can press the key Tab to toggle between the ‘Search’ edit field and the list of project members.

3.3 Composer The Composer of the Embedded Wizard is used to edit GUI applications in a visual way. All graphical objects (like filled rectangles, images or texts) are directly drawn into the Composer. Other ingredients of a project are visualized as ‘bricks’. A brick is a cover for a single Chora definition. This means, that each variable, method, property, class, …, macro or unit of an GUI application is represented by a brick.



Each brick contains an icon, the type description and the name of the Chora definition. A brick can be selected, resized and moved with the mouse. The position of the bricks is not important for the functionality of your application; however, it is recommended to arrange all bricks clearly to keep track of the complete project. Sometimes, bricks overlap each other – this can be detected easily by the shadow of the bricks: The shadow of a brick is darker if another brick is lying behind. The displayed icon and the shape of the brick reflect the role of the corresponding software component within the GUI application. Depending on the shape of the brick, the bricks can be divided in following three categories:

Bricks with beveled sides define entities of logic. They are used for methods, slots, etc. The methods can be edited in the Editor. To edit the method double click on the brick with the left mouse button.

Bricks with angle sides define entities of data. They are used for variables, properties, arrays, embedded objects, constants and resources. To initialize these entities, the desired initialization expressions can be specified in the Inspector.

Bricks with rectangular shape stands for all others entities like units, classes, etc.



Per default all bricks are displayed with black text color. Only class members are signed with different text colors in order to reflect their origin and the class dependencies.

All new defined, not inherited members are signed with the black text color.

Inherited and overridden members will be signed with the gray text color.

In case of errors in the inheritance of the particular member, its brick’s name is drawn in red color. Such errors are detailed reported in the Log Window.

Since each project is organized in a hierarchical way (a project consists of units – a unit consists of classes - a class consists of variables, properties, methods, …) the Composer is used to navigate through a project. A double click on a brick ‘zooms’ into the brick, e.g. a double click on an unit brick opens a new Composer page where all ingredients of the unit are shown. A double click on a method brick guides you to the Editor where the logic of the method can be implemented (see “Editor” (Chapter 3.5)). To switch between the Composer pages, you can either click on one of the tabs inside the Navigation bar on top of the Composer or you can use the ‘Previous Composer’ / ‘Next Composer’ commands of the ‘Window’ main menu. To switch much more faster between the different Composer pages, you can use the following keys: Ctrl+F6 switches to the next page, Ctrl+Shift+F6 switches back to the previous page. The currently visible page is called active page.

Additionally, the ‘Navigate’ menu contains several helpful commands to navigate in your project and to keep the overview (see “Navigate Menu” (Chapter 3.1.5)). Generally, the Composer supports drag&drop, copy&paste and the context menu, which appears after a click with the right mouse button. For example, to add a new unit to a project, drag a unit template with the mouse from the Template view (see “Gallery” (Chapter 3.2)) and drop it into the project page of the Composer. The new unit will be displayed as a brick at the same location where you dropped it. If, while you are dragging an object, the desired page is not active, you can move the mouse to the corresponding tab in the Navigation bar and wait about half a second, then the Composer activates the corresponding page, where you can drop the object. Within the Composer the members can be selected in several ways: A single member can be selected by clicking on it with the left mouse button. By clicking on a member while holding down the Shift key, the clicked member will be added to the selection or if the member is already selected, it will be removed from the selection.



To select several members you can drag a selection frame while the left mouse button is hold down. After changing the current selection in the Composer, the selection within the Inspector (see “Inspector” (Chapter 3.4)) is synchronized and vice versa. To select all members of Composer use the command ‘Select all’ from the main menu ‘Edit’. If you wish to cancel the selection press the key Esc. You can select a member also during a drag&drop operation in order, for example, to be able to drop the dragged content into the selected member. To do this, move the mouse cursor over the member and wait a short time until the member becomes selected. Now you can see its properties and attributes in the Inspector and you can drop there the dragged content. If you wait a little bit longer, the content of the member will be opened. For example, you can drag something over a unit brick and wait until the unit is opened in a new Composer page. Now you can drop the dragged content directly into the opened unit. The context menu of the Composer contains commands for ‘Undo & Redo’ for ‘Copy & Paste’ and for restacking selected objects. These commands are described in “Edit Menu” (chapter 3.1.2).

The appearance of the Composer page and the editing possibilities depends on the currently edited content. Thus, Embedded Wizard contains the following types of Composer pages:

Project Composer (Chapter 3.3.1) Profile Composer (Chapter 3.3.2) Unit Composer (Chapter 3.3.3) Enum Composer (Chapter 3.3.4) Set Composer (Chapter 3.3.5) Class Composer (Chapter 3.3.6)



3.3.1 Project Composer The content of the project page within the Composer reflects the content of the currently opened project (the *.ewp file). In contrast to all other Composer pages, the project page cannot be closed. The project page is closed automatically, when the project itself is closed. The following screenshot shows the Composer with an active project page:

A project page of the Composer may contains following members:

Represents a single unit used in the project. The entire Embedded Wizard project consists of units. The units in turn store the project components, its classes, resources, etc. A double click on a unit brick opens a new Composer page containing the unit members.

A profile describes the settings for the target platform. The target platform is determined by the name of the so-called Platform Package. Besides the name of the Platform Package used, a profile may contain a set of settings and macro definitions. A double click on a profile brick opens a new Composer page containing the profile macros. Each project has to contain at least one profile.

Define a supported language for which the GUI is localized. The localization makes it possible to develop an GUI in German, English, Japanese and so on.



Each project has to contain at least the Default language.

Styles are used to identify different variants of the GUI application. Such multivariant GUI application may change its appearance and behaviour at the runtime. This feature provides a simple way for the development of GUI applications with different skins and themes.

For details concerning the project and its members, please see the “Chora User Manual”

3.3.2 Profile Composer The Profile Composer shows all macros of the currently edited profile. A profile may consist of macros only. A single macro stores any character string under a unique name. By using this name, the content of the macro (the character string stored there) can be used in definitions of classes, methods, and so on. A macro is always defined within a profile; thus, a macro is valid only when the corresponding profile has been selected (see “Build Menu” chapter 3.1.6). The following screenshot shows the Composer with an active profile page:

For details concerning profiles and macros, please see the “Chora User Manual”.



3.3.3 Unit Composer The Unit Composer displays all definitions stored within the currently edited unit. The following screenshot shows the Composer with an active Composer page of the unit DemoMenu:

A unit page of the Composer may contains following members:

The class. The class represents an object-oriented component of the GUI application. It consists of variables and methods. Classes can be derived, by what the derived classes inherit the members of their base classes. These inherit members can also be overridden and modified in derived classes. The icon displayed in the brick corresponds to the class itself or to the base class from which it has been derived. For user defined classes new icons can be copied into the Icons directory of Embedded Wizard. Beside the icon, the brick also displays the name of the base class. A double click on a class brick opens a new Composer page containing the implementation of the class.



A constant bears a name and has a fixed value defined by the programmer. Using this name, the value of a constant can be used in the GUI application. Constants are excellently suited to defining, for example, menu titles or the colors of an GUI. Changing a constant, therefore, affects the entire GUI. The data type of the constant is displayed in the brick.

Resources are constant files that the Chora compiler adopts in the ANSI C code generated. Thus it is possible, for example, to embed bitmaps in the GUI in order to use them at runtime from the GUI and display them on the screen. Embedded Wizard supports two kinds of resources: Bitmap resources and Font resources.

Inline is a special definition that makes the Chora compiler insert a native code sequence in the generated ANSI C code. In this manner, the combination of Chora and ANSI C code is possible. This technique is used primarily in developing driver classes geared to specific platforms. Such driver classes form the interface between the GUI and the underlying target system, and guarantee the platform independence of the GUI that has been developed. A double click on a inline brick opens the implementation of the brick in the Editor.

An enumeration is a user-defined data type that consists of a list of constant labels, so-called enumerators. A variable of the type of such an enumeration may, therefore, take on exactly one value from the enumerator list. A double click on an enum brick opens a new Composer page containing the enumerator items of the enum.

A set is a user-defined data type that consists of a list of constant labels, so-called enumerators. A variable of the type of such a set may, therefore, take any combination of the enumerators – even a set. A double click on an set brick opens a new Composer page containing the enumerator items of the set.



Objects, which are automatically instantiated on-request and released as soon as they are not in use anymore. Auto objects always exist in the global scope of a unit so they can be accessed from any part of the Chora code. The icon displayed in the brick corresponds to the class of the object. Beside the icon, the object also displays the name of its class. A double click on a object brick opens a new Composer page containing the implementation of its class.

Variants of classes, constants, resources and objects. The variants are signed with a small icon. The concept of variants allows the development of GUI applications, with multiple different appearances and behaviors. The selection of the desired appearance and behavior is done during the code generation or at the runtime. The idea behind the variants is based on the object-oriented concept of derivation. This is realized in a way similar to the class inheritance – the affected parts of the GUI can be simple derived and adapted. The one big difference is, that variants do override (substitue) the origin definitions they are derived from. If at the runtime the definition is used, Embedded Wizard does handle with the variant instead.

While working with unit members, you will frequently need to derive new classes, variants or objects:

To derive a new sub-class from another class, drag&drop the base class brick by holding the Ctrl+Shift keys down.

To derive a new variant from a class, resource, constant or an auto object, the keys Ctrl+Shift+Alt should be hold down during the drag&drop operation.

To instantiate an auto object of a class, the keys Ctrl+Alt should be hold down while dragging the class brick.

For details concerning the unit, please see the “Chora User Manual”

3.3.4 Enum Composer The Enum Composer is used to define all enumerators within an enumeration. The following screenshot shows the Composer with an active enum page:



For details concerning the enumeration, please see the “Chora User Manual”

3.3.5 Set Composer The Set Composer is used to define all enumerators within a set. The following screenshot shows the Composer with an active set page:

For details concerning the sets, please see the “Chora User Manual”

3.3.6 Class Composer The Class Composer displays the content of a class. The appearance of the Class Composer depends on the origin of the class:

If the class is derived from the Mosaic class Core::Group, the Composer contains an additional display area (so called ‘canvas’) surrounded by a thick blue frame. All graphical objects of the class (like rectangles, images, texts, …) are displayed inside this display area in their real form of appearance. In this area it is also possible to select, resize and move the members with the mouse. All non graphical members of the class (like variables, properties, methods, …) are drawn outside this display area as bricks.

All other classes, which are not derived from Core::Group, are displayed only by using bricks. These classes do not have their own visual representation in the target system. They are used in the background of the GUI application, like drivers or containers for data, etc.



The following screenshot shows the Composer with an active class page. As you can see, the Composer also contains a canvas area, where the menu items, etc. are visible.

A class page of the Composer may contains following members:

Variable that stores a value during the lifetime of an object, whereby each object contains its own copy of the variable. An object's variables store the state of that object, for example the color in which a shape is to be drawn on the screen. The data type of the variable is displayed in the brick.

An array is a variable that can store more than one value. The values within the array can be accessed by using an index. The data type of the array is displayed in the brick.

A property is an 'intelligent' variable. In a manner completely transparent to the programmer, accessing a property invokes a special onget or onset method, in which each property has its own methods.



The programmer may define the logic of these methods himself in order to react to the specific aspects of read or write access to the property. For example, the programmer can have the screen contents updated automatically whenever a property is changed. The data type of the property is displayed in the brick.

Any object may embed other objects of a different class. Each embedded object belongs to the superior object. Each superior object contains a copy of all the objects embedded within it. When an object is created at runtime, all objects embedded within it are automatically created as well. The icon displayed in the brick corresponds to the class of the object. Beside the icon, the object also displays the name of its class.

A method is a function of an object. By calling the method, an object can be forced to perform a particular action.

The onget/onset methods are specialized methods witch are invoked whenever the value of the corresponding property is to be queried or changed. In this manner the access to the property can be controlled.

The slot method is a specialized method that can handle signals from other objects. Signals exist for the sake of simple communication between objects. If an object sends a signal to a particular slot of another object, the logic of the corresponding slot method of the recipient object is automatically executed.

Since a class can be derived from another class, it may consist of a lot of members. To keep the overview, only those members are displayed as bricks, which are added to or overridden in the class. All other inherited, but not overridden members are not displayed within the Composer. Of course, these members appear in the Inspector. While working with the class Composer, you will frequently need to override class member or to embed objects of other classes:

To override an inherited member (for example a method) you have to hold down the keys Ctrl+Shift and drag the member from the Inspector into the Composer.

To restore to the inherited member, it is sufficient to delete the overridden member within the Composer.

To instantiate an object of a class, the keys Ctrl+Alt should be hold down while dragging the class brick.



For details concerning classes, please see the “Chora User Manual”

3.4 Inspector The Inspector of the Embedded Wizard is used to inspect and modify the members of the GUI application. The content of the Inspector corresponds to the content of the currently active page in the Composer (see “Composer” (Chapter 3.3)). Each time, the content within the Composer window changes, the content of the Inspector is updated. The following screenshot shows the Inspector:

The Inspector is divided into three parts: Member Area (Chapter 3.4.1) Attribute and Property Area (Chapter 3.4.2) Description Area (Chapter 3.4.3)

As long as the Inspector is the active window, you can press the keys Ctrl+Tab to toggle between Member Area and the Attribute/Property Area.



3.4.1 Member Area The upper part of the Inspector contains a list of members. The content of the list corresponds to the content of the currently active page in the Composer. Each list entry corresponds to one member.

The list is divided in three columns: Name – shows the names of the members. Type – shows type of the members. Order – shows the z-order of the members. The z-order determines the

drawing order of all visible objects from back to top. Additionally, the z-order determines the initialization order of the members during the runtime.

To sort a list by a column, click with the left mouse button on its caption. For example, to sort the list by the type, click on the caption of the Type column. Please note, unlike other columns, the Name column provides two different sorting algorithms. If you click on the caption of the Name column, you can toggle between sorting by name and sorting by inheritance. In case of the sorting by inheritance, the Inspector will show first new members followed by inherited and overridden members and at the end the inherited but no overridden members. Per default all members in the Member Area are displayed with black text color. Only class members are signed with different text colors and fonts in order to reflect their origin and the class dependencies.

All new defined, not inherited members are drawn bold with the black text color.

Inherited and overridden members will be drawn bold with the gray text color.

Inherited but not overridden members will be displayed with the gray text color and thin font.

In case of errors in the inheritance of the particular member, the member is drawn in red color. Such errors are detailed reported in the Log Window.



The list entries can be selected with the keyboard (analog to Windows Explorer) or with the mouse: A single click on a name selects the member. By holding down the Ctrl key, more than one member can be selected. A second click to an already selected member removes it from the selection. After changing the current selection in the Inspector, the selection within the Composer is synchronized and vice versa. To select all members of Composer use the command ‘Select all’ from the main menu ‘Edit’. If you wish to cancel the selection press the key Esc. You can select a member also during a drag&drop operation in order, for example, to be able to drop the dragged content into the selected member. To do this, move the mouse cursor over the member and wait a short time until the member becomes selected. Now you can see its properties and attributes in the middle part of the Inspector and you can drop there the dragged content. If you wait a little bit longer, the content of the member will be opened. For example, you can drag something over a unit member and wait until the unit is opened in a new Composer page. Now you can drop the dragged content directly into the opened unit. When you click with the right mouse button, a context menu of the Member Area appears. The context menu contains commands for ‘Undo & Redo’ for ‘Copy & Paste’ and for restacking selected objects.

Furthermore the command ‘Open’ opens the currently selected member in Composer or Editor (depending on type des members). With the command ‘Rename member’ the currently selected member can be renamed. Please note, that you cannot rename inherited, still not overridden members - their name is already determined by the inheritance. When you select this command, a small inplace edit field appears, where the new name of the member can be entered. To apply the new name and to close the inplace edit field press the key Return.



When renaming a member, Embedded Wizard evaluates the entire project and searches for references to the renamed member in order to adapt them to the new name. This, so called, ‘refactoring’ take in account the inheritance of classes, the initialization expressions of members, the source code of methods, etc. To suppress the automatic refactoring, press the keys Shift+Return instead of the key Return when closing the inplace edit field. The command ‘Override class member ...’ is useful to override inherited members. For example, if you like to override an inherited method, select the method in the Inspector and apply the command ‘Override class member ...’. Thereupon the method will become overridden a method brick appears in the Composer. Now you can open the overridden method for editing, etc. The edit commands are described more in detail in “Edit Menu” (chapter 3.1.2). The upper area of the Inspector provides a ‘Search’ edit field. This edit field can take a filter condition. If the filter is set, the Inspector will show only the members, whose name does fit the given filter condition:

The condition is fulfilled, if the filter text does appear anywhere within the members name. The filter evaluation is case insensitive. For example, if the filter is set to event, the members HandleEvent and DispatchEvent, etc. are displayed.

Optionally, parts of the filter can be specified using the wildcards '*' and '?'. The sign '*' stands for an arbitrary number of any signs. The '?' wildcard, on the other hand, stands for exactly one sign. When using wildcards, the entire name of the member has to fit the filter condition otherwise it will be excluded. To filter all members, set the filter to a single * sign.

To deactivate the filter click on the icon on the right hand side of the edit field or press the Esc key as long as the edit field is focused.

As long as the Inspector is the active window, you can press the key Tab to toggle between the ‘Search’ edit field and the list of members.



3.4.2 Attribute and Property Area The middle part of the Inspector contains the attributes and properties of the currently selected members. If only one member is selected, all attributes and properties of the member are displayed. If two or more members are selected, only the common attributes and common properties are displayed:

The list is divided in two columns: Name – at the left the names of attributes and properties is shown. Value – at the right the values of attributes and properties is shown.

The both columns are divided by a thin splitter, on which you can click with the left mouse button in order to grab and drag it. The colors used to display the attributes and properties reflect the state of the affected attribute or property:

All attributes, which are not modified, are drawn with thin font and gray text color. These attributes are initialized with a value inherited from the base class, or they are initialized with default values.

Modified attributes are displayed bold with the gray text color.

Properties are always displayed in the black text color. Properties, which are not modified, are displayed with the thin font.

Modified properties are displayed bold with the black text color.

Attributes or properties signed with the red color are invalid. The appropriate error message is displayed in the Log window when the affected attribute is evaluated by the Prototyper or during the code generation.

If an attribute or a property contains several subordinate values, a small icon appears on the left hand side. By clicking on it, the attribute or the property can be expanded and you can inspect the subordinate values. For example, a color property can be expanded in order to inspect its red, green, blue and alpha components:



In case of the selected attribute or property, the Inspector provides an edit field right to its name. It can be used to modify the value of the selected attribute or property. Here you can enter initialization expressions for properties or you can specify attributes of class members, etc.

By clicking with the right mouse button on an attribute or property, a context menu appears. From this menu you can select several commands:

The command ‘Edit in Editor window’ allows you, for example, to connect the edit field of the Inspector with the Editor (see “Editor” (Chapter 3.5)). In this manner you can enter complex expression or long text more comfortable directly into the Editor instead of the small edit field. At the end of the editing press the key Ctrl+Return to transfer the data from the Editor into the Inspector. If you want to restore the previously modified attribute or property to its origin, inherited value, use the command ‘Restore default value’ from the context menu. For your convenience the Inspector also provides a reach set of so called Assistants. By using them you can modify the attributes or properties of selected members much faster. For example the Resource Assistant allows you to determine a bitmap, which should be displayed in front of a menu item by selecting it from a list of existing bitmaps of your project.



To open an assistant click on the small button or on the right hand side of the selected attribute or property or press the Return key. The kind of the displayed assistant corresponds to the data type of the selected attribute or property. If there is no assistant available, no button is displayed. We distinguish between three groups of assistants:

Dialog assistants Popup list assistants Color assistant

The dialog assistants include the ‘File Open’ dialog and the ‘Select Directory’ dialog. They appear, for example, when you are editing the FileName attribute of a bitmap resource and you wish to select the desired bitmap file.

Popup list assistants display a list of entries, which fit to the edited attribute or property. For example, if you are editing a string property, the assistant will provide you with the list of all string constants of your project. In this manner you can select the special one and apply it by pressing the Return key:



As long as a popup list assistant is visible, you can apply a search filter to the displayed entries in order to find the desired one in a more convenient way. To do this simply input a part of its name. The entered filter is displayed directly in the edit field of the Inspector. Thereupon the assistant shows only these members, whose names do contain the given search filter and you can select the desired one much faster:

To cancel the previously entered filter, press the Esc key – so the complete list of entries is displayed again. With another Esc key the assistant itself will be closed and you can continue working with the Inspector. An alternative way to close the popup assistant is to click with the mouse outside the assistant. In this case the assistant becomes deactivated and closes. The color assistant is a special kind of the popup list assistant. It provides two views: the list view with all available color constants of the project and the color wheel view, where the desired color can be directly determined in a very convenient way.



On the bottom of the color assistant you can see several buttons. With the both

buttons you can switch between the list view and the color wheel view. This can also be done by pressing the keys Ctrl+Tab.

The button appears only in the color wheel view and can be used to apply the selected color in a more convenient way. The same can be reached by pressing the Return key. Please note, if your project does not contain any color constants, the color assistant is limited to the color wheel view only. In this case you cannot toggle between the both views.

3.4.3 Description Area The lower part of the Inspector displays the description of the currently selected member, attribute or property. To hide and show the description area click on the arrow at the bottom of the Inspector. The following screenshot shows the Description Area of the Inspector:



3.5 Editor The Editor of the Embedded Wizard is mainly used to implement methods. Additionally, the Editor can be used to insert complex expressions or long text in the Inspector more comfortable (see “Attribute and Property Area” (Chapter 3.4.2)). For this purpose, the Editor can be connected with the Inspector by selecting the command ‘Connect Editor to Inspector’ from the ‘Window’ main menu. The following image shows the Editor:

The Editor is divided into two parts: Declaration Area (Chapter 3.5.1) Implementation Area (Chapter 3.5.2)

To drop down the Declaration Area click on the small button on the right hand side of the Editor. The same can be reached when you press the Ctrl+Tab key. If the Declaration Area is already dropped, you can use Ctrl+Tab to toggle between these both views.

3.5.1 Declaration Area The upper part of the Editor displays the declaration of a method and can be dropped down to inspect and change the return type of the method, to add new parameters, etc. The following screenshot shows the Declaration Area within the Editor:

To edit an entry you can double click on it or press Return or F2 when an entry is selected. When you select this command, a small inplace edit field appears, where the name and the type of the parameter can be entered. To apply the changes and to close the inplace edit field press the key Return.



When renaming a parameter, Embedded Wizard evaluates the body of the method and the body of all derived methods in order to adapt all expressions, where the parameter has been used. This, so called, ‘refactoring’ take in account the inheritance of classes. To suppress the automatic refactoring, press the keys Shift+Return instead of the key Return when closing the inplace edit field. To add a new parameter, you can press Ins key or double click on one of the parentheses ‘(‘ or ‘)’. Alternatively, you can drag the Argument template from the Default folder of the Gallery to add a new parameter. If you want to delete an argument, select it and press the Del key. If you delete the return value of a method, the void return type is assumed.

Please note, that the declaration of a derived method cannot be changed. In this case all editing commands are disabled. Only the origin definition of a method allows the modification of the declaration. Derived methods do inherit this declaration only. When clicking with the right mouse button on the Declaration Area, a context menu appears. It provides the commands for ‘Undo & Redo’ for ‘Copy & Paste’, for inserting a new argument and for restacking the arguments.

The reordering of parameters can also be done more comfortable with the mouse. To do this select the affected parameter and drag&drop it to its new position.

3.5.2 Implementation Area The lower part of the Editor displays the implementation of the method. Here you can program with Chora statements. The following screenshot shows the Implementation Area within the Editor:



The Editor supports the following features: Syntax coloring for comments and Chora keywords ‘Drag & Drop’, ‘Copy & Paste’, ‘Undo & Redo’ and context menu Search (Ctrl+F), Find Next (F3) and Replace (Ctrl+H) Toggle Bookmark (Ctrl+F2), Go to Next Bookmark (F2) and Go to Previous

Bookmark (Shift+F2) Display Whitespaces (Ctrl+Shift+8) Block Indent Right (Tab) and Block Indent Left (Shift+Tab) Toggle breakpoint (F9)

Some of the features can be activated in the context menu, which appears after a right mouse button click in the Implementation Area:

For your convenience the Editor also provides a set of so called Assistants. By using them you can enter expressions and select members much faster. For example the Scope Assistant displays a list of members, which are valid in scope of an edited expression:



This assistant appears automatically as soon as you have entered a period . sign and the expression left to this sign results in a valid object or a string, color, rect, etc. value.

As long as an assistant is visible, you can apply a search filter to the displayed entries in order to find the desired one in a more convenient way. To do this simply input a part of its name. The entered filter is displayed directly in the Editor. Thereupon the assistant shows only these members, whose names do contain the given search filter and you can select the desired one much faster:

To cancel the previously entered filter, press the Esc key – so the complete list of entries is displayed again. With another Esc key the assistant itself will be closed and you can continue working with the Editor. An alternative way to close the assistant is to click with the mouse outside the assistant. In this case the assistant becomes deactivated and closes. If you have entered a text while an assistant was visible and now you want to dismiss the assistant without deleting the entered text, simply move the caret outside the entered text by multiply pressing the keys Left or Right. Beside the Scope Assistant, the Editor also provides other assistants. For example, the Macro Assistant witch appears after the entering the $ sign. Or the Attributed Text Assistant, which appears, when the user has entered a brace { sign within a string literal.



By pressing the keys Ctrl+Space you can open scope independently a global assistant, which displays all project members and the members of the currently edited class. In this manner you get access to all members at once:

3.6 Prototyper The Prototyper of the Embedded Wizard is used to test a single class or a complete GUI application. The Prototyper can be started by selecting the command ‘Start Prototyper’ from the ‘Build’ main menu or simply by pressing key F5. After starting the Prototyper, the class, which is currently edited or selected in the Composer (see “Composer” (Chapter 3.3)), is loaded into the Prototyper. The class and all embedded objects within the class are created and all graphical outputs are shown. The Prototyper provides the environment with timer events and translates all keyboard events into Mosaic events. An overview with the supported keys is displayed after holding down the Ctrl key for few seconds:



The following screenshot shows a running Prototyper with a GUI application:



Please note: If a GUI application remains in an endless loop, so that it can neither be controlled nor you can interact with the Embedded Wizard IDE, there are two ways how you can obtain the control again:

On the keyboard you can press and hold down the key Pause. With the mouse you can click on the close button in the right corner of the

Prototyper window. In both cases the Prototyper is held and the current code line is shown in the Editor. Now you can investigate the reason for the endless loop using the Embedded Wizard integrated Debugger. Clicking again the close button while the interpreter is held, will close the Prototyper window and terminate the prototyping.

3.7 Variables Window The Variables window belongs to the group of monitor windows. These windows can be used while debugging the GUI application in order to inspect variables, objects, etc. Unlike other monitor windows, Variables window do appear automatically when the Prototyper execution is halted. To see the other monitor windows, you have to activate them explicitly in the ‘Window’ menu (see “Window Menu” (Chapter 3.1.9)). While debugging the GUI application step by step, the Variables window evaluates the Chora statements and displays the operands, which are used in the last and the current statement. Operands used in other statements are not displayed. The following screenshot shows the Variables window:

All monitor windows are always floating and they cannot be docked to the Main Window. To hide all monitor windows temporary use the key F6.

3.8 Callstack Window The Callstack window belongs to the group of monitor windows. These windows can be used while debugging the GUI application in order to inspect variables, objects, etc. The Callstack window allows you to inspect the nesting method calls. It is divided in two parts:



In the lower part the list of currently executed methods is displayed. The entry on the top of the list corresponds to the lastly invoked method. The methods are displayed with the originally passed arguments as the method was invoked. A double click on a method will guide you to the corresponding statement in the Editor (see “Editor” (Chapter 3.5)).

The upper part of the window displays the call frame of the method selected in the lower part of the window. Here are all local variables, the arguments and the ‘this’ object displayed.

To activate the window, select the command ‘Callstack’ in the main menu ‘Window’ (see “Window Menu” (Chapter 3.1.9)). All monitor windows are always floating and they cannot be docked to the Main Window. To hide all monitor windows temporary use the key F6.

3.9 Chora Objects Window The Chora Object window belongs to the group of monitor windows. These windows can be used while debugging the GUI application in order to inspect variables, objects, etc. The Chora Objects window allows you to inspect all existing Chora objects. It is divided in two parts:



In the lower part the list of dynamically created Chora objects is displayed. In the Prototyping environment the dynamically created objects are prefixed with the @ (at) sign followed by a unique id number of the object. In case of resource objects, the name of the resource followed by the language variant is used instead. A double click on an object will guide you to the statement, where the object has been created.

The upper part of the window displays the content of the object selected in the lower part of the window.

To activate the window, select the command ‘Chora Objects’ in the main menu ‘Window’ (see “Window Menu” (Chapter 3.1.9)). All monitor windows are always floating and they cannot be docked to the Main Window. To hide all monitor windows temporary use the key F6.

3.10 Garbage Collector Window During the prototyping the Garbage Collector window can be displayed. It shows a brief statistic of the used objects, how many objects are alive and what happened during the last cycle of the garbage collection.



The column ‘Before’ displays the number of objects before the last garbage collection. The column ‘After’ displays how many objects have survived the garbage collection. The number of disposed objects results in the difference ‘Before – After’. The column ‘Peak’ displays the maximal number of objects existing at the same time since the Prototyper was started. The Garbage Collector window analyses the last 32 garbage collection cycles and calculates the trend, whether the number of objects increases, decreases or stays unchanged. This is displayed in the column ‘Trend’. Red bars mean that the number of corresponding objects increases. Green bars imply that the number of objects downsizes. The size of the bar indicates the variance. Unlike other monitor windows, the Garbage Collector window is always available even the GUI application is not halted, so you can interact with the GUI application and observe how many objects are created and disposed. Via double click on a specific entry the Prototyper is stopped and the Chora Objects window is opened for inspecting the objects of the affected class. For further information see “Chora Objects Window” (Chapter 3.9). To activate the window, select the command ‘Garbage Collector’ in the main menu ‘Window’ (see “Window Menu” (Chapter 3.1.9)). All monitor windows are always floating and they cannot be docked to the Main Window. To hide all monitor windows temporary use the key F6.

3.11 Log Window The Log Window of the Embedded Wizard displays short status reports and all warnings and errors occurred during compilation and prototyping. A double click on an error message will guide you to the error location: Embedded Wizard opens the affected definition and displays the erroneous location in the Composer (see “Composer” (Chapter 3.3)), Editor (see “Editor” (Chapter 3.5)) or in the Inspector (see “Inspector” (Chapter 3.4)). Additionally, all search results of the command ‘Find in project…’ and all trace outputs are collected in the Log Window. More about the trace statement can be found in “Chora User Manual”. The following screenshot shows the Log Window:

When clicking with the right mouse button on the Log Window, a context menu appears:



The Log Window provides following commands. Inspect – inspects the currently selected log message. If possible shows the

origin of the message in the Composer, Editor or Inspector. Inspect next message – continue with inspecting of the next following

message. The shortcut F4 is very useful if you want traverse step by step through a large list of messages.

Inspect previous message – continue with inspecting of the previous message. Sign As Inspected – It toggles the ‘inspected’ state of the message. Usually

messages, which have been inspected, appear a little bit grayed out. In this manner you can see, which messages still wait for the inspecting.

Copy – This command copies the entire content of the Log Window as text into the clipboard. In this manner you can append it to an email or to your documentation.

Clear the log – Deletes all messages from the Log Window.

embedded wizard user manual - pudn.comread.pudn.com › downloads563 › ebook › 2319518 ›...

Documents