Category Archives: Developer Express

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

Hosting XAF ASP.NET Projects using Azure Web Sites

Azure Web Sites is a new offering from Microsoft under their Windows Azure cloud platform. It’s a scalable solution that allows you to host ASP.NET, PHP, and node.js projects. If your needs are basic, your sites – up to 10 of them – can be hosted for free*. If you need something like a custom domain, you’ll pay a bit more – currently about $8/mo. If you’d like a reserved instance, rather than shared, that will kick it up to around $70/mo. But you can run several of your web sites on that one reserved instance.
*bandwidth and database sold separately see site for details

The awesome thing is that you can start with the free setup, get up to 10 web sites going and, if your needs grow, scale your web sites up by simple dragging sliders in a web portal. It’s all very simple and straightforward and seems to work well.


One of the first things I tried with the free Azure Web Sites preview was hosting an eXpressApp Framework ASP.NET solution and database. While there are a few gotchas that came with publishing my XAF project to Azure Web Sites, most were the sort of issues you’d work through publishing an XAF ASP.NET project to any new server. However, there are some Azure-specific steps needed to work through some of these, which I’ll cover towards the end.

To get started, head to the Windows Azure homepage and sign up for Azure Web Sites. Afterwards, visit the Azure management portal. Note that after signing up for Azure Web Sites you’ll be treated to a nice new HTML5 UI for the Azure management portal (unfortunately the database management portal is still Silverlight).

Once you are in the management portal, click WEB SITES on the left, then click the NEW button at the bottom-left of the portal. Select the CREATE WITH DATABASE option (no I’m not yelling, the site is covered in caps).


You’ll need to give both your web site and database a name, and assign a login name and password for your database.


After the process completes, you’ll be left at the DASHBOARD screen for your new web site. On the right, under quick glance, click Download publish profile. This is the file you’ll use in Visual Studio to publish your XAF ASP.NET project. Next, click View connection strings and note the ADO.NET connection string for your Azure database instance.


As a final step in the Azure portal, scroll down the DASHBOARD page and click the link to your database under linked resources. Click the MANAGE button at the bottom of the portal. This should prompt you to add your current IP address to the firewall rules so that you can access the SQL database. Click YES.


This is necessary if you want to debug your application locally with the database hosted on Azure. Afterwards you can click NO to manage the database (we just needed the firewall rule added).

Next, if you haven’t already, you’ll want to download and install the Windows Azure SDK.

Now we can jump into Visual Studio and start the process of setting up the XAF ASP.NET project for hosting in Azure. First, double-click the WebApplication.cs file in the Web project. Select the Sql Connection and then edit its ConnectionString property, using the ADO.NET connection string from above. Make sure you use your real password as that will not be shown in the portal.


With the new connection string in place, and with the firewall rule added from the steps above, you should now be able to click Start to debug your XAF ASP.NET project, and successfully run against the new Azure database. This step will also create the destination database schema within the database hosted on Azure.

With these changes in place, right-click the Web project and click Publish. Click the Import button on the first screen and import the publishing profile you saved from the Azure portal.


Click Next through the wizard. On the final page you can click Start Preview to preview what will be published. Finally, click Publish.

Aaaand YSOD! Here’s where a bit of troubleshooting comes in. Some of this will be similar to publishing an ASP.NET XAF project to any host. Start by disabling Custom Errors in your web.config and Publish again.

Now you should see that the problem is that the DevExpress ExpressApp assemblies are not on the server.


Multi-select the DevExpress assemblies referenced by your Web project using CTRL or SHIFT. In the Properties Window, set Copy Local to True.


Go ahead and Publish again. Now, all of the DevExpress assemblies referenced by your project will be uploaded to Azure.

Aaaand YSOD! Even after setting all of the assemblies explicitly referenced by the ASP.NET project to Copy Local, there are missing ExpressApp assemblies.


Some assemblies – for instance DevExpress.ExpressApp.Security and DevExpress.ExpressApp.Objects – are not explicitly referenced by any of the XAF projects (mentioned to DevExpress here). While this may be addressed by DevExpress in a future update, in the meantime you’ll need to explicitly add any references with the Add Reference dialog, set Copy Local to true, Publish, and repeat on YSOD.

At this point, the ASP.NET XAF app should run properly hosted in Azure Web Sites.


But, there’s one last “gotcha” I want to cover, as trouble-shooting this is specific to Azure Web Sites. If you encounter the generic XAF ASP.NET error, you’ll need access to the XAF log to troubleshoot.


This may happen, for instance, if you make use of the HTML property editor in your ASP.NET solution and have not published all of the required assemblies.

To access the XAF log, go back to the Azure management portal. Click on the link under FTP HOSTNAME, which is in the quick glance column of the DASHBOARD.


You’ll be prompted for a username and password. You can get these by editing the PublishSettings file (downloaded above) in Notepad. Look for the userName and userPWD values after the FTP publishMode.

Once you’ve logged in, you’ll have full FTP access to both your sites and any logs. Navigate to site, then wwwroot. You should see an eXpressAppFramework.log file.


View the file’s contents, and search for “error occurred”. This will help you find XAF errors that occur that don’t cause a YSOD. This can and will happen for missing assembly references, such as DevExpress.SpellChecker.Core, if you use the HTML property editors.

With connection strings in place and all of the proper assemblies referenced and published, XAF ASP.NET projects run quite well in Azure Web Sites.


I’ve been using Azure Web Sites for a couple of months to host both my personal website and the website for Hip Shot and have been very pleased overall. And, if you don’t need a custom domain or a reserved instance, your web site hosting is free – bandwidth and database storage aside.

Emitting XtraScheduler Reminder XML


In a previous post I discussed how to generate the XML that the DevExpress XtraScheduler uses when persisting its appointment resource ID’s to a database. You can read that blog post here, and review the structure of the XtraScheduler data tables here.

In this post I’ll cover how to create the XML needed to persist XtraScheduler reminder information to a database. It’s pretty straight forward but not covered (yet) in the DevExpress documentation for the XtraScheduler control.

Again you’ll need a reference to the DevExpress.XtraScheduler.XML namespace. The classes you’ll be using are ReminderInfo and ReminderInfoContextElement. Here is an example of how to use ReminderInfo along with ReminderInfoContextElement:

        private string GetReminderInfoXML(DateTime? reminderDate, int? reminderMinutes)
        {
            ReminderInfo reminderInfo = new ReminderInfo();

            if (reminderDate != null)
            {
                reminderInfo.AlertTime = reminderDate.Value;
            }
            else if (reminderMinutes != null)
            {
                reminderInfo.TimeBeforeStart = new TimeSpan(0, reminderMinutes.Value, 0);
            }

            ReminderInfoContextElement element = new ReminderInfoContextElement(reminderInfo, DateSavingType.LocalTime);
            return element.ValueToString();
        }

I’ve also put together a small working example that you can download here.

UPDATE: There’s a real-world example of this technique you can find here. It is an open source project for transferring data from ExpressScheduler to XtraScheduler.

Emitting XtraScheduler Resource ID XML


I’ve recently been spending a bit of time directly accessing and manipulating the data that the DevExpress XtraScheduler emits when persisting its changes. You can read a bit about the structure of the data tables here and view the MSSQL schema here.

Most of the columns are relatively straight-forward, containing either strings or ordinal representations of enum values. However, the resource ID, reminder info, and recurrence info columns all contain specifically formatted XML strings. Luckily the DevExpress.XtraScheduler.XML namespace contains several helpful classes to assist in reading and writing these values.

In a previous blog post I discussed reading the resource ID’s stored by the VCL ExpressScheduler, returning them as a comma-delimited string. Given such a string called resources, in order to emit the proper XML you could do the following:

                string[] resourceArray = resources.Split(',');

                ResourceIdCollection idCollection = new ResourceIdCollection();
                foreach (string resourceID in resourceArray)
                {
                    idCollection.Add(int.Parse(resourceID));
                }

                AppointmentResourceIdCollectionContextElement element = new AppointmentResourceIdCollectionContextElement(idCollection);
                string xmlString = element.ValueToString();

With these few lines of code we have the necessary XML to access and store within the DB:

<ResourceIds>
  <ResourceId Type="System.Int32" Value="1"/>
  <ResourceId Type="System.Int32" Value="4"/> 
</ResourceIds>

In a future post I’ll discuss emitting the XML representations of reminder and recurrence info as well.

UPDATE: There’s a real-world example of this technique you can find here. It is an open source project for transferring data from ExpressScheduler to XtraScheduler.

Accessing ExpressScheduler Resource Information from .NET

In a previous blog post I discussed how to access the recurrence information that the VCL ExpressScheduler stores in its DB from a .NET application. Reading and writing the recurrence information is possible from .NET given a knowledge of the struct layout that the Delphi control uses.

However, if you want to read the resource information that ExpressScheduler stores in its DB from .NET, this requires using a Delphi DLL. This is because the Delphi scheduler control stores the resource ID’s for appointments in a single field but in multiple formats depending on the appointment. For instance, if the appointment has only one associated resource, its resource ID will be stored as a Delphi variant. However, the value will be stored as a Delphi variant array of variants if the appointment is associated with multiple resources.

Luckily, both Delphi and .NET make it straight-forward to interoperate between them and DevExpress has a simple utility method we can use to simplify things as well.

Start off with a new Delphi DLL project by clicking File>New>Other in Delphi XE2. On the New Items dialob, select Delphi Projects followed by Dynamic-link Library.


Start by adding both Variants and cxSchedulerStorage to the uses clause of the DPR. Then, add the following exported method to the DPR:

procedure ResourceIDBlobToString(const AResourceID: PByteArray; out AResult: PByteArray); export; stdcall;

var
  ResourceIDVar: Variant;
begin
  ResourceIDVar := cxFieldValueToVariant(AnsiString(AResourceID));
  if VarIsArray(ResourceIDVar) then
    AResult := PByteArray(VarArrayToArrayStr(ResourceIDVar))
  else
    //the cast to AnsiString below is necessary or a Unicode string will sneak in and gum up the works
    AResult := PByteArray(AnsiString(VarToStr(ResourceIDVar)));
end;

exports ResourceIDBlobToString;

This method uses the cxFieldValueToVariant utility method found in cxSchedulerStorage to translate the string representation of the field value to a Delphi variant. We then use VarIsArray to test if the variant is an array. If it is not, we simply return the variant as a string. If the variant is a variant array, we will use the following method to parse it:

//input is a variant array of strings
//output is a comma delimited string composed of the members of the input array
function VarArrayToArrayStr(const ResourceIDArray: Variant): AnsiString;
var
  I: Integer;
begin
  Result := '';
  for I := VarArrayLowBound(ResourceIDArray, 1) to VarArrayHighBound(ResourceIDArray, 1) do
  begin
    if Result <> '' then
      Result := Result + ',';
    Result := Result + VarToStr(ResourceIDArray[I]);
  end;
end;

This simple function iterates through the variant array using VarArrayLowBound and VarArrayHighBound, building up a comma-delimited list of the resource ID’s.

And that’s it for the Delphi DLL.

Next we’ll create a new C# WinForms solution to test out our DLL. Click File>New>Project and select a Windows Forms Application.


I’ll skip the data access code as it’s straight-forward. The interesting bit here is the DllImport attribute we’ll use to call our Delphi DLL:

[DllImport("ExpressSchedulerInterop.dll", CallingConvention = CallingConvention.StdCall, CharSet = CharSet.Ansi)]
static extern void ResourceIDBlobToString([MarshalAs(UnmanagedType.AnsiBStr)] string resourceID, [Out, MarshalAs(UnmanagedType.AnsiBStr)] out string result);

With this method defined properly, the following code can be used to read the resource data from the DB in C#:

string result = null;
ResourceIDBlobToString((string)reader["ResourceID"], out result);

You can download a Delphi scheduler app here, the Delphi scheduler interop project here, and the C# example data reader here.

UPDATE: I updated the code in this Blog post, along with the interop Delphi project source, to address a bug when using Unicode versions of Delphi. A cast to AnsiString is necessary or only the first character in the resource ID will be returned.

UPDATE #2: There’s a real-world example of this technique you can find here. It is an open source project for transferring data from ExpressScheduler to XtraScheduler.

Using the XAF Scheduler Module with Domain Components

It had been a while since I last looked at XAF from DevExpress, and since then the new Domain Components technology has been released in version 11.2. I decided to take a look at this new technology recently and see how exactly to make use of it.

The technology itself looks very promising, but makes using some of XAF’s modules require a little extra effort in some cases. This post will go over how to use the combination of Domain Components with the SchedulerWindowsFormsModule, which takes several steps beyond those required when using normal Domain Objects.

Start off by creating a new XAF Cross-Platform Application solution.


As with any XAF based project, build the solution first so that type information is available to the XAF model editor.

Expand the WinForms (Win) application project in the Solution Explorer and double-click WinApplication.cs. Side-note: on this designer you can select the Sql Connection and edit the connection string if necessary.

Locate the SchedulerWindowsFormsModule in the XAF Modules category of the Toolbox and drag to the Modules window in WinApplication.cs


Next, in the Solution Explorer, expand the common module project and double-click Module.cs. Under Exported Types, expand Referenced assemblies and then DevExpress.Persistent.Base.vXX.Y. Right-click IPersistentRecurrentEvent (the DC we’ll be using) and click Use Type In Application


Build the solution. This is necessary so that the newly included types are available in the model editors.

So far, this is very similar to using the Domain Objects. The exception being that we’ve included the Domain Component interfaces rather than the Domain Object classes (Event, Resource).

Now, right-click the Module.cs designer and click View Code. Add the following code:

        public override void Setup(XafApplication application)
        {
            base.Setup(application);

            //register scheduling Domain Components
            XafTypesInfo.Instance.RegisterEntity("Event", typeof(DomainComponents.Common.IPersistentRecurrentEvent));
            XafTypesInfo.Instance.RegisterEntity("Resource", typeof(DomainComponents.Common.IPersistentResource));
        }

This code is necessary with Domain Components to register the interfaces with XAF.

Next we’ll need to make some modifications to the model so that the scheduler user interface elements are displayed. These steps are taken care of automatically when using the Event Domain Object. Right-click the common module project in the Solution Explorer and click Open Model Editor.


Expand NavigationItems. Then, right-click Items, go to Add, and then NavigationItem.


Select the new navigation item and, on the right, under View, select IPersistentRecurrentEvent_ListView. If you do not see IPeristentRecurrentEvent_ListView, close the model editor, rebuild, and try again.


Back in the model editor tree, expand Views, followed by DomainComponents.Common, IPersistentRecurrentEvent_DetailView, Layout, Main, and finally SimpleEditors. Select IPersistentEvent and, on the right, change Caption to Event.


Again in the model editor tree, above Layout, expand Items. Find and delete the AppointmentId and Pattern items (normally hidden by the built in Event Domain Object).


And now run the WinForms project.


You can download the sample project here.

Adding Some Style to the VCL TileControl

In my previous post in the DevExpress VCL TileControl I laid out the basics of getting a Metro-inspired application functional. However, while the result definitely had function, it was a little short on “form”.

When using the VCL TileControl, odds are you will also want a Metro-inspired skin for your application. While the ExpressSkins Library does not currently ship with any Metro-inspired skins, the RealtorWorld demo that ships with the DevExpress VCL TileControl includes two such skins: MetroBlack and MetroWhite.

Making use of these skins in your own Metro-inspired VCL application is a cinch.

To get started, copy the two SKINRES files from the following path to your own application’s working directory:

C:\Program Files\Developer Express.VCL\ExpressTile Control\Demos\Data

Next, locate the TdxSkinController component on the Tool Palette and add it to Form1 of the TileControlSample project created in my previous post. You can download the source to that project here.


Add a FormCreate handler to Form1 with the following code:

procedure TForm1.FormCreate(Sender: TObject);
begin
  dxTileControl1.LookAndFeel.NativeStyle := False; //so skins take affect
  dxSkinController1.SkinName := 'UserSkin'; //so we can load a .skinres
  dxSkinsUserSkinLoadFromFile('MetroBlack.skinres');
end;

And that’s all it takes to give our sample a dark, Metro-inspired skin.


Replace the reference to MetroBlack.skinres with MetroWhite.skinres in order to use the lighter Metro-inspired skin.

You can download the updated Delphi sample here.