mirror of
https://github.com/EiffelSoftware/eiffel-org.git
synced 2026-04-04 17:19:23 +02:00
Author:halw
Date:2008-10-25T08:00:01.000000Z git-svn-id: https://svn.eiffel.com/eiffel-org/trunk@98 abb3cda0-5349-4a8f-a601-0c33ac3a8c38
This commit is contained in:
halw
@@ -8,9 +8,9 @@ The use of EiffelBuild is based around one main window which remains throughout
|
||||
[[Image:main-window]]
|
||||
|
||||
The window contains several different tools, highlighted below:
|
||||
* The [[Type selector|type selector]] - Situated at the top left of the window, this tool contains all the available vision2 types available for interface construction.
|
||||
* The [[Type selector|type selector]] - Situated at the top left of the window, this tool contains all the available EiffelVision 2 types available for interface construction.
|
||||
* The [[Component selector| component selector]] - Situated in the middle left of the window, below the [[Type selector|type selector]] , this tool contains all the user defined components.
|
||||
* The [[Widget selector|widget selector]] - Situated in the bottom left of the window contains all of the EiffelVision2 windows contained in the open project. Each of these windows are generated by EiffelBuild as separate classes.
|
||||
* The [[Widget selector|widget selector]] - Situated in the bottom left of the window contains all of the EiffelVision 2 windows contained in the open project. Each of these windows are generated by EiffelBuild as separate classes.
|
||||
* The [[Layout constructor| layout constructor]] tool - Situated in the middle of the window, this tool displays a graphical representation of the interface that is currently being built.
|
||||
* The docked [[Object editor|object editor]] - Situated to the right hand side of the window, this object editor automatically targets itself to the selected [[EiffelBuild Notation|object]] in the [[Layout constructor| layout constructor]] .
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ This page contains descriptions of terms found within the EiffelBuild documentat
|
||||
|
||||
An EiffelBuild object is a representation of a Vision2 component and its properties. When developing with EiffelBuild, you manipulate objects to build the desired interface.
|
||||
|
||||
Each object type has a different set of properties that may be manipulated, and these correspond directly to the properties available within the [[EiffelVision Introduction|EiffelVision2]] type. There is property which is specific to an EiffelBuild object, '''Name''' which is used for your identification purposes and as the attribute name in the generated code.
|
||||
Each object type has a different set of properties that may be manipulated, and these correspond directly to the properties available within the [[EiffelVision Introduction|EiffelVision 2]] type. There is property which is specific to an EiffelBuild object, '''Name''' which is used for your identification purposes and as the attribute name in the generated code.
|
||||
|
||||
For more information on manipulating objects within EiffelBuild, see:
|
||||
* How to [[Create an object|create an object]]
|
||||
@@ -28,7 +28,7 @@ It is not possible to modify a component once created, except to [[Component sel
|
||||
<span id="pick_and_drop"></span>
|
||||
==Pick and Drop==
|
||||
|
||||
The pick and drop mechanism is one of Eiffel Software 's exclusive technologies and is provided by [[EiffelVision Introduction|EiffelVision2]] . In EiffelBuild, it allows you to easily send data from a component of the interface to another.
|
||||
The pick and drop mechanism is one of Eiffel Software 's exclusive technologies and is provided by [[EiffelVision Introduction|EiffelVision 2]] . In EiffelBuild, it allows you to easily send data from a component of the interface to another.
|
||||
|
||||
You can '''Pick''' a reference to a '''development object''', such as an object or component with a single click of the '''right''' mouse button. Then as you start moving the mouse around - not pressing any of its buttons - a pebble tracks the cursor position, and a line continuously connects the pebble to the object's original position.
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ The options available in this tab are as follows:
|
||||
* <span id="build_type"></span> '''Build type'''
|
||||
Select 'Project' if you wish to generate a complete project including an ace file, and an application class, which will launch the GUI you are developing.
|
||||
|
||||
Select `Class' if you wish to generate a single class that represents the GUI you are developing. This option is useful if you wish to incorporate your current project into an existing Vision2 system.
|
||||
Select `Class' if you wish to generate a single class that represents the GUI you are developing. This option is useful if you wish to incorporate your current project into an existing EiffelVision 2 system.
|
||||
|
||||
* '''Always rebuild ace'''
|
||||
This option causes the ace file to be completely re-generated every time you generate your project. If you do not wish the ace file to be re-generated, then disable this option. This check box is only available if 'build type' is set to 'project'.
|
||||
@@ -24,7 +24,7 @@ This option causes the ace file to be completely re-generated every time you gen
|
||||
This entry will be added to the generated ace file as the SYSTEM attribute. The executable built from compiling this ace file will have this name. This option is only available if you have specified 'build_type' as 'Project'.
|
||||
|
||||
* '''Application class name'''
|
||||
This entry will be the class name for the generated vision2 application which will launch your GUI. This option is only available if you have specified 'build_type' as 'Project'.
|
||||
This entry will be the class name for the generated EiffelVision 2 application which will launch your GUI. This option is only available if you have specified 'build_type' as 'Project'.
|
||||
|
||||
* '''Constants class name'''
|
||||
This entry is used as the name of the constants class generated by EiffelBuild to define all [[Constants|constants]] contained in your project. Two classes are actually generated from this name, an implementation and an interface class. For example, if you specify a name "constants", two classes, <eiffel>CONSTANTS_IMP</eiffel> and <eiffel>CONSTANTS</eiffel> (inheriting from <eiffel>CONSTANTS_IMP</eiffel>) are generated, and all other classes generated by EiffelBuild, inherit <eiffel>CONSTANTS</eiffel> for access to these constants.
|
||||
|
||||
@@ -21,7 +21,7 @@ After launching the application, you will see a window displayed with a similar
|
||||
To the right hand side of the window you will see an EV_MULTI_COLUMN_LIST containing rows, each with an associated EV_PIXMAP. If you select one of the rows of the list, then press the button marked "Apply", the cursor displayed when over the label displayed to the right hand side of the window will be pixmap of the currently selected list row.
|
||||
==Under the Hood==
|
||||
|
||||
The pixmaps used in the EV_MULTI_COLUMN_LIST were standard pixmaps provided with vision2, accessible through EV_STOCK_PIXMAPS. set_pixmap was used to set the EV_PIXMAP of the EV_MULTI_COLUMN_LIST_ROW. An agent was added to the select_actions of the EV_BUTTON which calls set_pointer_style on the desired widget.
|
||||
The pixmaps used in the EV_MULTI_COLUMN_LIST were standard pixmaps provided with EiffelVision 2, accessible through EV_STOCK_PIXMAPS. set_pixmap was used to set the EV_PIXMAP of the EV_MULTI_COLUMN_LIST_ROW. An agent was added to the select_actions of the EV_BUTTON which calls set_pointer_style on the desired widget.
|
||||
|
||||
This sample contains the following class:
|
||||
* CURSOR_TEST
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
[[Property:title|EiffelVision Introduction]]
|
||||
[[Property:weight|0]]
|
||||
[[Property:uuid|f964651a-e36d-4e9e-00ea-37803a26373a]]
|
||||
The EiffelVision 2 library offers an object-oriented framework for graphical user interface (GUI) development. Using EiffelVision 2, developers can access all necessary GUI components, called [[Widgets|widgets]] (buttons, windows, list views) as well as truly graphical elements such as points, lines, arcs, polygons and the like -- to develop a modern, functional and good-looking graphical interactive application.
|
||||
The EiffelVision library offers an object-oriented framework for graphical user interface (GUI) development. Using EiffelVision, developers can access all necessary GUI components, called [[Widgets|widgets]] (buttons, windows, list views) as well as truly graphical elements such as points, lines, arcs, polygons and the like -- to develop a modern, functional and good-looking graphical interactive application.
|
||||
|
||||
EiffelVision 2 has played a major role at Eiffel Software and provided numerous Eiffel projects with a powerful, portable graphics development platform. EiffelStudio is totally reliant on EiffelVision 2 for its graphical elements and overall interaction with the user.
|
||||
EiffelVision has played a major role at Eiffel Software and provided numerous Eiffel projects with a powerful, portable graphics development platform. EiffelStudio is totally reliant on EiffelVision for its graphical elements and overall interaction with the user.
|
||||
|
||||
|
||||
==Scope==
|
||||
|
||||
The EiffelVision 2 library addresses all the major needs of developers of systems supporting modern graphical interfaces. EiffelVision 2 runs on Microsoft Windows and all major variations of Unix (including Linux). All versions are fully source-compatible; with only a recompile, applications will run on every supported platform with the native look-and-feel.
|
||||
The EiffelVision library addresses all the major needs of developers of systems supporting modern graphical interfaces. EiffelVision runs on Microsoft Windows and all major variations of Unix (including Linux). All versions are fully source-compatible; with only a recompile, applications will run on every supported platform with the native look-and-feel.
|
||||
|
||||
EiffelVision 2 provides an effective way of building advanced graphical applications using user interface standards and toolkits (such as Microsoft Windows and GTK) without having to learn the details of the toolkits. Instead, you can use EiffelVision 2 to work entirely in terms of high level abstractions representing windows, buttons, labels, graphical figures, menus, buttons etc., and apply clearly understandable operations to the corresponding objects.
|
||||
EiffelVision provides an effective way of building advanced graphical applications using user interface standards and toolkits (such as Microsoft Windows and GTK) without having to learn the details of the toolkits. Instead, you can use EiffelVision to work entirely in terms of high level abstractions representing windows, buttons, labels, graphical figures, menus, buttons etc., and apply clearly understandable operations to the corresponding objects.
|
||||
|
||||
==Architecture==
|
||||
|
||||
EiffelVision 2 relies on a two-tiered architecture illustrated by the following figure.
|
||||
EiffelVision relies on a two-tiered architecture illustrated by the following figure.
|
||||
|
||||
|
||||
[[Image:vision2--figure1]]
|
||||
|
||||
|
||||
The two tiers play complementary roles:
|
||||
* At the top level, EiffelVision 2 provides fully portable graphics.
|
||||
* At the top level, EiffelVision provides fully portable graphics.
|
||||
* At the lower level, platform-specific libraries cover the graphical mechanisms of graphics platforms such as Windows and GTK.
|
||||
|
||||
The lower tier serves for the implementation of the upper tier, but can also be used independently. For example [[WEL]] has had a resounding success with Windows developers who need an advanced mechanism for building Windows-specific graphical applications, taking advantage of every facility of the Windows API (Application Programming Interface) and of the Eiffel approach, but do not need portability on the client side. The GEL library is a '''wrapper''' library, automatically generated from the entire GTK API by a tool named '''The Gote Converter'''.
|
||||
@@ -35,11 +35,11 @@ As stated before, the library has undergone some drastic changes since the previ
|
||||
|
||||
==Design==
|
||||
|
||||
EiffelVision 2 provides programmers with high-level classes, that provide all mechanism and data structures needed to build advanced user interfaces for deployment on almost all platforms without having to worry about detailed requirements of toolkits.
|
||||
EiffelVision provides programmers with high-level classes, that provide all mechanism and data structures needed to build advanced user interfaces for deployment on almost all platforms without having to worry about detailed requirements of toolkits.
|
||||
|
||||
The abstract design has been derived from an analysis of user interfaces. Therefore we have classes with names like MENU, WINDOW, BUTTON, LINE or POLYGON. The features of these classes are simple, clearly defined properties or commands, like the feature `minimize' (a command) on WINDOW or `text' (a property of type STRING) on BUTTON.
|
||||
|
||||
{{note| All class names in EiffelVision 2 are pre-pended with EV_ to avoid name clashes with existing classes. BUTTON hence becomes <eiffel>EV_BUTTON</eiffel>, etc. }}
|
||||
{{note| All class names in EiffelVision are pre-pended with EV_ to avoid name clashes with existing classes. BUTTON hence becomes <eiffel>EV_BUTTON</eiffel>, etc. }}
|
||||
|
||||
==Properties==
|
||||
|
||||
@@ -48,7 +48,7 @@ When talking about a property of a class, like `text', in fact we are talking ab
|
||||
text: STRING
|
||||
|
||||
set_text (a_text: STRING)
|
||||
...
|
||||
...
|
||||
do
|
||||
...
|
||||
end
|
||||
@@ -74,7 +74,7 @@ Boolean properties have a different convention. Instead of one set-routine, it h
|
||||
|
||||
==Implementation==
|
||||
|
||||
For flexibility, EiffelVision 2 is built using the bridge pattern. This means that every platform-dependent component of the library consist of two classes, plus an implementation class for each platform (currently two). One is the <eiffel>interface</eiffel>. All the features of interfaces do nothing except delegate the call to the implementation object which is coupled to it. This object has the static type of the implementation-interface with the name of the interface class, with <eiffel>_I</eiffel> appended to it. From this implementation-interface, implementation classes inherit to implement platform-specific features.
|
||||
For flexibility, EiffelVision is built using the bridge pattern. This means that every platform-dependent component of the library consist of two classes, plus an implementation class for each platform (currently two). One is the <eiffel>interface</eiffel>. All the features of interfaces do nothing except delegate the call to the implementation object which is coupled to it. This object has the static type of the implementation-interface with the name of the interface class, with <eiffel>_I</eiffel> appended to it. From this implementation-interface, implementation classes inherit to implement platform-specific features.
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
[[Property:uuid|b343b38b-c8b2-4247-072d-ecc1bc3e387a]]
|
||||
EiffelVision 2 is a platform independent Graphical User Interface (GUI) library that allows easy, simultaneous development of Windowed applications for both Windows & Unix based platforms. Heavily relying on EiffelBase library, EiffelVision 2 has been designed primarily with ease of use in mind. By reusing EiffelBase structures, existing, as well as new Eiffel users will find EiffelVision to be surprising intuitive and easy to use. In no time, users will be producing good-looking Windowed application skeletons, of which will run on a multitude of platforms with no manipulation of code.
|
||||
The EiffelVision 2 library includes the following interface clusters:
|
||||
* A [[Kernel| kernel]] cluster that includes classes that are key to a Vision2 application. The main class being [[ref:libraries/vision2/reference/ev_application_chart| EV_APPLICATION]] which is the main entry point of all Vision2 applications.
|
||||
* A [[Widgets| widgets]] cluster containing classes that used to create Vision2 widgets. Widgets are the visible objects that the user sees and interacts with on the desktop, examples of widgets are windows, buttons and labels.
|
||||
* A [[Kernel| kernel]] cluster that includes classes that are key to a EiffelVision 2 application. The main class being [[ref:libraries/vision2/reference/ev_application_chart| EV_APPLICATION]] which is the main entry point of all EiffelVision 2 applications.
|
||||
* A [[Widgets| widgets]] cluster containing classes that used to create EiffelVision 2 widgets. Widgets are the visible objects that the user sees and interacts with on the desktop, examples of widgets are windows, buttons and labels.
|
||||
* An [[Items| items]] cluster includes the classes needed to create items, items can be thought of as widgets that are contained within only a certain type of widget, such as an [[ref:libraries/vision2/reference/ev_list_chart| EV_LIST]] that may only contain objects of type [[ref:libraries/vision2/reference/ev_list_item_chart|EV_LIST_ITEM]] . Items provide an abstract way of dealing with an item widget's internal data structures and provide in many cases the same functionality that a widget does.
|
||||
* An [[Events| events]] cluster containing classes that allow for user initiated events, such as the clicking of a button to be dealt with via the use of a linked list of agents ( [[ref:libraries/vision2/reference/ev_action_sequence_chart|EV_ACTION_SEQUENCE]] ). Agents can be thought of as an object that encapsulates a certain procedure. When a user clicks a button on the screen, the corresponding [[ref:libraries/vision2/reference/ev_button_chart| EV_BUTTON]] object has its associating pointer_button_press_actions fired and this in turn, fires all of the agents held within, thus calling all of the procedures represented by the agents. Every widget and item has a certain number of [[ref:libraries/base/reference/action_sequence_chart|ACTION_SEQUENCE]] objects that are linked with a certain type of event.
|
||||
* A [[Properties| properties]] cluster contains classes that allow for the customization of Vision 2 widgets and items. Classes such as [[ref:libraries/vision2/reference/ev_colorizable_chart|EV_COLORIZABLE]] and [[ref:libraries/vision2/reference/ev_fontable_chart|EV_FONTABLE]] contain routines that allow for color and fonts to be altered for a widget or item respectively.
|
||||
|
||||
@@ -1,77 +1,77 @@
|
||||
[[Property:title|Kernel]]
|
||||
[[Property:weight|1]]
|
||||
[[Property:uuid|d830dc77-cd77-1f52-0e39-e0ec1cffa028]]
|
||||
The kernel cluster contains classes that provide functionality that are common to most Windowed application. These classes are considered the core, or kernel of any EiffelVision2 application. The most important of these classes is [[ref:libraries/vision2/reference/ev_application_chart|EV_APPLICATION]] . This is used to initialize the graphical toolkit and event loop of your EiffelVision2 application. Kernel also includes classes such as [[ref:libraries/vision2/reference/ev_timeout_chart| EV_TIMEOUT]] that calls procedures (via agents) at a set interval, and [[ref:libraries/vision2/reference/ev_color_chart| EV_COLOR]] which is used for coloring widgets and items. To start programming with EiffelVision2, you first have to correctly initialize [[ref:libraries/vision2/reference/ev_application_chart|EV_APPLICATION]] .
|
||||
The kernel cluster contains classes that provide functionality that are common to most Windowed application. These classes are considered the core, or kernel of any EiffelVision 2 application. The most important of these classes is [[ref:libraries/vision2/reference/ev_application_chart|EV_APPLICATION]] . This is used to initialize the graphical toolkit and event loop of your EiffelVision 2 application. Kernel also includes classes such as [[ref:libraries/vision2/reference/ev_timeout_chart| EV_TIMEOUT]] that calls procedures (via agents) at a set interval, and [[ref:libraries/vision2/reference/ev_color_chart| EV_COLOR]] which is used for coloring widgets and items. To start programming with EiffelVision 2, you first have to correctly initialize [[ref:libraries/vision2/reference/ev_application_chart|EV_APPLICATION]] .
|
||||
|
||||
==Launching your application with EV_APPLICATION - The heart of all Vision2 systems==
|
||||
==Launching your application with EV_APPLICATION - The heart of all EiffelVision 2 systems==
|
||||
|
||||
[[ref:libraries/vision2/reference/ev_application_chart|EV_APPLICATION]] is the basis for every EiffelVision2 application and is considered the most important class in the library. It is responsible for initializing the underlying toolkit that is driving the windowing system on the platform that you decide to compile your system on. It also also where the main event loop that drives your application is executed.
|
||||
[[ref:libraries/vision2/reference/ev_application_chart|EV_APPLICATION]] is the basis for every EiffelVision 2 application and is considered the most important class in the library. It is responsible for initializing the underlying toolkit that is driving the windowing system on the platform that you decide to compile your system on. It also also where the main event loop that drives your application is executed.
|
||||
|
||||
{{note|It is ''' not''' possible to create a Vision2 component unless an application exists (query [[ref:/libraries/vision2/reference/ev_environment_chart|EV_ENVIRONMENT]] ). }}
|
||||
You may inherit [[ref:libraries/vision2/reference/ev_application_chart|EV_APPLICATION]] or use it as a client in order to create your EiffelVision2 application. A simple method of using EV_APPLICATION is as follows:
|
||||
{{note|It is ''' not''' possible to create a EiffelVision 2 component unless an application exists (query [[ref:/libraries/vision2/reference/ev_environment_chart|EV_ENVIRONMENT]] ). }}
|
||||
You may inherit [[ref:libraries/vision2/reference/ev_application_chart|EV_APPLICATION]] or use it as a client in order to create your EiffelVision 2 application. A simple method of using EV_APPLICATION is as follows:
|
||||
# Create an instance of EV_APPLICATION.
|
||||
# Create one or more windows for your application.
|
||||
# Launch the application.
|
||||
|
||||
An example of an EiffelVision2 application using inheritance from [[ref:libraries/vision2/reference/ev_application_chart|EV_APPLICATION]] is shown below.
|
||||
An example of an EiffelVision 2 application using inheritance from [[ref:libraries/vision2/reference/ev_application_chart|EV_APPLICATION]] is shown below.
|
||||
<code>
|
||||
class
|
||||
HELLOWORLD_APP
|
||||
class
|
||||
HELLOWORLD_APP
|
||||
|
||||
inherit
|
||||
EV_APPLICATION
|
||||
inherit
|
||||
EV_APPLICATION
|
||||
|
||||
create
|
||||
make
|
||||
create
|
||||
make
|
||||
|
||||
feature
|
||||
feature
|
||||
|
||||
make is
|
||||
-- Create the application.
|
||||
local
|
||||
helloworld_window: EV_TITLED_WINDOW
|
||||
do
|
||||
default_create
|
||||
create helloworld_window
|
||||
helloworld_window.set_title ("Helloworld!")
|
||||
helloworld_window.close_request_actions.extend (agent destroy)
|
||||
helloworld_window.show
|
||||
launch
|
||||
end
|
||||
make
|
||||
-- Create the application.
|
||||
local
|
||||
helloworld_window: EV_TITLED_WINDOW
|
||||
do
|
||||
default_create
|
||||
create helloworld_window
|
||||
helloworld_window.set_title ("Helloworld!")
|
||||
helloworld_window.close_request_actions.extend (agent destroy)
|
||||
helloworld_window.show
|
||||
launch
|
||||
end
|
||||
|
||||
end
|
||||
end
|
||||
</code>
|
||||
|
||||
This is the same EiffelVision2 application but instead using [[ref:libraries/vision2/reference/ev_application_chart|EV_APPLICATION]] in a client/supplier relationship.
|
||||
This is the same EiffelVision 2 application but instead using [[ref:libraries/vision2/reference/ev_application_chart|EV_APPLICATION]] in a client/supplier relationship.
|
||||
<code>
|
||||
class
|
||||
HELLOWORLD_APP
|
||||
class
|
||||
HELLOWORLD_APP
|
||||
|
||||
create
|
||||
make
|
||||
create
|
||||
make
|
||||
|
||||
feature
|
||||
feature
|
||||
|
||||
make is
|
||||
-- Create the EiffelVision2 application with a helloworld window.
|
||||
local
|
||||
app: EV_APPLICATION
|
||||
helloworld_window: EV_TITLED_WINDOW
|
||||
do
|
||||
create app
|
||||
create helloworld_window
|
||||
helloworld_window.set_title ("Helloworld!")
|
||||
helloworld_window.close_request_actions.extend (agent app.destroy)
|
||||
helloworld_window.show
|
||||
app.launch
|
||||
end
|
||||
make
|
||||
-- Create the EiffelVision 2 application with a helloworld window.
|
||||
local
|
||||
app: EV_APPLICATION
|
||||
helloworld_window: EV_TITLED_WINDOW
|
||||
do
|
||||
create app
|
||||
create helloworld_window
|
||||
helloworld_window.set_title ("Helloworld!")
|
||||
helloworld_window.close_request_actions.extend (agent app.destroy)
|
||||
helloworld_window.show
|
||||
app.launch
|
||||
end
|
||||
|
||||
end
|
||||
end
|
||||
</code>
|
||||
|
||||
==What does Launch actually do?==
|
||||
In EiffelVision2, to launch an application means to pass control to the underlying graphical toolkit. Simply creating an application does not launch it. An explicit call to launch is required for the event processing to begin.
|
||||
{{note|An EiffelVision2 system is event based. This means that you do not have control of the execution within an EiffelVision2 system, but must respond appropriately to [[Events|events]] as they occur. Therefore, if you call launch on an [[ref:libraries/vision2/reference/ev_application_chart|EV_APPLICATION]] , the processing for the application will continue indefinitely unless you have provided a way to exit the application. It is essential to initialize your components correctly, so your application can be exited (call <eiffel>destroy</eiffel> on the application). }}
|
||||
In EiffelVision 2, to launch an application means to pass control to the underlying graphical toolkit. Simply creating an application does not launch it. An explicit call to launch is required for the event processing to begin.
|
||||
{{note|An EiffelVision 2 system is event based. This means that you do not have control of the execution within an EiffelVision 2 system, but must respond appropriately to [[Events|events]] as they occur. Therefore, if you call launch on an [[ref:libraries/vision2/reference/ev_application_chart|EV_APPLICATION]] , the processing for the application will continue indefinitely unless you have provided a way to exit the application. It is essential to initialize your components correctly, so your application can be exited (call <eiffel>destroy</eiffel> on the application). }}
|
||||
|
||||
==Building your application skeleton==
|
||||
|
||||
@@ -80,5 +80,5 @@ Now that you have a basic application skeleton set up you can now go about
|
||||
* [[Containers|Adding containers to your window(s), then place your created widgets in those containers.]]
|
||||
* [[Events|Add code to respond to user actions with agents and action sequences.]]
|
||||
|
||||
Once you have learnt the basics of GUI programming within EiffelVision2, you are well on the way to creating powerful multi-platform applications. The Application Programming Interface (API) of EiffelVision2 has been designed in a way to ensure that the library is as intuitive, consistent and stylistic as possible. Heavy reuse of components from EiffelBase has been one of the main reasons that made this possible.
|
||||
Once you have learnt the basics of GUI programming within EiffelVision 2, you are well on the way to creating powerful multi-platform applications. The Application Programming Interface (API) of EiffelVision 2 has been designed in a way to ensure that the library is as intuitive, consistent and stylistic as possible. Heavy reuse of components from EiffelBase has been one of the main reasons that made this possible.
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
[[Property:title|EiffelVision Pick and Drop]]
|
||||
[[Property:weight|0]]
|
||||
[[Property:uuid|309203de-6536-fe26-4f73-cb1f4a450e6f]]
|
||||
Pick and drop is a mechanism which allows data to be transported from a '''source''' object to a '''target'''. Any Vision2 object inheriting [[ref:libraries/vision2/reference/ev_pick_and_dropable_chart|EV_PICK_AND_DROPABLE]] can be used to transport or receive data.
|
||||
Pick and drop is a mechanism which allows data to be transported from a '''source''' object to a '''target'''. Any EiffelVision 2 object inheriting [[ref:libraries/vision2/reference/ev_pick_and_dropable_chart|EV_PICK_AND_DROPABLE]] can be used to transport or receive data.
|
||||
|
||||
==A simple pick and drop example==
|
||||
|
||||
Two necessary components for a pick and drop transport are a '''source''' and a '''target''', both of which must conform to [[ref:libraries/vision2/reference/ev_pick_and_dropable_chart|EV_PICK_AND_DROPABLE]] . The data that is to be transported is known as a '''pebble'''.
|
||||
Two necessary components for a pick and drop transport are a '''source''' and a '''target''', both of which must conform to [[ref:libraries/vision2/reference/ev_pick_and_dropable_chart|EV_PICK_AND_DROPABLE]]. The data that is to be transported is known as a '''pebble'''.
|
||||
|
||||
The following steps need to be undertaken to set up a simple pick and drop:
|
||||
* Set the '''source''' by calling set_pebble.
|
||||
@@ -13,11 +13,11 @@ The following steps need to be undertaken to set up a simple pick and drop:
|
||||
|
||||
A simple example of this is demonstrated here:
|
||||
<code>
|
||||
button1.set_pebble ("A PND transport has occured%N")
|
||||
button2.drop_actions.extend (agent print (?))
|
||||
button1.set_pebble ("A PND transport has occured%N")
|
||||
button2.drop_actions.extend (agent print (?))
|
||||
</code>
|
||||
|
||||
As print takes an argument of type [[ref:/libraries/base/reference/string_8_chart|STRING_8]] , button2 becomes a valid target for the pebble contained in button1. Right clicking the mouse pointer over the '''source''' will start the transport, and right clicking with the mouse pointer over a valid '''target''' will end the transport. The transport can be canceled anytime with a simple left click, just as you would do in EiffelStudio.
|
||||
As print takes an argument of type [[ref:/libraries/base/reference/string_8_chart|STRING_8]], button2 becomes a valid target for the pebble contained in button1. Right clicking the mouse pointer over the '''source''' will start the transport, and right clicking with the mouse pointer over a valid '''target''' will end the transport. The transport can be canceled anytime with a simple left click, just as you would do in EiffelStudio.
|
||||
|
||||
{{note|When a transport completes, the '''pebble''' that was transported is passed as an argument to all features in the '''targets''' drop_actions whose argument type matches the '''pebble'''. }}
|
||||
|
||||
@@ -25,14 +25,14 @@ As print takes an argument of type [[ref:/libraries/base/reference/string_8_char
|
||||
|
||||
There are three different modes of transport available for pick and drop. They are listed below with details of their use:
|
||||
* Pick and Drop mode. <br/>
|
||||
This is the default mode for pick and drop, but can be set with <eiffel>set_pick_and_drop_mode</eiffel>. Right clicking on a '''source''' starts the transport and right clicking on a valid '''target''' completes the transport. During execution, a band is drawn from the screen position where the pick started to the current mouse position. Pressing the left mouse button or the escape key during execution will end the transport.
|
||||
:This is the default mode for pick and drop, but can be set with <eiffel>set_pick_and_drop_mode</eiffel>. Right clicking on a '''source''' starts the transport and right clicking on a valid '''target''' completes the transport. During execution, a band is drawn from the screen position where the pick started to the current mouse position. Pressing the left mouse button or the escape key during execution will end the transport.
|
||||
* Drag and drop mode <br/>
|
||||
This mode can be set with <eiffel>set_drag_and_drop_mode</eiffel>. Left clicking on a '''source''' starts the transport and releasing the left mouse button over a valid '''target''' completes the transport. During execution, a band is drawn from the screen position where the pick started to the current mouse position. Releasing the left mouse button or pressing the escape key during execution will end the transport.
|
||||
:This mode can be set with <eiffel>set_drag_and_drop_mode</eiffel>. Left clicking on a '''source''' starts the transport and releasing the left mouse button over a valid '''target''' completes the transport. During execution, a band is drawn from the screen position where the pick started to the current mouse position. Releasing the left mouse button or pressing the escape key during execution will end the transport.
|
||||
* Target menu mode <br/>
|
||||
This mode can be set with <eiffel>set_target_menu_mode</eiffel>. Right clicking on a '''source''' brings up a menu of all the valid drop '''targets''' in the system. Selecting one of these targets completes the transport.
|
||||
:This mode can be set with <eiffel>set_target_menu_mode</eiffel>. Right clicking on a '''source''' brings up a menu of all the valid drop '''targets''' in the system. Selecting one of these targets completes the transport.
|
||||
|
||||
|
||||
==Accept and deny cursors==
|
||||
|
||||
When <eiffel>mode_is_pick_and_drop</eiffel> or <eiffel> mode_is_drag_and_drop</eiffel> then the shape of the mouse cursor changes to reflect whether the current GUI component below the mouse accepts the pebble or not. Calling <eiffel>set_accept_cursor</eiffel> allows you to customize this cursor used to represent a valid '''target''' while calling <eiffel>set_deny_cursor</eiffel> allows you to customize the cursor used for non valid '''targets'''.
|
||||
When <eiffel>mode_is_pick_and_drop</eiffel> or <eiffel>mode_is_drag_and_drop</eiffel> then the shape of the mouse cursor changes to reflect whether the current GUI component below the mouse accepts the pebble or not. Calling <eiffel>set_accept_cursor</eiffel> allows you to customize this cursor used to represent a valid '''target''' while calling <eiffel>set_deny_cursor</eiffel> allows you to customize the cursor used for non valid '''targets'''.
|
||||
|
||||
|
||||
@@ -23,22 +23,22 @@ For example, [[ref:libraries/vision2/reference/ev_container_chart|EV_CONTAINER]]
|
||||
The main role of a container is to position its children in a certain way. An [[ref:libraries/vision2/reference/ev_horizontal_box_chart| EV_HORIZONTAL_BOX]] for example positions its children side by side along the horizontal axis. To achieve vertical stacking you would use an [[ref:libraries/vision2/reference/ev_vertical_box_chart| EV_VERTICAL_BOX]] .
|
||||
A code example of adding widgets to a container is as follows:
|
||||
<code>
|
||||
add_to_container is
|
||||
-- Add 3 buttons to a hbox and then show in window.
|
||||
local
|
||||
a_window: EV_TITLED_WINDOW
|
||||
a_hbox: EV_HORIZONTAL_BOX
|
||||
a_button: EV_BUTTON
|
||||
do
|
||||
create a_window
|
||||
create a_hbox
|
||||
create a_button.make_with_text ("Button1")
|
||||
a_hbox.extend (a_button)
|
||||
a_hbox.extend (create {EV_BUTTON}.make_with_text ("Button2"))
|
||||
a_hbox.extend (create {EV_BUTTON}.make_with_text ("Button3"))
|
||||
a_window.extend (a_hbox)
|
||||
a_window.show
|
||||
end
|
||||
add_to_container is
|
||||
-- Add 3 buttons to a hbox and then show in window.
|
||||
local
|
||||
a_window: EV_TITLED_WINDOW
|
||||
a_hbox: EV_HORIZONTAL_BOX
|
||||
a_button: EV_BUTTON
|
||||
do
|
||||
create a_window
|
||||
create a_hbox
|
||||
create a_button.make_with_text ("Button1")
|
||||
a_hbox.extend (a_button)
|
||||
a_hbox.extend (create {EV_BUTTON}.make_with_text ("Button2"))
|
||||
a_hbox.extend (create {EV_BUTTON}.make_with_text ("Button3"))
|
||||
a_window.extend (a_hbox)
|
||||
a_window.show
|
||||
end
|
||||
</code>
|
||||
|
||||
The mapping of a EiffelVision 2 container interface is very close to that of containers in [[EiffelBase]], such as a linked list.
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
[[Property:title|EiffelVision Dialogs]]
|
||||
[[Property:weight|2]]
|
||||
[[Property:uuid|85cfcfd3-a46e-4e2e-330a-61c2d1579b0f]]
|
||||
This cluster contains all the dialogs provided by Vision2.
|
||||
This cluster contains all the dialogs provided by EiffelVision 2.
|
||||
|
||||
==Standard dialogs==
|
||||
|
||||
A standard dialog provides a way of interacting with the underlying platform (such as Windows or Linux) to perform basic tasks such as opening a file or printing a document. Vision2 provides six dialogs that allow the user to perform everyday tasks that are
|
||||
A standard dialog provides a way of interacting with the underlying platform (such as Windows or Linux) to perform basic tasks such as opening a file or printing a document. EiffelVision 2 provides six dialogs that allow the user to perform everyday tasks that are
|
||||
* [[ref:libraries/vision2/reference/ev_color_dialog_chart|EV_COLOR_DIALOG]] -- This allows the user of your app to select an RGB color (useful for graphical apps such as a Paint Program).
|
||||
* [[ref:libraries/vision2/reference/ev_directory_dialog_chart|EV_DIRECTORY_DIALOG]] -- This allows the user of your app to select a directory.
|
||||
* [[ref:libraries/vision2/reference/ev_file_open_dialog_chart|EV_FILE_OPEN_DIALOG]] -- This allows the user of your app to select a file to be opened.
|
||||
|
||||
@@ -3,31 +3,31 @@
|
||||
[[Property:uuid|595bb73e-146a-ea19-221f-40f3415aad34]]
|
||||
==What is a Widget?==
|
||||
|
||||
A Widget is the fundamental building block of your applications GUI, components such as Windows, Buttons and Labels are examples of such. The widget set of Vision2 provides you with the flexibility to easily create powerful graphical applications. All widgets in Vision2 inherit from [[ref:/libraries/vision2/reference/ev_widget_chart| EV_WIDGET]] and the features provided in <eiffel> EV_WIDGET</eiffel> may be called on any widget.
|
||||
A Widget is the fundamental building block of your applications GUI, components such as Windows, Buttons and Labels are examples of such. The widget set of EiffelVision 2 provides you with the flexibility to easily create powerful graphical applications. All widgets in EiffelVision 2 inherit from [[ref:/libraries/vision2/reference/ev_widget_chart| EV_WIDGET]] and the features provided in <eiffel>EV_WIDGET</eiffel> may be called on any widget.
|
||||
|
||||
==Variations of Widget==
|
||||
Within Vision2, widgets have been classified into three different groups:
|
||||
Within EiffelVision 2, widgets have been classified into three different groups:
|
||||
* [[Primitives|Primitives]] -- These are elements of the user interface that are mainly responsible for interaction with the user, such as an [[ref:/libraries/vision2/reference/ev_button_chart|EV_BUTTON]] .
|
||||
* [[Containers|Containers]] -- These are used to contain other widgets and position them in a certain way, such as an [[ref:/libraries/vision2/reference/ev_vertical_box_chart| EV_VERTICAL_BOX ]] that stacks its children one by one vertically.
|
||||
* [[EiffelVision Dialogs|Dialogs]] -- These are pop up dialog windows used for interacting with the user for tasks such as opening a file (EV_FILE_OPEN_DIALOG) or displaying a message (EV_MESSAGE_DIALOG). You may construct your own dialogs by inheriting EV_DIALOG.
|
||||
|
||||
==How do I create a widget?==
|
||||
|
||||
All widgets in Vision2 are based around the default_create mechanism in Eiffel. This means that all that needs to be done to create a widget is to declare a reference to a type (such as [[ref:libraries/vision2/reference/ev_button_chart|EV_BUTTON]] ) and then call create on that reference. An example of this is as follows.
|
||||
All widgets in EiffelVision 2 are based around the default_create mechanism in Eiffel. This means that all that needs to be done to create a widget is to declare a reference to a type (such as [[ref:libraries/vision2/reference/ev_button_chart|EV_BUTTON]] ) and then call create on that reference. An example of this is as follows.
|
||||
<code>
|
||||
a_button: EV_BUTTON
|
||||
create a_button
|
||||
a_button: EV_BUTTON
|
||||
create a_button
|
||||
</code>
|
||||
|
||||
Along with the default creation, Vision2 also includes a few convenience creation functions. Examples of this are make_with_text for all widgets that may have text associated with them (those that inherit from [[ref:libraries/vision2/reference/ev_textable_chart| EV_TEXTABLE]] ), this saves a call to set_text upon default creation of the textable widget.
|
||||
Along with the default creation, EiffelVision 2 also includes a few convenience creation functions. Examples of this are make_with_text for all widgets that may have text associated with them (those that inherit from [[ref:libraries/vision2/reference/ev_textable_chart| EV_TEXTABLE]] ), this saves a call to set_text upon default creation of the textable widget.
|
||||
<code>
|
||||
create a_button.make_with_text ("Click Me")
|
||||
create a_button.make_with_text ("Click Me")
|
||||
</code>
|
||||
|
||||
This would be in place of
|
||||
<code>
|
||||
create a_button
|
||||
a_button.set_text ("Click Me")
|
||||
create a_button
|
||||
a_button.set_text ("Click Me")
|
||||
</code>
|
||||
|
||||
{{note|When a widget is created no extra initialization has to be performed. '''The only exception is for a window where you have to call show in order for it to be displayed on screen'''. }}
|
||||
@@ -38,7 +38,7 @@ As [[ref:libraries/vision2/reference/ev_primitive_chart|EV_PRIMITIVE]] is of ty
|
||||
|
||||
The minimum size of a widget is the smallest possible size that it can possibly be inside its parent container. If an [[ref:libraries/vision2/reference/ev_button_chart|EV_BUTTON]] was created and set with a minimum_size of width/height (100, 100), if this button was inserted in to an [[ref:libraries/vision2/reference/ev_horizontal_box_chart| EV_HORIZONTAL_BOX]] , then the box's size could never be below (100, 100) or it would break the minimum size of the button. '''The size of a container must always be greater or equal to the minimum sizes of its children.'''
|
||||
|
||||
{{note|In Vision2, there is no way to set the current size of the primitive. The current size is dependent on the size of the parent or the minimum_size. }}
|
||||
{{note|In EiffelVision 2, there is no way to set the current size of the primitive. The current size is dependent on the size of the parent or the minimum_size. }}
|
||||
|
||||
==Now what do I do?==
|
||||
Now that you can create a widget, you will need to actually make it usable to your intended user. This will usually involve these three steps. <br/>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
[[Property:title|Primitives]]
|
||||
[[Property:weight|0]]
|
||||
[[Property:uuid|09d70dd5-2e30-7615-88ac-4babe4eb7aa6]]
|
||||
All Vision2 primitives inherit [[ref:libraries/vision2/reference/ev_primitive_chart|EV_PRIMITIVE]] .
|
||||
All EiffelVision 2 primitives inherit [[ref:libraries/vision2/reference/ev_primitive_chart|EV_PRIMITIVE]] .
|
||||
|
||||
==What is a primitive?==
|
||||
A primitive is a Vision2 widget that may not contain other widgets. Primitives may be placed in [[Containers|containers]] , but a [[Widgets|widget ]] may not contain any child widgets. Some examples of primitives are [[ref:libraries/vision2/reference/ev_button_chart|EV_BUTTON]] and [[ref:libraries/vision2/reference/ev_label_chart|EV_LABEL]] .
|
||||
A primitive is a EiffelVision 2 widget that may not contain other widgets. Primitives may be placed in [[Containers|containers]] , but a [[Widgets|widget ]] may not contain any child widgets. Some examples of primitives are [[ref:libraries/vision2/reference/ev_button_chart|EV_BUTTON]] and [[ref:libraries/vision2/reference/ev_label_chart|EV_LABEL]] .
|
||||
==Features of a primitive==
|
||||
|
||||
All primitives inherit from [[ref:libraries/vision2/reference/ev_tooltipable_chart|EV_TOOLTIPABLE]] and therefore can have tooltips assigned to them. They all inherit many features from [[ref:libraries/vision2/reference/ev_widget_chart|EV_WIDGET]] . Each descendent of [[ref:libraries/vision2/reference/ev_primitive_chart|EV_PRIMITIVE]] will typically have many available features, specific to their type. For example, [[ref:libraries/vision2/reference/ev_separator_chart|EV_SEPARATOR]] has no extra features, but [[ref:libraries/vision2/reference/ev_label_chart|EV_LABEL]] has features for modifying the current font and also the text to be displayed.
|
||||
|
||||
Reference in New Issue
Block a user