[CLOSED] Native App with Ext.Net Mobile

  1. #1

    [CLOSED] Native App with Ext.Net Mobile

    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
    Last edited by fabricio.murta; Dec 26, 2016 at 2:03 PM.
  2. #2
    Hello @Zdenek!

    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)
    I'd say you are wrong with something on the phrase above. Fortunately I guess! :)

    That's about using Sencha CMD with an Ext.NET 4 license. Here's an interesting answer that was recently posted: http://forums.ext.net/showthread.php?61369

    In short, it states that you being holder of Ext.NET 4 license, you also have the commercial license of ExtJS 6 bundled in the package/sources. This also makes you eligible for using Sencha CMD.

    We'll review the rest of the thread and provide you with feedback soon!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Another tip, around your item (1) I see you are using ComponentLoader.ToConfig(). There are ways you may have return the script of a page or component at once, if you use the component's .To.Script() method. But maybe here we're talking about a service and not ascx. In code behind you can just make the whole page, or get a markup component from its ID and then .ToScript() it to return the script to create it at once. But that'll be an Ext.create() and not Ext.define() approach.

    But, as this part is already working, maybe it is not worth spending more time on it. Just know that maybe there's a better approach you may try to make your code look simpler. If you browse examples explorers you'll find some examples about it. Let us know if you are looking for examples like that and having hard times finding one.

    Now, under (2), I'm afraid you will either have to use a central cookie server and/or pass the cookies as parameter in the process, as cookies can't be accessed cross-domain. A web browser standard/design/limitation as far as I could see.

    For (3) you have the embedded resources "open" to copy from Ext.NET source codes' src/Build/Ext.Net/extjs/*.js (original Sencha code, including themes) and src/Build/Ext.Net/extnet/*.js (overrides and extnet-specific features). The directory have the bundled javascripts with both the non minified and minified versions. The themes also have minified and not minified CSS files inside. Exceptionally the themes have -embedded version of the CSS files that points links of resources (image icons for example) to the Ext.NET embedded path structure.

    So with (4) I just understand you want to output from Ext.NET and save the outputs as static/standalone javascript. This will (if I got it right) limit dramatically the interaction and power of ASP.NET over your project, but you will be able to host it on non aspnet/mono web servers.

    Looks like a challenging project and I don't really see any licensing breaches here. Ext.NET 4 includes ExtJS 6 commercial license. It will not make you elligible to use other Sencha tools like Senhca Architect or old Sencha Touch (which is now merged to ExtJS under the name ExtJS modern framework).

    If you want to raise key points you are afraid may breach your license limitations, let us know and we'll clarify for you. If not already, I believe it would be worth a browse thru our FAQ at http://ext.net/faq/. There are lots of licensing questions answered there, and the faq list of entries is not really long.
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Ok, thanks for tips

    just note that purpose of this is not to host this app on non-asp.net servers
    purpose is ability to have the application native ( either translated using cordoba and/or sencha packager)
    if you are aware of any other/easier way then I'm open to sugestions. That's where all js frameworks leads now. Having mobile server application - ok - why not - but real benefit is if such application can be packed and run in android/iOS

    Great new that I can distribute ext.net sources now ( client part ) I had in my mind that in order to satisfy license I need to have page with resource manager. I will try that for sure.

    Finally - not sure I understand your sugestion about 1) - generating Ext.create and Ext.define is significant diference, no? having clas definition ( and as many instances as I like) - in fact View from Sencha MVVM pattern, or having just one instance - those are for me completelly separated things, no?

    regarding 2 - sound strange - if application run nativelly (means translated using cordoba to native package) it somehow exchange cookies with server, I think the source of the problem is that I'm changing direct url too late and cookie container is not initialized. I think you are right that cookies from one sever could not be used on another cookie domain. But here the cookie domain is same - all cookies comes from one application, they are just not send back for some reason. If I'm on localhost ( i.e hybryd application on mobile) or if I'm on mobile web, cookies are retrieved from the main application. And all I need is that they are send here
  5. #5
    Great new that I can distribute ext.net sources now ( client part ) I had in my mind that in order to satisfy license I need to have page with resource manager.
    You mean, you can distribute Ext.NET client application sources, right? I don't remember telling you Ext.NET sources were open for non-premium users. To clarify, Ext.NET Sources (the one you get from github and use to build Ext.NET.Mobile.dll are not free. But any code you make that uses Ext.NET is licensed under your jurisdiction. Much like the examples explorers. All code there is in the open. But the Ext.NET DLL among with its sources are not.

    In another sense, yes, you are okay to bundle Ext.NET "public" resources like extnet-all.js, extjs-all.js, the themes CSS and images (not the SCSS though!). Pretty much anything you can find on CDN or can access thru your web browser's debugging and tracing tools are okay to be bundled.

    It is important to keep this clear. General rule of thumb, if in doubt, drop us a note or give the forums a search. We may already have discussed a given licensing aspect in the past. If you need to discuss sensitive information, mail at support@ext.net.

    but real benefit is if such application can be packed and run in android/iOS
    Alright the usage for "Native code" in this context is really new to me, sorry. Besides that would imply a licensing issue to use the resources in a standalone scenario. But as long as your application has Ext.NET and ASP.Net involved (components created dynamically from ASP.NET capable server, powered with Ext.NET's DLL), you are on the safe side.

    While you can't pack up the responses from Ext.NET (will turn the website into a static, standalone website and that won't make much sense, would it?), you would be okay as pointed above, to bundle the public resources in your application.

    not sure I understand your sugestion about 1) - generating Ext.create and Ext.define is significant diference, no?
    Yes, they are significantly different, and I probably suggested it for not realizing in full your scenario. But as far as you have the main big resources (javascript files) locally in the android or ios device, the overhead of using Ext.create() to each component as the page is pulled from server would be negligible:
    - next to the data throughput you already saved by "caching" extnet-all and extjs-all locally
    - next to a possible scenario of a page with a lot of data to display

    Examples explorer is a good example of a single page application itself. It loads partial content all the time for the examples loaded. All from .ascx files (for the WebForms mobile examples explorer). And keep them "cached" once they are first loaded. Once you open an example, the next time you switch back to it (from another example) you'll notice a much faster load time. Likewise, it could have been changed so that the example resources are "destroyed" once the user moves away from the example. That'll fall under the resources vs speed project design decision.

    regarding 2 - sound strange - if application run nativelly (means translated using cordoba to native package) it somehow exchange cookies with server, (...)
    Maybe I still don't see your scenario and things are different in mobile applications. But it does not seem a problem if all you leave local are resources, you'll have to deal with one domain for fetching the pages and keep cookies bound to it (the remote server/domain the user fetches the Ext.NET + ASP.NET dynamic pages). Static data hosted in the local "server" (aka mobile device) will probably have no need for authentication nor anything like that.

    Or would you have some local "dynamic/database" data stored in a "local server" on the mobile device as well? Well, but that part is beyond Ext.NET reach. :) Probably some sort of SSO (single sign on) technology would have to be applied on your software.

    I hope this clarifies at least most of the matters covered in my last follow up.
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Ok
    Let's stick to the original thread topic - native apps, I will create separate threads to other areas if necessary

    So ok - I can take ext.net mobile scripts css and images ( as premium user) and using cordoba or sencha packager I can build "native" app". What I'm still not clear is how to use direct methods hten. Remember that such application would be executed (browsed) using "localhost" - for example "http://localhost/mobileapplication", how can I execute direct methods to my servers (http://myserver.com)? (as far as I know direct methods are executed against the same page - and I can hardly run IIS with ASP.NET on mobile :-))

    If I use my trick above, direct method is executed, but any returned cookie from server is not passed back in any next request to the server

    Thanks
    Z
  7. #7
    Hello @Zdenek! Good idea to stick to a singe topic.

    Still, I see some problems on the native app approach.

    First off, sencha packager seems to have been a different product, not licensed thru Ext.NET license then. And seems that it has been discontinued around 2013. At least by what I could read in this topic at Sencha forums: Desktop Packager not mentioned in Sencha products any more?.

    So well, as far as using Sencha Packager is concerned, Ext.NET is not related nor enables you to use the product even if you had the chance to download one version when it was made available. Licensing is completely independent and we have no idea how the licensing of this different Sencha product is. Just that Ext.NET license does not make you elligible to use that product. If you previously had a license to use it and acquired it directly from sencha.com, that would be another story, we simply can't touch that part.

    Now second problem seems to be on your native hosting approach. According to your first post:

    Then I have one ascx handler that pack all the controllers, custom js files and js code generated from ascx into one pack.
    Sounds like you are using Ext.NET to build static JavaScript files. Basically using it as a transpiler to create not static pages, but "extension classes" to ExtJS components, so you can somehow just run and coordinate that "extensions" in your standalone application. Is that right?

    Simply put, Ext.NET license enables you to use ExtJS in an ASP.NET Environment. So here we may have licensing restrictions although you are using Ext.NET indirectly there.

    Please confirm if my interpretation above is correct, and I'll discuss the licensing issue internally here and give you a better response. Probably you'd want to open a new thread to double check this issue and respond this on that thread?

    Next I will post about what actually matters for you in your previous post.
    Fabrício Murta
    Developer & Support Expert
  8. #8
    "Remote" Direct Method

    What I'm still not clear is how to use direct methods hten. Remember that such application would be executed (browsed) using "localhost" - for example "http://localhost/mobileapplication", how can I execute direct methods to my servers (http://myserver.com)?
    Licensing stuff aside, no matter how I try to read it, I can't read "direct method" from the usage you want. I can see direct methods being called from a same page (same ASPX page or MVC View), and they will integrate to the client side via App.direct.<method_name>(), but no telling, that won't happen -- not out of the box -- if you want to call it from another page.

    But maybe this Ext.NET example is the light you need to calling remote direct methods from your static page (assuming it loads extnet-all.js): Calling a WebService endpoint from a DirectMethod.

    Yes, this probably is not what you were thinking when you asked to call a direct method defined on the remote server. I will double check this, but I'm pretty confident that remotely calling a direct method pretty much qualifies it down to just an Ajax request, an HTTP POST/PUT to the remote server. It could be seen as if you wanted to call a method from a library you didn't import to your project (as it is not even a C# project at all). So I'm afraid all pointers direct to using a web service in that case.

    EDIT: here's a pertinent post about direct requests even in the same server: Question about DirectMethod/DirectEvents call
    Last edited by fabricio.murta; Dec 15, 2016 at 2:07 AM.
  9. #9
    Hello
    you are right in many points above ( and you will not beleieve how many times I went through this thread in last week :-))

    Now I have ext.net mobile (technically javascript of course) application running on mobile device (android) as a native application (apk).
    Last edited by geoffrey.mcgill; Dec 26, 2016 at 12:28 PM.
  10. #10
    Hello @Zdenek!

    Thanks for your feedback, glad you could make it work for you!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] EXT.NET and EXT.NET Mobile together
    By ADV in forum Mobile Premium Help
    Replies: 7
    Last Post: Jul 04, 2017, 1:13 PM
  2. Replies: 9
    Last Post: Jan 14, 2017, 8:35 PM
  3. [CLOSED] Ext.Net DropZone vs Ext native DropZone
    By adrianot in forum 2.x Premium Help
    Replies: 2
    Last Post: May 31, 2013, 10:21 AM
  4. Mobile development
    By cuki in forum 1.x Help
    Replies: 0
    Last Post: May 05, 2012, 6:06 PM
  5. [CLOSED] Mobile
    By rnfigueira in forum 2.x Premium Help
    Replies: 1
    Last Post: Mar 28, 2012, 3:14 PM

Posting Permissions