ctodx

This Blog

News

Favorite Posts

Archives

May 2013 - Posts

  • DXperience 13.1 will be .NET 4 or above

    For quite some time now, we’ve had a somewhat weird split in the platforms we support. For WPF and Silverlight, we moved to a common set of underlying libraries way back in version 10.1, two years ago. As part of this restructuring we decided to take advantage of the new capabilities of Visual Studio 2010 and .NET 4. Overall, this change has been positive, and the implementation of our set of Windows 8 XAML controls in 12.2 (which require Visual Studio 2012 and .NET 4.5) was made much easier (and quicker) by this decision.

    Modern Old TypewriterHowever, our WinForms and WebForms controls have not kept up. For these platforms, we are still supporting .NET 3.5 and Visual Studio 2008 or later. This has started to cause some issues with the cross-platform libraries we implement: we’d like to take advantage of newer C# 4 and .NET 4 features for our XAML code (and, indeed, for our WinForms and ASP.NET code), but we’re being held back. One of the biggest features we can’t take advantage of, as an example, is the new dynamic keyword, which is almost de rigueur when writing web code these days.

    The other issue is that, we currently support three IDE versions, with all the required extra testing that entails (not to mention that the UI designer in VS 2010 was a big change in and of itself). We also took a look at the statistics we have about which IDEs you, our customers, are using and I’d have to say the vast majority (95%+) are using VS 2010 or VS2012. It seems in the Visual Studio ecosystem, developers tend to stay up to date. Heck, even I’m using VS2012, uppercase menus or not…

    Consequently, after some debate, we decided to standardize and make .NET 4 (or later) and Visual Studio 2010 (or later) firm requirements for version 13.1 of DXperience.

  • The PropertyCross project

    Over in the UK, Colin Eberhardt and Chris Price have been taking on an arduous task: evaluating the various frameworks and libraries that (ostensibly) help you create mobile applications. Their goal is not necessarily to discuss the Objective-C’s and Javas of this world, but instead to look at those libraries that allow you to create cross-platform apps that also hopefully take on a native look-and-feel for the device they’re run on.  They are initially concentrating on iOS, Android, and Windows Phone 8.

    PropertyCrossTo help them in this exercise, they decided to replicate an app they’d already written. The app was chosen specifically “because it is non-trivial, multi-screen and makes use of a number of device capabilities including page navigation, geolocation, storage and web services.” The app is a search front-end for UK property listings and is called PropertyCross. Not only do they review each library that they use, they are also publishing all of the code they write for this app on GitHub. So, you can check out their methodology and results, and also peruse the source to aid you in your search for a mobile multi-platform framework.

    Colin contacted us a little while back to see if we wanted to participate, and want to we did. We first wrote the app using the original DXTREME, but identified several issues, mostly performance-related, as we did so. This formed a strong  impetus for our plans for the new DXTREME Mobile and for the PhoneJS library it builds upon: improve the performance. Oh, and by the way, while you’re doing that, make it much faster. Consequently we withdrew our initial undertaking as we went back to the drawing board. PropertyCross was an ideal example of the kinds of mobile business apps our customers wanted to write, so optimizing for it helped make PhoneJS and DXTREME Mobile easier to use (and more performant) in those scenarios.

    We submitted our new implementation last week and Colin has just published it on the PropertyCross site. We’re very pleased indeed: check out the screenshots on that page for an example of how PhoneJS solves the native look-and-feel problem, and download the source from GitHub to check out how it’s implemented.

    (A note on the “Known Issues” on the PhoneJS page for PropertyCross: we’re actively attending to those we can address. Unfortunately something like PhoneGap not working fully with Windows Phone 8 is a little out of our hands.)

  • DXTREME Mobile for C# developers–the Design

    I must add a caveat to that title: “Such as it is”.

    (See the Introduction to this series here.)

    In essence, I want to keep the work flow of the Citizenship Test app pretty simple to suit the main devices it’ll run on.

    When you run the app, I envisage a plain home screen: the title, and a couple of options. The first option allows the user to review all hundred questions and their answers. I see this as a straightforward list of Q&A items and the user would flick to scroll the list up and down. An alternative would be to just list the questions in a scrollable list, and then have the user touch a question to navigate to another screen to see the answer. Although uncomplicated, I feel that this could be cumbersome since the user would then have to navigate back to the question list. A user experience that is not overly onerous, but the back-and-forth is still a little inelegant I think.

    The second option from the start or home screen would be the testing option: display a question and accept input from the user. What I’d like is a text box and some natural language processing to analyze the answer and check it against the actual answer. I’m not too sure about that just yet (NLP is not my forte), but we’ll see. Somewhere on the screen will be a button to navigate to the next screen with the next question. Since the actual naturalization test consists of ten questions of which you have to answer at least six correctly, this will also be the format of the testing option. There’ll also be a final screen (not shown) that would grade your answers.

    The back button on this screen would not go back to the previous question, but to the home screen. Pressing it would cancel the current test.

    Naturalization Test AppDesign

    As you can see, the way I’ve designed this app is to break it up into several steps (that is, screens), going from the simple to the more complex. That way, as we build it, you’ll get a flavor of how to develop these kinds of applications with DXTREME Mobile.

    Next time: the Home Screen.

  • DXTREME Mobile for C# developers – Foundations

    We have just published a Release Candidate for DXTREME Mobile 13.1. There have been many changes for this particular release – even better Visual Studio integration, greater performance, better “native” look-and-feel, new Windows Phone 8 support, and so on – and I thought it would be a good idea to introduce how to write multi-device apps for this new version, especially as they’re written with HTML5 markup and JavaScript. I’ll do this introduction and tutorial over several blog posts, which may in turn become an official part of the documentation.

    Lego built into 1, 2, 3First things first, let me lay down some ground rules. I shall assume you are a C# developer (or at least familiar with its syntax and grammar) and are using and are very familiar with Visual Studio 2012. Perhaps you know some HTML5 – or at least are familiar with basic HTML markup – and perhaps you know some JavaScript. That’s great if so, but I won’t assume you know too much in that area.

    What I’ll do in this series of posts is to create a simple app for iPhone 5, iPad 3, and for the Kindle Fire HD tablet, all of which I have at hand and can test on. The app is going to be designed to help me in a momentous event later this year: I’m going to take the USCIS Naturalization Test to become a US Citizen. As part of this overall test, there is a sub-test on US civics, especially history, law, and government. The nice thing about this particular test is that all of the 100 possible questions are published and you have to answer 6 or more correctly of ten random ones that the USCIS Officer will ask you in order to pass. My goal is  100%. What we’ll do with this app is to load all 100 questions into some kind of database, and then ask the questions of the user one at a time, randomly. We’ll also explore how to process the answers: maybe by using multiple choice, or analyzing the reply for keywords, or whatever. I’ll also go through the process of compiling the app with PhoneGap and getting it into the relevant app stores.

    Without further ado, let me provide a quick introduction to some basic JavaScript.

    Introduction to JavaScript

    JavaScript is a simple interpreted language designed explicitly for web pages. Nowadays, scripts are even compiled for even faster execution, but this need not worry you too much: just assume that the interpreter in your browser knows how to parse and execute JavaScript files.

    JavaScript Types

    JavaScript’s simplicity starts off with the type system – yes, no matter what you have heard, JavaScript does have types. Not many, but they’re there. There are six: number, string, boolean, object, null, and undefined. For now, just concentrate on the first four; we’ll introduce the others later on.

    Number: in C# terms, this is the same as double. There is no equivalent to int unfortunately, so beware of issues with rounding errors during calculations. You enter constant values just the way you're used to in C#: 1, 2.3, etc. The typeof operator called on a variable containing a number will return "number".

    String: for all intents and purposes, this is equivalent to C#'s string type, but do note that JavaScript's strings support 16-bit characters only; you cannot access characters on Unicode's higher planes. You enter constant values in the normal manner, however you can use either single or double quotes to do so: 'hello', "world". The typeof operator called on a variable containing a string will return "string".

    Boolean: just like C#'s bool, a type that has just two values: true and false. The typeof operator called on a variable containing a boolean will return "boolean".

    object: anything else, including arrays, dates, functions (yes, functions are objects too) and objects you create yourself. There is a special syntax to defining objects, which we'll get to in a moment.

    Since JavaScript is a C-type language, you should easily understand the declarations of the following variables:

    var e = 2.718281828;             // a number
    console.log(typeof e);           // outputs "number" 
    var name = "John O'Doe";         // a string
    console.log(typeof name);        // outputs "string" 
    var anotherName = 'Jane Doe';    // another string
    console.log(typeof anotherName); // outputs "string" 
    var isFamiliar = true;           // a boolean
    console.log(typeof isFamiliar);  // outputs "boolean" 
    

    One major difference to note: you do not declare anywhere the type of a variable. At the time a variable is used, JavaScript will work out what type the value has. Until then, it doesn't care. This means you can reuse variables as different types (please, don’t do this):

    name = 42;            
    console.log(typeof name); // outputs "number" 

    Objects

    There is no class system in JavaScript. Objects are rather more fluid than C#’s class model allows, and the inheritance scheme JavaScript uses is known as “prototypal inheritance”. Since it is so different from class inheritance, many people will implement a proto-class inheritance system. We’ll see some of this later. For now, just be aware that objects do not have a class definition behind them that describes what they look like.

    An object in JavaScript is a container for named properties and methods. They are most often declared using an abbreviated syntax:

    var ball = {
        color: red,
        bounce: function () {
            // code to make it bounce
        }
    };
    

    That is, ball is an object with two members: a color property with value red, and a method (a function) called bounce. In short, you declare an object with braces. Inside the braces, you can declare a set of comma-separated members of the object (if you don’t, the object is empty), where each member comprises a name followed by its value, separated by a colon.

    The above code is equivalent to:

    var ball = {};
    ball.color = red;
    ball.bounce = function () {
        // code to make it bounce
    };
    

    Notice that you can just add members to an object as we did here, or remove them or replace them. Objects are endlessly flexible in JavaScript.

    Sometimes, objects are newed up, just like in C#. It’s not a constructor as we understand it in C#, just a special function with some built-in members. We’ll come across examples of this later, but for now here’s a simple example:

    var startTime = new Date(); // get an object representing now
    console.log(startTime.toTimeString()); // use built-in method
    

    Functions

    Functions are encapsulations of code. They’re objects and so can be passed around and manipulated in a functional manner, but they can also be called. We’ve seen a couple of them in use so far (console.log() is an example: log() is a function declared as a member of the console object, which is created by the browser under certain development/debugging scenarios).

    Here’s an example that shows how you can create and pass around new functions on the fly:

    var makeBracketedLogger = function (log) {
        return function (value) {
            log('[' + value + ']');
        };
    };
    
    var logAlert = makeBracketedLogger(alert);
    logAlert(true); // displays [true] as an alert
    
    var logConsole = makeBracketedLogger(console.log);
    logConsole(42); // displays [42] on the console
    

    Here we implement a function that creates logging functions. The functions it creates display the value they’re passed in between square brackets. I create two functions: one that uses the alert() function to display the value in an alert dialog box, and the other to display the value to the debugging console. This easily shows that functions can be created at run-time.

    Scope and closures

    This is one of the biggest differences between C# and JavaScript. In JavaScript the scope boundary for local variables is the nearest enclosing function, not just the nearest enclosing braces. Locals declared in an outer function are visible to inner functions within, too. Take a look at makeBracketedLogger() above. The log parameter is visible inside the function being returned as well (which is why the returned function works). However, note something else as well: the returned function forms a closure over the outer function so that it can still “get at” the log parameter, even after the outer function has completed execution. Closures are extremely important in JavaScript, so make sure you refresh your memory on what they are and how they work in C#. It’s the same in JavaScript, just with a simpler syntax.

    Statements, expressions, and so on

    …Are pretty much as they are in C#. There are a few wrinkles that you’ll need to understand, the main one being that the JavaScript interpreter will go to great lengths to coerce one variable to the type of another when you mix them, but we’ll cover those as we get to them.

    There is one operator in JavaScript that is not known in C#, the identity operator, or triple-equals (===). This operator performs a comparison between two values, much like the equality operator (==) does in C#. JavaScript’s equality operator is a coercion operator: if the two sides are not of the same type, JavaScript will go through some gymnastics to coerce one value to the type of the other. Sometimes this can be convenient (for example: 1 == '1' evaluates as true), but sometimes it can seem downright capricious in its results. Best practices say, always use === (or, negated: !==), since the person reading the code after you will not get caught out by some coercion assumption you’ve made.

    Onwards!

    Anyway, that’s enough foundation for now. Let’s jump in next time with some DXTREME Mobile.

    (If you want to explore more JavaScript syntax and grammar, please see my series on JavaScript for C# developers.)

LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners