[CLOSED] Native App with Ext.Net Mobile

[Zdenek]

Hello

I'm trying to create kind of prototype with Ext.Net.Mobile, that could be patched to native application.
Not sure how many things could be done in easier way and how many license conditions I broke on the way.


Presumtion is single paged application ( aspx) with some controls on it (ascx)
In general I wanted to kep sencha modern project structure as much as possible ( in order to use sencha command) but finally I found that I would need extjs license which is what I wanted to avoid (as sencha command required extjs license otherwise I can hardly generate application. hopefully I'm not wrong)

So first presumtion is ext.net mobile only

1) I need to somehow get output of ascx to javascript

I'm using following handler in order to do that

StringBuilder scripts = new StringBuilder();
		var rootFolder = HttpContext.Current.Server.MapPath("~/UserControls/DynamicControls");
		var files = Directory.GetFiles(rootFolder, "*.ascx", SearchOption.AllDirectories);


		foreach (var file in files)
		{
			string virtualPath = file.Replace(rootFolder, "~/UserControls/DynamicControls/").Replace(@"\","/");
			var classNameTemp = file.Replace(rootFolder, "ALAMobile.DynamicControls").Replace(@"\", ".");
			var className = classNameTemp.Substring(0, classNameTemp.Length-5);

			UserControl ctrl = (UserControl)LoadControl(virtualPath);
			var jsConfig = ComponentLoader.ToConfig(ctrl, false);


			var regex = new Regex("\"{0,1}xtype\"{0,1}:\"([^\"]*)\"");
			var jsonBuilder = regex.Replace(jsConfig, XTypeReplace, 1);

			if (jsonBuilder.Length <= 2)
			{
				scripts.AppendFormat("Ext.define('{0}',{{alias:'widget.{1}' {2}}});", className, className.Replace(".", "_"), "");
			}
			else
			{
				scripts.AppendFormat("Ext.define('{0}',{{alias:'widget.{1}', {2}}});", className, className.Replace(".", "_"), jsonBuilder.Substring(2, jsonBuilder.Length - 4));
			}
			scripts.AppendLine();
		}

		scripts.Replace(@"{id:\""", @"{_id:\""");
		scripts.Replace(@",id:\""", @",_id:\""");
	
		return scripts.ToString();
	
	}

So in very simple words - I serialize component (ascx control) to JSON and then give that json class definition ( using Ext.define), with name and xtype based on ascx location.

For example result of control sitting in ~/DynamicControls/LoginControl.ascx is

<%@ Control  %>

<ext:Container runat="server" Layout="vbox" Controller="ALAMobile_Controllers_LoginController">
    <LayoutConfig>
        <ext:VBoxLayoutConfig Align="Center" Pack="Center"/>
    </LayoutConfig>
    <Items>
        <ext:Panel runat="server" Width="600">
            <Items>
                <ext:TextField runat="server" Reference="txtLogin" Label="Login" />
                <ext:PasswordField runat="server" Reference="txtPassword" Label="Password"/>
                <ext:Button runat="server" Text="Login" MarginSpec="10 0" Reference="btnLogin"/>
            </Items>
    
        </ext:Panel>
    </Items>
</ext:Container>

is

Ext.define('ALAMobile.DynamicControls.LoginControl', {
    alias: 'widget.ALAMobile_DynamicControls_LoginControl',
    "controller": "ALAMobile_Controllers_LoginController",
    "extend": "Ext.container.Container",
    items: [{
        width: 600,
        xtype: "panel",
        items: [{
            reference: "txtLogin",
            xtype: "textfield",
            label: "Login"
        }, {
            reference: "txtPassword",
            xtype: "passwordfield",
            label: "Password"
        }, {
            reference: "btnLogin",
            xtype: "button",
            margin: "10 0",
            text: "Login"
        }]
    }],
    layout: {
        type: "vbox",
        align: "center",
        pack: "center"
    }
});

I'm sure code could be improved, but so far I found no trouble with that

As you can see there is Controller, which is normal ExtJS ViewCOntroller sitting in the ~/controlers/logincontroler.js file
just for demonstration looks like this

Ext.define('ALAMobile.Controllers.LoginController',  (function () {
	var publicInterface = {
		extend: 'Ext.app.ViewController',

		alias: 'controller.ALAMobile_Controllers_LoginController',


		init: function(view) {
			
			this._view = view;

			this._txtLogin = this.lookup('txtLogin');
			this._txtPassword = this.lookup('txtPassword');
			this._btnLogin = this.lookup('btnLogin');

			this._btnLogin.on('tap', btnLogin_click, this);

			this.callParent();
		}
	};

	function btnLogin_click() {
		
		directMethods.Login.callAjax(this._txtLogin.getValue(),this._txtPassword.getValue(),{
			success: function (result) {
				
				if (result.IsAuthenticated)
					ALAMobile.Win.Application.instance().loginFinished();
			}
		});
	}
	return publicInterface;
})());

So design vise speaking view and controller is pretty clearnly separated ( ascx vs js)
One of future plan is that controller is generated by C# code translated using Object.Net or Sharpkit, not important for now

Then I have one ascx handler that pack all the controllers, custom js files and js code generated from ascx into one pack.
As all the stuff is defined using Ext.define, the order of loading does not matter.

2) Direct Methods
As application is finally supposed to be native, I need to somehow point direct methods to server. Of course there is an option not to use direct methods ( webservices instead). this thread talks more about details

http://forums.ext.net/showthread.php...ET-application

so far seems that following beforerequest event handler redirect requests

function beforeAjaxRequest(con, options, eOpts, params,request) {
		request.url = fixedServerUrl()+"/WindowsApp/ALAMobile.aspx";
		request.headers['X-Ext-Net'] = request.headers['X-Ext-Net-Mobile'];
	}

And then on server is required to enable CORS in web.config

<httpProtocol>
			<customHeaders>
				<add name="Access-Control-Allow-Origin" value="*" />
				<add name="Access-Control-Allow-Methods" value="*" />
				<add name="Access-Control-Allow-Headers" value="X-Ext-Net,X-Ext-Net-Mobile,X-Requested-With" />
			</customHeaders>
		</httpProtocol>

Right now there is a problem with sending authentication cookie, but that will be hopefully somehow solved

3) Packing the application
Here the fun starts. In this point I have my application in default.aspx, one css and one (packed) js file. No idea hovewer how to pack ext.net.mobile.

I wrote simple console application that loads default.aspx and download all external scripts and styles, including ext.net mobile javascripts and styles. For purpose of example works. But hopefully someone on forums will say if it is allowed ( well - it has to be allowed otherwise this mobile framework will die pretty soon I think) and what is recomended way how to do that.

Once I have all my files packed (including framework) I can copy those to another server, execute locally - and they seems to be working.

4) Native App
For purpose of demonstration I used Xamarin. Simple xamarin form apps with webview inside, with html created in previou steps loaded from "localhost". Following link describe details pretty clearly : https://developer.xamarin.com/guides...-with/webview/ (hope it's ok to paste external link s here)
Note that my Xamarin application is bit bigger then just "webview", it contains some platform specific features ( services and so) but mostly -like 99% - it's html based. Which was whole subject of whole excercise

Any comments welcome