Linking DevExtreme Projects

Linking a DevExtreme project to another project means that files from the DevExtreme project are linked to the other project in the same manner as if you added these files as links one by another using the Visual Studio Add | Existing item... dialog. Linking of DevExtreme projects is used in the DevExtreme Multi-Channel Application template. In the solution created by using this template, the Shared and Mobile projects are linked to the Windows 8 and Windows Phone 8 projects respectively. You may need to link DevExtreme projects to other projects during deployment by yourself. In this article, you will learn the specifics of linking DevExtreme projects to other projects.

Linking to Other Projects

To link an application built using a DevExtreme project template to another project, use the Link to... item in a context menu of the DevExtreme project. This menu item appears in the context menu of a DevExtreme project when there is a non-DevExtreme project in the current solution.

Link DevExtreme Project To Another Project

As an example, you can develop an application using one of the DevExtreme Project Templates, and then add a Win8Phone (download it from the PhoneGap site so that you can then find it by the \cordova_3.7.0\WP8\platforms\wp8\ApplicationTemplate.csproj path on the hard drive within the Add Existing Project dialog) or Win8 (choose the JavaScript|Store Apps|Windows Apps|Blank App (Windows) project template in the Add Project dialog) standard template to the solution. To deploy the application as a Win8Phone or Win8 application, link the DevExtreme project to the Win8Phone/Win8 project using the Link to... dialog.

  • Right-click the DevExtreme project.
  • Choose Link to... in the invoked context menu.
  • Within the opened dialog, choose the newly added Win8Phone/Win8 project. Links to all the files of the DevExtreme project and the files of the projects that are referenced in the linked project will be added to the Win8Phone/Win8 project.
  • Remove the index.html file in the Win8Phone project. If the main application file is called differently, remove it and change the project's Start page option to index.html. In Win8 projects, the main application file must include references to WinJS libraries. So, you will have to customize it. To learn how, refer to the Linking to a Win8 Project topic.

Linking to a Win8 Project

If you develop a DevExtreme application using one of the DevExtreme project templates and then add a Win8 project to the solution to turn your application into a Win8 application, you need to link the DevExtreme project to the added Win8 project. This process is common for scenarios where you need to deploy a DevExtreme project to an external project. Details on this process are described in the Linking to Other Projects topic.

When deploying a DevExtreme project to a Win8 project, you have to perform several additional steps after linking the projects.

  1. The main application page in a Win8 project must include references to WinJS libraries. Since you cannot modify the linked index.html file and add the required references to it, do the following.

    • Open the default.html file. The important references to WinJS libraries are located under the following comment:

      HTML
      <!-- WinJS references -->

      Copy this block of references to a temporary file.

    • Replace the default.html file content with content from the linked index.html file.

    • Paste the block of important references to WinJS libraries back to the default.html file, but place it anywhere above references to DevExtreme libraries.
    • Remove the linked index.html file from the Win8 project.
  2. In the default.html file, find a block of "dx-theme" links to DevExtreme themes. Since your application will use a single dx.win8.black.css/dx.win8.white.css theme only, a classic HTML link must be used instead.

    • Remove all elements with the rel="dx-theme" tag from the default.html file.
    • Add a standard link to the dx.win8.black.css/dx.win8.white.css theme instead. This theme is the only one that is applicable to Win8 applications.
  3. If you build an application that resembles a native Win8 application, root application views should have the Navbar layout and other views - the Split layout. For this purpose, DevExtreme supplies a ready-to-use "split" layout set. Check the following.

    • Ensure that you apply the "split" layout set to the HtmlApplciation object (see the index.js file).

    • Make sure that the Empty, Navbar and Split layouts used in the "split" layout set are contained in the linked layouts folder within the Win8 project.

      If the Empty, Navbar and Split folders are absent, replace the linked layouts folder with a manually created one. Add the mentioned folders to the layouts folder (you can find these folders within your DevExtreme package).

    • Check that the linked/added layouts are referenced in the default.html file.