Ext.NET Mobile Beta Now Available

We have been working hard on Ext.NET Mobile and are happy to announce the Beta release is now available.

Ext.NET Mobile is an ASP.NET Web Forms and MVC component framework for building Phone and Tablet specific mobile web applications.

Ext.NET Mobile Beta Released

Ext.NET Mobile can be installed into your ASP.NET Web Forms or MVC application using either of the following NuGet commands.

ASP.NET Web Forms

Install-Package Ext.NET.Mobile -pre

ASP.NET MVC

Install-Package Ext.NET.Mobile.MVC -pre

Ext.NET Mobile is currently in beta release, so the -pre flag is required if installing from the NuGet Console, or check the prerelease checkbox if using Visual Studio’s NuGet Package Manager. After the final release (mid September 2016), the -pre release flag would no longer be required.

A .zip package is also available to download.

Examples Explorers

The new Ext.NET Mobile Examples Explorer is available at mobile.ext.net and the full source code for the Mobile Examples Explorer is available on GitHub. Exploring t samples he is the best way review Ext.NET Mobile components and their functionality. The source code for each sample can be viewed by clicking the Source button at the top right of each view.

A basic MVC Mobile Examples Explorer is available as well. The shell is ready and we are currently working on adding many new examples. The full source is available on GitHub.

Key Details

Ext.NET Mobile is NOT a drop in replacement for Ext.NET within an existing Ext.NET application. While Ext.NET Mobile should look very familiar to all Ext.NET developers, the Mobile API has been tailored made as a mobile specific framework. For example, the following sample demonstrates configuring an <ext:Button> component in both Ext.NET and Ext.NET Mobile.

Within Ext.NET Mobile, the Click event has been replaced with a Tap event. This translates to small API differences between the two frameworks, each targeting their specific platforms using the language of that platform.

<script runat="server">
    protected void Button1_Alert(object sender, DirectEventArgs e)
    {
        X.Js.Call("alert", "Hello!");
    }
</script>

// Ext.NET Mobile
<ext:Button
    runat="server"
    Text="Submit"
    OnDirectTap="Button1_Alert"
    />

// Ext.NET
<ext:Button
    runat="server"
    Text="Submit"
    OnDirectClick="Button1_Alert"
    />

One key requirement for configuring an Ext.NET Mobile Page or View is adding a Viewport to your configuration. All Ext.NET Mobile components must be placed within a Viewport. The following sample demonstrates a simple WebForm sample with two Buttons placed within a Viewport.

<%@ Page Language="C#" %>

<script runat="server">
    protected void ShowAlert(object sender, DirectEventArgs e)
    {
        X.Msg.Alert("Server's Response", "Hello!").Show();
    }

    protected void ShowServerTime(object sender, DirectEventArgs e)
    {
        X.Msg.Alert("Server's Time", DateTime.Now.ToShortTimeString()).Show();
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET Mobile Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Viewport runat="server" Layout="VBoxLayout">
        <Items>
            <ext:Button
                runat="server"
                Text="MessageBox Alert"
                OnDirectTap="ShowAlert"
                />

            <ext:Button
                runat="server"
                Text="Server Time"
                OnDirectTap="ShowServerTime"
                />
        </Items>
    </ext:Viewport>
</body>
</html>

Comparing the sample above to a page for Ext.NET, the only difference is the change from OnDirectClick to OnDirectTap.

API Documentation is available here.

UI Components

Ext.NET Mobile provides a wide range of components to build a rich mobile application.

The TreeList component might be the best for a navigation menu. List, DataView and Grid components are available if you need to show some repeating data to the user.

There are many other samples of UI components in the Mobile Examples Explorer.

Data Package

The UI Components’ API might differ slightly between Ext.NET and Ext.NET Mobile, but the Data package is absolutely the same in both.

Any <ext:Store>, <ext:TreeStore>, <ext:Model> and <ext:AjaxProxy> configurations can be reused across both your Ext.NET and Ext.NET Mobile applications. As well you can reuse server side data end-points without any changes, because the Store in Ext.NET Mobile sends requests and expects server responses exactly the same as Ext.NET.

DirectEvents + DirectMethods

We are doing our best to keep as many API similarities between Ext.NET and Ext.NET Mobile as we can to let Ext.NET developers start developing mobile applications with ease.

DirectEvents and DirectMethods is a centrepiece of Ext.NET and this functionality has been kept the same in Ext.NET Mobile.

You can easily interact with the server and all standard Direct features such as confirmation request, masking and duration messages. Currently, we have a few DirectEvent samples and we will be adding more over time.

The following code sample demonstrates configuring a Button with a Tap DirectEvent, then showing a confirmation dialogue and mask.

<script runat=”server”>
    protected void Button1_Alert(object sender, DirectEventArgs e)
    {
        X.Js.Call(“alert”, “Hello!”);
    }
</script>

<ext:Button runat=”server” Text=”Click Me”>
    <DirectEvents>
        <Tap OnEvent=”Button1_Alert”>
            <EventMask ShowMask=”true” />
            <Confirmation
                ConfirmRequest=”true”
                Title=”Confirmation”
                Message=”Are you sure?”
                />
        </Tap>
    </DirectEvents>
</ext:Button> 

Charts

Needs to visualize data? Ext.NET Mobile comes with a powerful built-in Charts package, similar to Ext.NET. The screenshot below demonstrates a 3D Column chart. There are many other Chart samples in the Graphics section of Mobile Examples Explorer.

Free Upgrade

One more thing… Ext.NET Mobile is FREE for all Ext.NET 4 Enterprise license holders. If you are licensed for Ext.NET 4, you are now also automatically licensed to use Ext.NET Mobile and to deploy applications using the framework. Your Ext.NET 4 license key will unlock both Ext.NET and Ext.NET Mobile.

Save $500 USD

Purchase Ext.NET Enterprise before September 12th and save $500 USD. September 12th is a date we are planing Ext.NET Mobile final release. Use SAVE500 promo code.

Save 500

Your Feedback

We look forward to your feedback on Ext.NET Mobile. Please let us know if you find any defects, or have suggestions for improving the framework. Technical support questions are best asked in the forums where new Ext.NET Mobile Premium and Community Help forums have been added. All Premium forum members have been upgraded to the Mobile Premium Help forum.

Any questions or comments? Please feel free to contact us at hello@ext.net, or via Twitter.

6 Comments

    1. Geoffrey McGill

      The Sencha Ext JS Modern Toolkit is the underlying JavaScript framework in Ext.NET Mobile. This toolkit supports Cordova and PhoneGap, and apps have been published to the Apple App Store using Sencha Ext JS Modern Toolkit + Cordova. At the moment, we have not experimented using Ext.NET Mobile + Cordova, but we hope to build a demo.

  1. Dimitris

    Congratulations on the new framework. It is most welcomed and needed.

    The only thing that confuses me is the ViewPort requirement, which neither the Ext.NET.Mobile.Default.aspx nor the Mobile Examples Explorer pages seem to follow. Can you elaborate?

    1. Daniil Author

      Thank you for the feedback.

      Ext.NET.Mobile.Default.aspx needs to be updated. We’ll do it before the final release.

      As for Mobile Examples Explorer, the actual examples are user controls (or Razor partial views in MVC Mobile Examples Explorers) which are rendered into the Viewport defined in the shell itself. Mobile Example Explorers (Web Forms and MVC) are single page applications. There is the only Viewport can be on a page.

  2. Rakesh

    Hello,
    Is it to develop mobile web app which can be installed on device or a responsive web application accessed from a browser.

    1. Daniil Author

      Hello! At least, an app built with Ext.NET Mobile can be accessed via browser. Although, underlying the Sencha Ext JS Modern Toolkit supports Cordova and PhoneGap which can be used to publish an app as a native app in Apple Store and Google Play. But, at the moment, we have not experimented using Ext.NET Mobile + Cordova/PhoneGap.

Leave a Reply

Your email address will not be published. Required fields are marked *