Mehul Harry's DevExpress Blog

This Blog

News


Mehul Harry is the DevExpress Web Program Manager. Follow him on twitter: @Mehulharry

Subscribe (RSS, Email)

Archives

DevExtreme HTML - Technical FAQ

DevExtreme

Multi-Channel Experiences
Target multiple devices with DevExtreme

DevExtreme is a new DevExpress product that allows you to create multi-channel solutions. You can use DevExtreme to create mobile hybrid web apps that look-and-feel native for multiple channels. In other words, you can write a web app using our new HTML 5 framework and create a mobile experience that will work across multiple channels like the iPhone, iPad, Android, Windows 8 devices, and desktop web browsers too.

And we're excited by it's possibilities. Watch this slick DevExtreme Announcement video from our marketing team that talks about DevExtreme, shows a sample, and the special offer for DevExpress customers.

Once released, DevExtreme will include a complete set of tools for you. In this post, I'll focus on DevExtreme HTML and address some common technical questions and great features.

 

What is DevExtreme HTML?

DevExtreme tools delivers innovative solutions for developers who want to create stunning, multi-screen apps across platforms and devices, from Windows 8 to the iPad and iPhone.

DevExtreme HTML is an HTML 5-based framework that contains a set of JavaScript widgets that provide powerful features like data-binding, animations, mobile touch support, and more! Easily create a single page applications (SPA), desktop web applications, or mobile hybrid web apps with DevExtreme.

Delight your users by creating apps that feel as though they were designed expressly for the device. With DevExtreme, multi-channel means building applications that span devices and optimize the best parts of each platform. And with HTML5/JS visualization built in your dynamic charts and graphs will be both powerful and beautiful.

Code your application logic once in HTML 5 and JavaScript, then run on multiple platforms (iOS, Android, Desktop Web Browser, etc.).

For example, let's say you need to create a simple mobile app that shows a list of items. With the DevExtreme HTML, you would simply need to use our List widget and, once deployed, this solution would adapt to using a native look for iPad, iPhone, Android device or Windows 8 device.

And you can still customize the look-and-feel further to your needs and requirements.

 

Preview now; Release on December 3rd

On September 17th we released a private DevExtreme Preview for our existing DevExpress customers. On September 27th we will release the Preview to the public.  December 3rd, 2012 is the official launch date. Mark your calendars.

For now, we'd love to hear about your experience and thoughts on DevExtreme.  To learn more about DevExtreme watch our Announcement Video or check out the online Reviewer’s Guide.

 

Free Download

You can download a free trial of the DevExtreme Preview here:

Download DevExtreme Preview

 

 

What's included?

DevExtreme HTML includes a set of user interface (UI) Widgets and a framework. The UI widgets help you build your mobile web app screens.

DevExtreme List widgetUI Widgets:

- Button
- Checkbox
- Datebox
- Gridlist
- List
- Navbar
- Numberbox
- Overlay
- Slider
- Switch
- Tabs
- Textbox
- Toolbar

To learn more about them, visit this great help site: DevExtreme Learning Center

 

There's also a great set of data visualization widgets that are written completely in HTML 5 and use SVG:

DevExpress DevExtreme Data Visualization Charts HTML5

There are three main widgets that generate the many different charts and gauges like bars, line & point, Area, Spline, Pie, etc.:

- Chart
- CircularGauge
- RangeSelector

Check out the online demos for these charts here: DevExtreme Visualization Gallery

 

Framework

The framework portion of DevExtreme HTML contains:

- Knockout extensions
- data providers
- URL routing engine
- View management

Because this is just the preview release, we're also working hard to add more features, demos, documentation, and other items you'll see in December.

 

Touch support & Animations built-in

Each of the UI widgets provide touch support for the various mobile platforms and unique animations.

 

Build native mobile apps!

DevExtreme supports Apache Cordova (PhoneGap). Compile your DevExtreme mobile web app and turn it into a native app that has access to local resources like the device's camera, GPS, etc.

Adobe PhoneGap is a free open source framework that supports multiple mobile platforms. And DevExtreme provides you the ability to work seamlessly with PhoneGap for iOS, Android, and Windows 8 mobile devices!

Developing with Adobe® PhoneGap™ gives you the freedom to create mobile applications for iOS, Android, and Windows 8 using the web code you know and love: HTML, CSS and JavaScript.

From Visual Studio, you'll be able to build native packages. You'll have the option of specifying what native application permissions to allow (e.g. Accelerometer, Compass, Camera, etc.). And because your app will need to be 'signed' with your own certificate for the app stores, we also added the capability for you to attach your own certificates through Visual Studio.

 

True jQuery and Knockout support

Our DevExtreme team of developers decided early in design phase to use and play nice with open-source libraries like jQuery and Knockout rather than reinvent the wheel. These libraries have a huge following and by adopting them, it makes development easier for you to use our set of DevExtreme tools with them.

We adopted the excellent Knockout library for client-side data-binding, jQuery for its general awesomeness, and jQuery globalize for globalization and localization of strings, dates, and numbers.

These libraries are popular with a rich developer community who use and improve them.

Therefore, DevExtreme widgets can be used very easily with other frameworks and vice versa. This approach has some great benefits for you:

1. You don't have to relearn a new approach.

2. You can feel confident that our client-side tools know and do not inherently try to conflict with popular libraries.

3. And, you have a choice of how to declare the widgets using Knockout binding or as a jQuery plugin. For example, this code below shows how to declare and use a DevExtreme HTML Check box widget. Personally, I'm a fan of the Knockout approach for it's simplicity but the choice is yours:

DevExpress JavaScript jQuery Knockout approach

DevExtreme Learning Center

Getting Started

A special 'Learning Center' has been created to help you get started quickly. Go to:

DevExtreme Learning Center

There you'll find a short series of lessons designed to get you up to speed with the framework in no time. You will build a part of the DXTravel smartphone demo. By the end of this tutorial you will have a working application you can see and play with right now in the emulator section to the right. The tutorial is the recommended place to get started with the framework.

Additionally, you can watch the demo portion of the DevExtreme launch video where you'll see a walk through of how to create a multi-channel web app.

 

Visual Studio Support

Because we understand that a majority of our customers are Microsoft developers who use Visual Studio, we've made the experience of developing JavaScript mobile web apps, easier.

First, we've included a File->New template that helps you get started with creating a new mobile DevExtreme web app:

DevExtreme File New Template

While these next two features are not in the preview release, here's a sneak peek to an upcoming wizard that will help guide you from the File-New template:

DevExtreme File New Wizard Selection DevExtreme File New Wizard Layout

Also, the Visual Studio design experience will show you a visual preview (this feature is not in the preview release):

DevExtreme Visual Studio Designer

In the preview release, we only support Visual Studio 2012 but we will also be supporting Visual Studio 2010 soon.

Note: The core widgets and framework of DevExtreme HTML do not have any server dependencies. Therefore, you choose your favorite editor like Notepad, Sublime Text 2, etc. However, only the Visual Studio IDE has the integrations mentioned above.

 

Unique Mobile Debugging

A custom application called DXProxy is installed to help you test and deploy your mobile DevExtreme apps. Here's how it works:

1. When you run (F5) a project from Visual Studio, DXProxy goes through the cloud and sets up a direct connection to your machine.
2. It then provides an unique QR Code on the browser window that is displaying your solution. Take a look at the QR Code at the bottom left of this image:

DevExtreme QR Code Deploy Debug

3. Now you can use any QR reader on your mobile device to scan this code and it will launch a version of the web app (yes the one that is running locally on your machine), on your mobile device!

Directly test how the web app will look and feel for each mobile device that you'll support by loading the version that you're developing on your laptop or desktop.

This gives you several benefits:

- Save time by not having to deploy your web app to a web server just to test it
- Create better quality mobile web apps because you can test directly on your mobile device
- When running on your mobile device (via Courier), you'll have access to local resources like the camera
- You don't need to worry about deploying through an app store to see

And because you might have several DevExtreme mobile web projects, we've made a special native app to help you test it.

 

A free iOS app too

To help you test and deploy the mobile web apps you create with DevExtreme, we've made a slick iOS app for iPhones and iPads. It has a great debugging feature too. Read more about in in the following blog post:

DevExtreme Courier App - Free iOS App helps you deploy and test mobile apps

There will also be an Android version of this app in the future.

 

JavaScript? And what else do I need to learn to use DevExtreme?

To use DevExtreme will require some basic understanding of JavaScript and jQuery. I recommend getting familiar with:

- JavaScript
- jQuery
- Knockout

There are a ton of good free resources on the internet to learn these technologies. In fact, our CTO Julian Bucknall, has been blogging about JavaScript and you find these blog posts helpful:
- JavaScript blog posts on DevExpress
- "JavaScript for C# developers" blog posts

 

Supported Web Browsers

Because DevExtreme HTML is an HTML 5-based framework, we have targeted only the modern web browsers that fully support HTML 5. Webkit browsers like the newer versions of Chrome and Safari are supported. And the latest versions of Firefox, as well as, Internet Explorer versions 9 and 10!

 

What about jQuery Mobile? Competitor X,Y,Z?

We have taken a look at the strengths and weaknesses of the solutions out there today. And we feel that DevExtreme is on par with the best of them in terms of features and performance.

A key benefits for you is that it was developed by DevExpress who has been in the developer tools business for over a decade. And we work hard to make it easier for you to create stunning applications. Plus, our excellent support team will be there to help you when you have a DevExtreme question.

If you have specific questions or concerns about features versus any existing company or product then please feel free to ask us by posting your question on our support center: http://www.devexpress.com/Support/Center/Question/Create.

 

In the coming weeks, we will be talking more about DevExtreme. Drop me a line below with your comment or question. Thanks.

 

Create beautiful experiences across devices and platforms...

DevExtreme tools deliver an innovative solution for developers who want to create stunning, multi-screen applications across platforms and devices, from Windows 8 devices and the iPad to smartphones like the iPhone and Android. With the power of HTML5, CSS and JavaScript tools in DevExtreme developers can also build interactive and engaging web applications that push the boundaries of user experiences to a new level.

Learn more here: https://www.devexpress.com/Products/HTML-JS/

Published Sep 24 2012, 10:45 AM by
Bookmark and Share

Comments

James

Any chance we're going to see a DXTreme for Xaml? (i.e. Windows 8, Silverlight, MonoTouch, Windows Phone 7, Windows Phone 8)

I really detest javascript. It is a horrible language that cuts productivity in half or worse. But I love the concept and being able to build cross platform with the above would do the same thing, just better.

September 24, 2012 2:54 PM

Mehul Harry (DevExpress)

James,

Yes! In fact, in the preview release, you'll find DXTREME XAML that you'll be able to play with soon.

September 24, 2012 3:34 PM

Roman Eremin (DevExpress)

I guess James wanted multi-channel framework that is based on XAML.

DXTREME XAML is WinRT - based, so it won't work on, say, iOS.

Reality is that HTML/JS is the only least common denominator for popular mobile platforms.

September 24, 2012 4:09 PM

Mehul Harry (DevExpress)

James,

Let me clarify and add to Roman's statement. First, yes, we'll have DXTREME XAML that will allow you to target Windows 8 based devices because we're writing it for WinRT.

Second, if you want more broad approach to iOS and Android devices then you should consider DXTREME HTML.

Does that help?

September 24, 2012 4:14 PM

Iván Szabó

Hi !

Great ! And what about XAF ? When will be available ?

DXTREME -> XAF ?

HTML5 -> XAF ?

September 24, 2012 5:10 PM

Mehul Harry (DevExpress)

Iván,

At this point in the product's lifecycle, there are no plans to include XAF support. Besides which, XAF was designed to be a .NET product and is already highly customizable for that platform.

Thanks.

September 24, 2012 5:32 PM

Paolo Liverani

Too bad you are not going to support XAF. The biggest drawback with XAF is that is not able to generate code for mobile terminals and DXTREME would help fill that gap.

September 25, 2012 3:08 AM

Iván Szabó

Oh ...

And the 3-tier application model ?

DXTREME -> XAF Service layer ?

HTML5 -> XAF ?

September 25, 2012 5:08 AM

Claus Bogner

Hi Mehul,

looks really cool and seems to be exactly what I was waiting for.

Will there also be some data-bound controls, like Grid, Tree, PivotGrid, ... in addition to the (awesome looking and feeling!!) charts?

September 25, 2012 9:41 AM

Mehul Harry (DevExpress)

Paolo and Ivan,

Thanks for the feedback. I'll pass it on to the XAF development team.

September 25, 2012 3:11 PM

Mehul Harry (DevExpress)

Claus,

Yes, the team is in active development right now for the December release. We'll have more news about what kind of JS widgets will be available. And yes, the DXTREME framework will help you to make data-binding on the client-side easier.

Spend a few minutes online and walk through this little sample. You can do the entire sample online btw. But you'll see how databinding, using knockout, is done:

help.devexpress.com/HTML!Overview/Getting%20Started/Create%20Application

Thanks.

September 25, 2012 3:46 PM

Claus Bogner

Mehul,

thanks, that sounds good. I've already seen this demo btw. But I'm very curious about the look and feel of more complex controls (as the ones I mentioned before). I hope every of the standard DX controls will be implemented in the near future (of course not everything can be realised with12.2, but maybe until let's say 13.2... :))

Anyway, HTML5 definitely is the right path. :)

September 26, 2012 3:37 AM

Stefan Wolf

Why only new HTML5-Browsers?

knockout and jquery support IE6+ and [competitor] do also... ?

September 27, 2012 4:19 AM

Mehul Harry (DevExpress)

Stefan,

Good news, we're looking to support older browsers too. But some of them have limitations. For example, older IE does not support SVG and so our DXTREME visualization charts will consider supporting it via VML. Also, the competitor you mentioned doesn't support IE6. Thanks.

September 27, 2012 5:32 PM

Dennis (DevExpress Support)

Hello, let me try to address some of the XAF questions in regards to DXTREME.

@Iwan:

I am not 100% sure what you mean by "HTML5 -> XAF ?", but I feel that you are talking about a new XAF HTML5 client (in addition to the WinForms and ASP.NET ones we have). If this is the case, then there are no such plans, at least at this time.

@Paolo and other XAF guys:

At this point, DXTREME is in a public preview and we are excited to hear your feedback.

Starting from version DXperience v11.2, XAF provides a built-in Middle Tier application server  that allows you to move the important logic (e.g., security system checks that filter out sensitive data) from the client to the server side (clients may have no direct access to the database server and may not even know its actual network location).

It is possible to expose the application server data via WCF or OData, which is already natively supported by XPO.

That means that not only built-in XAF Desktop and Web clients can take advantage of the XAF application server (e.g., its security features and others to come), but any others, e.g., mobile apps created using DXTREME, which will require a data feed as an input + some authorization logic for the application server.

The latter is an example of the integration the XAF team may provide and that will be your bridge to mobiles (though, I have already heard many times of customized XAF apps running on iPads and even on QVGA devices - join the XAF clubs in social networks not to miss anything from the XAF community life and news). Please track this Support Center ticket to be automatically notified when examples for this are ready.

Thanks again for your feedback and your support of XAF and DevExpress. If you'd like to discuss this further then please contact me at dennis@devexpress.com.

September 28, 2012 11:41 AM

Paolo Liverani

Hello Dennis,

thank you for suggesting us how we could use XAF with DXTREME but I think that effort should be done (and supported) by Devexpress for all of her customers.

That would give us a real unbeatable tool.

Paolo

October 1, 2012 5:09 AM

Paolo KALC

Helo Dennis,

I totally agree with Paolo Liverani.

Paolo

October 2, 2012 3:51 AM

Gosha

Hello Dennis,

me too. Totally agree with Paolo Liverani

October 2, 2012 6:46 AM

Dennis (DevExpress Support)

@Paolo(s):

Thank you for your feedback, guys. As I said above, "The latter is an example of the integration the XAF team may provide and that will be your bridge to mobiles ". If you are referring to a different thing, please describe yours "I think that effort should be done (and supported) by Devexpress" in greater detail. Thank you in advance!

October 2, 2012 6:59 AM

Paolo Liverani

I mean that we need the new XAF HTML5 client that you say that there are no plans about.

I see that there is already an ASP.NET client but that is not something that you are going to run on a mobile client.

PAolo

October 8, 2012 5:01 AM

Dennis (DevExpress Support)

@Paolo: Thank you for the clarification.

October 9, 2012 2:16 PM

Paolo Liverani

@Dennis: I see that DevExpress is doing a great job with DXTREME but can we know what are you going to give us with the new version of XAF (I have seen that there are some minor updates, but no major new feature).

Thank you

October 11, 2012 3:38 AM

Paolo Cellarosi

Hello Dennis,

I agree with Paolo Liverani's statements, we are in need of HTML5 UI for XAF.

In past years I built several business application with XAF and now, in the 'BYOD Era' customers are asking for multiple device support for these apps.

In same way I can develop web app with XAF with only basic knowledge of HTML+JS, I would like to develop mobile apps...

Please XAF Team, save us from Javascript!  ;-))

Paolo

October 11, 2012 8:25 AM

Dennis (DevExpress Support)

>>

Please XAF Team, save us from Javascript!  ;-))

<<

It seems that Microsoft itselt is already doing a good job in this regard - TypeScript (btw, its development is headed by the creator of C#).

November 4, 2012 2:54 PM

Robert Fuchs

> TypeScript (btw, its development is headed by the creator of C#

and Delphi.

I would have preferred though Anders Hejlsberg building on Script# (http://scriptsharp.com).

Why learn TypeScript or Javascript when we can do it in C#???

November 12, 2012 2:01 PM

Lukasz Stanczyk 2

Agreed with Paolo Liverani. Seems like with current mobile trends XAF becomes obsolete with its just windows and asp clients. I would not mind even paying extra $1,000 for HTML5 client functionality. Also seems like this would be a smart move on dev express part to combine two products and cash in on that fusion.

December 26, 2012 11:06 AM

Mehul Harry (DevExpress)

December 26, 2012 2:05 PM

Rohit Airi

Hello mehul, I wan t to Integrate Phonegap into my Existing Devextreme Project. I read your article on that also.

www.devexpress.com/.../KA18796.

That's ok but right now i am confused to how to use or create an app with Integration of phonegap and nodejs, phone js.

And my cordova.js always blank why?(ver-3.6.3).

November 25, 2014 12:48 AM

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
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