Creating Windows 8 Apps with the DXTREME Preview


A couple of weeks ago DevExpress released a preview of their new “multi-channel” solution: DXTREME. In their own words, “multi-channel means building applications that span devices and optimize the best parts of each platform”. If you haven’t already, I highly recommend taking a look at the information they’ve made available on their website. DXTREME is a great solution for creating HTML5 based applications for the web, iOS, Android, Windows Phone 8 and Windows 8.

While the current preview ships with support for creating apps for iOS, Android, and Windows 8, the tooling in Visual Studio does not currently support creating new DXTREME Windows 8 applications. Luckily the DXTREME preview does ship with the comprehensive DXTravel demo, which I was able to analyze in order to determine how to get started with a DXTREME Windows 8 application.

This blog post is going to be based on the MyTrips application created in the Getting Started section of the Learning Center. You can either take a moment to go through the Getting Started tutorial, or you can download the completed MyTrips app (prior to adding Windows 8 support) here.

With the MyTripsApp solution open, add a new project to the solution. In the Add New Project dialog, select Other Languages>JavaScript>Windows Store>Blank App.

For the project name, enter MyTripsWin8App, and click OK.

Add the following folders to the new Windows 8 project, mirroring the DXTREME project structure: data, layouts\NavBar, and views.

Open both the default.html file in the Windows 8 project and the App.html file found in the DXTREME project. Copy the JS, CSS, and HTML references found below the Framework, Layouts, and Views comments and paste them into default.html under the existing code in the head section.

The references found below the Framework comment are the CSS and JS files required to make the DXTREME magic happen. These include both jQuery and KnockoutJS as well as the DXTREME JavaScript and CSS. Also included in this section is db.js, which houses the DXTREME model, and App.css and App.js, which can both be discarded (as they are specific to the original DXTREME project).

    <!-- DXTREME Framework references -->
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/knockout-2.1.0.js"></script>
    <script type="text/javascript" src="js/globalize.js"></script>

    <script type="text/javascript" src="js/dxtreme.core-12.2.0.js"></script>
    <script type="text/javascript" src="js/dxtreme.framework-12.2.0.js"></script>
    <script type="text/javascript" src="js/dxtreme.widgets-12.2.0.js"></script>
    <script type="text/javascript" src="js/dxtreme.viz-12.2.0.js"></script>

    <link rel="stylesheet" type="text/css" href="css/dxtreme-12.2.0.css" />

    <!-- DXTREME Model references -->
    <script type="text/javascript" src="data\Db.js"></script>

The references found below the Layouts comment refer to the CSS and JS files that make up the various layouts used in the DXTREME application:

    <!-- DXTREME Layout references -->
    <link rel="stylesheet" type="text/css" href="layouts/Navbar/NavbarLayout.css" />
    <link rel="dx-template" type="text/html" href="layouts/Navbar/NavbarLayout.html"/>
    <script type="text/javascript" src="layouts/Navbar/NavbarLayout.js"></script>

These layouts are named (using the data-name attribute) and can then be employed in the DXTREME application in one of three ways:

  1. A layout with the name “default” will automatically be used
  2. An application-wide layout can be specified using the defaultLayout property on the HtmlApplication app object (instantiated in App.js or default.js)
  3. Each view can specify a layout (in the view’s corresponding HTML file) using the data-layout attribute

The references found below the Views comment refer to the CSS, JS, and HTML that make up each view in the DXTREME application.

    <!-- Views -->
    <script type="text/javascript" src="views/Index.js"></script>
    <link rel="dx-template" type="text/html" href="views/Index.html"/>
    <link rel="stylesheet" type="text/css" href="views/Index.css"/>

    <link rel="dx-template" type="text/html" href="views/About.html"/>
    
    <script type="text/javascript" src="views/TripEvents.js"></script>
    <link rel="dx-template" type="text/html" href="views/TripEvents.html"/>

Now, with the references added to default.html, add the DXTREME JS and CSS files to the Windows 8 project. To do this, right-click the css folder in the MyTripsApp project and click Open Folder in File Explorer. Drag the CSS files to the css folder in the MyTripsWin8App project. Follow the same steps for the js folder and its contents.

Next, add the MyTripsApp views (HTML, JS, and CSS) and model (JS) as links in the MyTripsWin8App project. Right-click the data folder in the Windows 8 project and click Add>Add Existing Item. Browse to the data folder in the MyTripsApp project and select db.js. Click the drop-down arrow on the Add button and click Add As Link.

Repeat these steps for the contents of the views folder and the layouts\Navbar folder.

In order for the images used in the app to show properly, add flight.png and marker.png found in the MyTripsApp/images folder to the MyTripsWin8App/images folder.

Now open up the default.js file in the Windows 8 project. At the top of the file, add the following code:

window.MyTripsApp=window.MyTripsApp||{};

The MyTripsApp above should match whatever DXTREME project you are adding Windows 8 support to. Next, add the following code under the call to app.start():

    // added to support DXTREME
    function startDevExpressApp() {
        DevExpress.ui.initViewport();

        var app = MyTripsApp.app = new DevExpress.framework.html.HtmlApplication({
            ns: MyTripsApp,
            viewPortNode: document.body,
            themeClasses: "dx-theme-win8phone",

            // below copied from App.js in DXTREME project
            defaultLayout: "navbar",
            navigation: [
                new DevExpress.framework.Command({
                    title: "Home",
                    uri: "Index",
                    icon: "home",
                    location: "navigation"
                }),
                new DevExpress.framework.Command({
                    title: "About",
                    uri: "About",
                    icon: "about",
                    location: "navigation"
                })
            ]
        });

        app.router.register(":view/:id", { view: "Index", id: undefined });

        app.navigate();
    };

Compare this code to the code found in the MyTripsApp App.js file. They are very similar, with minor differences for the Windows 8 JS project. You can find more documentation on the application object here.

With these changes in place, you can now run the Windows 8 project and see the trips listed, with links for the Trips and About screen. Clicking a trip shows the trip’s events with a back button to return to the trips list.

You can download the full sample solution with both mobile and Windows 8 projects here.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s