mirror of
https://github.com/EiffelSoftware/eiffel-org.git
synced 2025-12-07 15:22:31 +01:00
a7c200496f
Date:2011-11-08T21:21:53.000000Z git-svn-id: https://svn.eiffel.com/eiffel-org/trunk@1009 abb3cda0-5349-4a8f-a601-0c33ac3a8c38
81 lines
4.3 KiB
Plaintext
81 lines
4.3 KiB
Plaintext
[[Property:title|EiffelRibbon Design Tool]]
|
|
[[Property:weight|0]]
|
|
[[Property:uuid|0fe37d4f-3f5b-0ceb-e97e-69ae3f9960ad]]
|
|
=Overview=
|
|
|
|
The EiffelRibbon design tool allows you to design a ribbon graphically, then generate the ribbon markup file and the Eiffel classes necessary to implement your design.
|
|
|
|
|
|
[[Image:EiffelRibbon design tool 01|EiffelRibbon design tool]]
|
|
|
|
Figure 1: An EiffelRibbon project open in the EiffelRibbon design tool.
|
|
|
|
|
|
The interface of the design tool mimics that of [[EiffelBuild|EiffelBuild]]. That is, the interface contains three panes that have counterparts in EiffelBuild:
|
|
|
|
# Type selector: A list of all the elements available for use in a ribbon.
|
|
# Layout constructor: A structured view of the organization of the elements used in a particular ribbon design.
|
|
# Object editor: The properties of the ribbon element which is currently selected in the Layout constructor.
|
|
|
|
So, if you've used EiffelBuild, the the EiffelRibbon design tool should seem quite familiar to you.
|
|
|
|
=Usage=
|
|
|
|
The typical usage of the design tool is much like the typical usage of EiffelBuild.
|
|
|
|
* Create a new project ( <code lang="text">File -> New Project...</code> ) and choose a location for your EiffelRibbon project.
|
|
* Configure the ribbon by adding elements, name the elements, and choose icons for buttons.
|
|
* Save the project.
|
|
* Generate the code.
|
|
* Use EiffelStudio to compile the generated code.
|
|
|
|
==Size definitions==
|
|
|
|
An important aspect of Microsoft's ribbon technology is called '''[http://msdn.microsoft.com/en-us/library/windows/desktop/dd316927(v=vs.85).aspx adaptive layout]'''. When the ribbon is resized by a user at runtime, adaptive layout makes corresponding changes to the size, format, organization and scale of the ribbon controls within each group based on size definition templates associated with the group. The ribbon framework provides a significant number of such templates (simply called '''size definitions'''), as shown in Figure 2 below. Size definitions are usually assigned names based on the number and type of controls included in the group. For example, the size definition ''"ThreeButtonsAndOneCheckBox"'' is a size definition for three buttons plus one checkbox.
|
|
|
|
|
|
[[Image: EiffelRibbon Choose Size Definition]]
|
|
|
|
Figure 2. Choosing a size definition for a ribbon control group.
|
|
|
|
|
|
In addition to using the size definitions provided, it is possible to create your own custom size definitions. You do this with the '''Size Definition Editor'''. At the lower left of Figure 1 above you can see the tab representing the Size Definition Editor. When you expand the tab, the editor becomes visible, as in Figure 3, below.
|
|
|
|
|
|
[[Image: EiffelRibbon size definition editor|Size Definition Editor]]
|
|
|
|
Figure 3. EiffelRibbon tool with the Size Definition Editor pinned open.
|
|
|
|
|
|
Use the Size Definition Editor to create custom size definitions for your ribbon designs. The '''Add button''' button will add a new button placeholder to a custom size definition. A selected button placeholder can be altered to show or hide its label and use its small or large size.
|
|
|
|
|
|
[[Image: Size Definition Editor 02|Button placeholders]]
|
|
|
|
Figure 4. Two button placeholders in a custom size definition; one selected, small, and with label hidden, the other unselected, large with label visible.
|
|
|
|
|
|
Once a custom size definition has been designed, it can be named, saved, and used in a ribbon design.
|
|
|
|
|
|
[[Image: Size Definition Editor 03|Name field and Save button]]
|
|
|
|
Figure 5. The Size Definition Editor naming field and '''Save''' button.
|
|
|
|
|
|
==Scaling policy==
|
|
|
|
The notion of adaptive layout includes the ability to specify preferred sizes for elements of a group and a scaling policy that can influence how the group reacts to resizing. More detail on size definition and scaling policy is available in Microsoft's '''[http://msdn.microsoft.com/en-us/library/windows/desktop/dd316927(v=vs.85).aspx ribbon documentation]'''.
|
|
|
|
The EiffelRibbon tool allows you to specify ideal sizes and scale policy for a groups elements through the '''Ideal sizes''' radio buttons and the '''Scale''' checkboxes, as shown in Figure 6 below.
|
|
|
|
|
|
[[Image: EiffelRibbon design tool 02|Scaling policy elements: "Ideal sizes" and "Scale"]]
|
|
|
|
Figure 6. A group definition showing its size definition and the scaling policy elements "Ideal sizes" and "Scale".
|
|
|
|
|
|
|
|
|
|
|