Copying/Moving a UI Design into a Project

You can copy or move an existing UI design into a UI Designer enabled project.

NOTE A UI Designer enabled project contains an application.uidesign file. If the project does not have an application.uidesign file, use the S60 UI Design Wizard to add one before attempting to copy or move another design into the project.

Any UI design can be moved or copied between projects. However, simply dragging the .uidesign file is not enough. You must also move or copy any additional files, like generated files and images, used by the UI design into the new project, update file and directory paths, and then inform the new project that the UI design is available. You may also need to manually add support into the project for Avkon View Switching.

Moving/Copying a UI Design into a Project

  1. Locate the UI design in the Project Explorer view to copy or move into another project
  2. Drag the UI design into the new project to move it, or Control-drag the UI design to copy it
  3. Locate all associated files (generated files, images, localization files, etc.) in the source project
  4. Move or copy the associated files from the source project into the destination project
  5. Update directory paths used by the generated files
  6. If you are unsure what directories are targeted for the generated files, open the application.uidesign file in a text editor and examine its entries. The places indicated in Figure 1 indicate the target directories where you should place the previously generated files.

    target directories

    Figure 1 -Locating the target directories in the source listing of the "application.uidesign" file

  7. Import the UI design into the project
  8. Use the Import feature on the UI Designs page of the Application Editor to import the UI design into your project.

  9. Fix the absolute path name(s) of the image(s) in your project
  10. fix image

    Figure 2 -The "multi-image file" field of the image field of the Appearance property points to the mbmdef file

    As shown in Figure 2, image properties contain the pathname of their associated mbmdef file. Copying these files into the project will not update this property automatically. Modify this property to point to the associated mbmdef file within the project that contains the image.

  11. Add Avkon View Switching support to project (if not already enabled)
  12. In addition, if the project was not already UI Designer enabled, you may need to manually edit some files to enable Avkon View Switching support in the project. This option is set automatically when creating a new UI Designer project but must be added manually for non-UI Designer projects.

    1. Add Avkon View initialization code to <ProjectName>AppUi::ConstructL().
    2. You must manually instantiate your view, and register it with the View Server.

      Adopt the following code for your view's name, and add it to the ConstructL() method of your <ProjectName>AppUi class.

      iMyView = CMyView::NewL();
      AddViewL( iMyView );
      SetDefaultViewL( *iMyView ); // if this view is the default

    3. Add an enumerator for your view to the view id enumeration.
    4. Open the <ProjectName>.hrh file. It will look something like this:

      /*
      ============================================================================
      Descriptive Information
      ============================================================================
      */
      #ifndef __UPDATEDPROJ_HRH__
      #define __UPDATEDPROJ_HRH__

      // UpdatedProj enumerate command codes
      enum TUpdatedProjIds
      {
      ECommand1 = 0x6001, // start value must not be 0
      ECommand2
      }

      // UpdatedProj view identifiers
      enum TUpdatedProjViewUids
      {
      EUpdatedViewUid = 1
      };

      #endif // __UPDATEDPROJ_HRH__

      You must manually edit this file to add a Uid for your view to the enumeration. Add your new identifier to the end of the list. After editing the file, it might look like this:

      // UpdatedProj view identifiers
      enum TUpdatedProjViewUids
      {
      EUpdatedViewUid = 1,
      EMyDesignViewUid // UID for new view, named EViewUid
      };
      #endif // __UPDATEDPROJ_HRH__

    When you have completed these steps, the view-switching aspects of this design should build and operate successfully.

Related concepts
Related references