It has been some time that I have been working on improving a cross platform application which has been built using Sencha Touch and Cordova. The application originally had Sencha Touch 2.2 framework, and I managed to upgrade it to Sencha Touch 2.4.2 framework. This improved some of the functions of the application, however, to a great surprise it made the application performance worse rather than improving it.

I realized it is because of the way some of the functions written in the code originally which are actually hacks (Not really, but rather a way to pass the limitations of Sencha framework) and are not needed at times with the latest framework version.

There are native interactions, that were previously written in the application because there Sencha was supporting it, and are now shifted completely to Cordova. There are code snippets which are there to support older Sencha syntax. And then there are loops that can be improved.

In this post, I am going to cover a hack that improved the performance of my application significantly.

JSON v/s Ext Encode/Decode

Ext.encode and Ext.decode is Sencha’s version of JSON.stringify and JSON.parse. This is necessary where native methods are not available. However, with all the new browsers, and compatible mobile web rendering engines, JSON native methods are accessible and And on such platforms, using Ext.encode and Ext.decode for example, slows down the user interaction with application.

To overcome this, before loading any Ext JS function from the framework, we can create the Ext array and then setting the native JSON flag to true on this. This allows application to rely on the browser and web rendering engine to make JSON encoding and decoding as fast as possible rather than relying on the framework.

Here is the code snippet which should be added to index.html file before loading any of the Ext JS framework methods.

 

test

 

In my application this has made the performance of the application visibly better.

 

While making your Android app full-screen (hiding the notification bar on the top) is quite easy in the Native environment where you can simply add the configuration in Manifest.xml file, if you are doing the cross-platform application development using some tool such as Apache Cordova, things become a little bit trickier.

I am using EXT JS and Sencha Touch as the web framework for my Mobile Application and Cordova just as a platform for compilation, peripheral support and so on. So my first idea was to look for the configuration in Sencha Touch framework, however a simple search on Sencha Forum showed me that it is not possible to do this through Sencha as Ext JS does not provide any meta tag for this, and is dependent on UI’s web view to do this. It is possible to access the manifest.xml file using Sencha CMD, but if you are using Sencha Touch with Cordova in Visual Studio, and you are not using Sencha CMD, things become tricky.

Thankfully, Cordova has made it very easy to do so. All you have to do is, go to config.xml file in of your solution. If you use Visual Studio tools for Apache Cordova, you will see something like this -

Untitled

You simply need to select the Fullscreen option to yes or no, and it will make the desired change for you. If you want to hide the navigation bar select yes, otherwise simply select no (It is by default no in my knowledge).

I hope this helps!

I recently wrote a post on C-sharpcorner which is one of the largest .NET communities about using Visual Studio tools for Apache Cordova and Sencha Touch framework to create your first cross platform app.

image

Here is the link of the article.

I believe this will help you in using Cordova with Sencha Touch in Visual Studio.

Last week, I added profiles in my existing MVC Sencha Touch app, which was designed only for tablet view. To make it mobile friendly, I used Sencha's awesome profiles. So what I did was, I replicated all views in tablet and phone profiles, which means basically I created new views, e.g. MyApp.view.profileName.xyz for all the views, where profileName was either tablet or phone, and xyz was replaced by view name. These views are extended from MyApp.view.xyz. I followed Sencha Touch's guidelines to use Profiles while doing so, and thus I was quite confident that this would work great. However, the app always used only phone view regardless of which device I use. If I commented out the phone profile, it used by default the tablet view for all devices. And so even after using Profile functionality, it was only using single kind of view for all devices in my app. After some Googling, I found out the solution.

Solution: In the profiles I was using xtype in the base class and if I don't use the same xtype in profile view classes, only the base view is rendered which is basically nothing but a blank white screen. Why? Because I am not adding the views to viewport inside profile launch application (Don't ask why, that's how the app is developed since the start for various reasons.) instead I use Ext.widget to create the view and add it to Viewport inside Main controller launch function. And there I get the views by xtype.

image

To fix this, I had to use alias instead of xtype. I used the alias for the base view class. The code looked something like this.
Now in the launch function of your each profile, all you have to do is, set this alias to the views of corresponding profile. The code for this looks like this.
image

this widget.main is then used with widget.create(widget.main), to create the main view. When you use phone for example, only the phone profile is activated and the alias is set only for the phone profile instead of both. And this solves the problem.

I don't know if anybody has also encountered this problem before, and why specifically I explicitly had to map the widget.main in profiles, but in case it happens in future with somebody, this post should be able to help them.

 

Working with Sencha Touch can be great and disastrous at the same time depending upon how you are using it. This week was disastrous for me for many reasons, but the major reason was what I described in the title of this article.

So here is the background, I happen to handle an old code where old Sencha Touch library (2.2 if I am not wrong) is used in accordance with Cordova Tools to develop a mobile app. As if that was not enough, I ported this whole code in Visual Studio environment.

Now, this all was working quite okay until I stumbled upon an alert box. Normally, as soon as the alert box is called, an overlay mask is set on the whole screen and then the alert box is shown. When you click on the Ok, the alert box is gone, and the overlay is removed. However, here came the problem. The alert box was gone of course but the overlay was not removed resulting in the locking of the screen, I couldn't do anything until I refresh the page again which is usually not a easy thing in an app for a user.

After hours of debugging and going through the same code again and again, I realized that this is the bug in the Sencha Touch library itself. This was confirmed by Sencha Touch Forum This problem can also be seen on an old example from Sencha. It has also been mentioned on the forum that this bug is fixed in the latest version of the library starting from 2.3.0-b3.

Well so the actual solution was to just replace the library in my project and hope for the best. However, that's where the second headache started.
I don't really know how and why but the guys who coded it originally created a huge ‘app.js’ file with all the libraries, views, controllers and everything inside it. So removing library option was no longer available, and that's when I turned to a temporary fix.


This was happening in the alert box so I went to Ext.MessageBox. This is usually inside messagebox.js (According to forum) However for me it was inside app.js. It has showAnimation and hideAnimation, in which hideAnimation value is set to {type:'popOut',duration: 250,easing: 'ease-out'},
Remove this and set it to null.

So instead of

hideAnimation: {type:'popOut',duration: 250,easing: 'ease-out'},

you should use

hideAnimation: null,

where 'Ext.MessageBox' is defined.

Why: Usually when the popOut animation is over, the view has display:none. However, in my case this was not none even after messageBox was disappeared. So clearly the hiding animation was not working properly in this case. I set it to none, i.e. completely removed the pop out animation from hiding part of the message box and voila. The problem is gone.

 

So, lately I am working on Cordova (Or previously known as Phonegap) tools for Visual Studio to build a cross platform application using JavaScript and HTML. I imported some pre-written JavaScript code to Cordova and while it worked for me on Android Emulators, trying to run it on Windows Phone was a bit struggling. While trying to deploy it on Windows device, it threw an exception saying "JavaScript runtime error - Unable to add dynamic content."

image

After a little more probe (By commenting/uncommenting some lines basically), I realized that it is happening every time I try to dynamically load html page from JavaScript. (Which is also basically what the exception says but I had to do it myself).

When I Googled about it, I found out that when you try to deploy some JS code on Windows devices, Microsoft uses some security principles to prevent un-sanitized markup which literally means adding HTML dynamically such as using innerHTML, outerHTML, document.write (That's where exactly I stumbled) and so on will not be so easy in Cordova when using it on Windows devices. Thankfully I found an MSDN page that states how to tackle this issue.

How: All the code that you are using to load HTML dynamically should be called inside a function of the MSApp called execUnsafeLocalFunction.

Syntax: E.g. I want to use document.write inside my script.

document.write('<meta name="'+example+'" content="'+someContent+'">')

This should be called inside:

MSApp.execUnsafeLocalFunction(function () {
document.write('<meta name="'+example+'" content="'+someContent+'">')
});

And its works perfect!

More Posts « Previous page