Convert your eCommerce Store to Mobile Store and Mobile Application

If you read my earlier blog on eCommerce to mCommerce you will come to know about importance of having mobile commerce, in this blog I am going to explain you mobile commerce solution provided by my company. We have a solution to convert your online store to mobile website or mobile application. If you are using Magento, OpenCart, Big Commerce, Wordpress, Joomla, osCommerce, PrestaShop, osCommerce, Zen Cart, Tomato Cart or any other open source shopping cart, we can convert it to mobile web store or application.

When you need Mobile Website and When you need Mobile Application?

There is a difference between mobile website and mobile application. Mobile website is something which user can directly open in the browser and access data of the website.  Mobile application is something which user has to download from the stores and install it and then they can access it.

Following are some advantages of mobile website.

• Mobile website is instantly available.
• It can be viewed on almost all the mobile devices.
• One can find mobile website easily with search engines.
• Mobile website can be shared easily.
• Mobile website can act as mobile application as well.

Following are some advantages of mobile application.

• One can use mobile application offline.
• One can personalize application.
• When you need hardware support.

What we offer?

Our solution converts your online store (your eCommerce website) to mobile website/application by using the facilities and services of your existing eCommerce platform. We build a separate mobile website for your store. That means you can manage your website and mobile website with same admin panel offered by your eCommerce platform. All the changes in your store will be available on both the websites.

Why we give you separate mobile website?

As we know the some of the eCommerce platform gives you mobile or responsive theme. These themes are specially designed for mobile screens. But those themes are not 100% user friendly and touch friendly. Also it just gives good look to your mobile website, but in terms of server communication and data usage, it's not up to mark. As for each request your page is refreshed and it go to server and render new page again. This may be slow in some devices depending your network strength. Also it consumes more bandwidth which may not be good for some users. Sometimes it slow down performance in some of the devices as all the device browsers do not have enough computing power. So with responsive theme your site is not 100% user friendly on mobile devices.

What we offer is site built with JavaScript framework. It's a HTML 5 based framework with advanced layout engines. It has a controls with rich user interface. Site build with this framework works very well on the mobile devices at it has on demand rendering. It will crate layout only when it's required, that improves the performance. Once this site is loaded, it will communicate with server only for data. There is no page refresh. Everything works with Ajax based services and only when it's required. Using this approach your data usage will be reduced and site navigation will be much faster. Application built with this framework has look and feel like native application. This is one more benefit, as normally user likes native designs much. Also with this framework you get offline storage was well your website can work offline as well. Also this website can be converted to mobile application easily and with minimum efforts. So it's very cost effective solution. With one mobile website, you also get mobile application.

How does backend works on your existing store?

For back end we use web services and those web services uses your existing platform data. So whatever your platform is web services fetch data from it and send data back to mobile website or application. Our solution is not like predefined and fully developed product as we understand that each customer have their unique requirements and needs. So what we have is basic product developed and we customize it according to your need. Some of the current eCommerce platform offers mobile website and applications they have predefined products, you can not make much changes in it and you just have to use what they offer. In stead of this we offer you customized solution for your need.

Everything from mobile websites to web services are customized as per your requirements. Designs of mobile websites are built according to your requirements as we know that you want keep your branding as it is in mobile websites.

So with our solution you get mobile website on your existing eCommerce platform as per your requirements and your needs. You can manage both your site from your existing admin panel of eCommerce Platform. Our mobile website is designed to work all the mobile devices. With our solution, you can reach to more customers and increase your business.

Contact me if you need such solution.

Email : hdave10@gmail.com
Skype: hiren.dave
Phone: +91-9327452580

eCommerce to mCommerce - Reach to maximum number of customers and grow your business

What is mCommerce?

According to Wikipedia, The phrase mobile commerce was originally coined in 1997 by Kevin Duffey to mean "the delivery of electronic commerce capabilities directly into the consumer’s hand, anywhere, via wireless technology." Current definition is, mobile commerce is the process to buying or selling products and services through wireless handheld devices like mobiles, tablets, smart phones etc.

Few years back eCommerce revolutionized the process of buying and selling stuff. It gave you liberty to buy and sell stuffs on desktop computer from your home or offices. Now a days eCommerce seems to be hurdle in transacting online with advent of hand held devices having internet facilities. Now a days people are using more smart phones and tablets than desktops and notebooks. See the chart below, it grew up rapidly and expected to grow up in coming years.

Smart phones and tablets are used normally in day to day operations. Todays hand held devices are far more advanced. It lets you browse Internet, it gives you big storage, it gives you high computing and processing power. 

So what's the impact of mobile commerce on your business?

Mobile commerce can impact your business in number of ways. For example if you are running an online store, your customer may access your store from smart phone or tablets and it may be possible that your website does not look good on it and they may not buy the products. With the Google Play store and iTunes store, user can download number of applications on their mobile devices and can use those applications for their needs. So if you are offering some services and you don't have any mobile friendly website or application, you are loosing your customers or you are not reaching to enough customers. Because there are chances that customer search on mobile devices and they did not find you. Although you were able to provide service to your customer but just for the reason they can not find you, you loose the customers.

Why your current eCommerce web site is not good for mCommerce?

Mobile devices have limited screen width and height and your current website will not work properly. For example if you have fixed height and width in your website, on mobile device user have to frequently scroll left- right or up-down to see the content of the site. This is very awkward for users as they are not able to see content properly. Customer may be traveling or walking they have one hand occupied, then they may not be able to scroll or eventually they will close your site. Current navigation of your website may not be useful. For example you have navigation menu where user can hover mouse and the sub menu is displayed. This type of navigation will not work as on mobile devices user can not hover finger over menu. So in this case your customer will never know what are you offering and they may not buy anything on your site. Another example is of dynamic height and width. Let's you set a dynamic height and width on your website so it will adjust on mobile device automatically. In this case user will see small fonts, small images on your site and this is not very clear. So user have to zoom in and if they zoom in, again they have to scroll left and right. So this is not good user experience for any user. 

Why you need a mobile website or application? 

As we mentioned earlier, people with mobile devices will search for services from mobile devices so it's recommended that you need to have a mobile website or application. It increases your customers and business. No matter what your business is mobile website and application plays a big role here. It also increases productivity of your business. For example if you are an owner of eCommerce site, you need to be connected with your customers every time. You need to reply to their queries, you may want to check your stocks. So how about an application on your mobile which let you do all these stuff? If you are a doctor running a hospital, how about an application that let patients to book an appointment from mobile or check their reports on the go? There are number of such examples.

Today no matter what your business is you need something which supports mobile commerce.

And that's where we steps in. We have number of solutions for mobile commerce starting from mobile websites to mobile applications and mobile marketing. Use the mobile commerce and grow your business. Contact me if you need mobile commerce solution.

Email : hdave10@gmail.com
Skype: hiren.dave
Phone: +91-9327452580

How to use hasMany association in Sencha Touch Model

Hello,

In this blog I will explain how to use "hasMany" associations in Sencha Touch models. First lets see what are the associations in Sencha Touch.  Normally in RDBMS we have primary key and foreign keys and using which we can reference data from other tables. For example students and course. Here one course can have many students and a student belongs to specific course. This types of associations we can have in Sencha Touch. Sencha Touch data package supports associations along the models. For this blog lets take an example of Products and Merchants. Here a merchant can have many products and a product belongs to a marchant. In this case your models definition would look like following.

Ext.define('MyApp.model.Merchant', {

    extend: 'Ext.data.Model',

    config: {

        fields: [

            { name: 'id',                   type: "int"},

            { name: 'name',                 type: "string"}

        ],

        associations: [{ type: 'hasMany', associatedModel: 'MyApp.model. Product', name: 'products' }]

    }

});

Ext.define('MyApp.model.Product', {

    extend: 'Ext.data.Model',

    config: {

        fields: [

            { name: 'id',                   type: "int"},

            { name: 'title',                type: "string"},

            { name: 'description',          type: "string"},

            { name: 'cost',           type: "float"}

        ],

        idProperty: 'id',

        associations: [{ type: 'belongsTo', model: 'MyApp.model.Merchant', name: 'merchant' }]

    }

});

Above is the definition of product and merchant models. Here we have used associations config to define it. Merchant has specified the association as hasMany and product model specified it with belongsTo . You can specify more then one associations on single model. If you see the definition of association, we have specified three config here, type, model and name. Type is the type of association, associateModel specifies the other model and name defines the key of field.  You can use getter and setter with this name or use this name in list or dataview tpl. Please note here you have to specify both hasMany and belongsTo association to each model .If you skip either, it will not work.  Now let's say we have to set tpl in the list for the products and show the merchant name there. You tpl should like like this.

var goodTpl = new Ext.XTemplate(

    '<div>',

        '<div>{title}</div>',

         '<div class="goodmerchant">By {merchant.name}</div>',

    '</div>'

);

As you see above we have used merchant.name to display name of the merchant for the product. It will fetch merchant name from merchant store using the association.

Load JavaScript Dynamically

Recently in one of my project we have requirement to load JavaScript file dynamically and call a specific function after the script is loaded. Following is the function you can use for it.

function loadJavaScriptOnDemand(src, callback) {

    var script = document.createElement('script');

            script.src = src;

    document.getElementsByTagName('head')[0].appendChild(script);

    

    script.onreadystatechange = function() {

        if (script.readyState == 4 || script.readyState == "complete") {

            if (typeof callback == "function") {

                  callback();

            }

            callback = null;

        }

    }

}

Above function you can call as following.

loadJavaScriptOnDemand('path/to/your/javascript',function(){alert('JavaScript loaded')});

If you above function we have added onredaystatechnage events for the the script. Since this will be asynchronous loading we have to check the state for the progress and call the callback function once the script is loaded completely.

Hope this helps you.

Adjust Sencha Touch Carousel Indicators

Hello,

Recently we have a requirement in one of our project, to move carousel indicators outside the carousels. See the image below.

Now the issue was, main div container for the indicators is using the inline styling to position indicators based on user preferences. So we can override with class as we have to change the logic of the inline style. For that you have to override base class of Sencha Touch, name of the class is Ext.carousel.Indicator, you will find this class in src/carousel/indicator.js file in your sencha touch source code. Find the following function in the class.

updateDirection: function(newDirection, oldDirection) {
        var baseCls = this.getBaseCls();

        this.element.replaceCls(oldDirection, newDirection, baseCls);

        if (newDirection === 'horizontal') {
            this.setBottom(0);
            this.setRight(null);
        }
        else {
            this.setRight(0);
            this.setBottom(null);
        }
    }

Here you can see it's setting bottom property to zero. We have to override this function. Create an override.js file and attach it to your index.html file after sencha touch js file and add following code to it.

Ext.override(Ext.carousel.Indicator, {
    updateDirection: function(newDirection, oldDirection) {
        var baseCls = this.getBaseCls();

        this.element.replaceCls(oldDirection, newDirection, baseCls);

        if (newDirection === 'horizontal') {
            this.setBottom(-20);
            this.setRight(null);
        }
        else {
            this.setRight(0);
            this.setBottom(null);
        }
    }
});

As you see in the above code, we set bottom property to -20. You can use your own number here depending on your designs.

Hope this helps you.

My First Book

Hello,

After a long time I am writing a blog. Life has been so busy since last few months so I was unable to publish blogs. But I will surely write few useful posts on in coming weeks.

Recently I tried my hands something different tasks. The task which I never thought of doing. But I get an opportunity and I grabbed it. First time ever I authored a book. Recently my book is published. The book title is "Instant Sencha Touch" and its published by Packt Publishing.

This book is for Hobbyist who want to explore capabilities of Sencha Touch without prior knowledge. Also it is for developers, who want to see how what is Sencha Touch is all about and What they can develop with it? I authored this book from my own experience and from interactions with others who asked me so many questions about Sencha Touch.I studied this carefully and made precise plan on what is required for a person who really want to know about Sencha Touch and based on that I authored this book. If you want to know about Sencha Touch really quick, you can read this book. You will learn basics of Sencha Touch, that will help you in building real time applications.

For more information on book. Please visit following links.

Packt Site : http://www.packtpub.com/build-native-applications-with-sencha-touch/book
Amazon.Com : http://www.amazon.com/dp/1782165983/?tag=packtpubli-20
Amazon UK : http://www.amazon.co.uk/dp/1782165983/?tag=packtpubli-21

I hope you like my book. I sincerely thanks Packt Publishing for this wonderful opportunity.

Thanks,

Alternate Way to Create Image Button in Sencha Touch

Hello,

Recently I was working on a sencha touch project where I need to use a nig round image in sencha touch button.  We all now that we can use images inside button using iconCls and iconMask property. That will put small icons inside your button along with button rounded corners and background colors. But in my case we don't need button background color or rounded border of button. We just need a round image with transparent background and user should be able to click on it. There are number of ways for doing it.

First we can use xtype : image and put image url to it. But sometimes tap event does not work over image. So this not an option. Other option is to use panel and put image as html inside and add tap evet to panel body. But that will be on complete panel body. So in case of round image if user tapped outside the image but inside a panel, tap event will be fired. So here is the third solution.

As we know that Ext.button extends the Ext.component so we can add html to component.  So we can add image as html as follow.

{

      xtype: 'button',

      html: '<img src="lib/images/myImage.png"/>'

}

After adding this image is added inside the button and but still have button background colors and rounded border. This you can remove by updating your sencha touch CSS. Find the following class in sencha touch CSS.

.x-button, .x-button.x-button-back:after, .x-button.x-button-forward:after, .x-toolbar .x-button, .x-toolbar .x-button.x-button-back:after, .x-toolbar .x-button.x-button-forward:after {
background-image: none;
background-color: #ccc;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2f2f2), color-stop(3%, #d9d9d9), color-stop(100%,#bfbfbf));
background-image: -webkit-linear-gradient(top, #f2f2f2,#d9d9d9 3%,#bfbfbf);

background-image: -moz-linear-gradient(top, #f2f2f2,#d9d9d9 3%,#bfbfbf);

background-image: -o-linear-gradient(top, #f2f2f2,#d9d9d9 3%,#bfbfbf);

background-image: linear-gradient(top, #f2f2f2,#d9d9d9 3%,#bfbfbf);
}

and replace it with following class. This will remove all background of button but still you will have rounded borders.

.x-button,.x-toolbar .x-button.x-button-back:after,.x-toolbar .x-button.x-button-forward:after{background-image:none;}

Now to remove borders, find following class.

.x-button, .x-toolbar .x-button {

border: 1px solid #999;

border-top-color: #a6a6a6;

background-color: #ccc;

color: #000;

}

and replace it with 

.x-button, .x-toolbar .x-button {

color: #000;

}

That's it and your button will only have image. And still user can tap on and it and have a feeling like button. 

Pelase note that updated sencha touch css is applicable to all the buttons in your application so if you have more than one button which does not have image, please don't use this trick. In my case I was having only one button in application so that's why I am using this trick.

Hope this helps you.

Capture CSS3 Animations Event in JavaScript

Hello,

This is my first blog on CSS 3 animations. Recently I was working on project where I created some CSS 3 animation. It was a sencha touch project, so we have some requirements like when animation ends we have to switch active item on view port. This we can only do in JavaScript and for that we have to capture CSS 3 animations events in JavaScript. So how to do it?

Basically we are going to add event handler. In case of web kit browser this is webkitAnimationEnd and webkitAnimationStart events. Please note that this event will only work if you have used -webkit-animation on the target. If you are using Transitions, there are some other events. I will cover that in next blogs. Check the code below. This shows exact syntax of adding animation start and end events.

Suppose you have html element with id box1 on which you are applying some CSS 3 animation.

document.getElementById("box1").addEventListener('webkitAnimationStart',function(event){

},false);

Above code will capture animation start event.

document.getElementById("box1").addEventListener('webkitAnimationEnd',function(event){

},false);

Above code will capture animation end event.

If you have infinite animation above functions be invoked every time when animation starts or ends. You also get event object as a parameter to callback function. It contains the target which invoked this event. You can get it using event.srcElement

Please note that above code will only work on web kit browsers.

Passing Query String With Index.html file in iOS Phonegap (Cordova)

Hello,

Imagine a scenario that you have Sencha Touch/ jQuery mobile application and you have used Phonegap (Cordova) to compile it to native iOS application.  Now your application expects some params like authentication token, or user id or anything it can be. You need to send this params along with your index.html file so that you can use it in app launch function. Have you ever faced this situation. If yes then here is the solution. Please remember this solution is specifically for iOS Cordova application.

First let's see how normally it works. When you create a Cordova based application in XCode, You have AppDelegate.h and AppDelegate.m file. Open AppDelegate.m file and find a function below.

- (BOOL) application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions

In this function find the following lines of code.

self.viewController.wwwFolderName = @"www";

self.viewController.startPage = @"index.html";

This specify that web assets folder is WWW and start page is index.html. If you have some other start page you can change the name here. Now if you try to pass query string as follow, it will not work.

self.viewController.startPage = @"index.html?query1=value1";

Because it treats it as page name and there is no such page. So how to resolve this.

First of all remove the start page name from code.

self.viewController.startPage = @"";

Now we will implement NSURL interface and add some custom functions in it to handle the query string. Add following code to your AppDelegate.m file above implementation of AppDelegate

@implementation NSURL (Additions)

- (NSURL *)URLByAppendingQueryString:(NSString *)queryString {

    if (![queryString length]) {

        return self;

    }

    

    NSString *URLString = [[NSString alloc] initWithFormat:@"%@%@%@", [self absoluteString],

                           [self query] ? @"&" : @"?", queryString];

    NSURL *theURL = [NSURL URLWithString:URLString];

    [URLString release];

    return theURL;

}

@end

This function accepts query string and add it to URL and create new URL. Now add following code at end of didFinishLaunchingWithOptions function.

NSString* newQueryString = @"query1=value1&query2=value2&query3=value3";

NSURL *newurl = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"www"]];

newurl = [newurl URLByAppendingQueryString:newQueryString];

[self.viewController.webView loadRequest:[NSURLRequest requestWithURL:newurl]];

Above code will build custom URL with query string and load the URL in iOS webview.

Hope this helps you.

TinyMCE Editor Height Issue in ExtJs Application

Hello,

This is another blog post on TinyMCE editor in ExtJs application, Have you ever noticed that If you use TinyMce editor in ExtJs application there are some issues with height. Sometimes it takes more height then you specified and that might destroy your layout completely. This is due to internal calculations and logic of TinyMCE editor.

The logic is wrong in two ways. First thing is that it always assume that minimum height of TinyMCE editor should be 100 so if you give height less then 100. It will always take it as 100 and hence your layout is wrong. Because outer div of editor will show the height which you gave but it's actual height would be different.

Second issue is that it does not take care of editor's tool bar where you have all the controls. Actually editor's height should be height which you specified minus height of control toolbar. Which actually is not the case. It gives separate height to toolbar. For example if you set height of your editor to 100. It actually set height to 128. 100px height of editor and 28px height of toolbar controls so it's totally wrong. So what is the solution?

Well the solution is in the TinyMCE src file. You will have tiny_mce_src.js file in your app. There go to line no 13301 approximately. There you will see following line.

mh = s.min_height || 100;

This is where the issue is. If you give height less then 100 it will always take 100 as minimum height. So change it as follow.

mh = s.min_height || s.height;

Now it will take minimum height which you specified. Now go to line no 13426 approximately.  Here change the height from

height : h

to

height : h-28

That's it and all your issues related to heights are resolved.

It took 4 hours for me to find the solution so I hope this post saves your time.

Thanks.

TinyMCE editor in ExtJs Application Returns Old Value.

Hello,

Finally I got some to add some more interesting blogs. Recently I have faced an issue with TinyMCE editor in ExtJs application. The issue was little wired. We have a TinyMCE editor in ExtJs form panel where it's disabled first. There is a button in form panel which enables. After that if we update any value in TinyMCE editor, it shows on screen but when we get value from form panel, the value of TinyMCE field is always the old one.

After struggling for some hours, I find out the issue. When TinyMCE is disabled, there are no events of active editor. But when we enable it editor should be initialized properly and all the event handlers should be attached. However it's not happening. So what is the solution for it. Change the logic of TinyMCE intilization and add key up event.


setup : function( ed ) {
ed.onKeyUp.add(function(ed) {
tinymce.activeEditor.save();
});
}

This you can find it your TinyMCEHtmlEditor.js file. What it does is it saves the state of current active editor when we type something it it. This logic works when you have more then one TinyMCE editor in single form. Because when you are typing inside it tinymce.activeEditor gives instance of current active editor and keyup events save its state. So when you getValue of editor, it reflects the new value.

Hope this helps you.

iOS Phonegap ( Cordova ) Open Link in Safari

Have you ever encountered the situation in your corodova project where you have set OpenAllWhitelistURLsInWebView to YES in your Cordova.plist file and you have to open one single URL in external Safari application.? If yes than read this blog.

For cordova we have to whitelist some external urls if we have any. By default it will open in external Safari browser to prevent that we have to set following in Cordova.plist file.

This will open all the external urls in same web view. So to add exception URL which should open in external Safari browser make following changes to AppDelegate.m file. 

- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType

{

NSURL *url = [request URL];

    NSString* urlString =  [url absoluteString];

    

    if ([urlString rangeOfString:@"www.myexternalurl.com"].location == NSNotFound) {

    }

    else {

        [[UIApplication sharedApplication] openURL:[request URL]];

        return NO;

    }

}

and in your JavaScript simply write following line.

window.location.href = "www.myexternalurl.com";

Once web view start loading the url it will invoke shouldStartLoadWithRequest event. Here we are checking the url string and if we find it to be external URL, it will be opened in external Safari browser. Webview will not load this URL since we return NO.

Android Add In-app billing to existing project

Hello,

If you have ever encountered situation, where you need to add In-app billing to your existing project, than this blog is for you. Please note that for this you need Google Play Account and valid Google Merchant Account.

First open Android SDK manager. You can open it from Window - > Android SDK Manager. If it's not available in menu go to Window -> Customize Perspective and Go to third tab  Command Groups Availability.

And check the Android SDK and AVD Manager. Now it should be available in menu. Open it and Go to Extra.

Check the Google Play Billing Library and Click on Install items. This will download necessary files of billing library. Also it will download the sample application. No go to your project src folder in eclipse and Right click on it. Choose Menu New - > Package. Give the name com.android.billing.vending to the package and add file IInAppBillingService.aidl to it. You can find your file in your Android SDK folder at this path extras - > google - > play_billing - > in-app-billing-v03

Now create one more package in in your src and give name com.yourappname. util and add following files to it form sample application. Replace yourappname with your application name.

Now compile your project and it should generate IInAppBillingService.java file in gen folder.

Now add following line to your AndroidManifest.xml file

That's it and now your application is ready for in app billing. For testing use reserved SKUs by google play store. Now create a new activity class and give the suitable name to it. in my case I name it as PurchaseActivity

Add a member to a class 

IabHelper mHelper;

Add following code to onCreate function of activity.

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_purcahse);

String base64EncodedPublicKey = "yourapppublickey";

mHelper = new IabHelper(this, base64EncodedPublicKey);

mHelper.startSetup(new IabHelper.OnIabSetupFinishedListener() {

  public void onIabSetupFinished(IabResult result) {

      if (!result.isSuccess()) {

        // Oh noes, there was a problem.

        Log.d("inappp", "Problem setting up In-app Billing: " + result);

      }

      String purchaseToken = "inapp:"+getPackageName()+":android.test.purchased";

     

      startPurchase();

  }

});

Replace yourapppublickey with your application's public key. For this you need create application in google play store and it give you application public key. Here android.test.purchased is the reserved SKU maintained by Google Play Store for the testing purpose. You don't need to spend money to test it.

Add following functions to your class.

public void startPurchase(){

mHelper.launchPurchaseFlow(this, "android.test.purchased", 10001,   

  mPurchaseFinishedListener, "bGoa+V7g/yqDXvKRqq+JTFn4uQZbPiQJo4pf9RzJ");

}

IabHelper.OnIabPurchaseFinishedListener mPurchaseFinishedListener 

  = new IabHelper.OnIabPurchaseFinishedListener() {

  public void onIabPurchaseFinished(IabResult result, Purchase purchase) 

  {

      if (result.isFailure()) {

        Log.d("inapp", "Error purchasing: " + result);

        return;

      }      

      else if (purchase.getSku().equals("test")) {

      Log.d("inapp","Purchase successful" + result);

      }

  }

};

Once purchased you have to consume purchase. Please note that this blog does not mention the consumption process. This just shows how to test in app billing in your project. Later you can replace the test SKUs with your own SKUs.

ExtJs Window Resize on Browser Resize

In this blog, I will explain how to resize all the modal window on ExtJs on browser resize. In one of my recent project, I had a requirement to resize all the modal windows open at the same time on browser resize.  Following is the solution.

You must have some main view of app which should be rendered first when app starts. You have to add render event of that view as follow.


this.control({
'mainView': {
render: this.onMainViewRender
        }
});

Now add the following function in your controller file.


onMainViewRender: function() {
Ext.EventManager.onWindowResize( this.onBrowserResize, this );
}

Above function binds the browser resize event and add a callback function to it. Following is the function definition of onBrowserResize

onBrowserResize: function( width, height ) {

Ext.WindowManager.each( function( window ) {

if( !window.isXType( 'window' ) )
                return;                      
if( height < 600 ) {
                                window.maxHeight = height - 30;
                                window.doLayout();
                                window.center();
                        } else {
                                window.maxHeight = 600;
                                window.doLayout();
                                window.center();
                        }
                });
}

It might be possible that we have some message box open at that time so we have to ignore it. That'w why we are checking the window xtype. Here we are setting maxHeight of window. 600 is just the example here. You can change it with your own preference. Else loop is to restore window to it's original height and width if browser is resized to bigger height and width than window.

Hope this helps you.

Sencha Touch, Phonegap (Cordova) application not working in Android 4.x - Here is the Solution

Have you ever encountered this issue? When you try to deploy your Cordova+ Sencha Touch app in Android 4.1, your app is not working. It just shows the white screen. In this blog I will explain the issue and mention solution for it.

What is the Issue?

It's not issue of sencha touch but it's an issue of Android. It's not possible to load any URL in android webview which have certain parameters. This issue is reported since Android 3.0 but still it's not resolved. We know that when we use cordova it uses file protocol to open any files. We load index.html file using following URL.

file:///android_assets/www/index.html 

Now we know that Sencha Touch uses Ext.Loader to load the controllers, stores and model files. When Loader tries to load files, URL would be formed as follow.

file:///android_assets/www/app/controller/MyController.js?_dc=xxxxxxxx

That's why it's break because it adds _dc param in each load request of file. What is this _dc param? This is cache buster param that is added by default by Ext framework. Most of the browsers caches the request and particularly GET request. So Ext framework always add _dc param which has unique datetime stamp. So URL looks always different hence browser does not return cached result. And that's what breaks the app in Android.

What is the Solution?

One solution is to minify all your secha touch classes with Sencha Touch build commands. You have to install Sencha SDK tools and setup necessary environment variables for it. After that go to directory of your application.

cd ~/path/to/my/app

After this create jsb3 file for your application using following command

sencha create jsb -a index.html -p app.jsb3

After this build your application.

sencha build -p app.jsb3 -d ./

This final command takes all of the files listed in the jsb and combines them into a single file, which it then minifies to make as small as possible. The output is a file called all-classes.js, which contains all of the framework classes plus your application classes.

You can reference this file to index.html file so you have minified version of your application and it's ready for the production.

Other solution is to disable caching but that is not recommended. You can disable caching for Ext.Loader as follow.

Ext.Loader.setConfig({ disableCaching: false });

Also you can disable caching for all the Ajax request.

Ext.Ajax.setDisableCaching(false);

This will remove _dc param from your ajax request also Ext.Loader will not add _dc param in file download request.

Hope this helps you.