IME.swf UI File Structure and Customization

The two types of IME UI widgets are the candidate list and the reading window. Their implementation is distributed between IME.fla, FxCandidateListBox.as and FxCandidateListItemInterface.as files located in the Bin\IME directory. Together, these Flash files expose an API that is utilized by the C++ side of IME implementation to perform operations such as IME UI window creation, UI window positioning, item selection and so on.

The IME.fla contains the following symbols:

The CandidateList is an empty movie clip containing a stack of ListRow movie clips. Each ListRow movie clip has the following structure:

The List Row Movie clip has three layers (In addition to the AS layer)

  1. Layer1: Text fields
  2. Layer2: Row index background movie clip (RowNumberBackground_mc)
  3. Layer3: Row text background movie clip (RowTextBackground_mc)

There are two text fields in layer one. The ID text field is used for displaying the row index and the Value text field is used to display the row data (Chinese/Japanese characters). The text background movie clip contains a Button object (symbol name: BackgroundButton) to make it responsive to mouse clicks. The text background movie clip has two keyframes: on (selected) and off (not selected) with each keyframe containing button instances of different colors so the selected row can be displayed in a different color.

The Reading window is an instance of the InputWindow_mc movie clip and uses InputWindowBackground_mc for coloring the background.

Candidate List Implementation

As mentioned before, candidate list implementation is distributed between C++ and ActionScript. Handling candidate list related messages, obtaining candidate list data such as candidate strings, current page, currently selected row etc., are performed in C++ while creating the candidate list, positioning it correctly on the stage with respect to the cursor, highlighting the currently selected row and customizing candidate list appearance is done in Action Script in the file IME.fla. This file exposes an API that is used by the C++ side of the IME implementation to interact with the UI widgets. In the following sections, we discuss the functions provided by IME.fla.

As is clear from the function names in the list above, there are three types of functionality exposed by IME.fla.

  1. Creation/Destruction of Widgets
  2. Repositioning the widgets
  3. Setting widget properties.

  4. Creation of candidate list and reading window: Candidate List is created in the CreateList function. The reading/input window is created in the DisplayInputWindow function. The reading window is much simpler than the candidate list since it only contains a text field with the reading window text and a background movie clip.

  5. Repositioning the widgets: The position of the widgets is computed in C++ and passed on to Action Script where the RepositionCandWindow and RepositionInputWindow are responsible for repositioning the pop-ups correctly on the stage. For example, the candidate list must appear below the current cursor position (or above if there is not enough space below). It must also move appropriately as the user moves from one clause to the other. Note that the widgets must also be positioned correctly with respect to the boundary of the stage. If there is not enough space on the stage for the list to fit under the current line, we must check to see if there is enough space above the current line. If there is not enough space both above and below the current line, the list appears below the current line.

  6. Initialization and Customization of Pop-ups: Setting the initial styles on the candidate list and reading window as well as customizing them are also handled in ActionScript. This is described in detail in a later section.

IME.fla also instantiates a FxCandidateListBox object which handles creating ListRow movie clips, obtaining candidate list data from C++, automatically resizing the various movie clips to fit contained text, highlighting the currently selected row and applying user styles on the candidate list rows.

On the C++ side, GFx::ASIMEManager implementation interprets the IME events sent to it by the movie view and calls the appropriate functions in ActionScript (AS). For the candidate list, the IME manager interacts with AS through the FxCandidateListBox C++ wrapper class, which takes care of sending candidate list data to AS, keeping track of currently visible number of rows, setting the currently selected rows etc. The candidate window/reading window related work performed in C++ is enumerated below:

  1. Obtain candidate list data: This includes candidate string data, number of candidate list strings, number of rows in a page, number of pages, currently visible page, currently selected row etc from the IME context by using IMM functions.

  2. Invoke CreateList: If a new list is to be opened, invoke CreateList in AS to create a new candidate list. If a list already exists, but the display needs to be modified (user changed the current page or currently selected row) this does not need to be done.

  3. Positioning the UI Windows: The UI Windows must be displayed at the correct location on the stage with respect to the composition string. This is usually near the current carat position or in case of the candidate window, near the currently selected clause. IME implementation obtains the coordinates of the view rectangle corresponding to the current caret position and passes them onto RepositionCandWindow function in ActionScript which moves the candidate list to the correct location.

IMECommands

UI widgets need to report back to the containing movie view information about user events. For example, the candidate list should inform IMEManager if the user has clicked on a certain row. This is done using _global.imecommands. The imecommands are handled internally by the player and no special handler needs to be installed for them.

Font Management

In Scaleform 2.1, the IME pop-up swf files obtained their character glyphs from the imported font “FontBody”. In Scaleform 2.2 and above, the pop-ups will obtain their resources from the underlying textfield automatically. In order for this to happen, the text fields in IME.fla must import the IMECandidateListFont. An example of this setup can be seen by opening IME.fla in the Flash authoring studio. This is a reserved font name which is used internally inside Scaleform and there should not be any other flash files that export this symbol.

An important point to understand is that only characteristics that are properties of a font such as font type, bold/italic style will be derived from the text field. Font size, on the other hand, is a property of the text field and will not automatically carry over. As illustrated in IMESample however, it’s very easy to use the candidate list customization functions to set the appropriate font size for the IME pop-ups in Action Script.