Using EVE for UI layout

The Adobe Express View Engine (EVE) is the recommended method of laying out UI widgets in InDesign dialogs. The main benefit of using EVE is that widget geometry is calculated for you, so that when you add or remove widgets to a dialog all of the other widgets are shifted automatically without you having to recalculate sizes etc.

Benefits of using EVE

  • Updating dialogs by adding and removing widgets is made easier because the layout of all widgets is adjusted for you.
  • Where text is different sizes on different operating systems you don’t have to worry about calculating extra whitespace.
  • English dialogs can be smaller because you don’t need to leave room for anticipated localised text, so your dialogs look good in all languages.
  • EVE automatically resizes text, buttons, checkboxes, radio buttons and drop-down lists so you needn’t worry about text being clipped.

A quick introduction to EVE

In order to use EVE widgets in your dialog definitions you’ll need to add an include to your FR file.

This file is a very useful resource since it lists all of the EVE widgets which are available out of the box, so do have a look inside.

In order to have your dialog use EVE you’ll need to add WidgetEveInfo to its type definition.

Finally you can change your dialog definition to use EVE by changing it to use EVE widgets and by adding the necessary EVE layout constants to the dialog itself (since you’ve now made the dialog an EVE dialog by adding WidgetEveInfo to its type definition).

Since all dialogs have an OK and Cancel button and some other content, here’s a complete dialog definition that uses EVE to layout an OK and Cancel button.

If you are familiar with InDesign plug-in development you’ll notice that the general format of the dialog definition is the same as usual except for some EVE layout additions and the use of widget names prefixed with EVE.

How do I convert my existing dialogs to use EVE?

The InDesign plug-in SDK includes an EVEConverter tool which enables you to very quickly EVE-ize your dialog definitions however it’s output is less than optimal. Be aware that the tool will also convert any panel definitions to use EVE so you should keep a backup copy of your original FR file so that you can replace the EVE-ized panel definition with your original non-EVE panel definition. The EVEConverter tool is a great first step to get a feel for EVE and how to use it.

Once you are better acquainted with EVE it becomes easier to hand craft your conversions or do some of them by hand. It all depends on how complex your dialogs are and if you are using any custom widgets. As a rule of thumb you might use the EVE converter first, then go over the output by hand to remove any excess spacer widgets or superfluous generic panel definitions.

The plug-in SDK also includes a porting guide which includes a chapter on using EVE. You can obtain the plug-in SDK from here http://www.adobe.com/devnet/indesign/sdk.html.

3 Responses to Using EVE for UI layout

  1. Adam says:

    Dear Timothy,
    is there any rule on how to create a palettepanel with EVE? I am quite desperate layouting several combo widgets in a palette panel. I wonder also if the SplitterPanelView works with EVE and whether it is enough to have its children as EVEGenericPanelWidget. Also it seems that every InDesign version support different sets of existing EVE widgets (CS2 to CS6).

    Thanks for any reply,
    Adam

    • Timothy Brand-Spencer says:

      The splitter panel does work with EVE. To use it, define a custom type for your panel and include the extra EVE info.

      For example:

      type EVESplitterPanelWidget (kViewRsrcType) : SplitterPanelWidget ()
      {
      WidgetEveInfo;
      };

      As for children, go with EVEErasablePrimaryResourcePanelWidget as defined in EveInfo.fh.

      Regarding a palette panel, EVE should be working for you. There is no ‘rule’ per say.

      I’ve emailed you too.

      Tim

  2. Karoly says:

    Dear Timothy,

    I converted our .fr file with EVE converter without errors.

    But when I compiled the plugin I got an error message:
    Error 123 error R32691: # Error: Custom type name expected, but ‘Interface’ found. C:\Develop\Adobe InDesign CS6 Plugin SDK\source\public\libs\widgetbin\includes\EveInfo.fh 91
    ————————————————————————————————————–

    EveInfo.fh:
    #ifdef __ODFRC__
    type WidgetEveInfo : Interface (IID = IID_IEVEINFO) <—————– This line
    {
    integer = 1; // has EVE info.

    longint; // eve info – see eve constants above to specify alignment, space after,
    // child arrangement, child alignment, child space after, margin
    };

    EveInfo.fh is an original Adobe file.
    Maybe forget I somthing?

    Could you help me?

    Thx:
    Karoly