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 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.
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.
Does it support Apache Cordova or phoneGap
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.
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?
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.
Hello,
Is it to develop mobile web app which can be installed on device or a responsive web application accessed from a browser.
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.