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

September 2012 - Posts

  • 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/

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

    Update: An Android version of the Courier App is available now in Google Play Store: https://play.google.com/store/apps/details?id=com.devexpress.dxtreme.courier

    Download the new DXTREME Courier App from the Apple App Store to easily deploy and test your mobile apps for the iPhone or iPad.

    DevExpress DXTREME iOS App

     

    DXTREME

    DXTREME is our new set of tools to help you build multi-channel apps. Or a set of client-side libraries that provide widgets, framework and more to build hybrid mobile apps and desktop web apps using one HTML 5, JavaScript, Knockout, and jQuery. Learn more here: DXTREME announcement page.

    Problem: Testing mobile web apps

    It can be difficult to test mobile web apps because of deployment. Typically in Visual Studio, a developer can just hit F5 and have Visual Studio launch an instance of their app locally. This provides the benefits of debugging and seeing a near perfect preview of the final deployed app.

    For mobile web apps, testing is a challenge because mobile browsers do not behave the same on desktop browsers. Some desktop emulators are good but the best way to test a mobile web app would be on the actual mobile device.

    Solution: DXTREME Courier delivers

    Our new Apple approved DXTREME Courier app allows you to test your hybrid mobile web app using your iOS device (iPhone, iPad, etc.). It's called Courier because it helps you deliver web apps.

    The Courier app hosts your DXTREME web app and gives you the ability to experience how your mobile web app will behave on the mobile device, once you deploy it.

    And we make it easy to add your web apps to Courier by just scanning a QR Code, which we provide. To get started:

    1. Download the app here.

    2. Launch the app. After loading, you'll see one entry for an app that is already added to the Courier list.

    DXTREME_Courier

    That entry is for the sample app, DXTravel, which was coded using DXTREME.

    DXTravel_DXTREME

    Learn more by visiting the DXTravel demo page.

     

    3. Click 'Add' on the App Toolbar to add a new web app to test. This will bring up the camera which allows you to scan a QR Code. It looks like this:

    QR Code

    Once you scan this code, it will add and load your web app. Btw, the QR Code above links to the Wikipedia article about QR Codes so I don't actually recommend scanning that particular code, even though the Courier App will load it. Smile

     

    Where does this QR Code come from?

    DevExpress provides the QR Code and ability test from your local machine for you! And this is one of my favorite features of DXTREME.

    When you create an app using DXTREME inside of Visual Studio 2012, we provide this functionality automatically.

    So a typical scenario would like:

    1. Create DXTREME web app inside of Visual Studio 2012.

    Screenshot (2)

    2. Add some views. Hit F5 to run the solution and you'll be presented with the following screen on your desktop web browser:

    Screenshot (7)

    3. From the Courier app, scan the QR Code on the bottom left side of your browser and it will load the web app that is running on your local machine on your phone! Yes, you'll be able to see a live preview and debug on your mobile device, while the app is running on your local machine.

    Amazing, right!?! We've created a special cloud service using Windows Azure to give you this special ability. DevExpress DXTREME PhoneGap Supported

     

    PhoneGap Built-In

    Our DXTREME Courier app has PhoneGap built in.

    This means that your DXTREME web app, running inside of the Courier app, is able to call native functions that are supported by PhoneGap. For example, you can access the camera, GPS, etc.

     

    Secure & Restricted Access

    We have also implemented security features into the Courier app. We have restricted the file system and contact list access as potentially dangerous. This means you can't enter or scan ANY url because it is not safe to let it run any app. Currently, you can only display apps from our site or those published through our DXProxy service.

     

    User App Registry

    In final release version of the Courier app, you will have your own "App Registry". This registry will list the "official" URLs for the user's apps and those apps will be listed in Courier after login. In the current beta version, this feature is not published yet and which is why the "Login" feature does not work.

     

    Download the free Courier app from the Apple App Store and easily test your DXTREME mobile web apps.

     

    Create beautiful experiences across devices and platforms...

    DXTREME 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 DXTREME developers can also build interactive and engaging web applications that push the boundaries of user experiences to a new level.

    Learn more here: http://devexpress.com/Subscriptions/DXTREME/

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