Tuesday, July 29, 2014

Android - Making Facebook login works in HTML5 app hosted inside WebView

Context - Develop one app for all machines / platforms.

The software stake holders always want to target a large audience regardless of what machine / plat form their clients uses. That is one of the reason why software are often written as web application. If we write as web application, at least in theory it can run in any machine whether it is laptop,tablet or mobile also regardless of the OS Windows / Linux / Mac used in those machines. Another advantage going with web is the less development cost as we are developing one application. Its the trend among the developers / organizations.

There are so many arguments going on whether we should go with this HTML5 web apps to address this problem in case we are targeting mobile platforms only. Some people argue that we should go with Xamarin kind of converging platforms. But that won't help to run the app in laptops.

Another requirement from the stakeholder will be to have native web app even if we have working web application. That is to make sure the application is present in the app stores in the way standard mobile applications are present and users don't need to worry about the web application url. They just need to install the mobile app from the store.

So only one way to meet the above requirement of running in desktops, laptops and as native mobile app is to develop application using HTML5 and create native wrapper applications which uses WebBrowerControl / WebView to show the HTML5 web site inside the native mobile app.

But will that make our the development life easier? If the application is very simple, it is easy. But when the application gets more features, problems will starting popping up. Below is one of the problem we faced in such a scenario.

Problem

The application needs to have Facebook login. It is easy to setup that using the Facebook javascript sdk. It worked well when we try this from laptop and the mobile browser. But when the same is tried from native Android wrapper we got an issue. After Facebook login, it ends up in a blank white page. 

The analysis leads to Android WebView limitations. The Facebook login SDK normally creates browser window child window and after login it will close that window and control will be passed to parent window. But when we show the same page using Android WebView control. That javascript popup window closing is not working.

Solution

The solution is as follows 
  1. Show the FB login popup in a different WebView control
  2. After the login success, close that window. 
How do we achieve that? Below are the tasks to be done.

Task 1 - Show login popup in different WebView

There is already a WebView in the application. We need to catch the javascript popup show event happened inside the web page and show that popup in a different WebView control. To do that we need to follow steps below
  1. Subclass WebChromeClient and override it's onCreateWindow method. Name it as UriWebChromeClient
  2. From the onCreateWindow method create object of new WebView control and add to the view.
    1. When we create the second WebView control, associate that to our custom WebViewClient which we are going to create in Task 2. That is required to close this second WebView.
  3. The new UriWebChromeClient class object needs to be connected to the existing WebView by calling webViewObj.setWebChromeClient() Method

Task 2 - How to know FB authentication is success to hide WebView

Now we need to think how the Android web view knows whether the FB login is successful. It can only be determined by looking at a particular URL(https://m.facebook.com/v2.0/dialog/oauth) where the FB will be redirecting after login success. How do the Android web view knows that the web redirection happens? It can be done by sub classing WebViewClient class. Steps below
  1. Subclass the WebViewClient class.Name it as UriWebViewClient
  2. Override the onPageFinished() method of WebViewClient in the new inherited UriWebViewClient class and check for the url. If the URL is "https://m.facebook.com/v2.0/dialog/oauth", we can decide that the FB authentication is completed and its time to hide the second WebView.
  3. Override the shouldOverrideUrlLoading() method too and do the similar.
The code is mentioned in this SO link .Only difference from this link is the onPageFinished method overriding.

Reference links

Tuesday, July 22, 2014

Not able to uninstall .net assembly from GAC

Occasionally when we try to uninstall .net dll from GAC by pressing delete button, it will show the below error message.
Unable to uninstall: assembly is required by one or more applications

Solution 1 - Run in admin mode

The major reason could be the user don't have permission to delete the dll from GAC. If we run the windows folder explorer in administrator mode it might be uninstalled. How to run the windows explorer as in administer mode? We cannot right click and "Run as administrator" on any item to get an explorer window in admin mode. So we need to run the cmd in admin mode. and use the GACUtil.exe to remove the dll. 

Most of the cases it will get uninstalled. Else try the below link to and uninstall as admin .

Solution 2 - Installer problem. Edit registry

There is one more reason why we cannot uninstall from GAC. Sometimes the the assembly might have installed into GAC by installers and they will hold the reference so that we cannot uninstall from GAC. If this is the case we need to remove some registry entries present inside the below registry path.

[HKCU\Software\Microsoft\Installer\Assemblies\Global]
[HKLM\SOFTWARE\Classes\Installer\Assemblies\Global]

This is already reported to MSFT and more details can be found in below links.
http://support.microsoft.com/kb/873195
http://blogs.msdn.com/b/alanshi/archive/2003/12/10/42690.aspx

Last week when I was trying to run a sample which I got from internet, it was loading wrong Microsoft.Practices.Unity.dll. I could see that there is one Microsoft.Practices.Unity.dll of different version in the GAC. So thought of deleting it from GAC and it ended up in the above mentioned error.

Monday, July 14, 2014

Hosting ASP.Net MVC app in Windows 8 IIS 8 - HTTP Error 403.14 - Forbidden

Recently I was trying to run an ASP.Net MVC application in my new Windows 8 environment. When I run the application from visual studio, I got the below error.

HTTP Error 403.14 - Forbidden

The Web server is configured to not list the contents of this directory.


It was silly as the Windows 8 by default don't support pre .Net 4.0 versions also we need enable programming support explicitly.

First We need to enable it in
Control panel -> Turn windows features -> .Net framework 3.5(includes .Net 2.0 and 3.0) in case the project is targeting older version.

Also we need to enable ASP.Net development support too. Go to  Control panel -> Turn windows features -> Internet Information Services-> World wide web services -> Application development features and enable ASP.Net 3.5 and 4.5 based on the project target.

http://www.iis.net/learn/get-started/whats-new-in-iis-8/iis-80-using-aspnet-35-and-aspnet-45

Tuesday, July 8, 2014

Why my Roslyn extension is not getting loaded?

Below is my experience when I started working with a Roslyn project which I got from my colleague. First thing

Is the Roslyn compiler enabled for the Visual Studio test instance?

Yes there is something called enabling Roslyn. As we know Roslyn is the new compiler. The Visual Studio can now support 2 compilers. Traditional and Roslyn. So how the Visual Studio knows, it needs to use Roslyn? 
The answer is the below command line argument which needs to be passed to Visual Studio process devenv.exe when its started.

/rootsuffix Roslyn

If we are building VSIX extension project, we can mention this command line argument in the project properties->debug tab. This will make sure the test Visual Studio instance will be using the Roslyn compiler.

If the visual studio test instance itself not starting when we run the extension project, make sure the below path is there in the Project properties->Debug -> Start external program text box.

<Drive>:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\devenv.exe

Is the VSIX extension actually loaded or there is any bug in my code?

First of all check whether the Visual studio test instance can start with Roslyn enabled. If yes, load a project in the test instance of Visual Studio. If so go back to parent Visual Studio where we write our extension code and look at Modules window.

Debug->Windows-Modules

If our assembly is listed there in indicate that the extension is loaded. Now we can go to next debugging step.

Why the VSIXManifest is copied to wrong Roslyn extensions folder

If we are not able to find our extension assembly in the modules window, it indicate that the Visual Studio is not able to locate our extension assembly. To understand this better we should understand how the Roslyn extension is working under the hood. When we press the run button on the Roslyn extension project from VS,

  • It is compiling the project and copying the dlls including the extension.VSIXManifest file to the below mentioned location
    • <Drive>:\Users\<name>\AppData\Local\Microsoft\VisualStudio\12.0Roslyn\Extensions
  • The above underlined folder name "12.0Roslyn" is controlled by a project property given below
    • <VSSDKTargetPlatformRegRootSuffix>Roslyn</VSSDKTargetPlatformRegRootSuffix>
If the property hold a wrong value, it may copy the compiled vsix extension to wrong folder and the Roslyn extension will not take effect when we load Visual Studio test instance.

Why my VSIX extension files are not getting copied to Roslyn extension folder

Sometimes we will be having proper value in the <VSSDKTargetPlatformRegRootSuffix> tag. But still the files may not be copied. That will be due to improper values in the below project properties.

<IncludeAssemblyInVSIXContainer> true </IncludeAssemblyInVSIXContainer>  
<IncludeDebugSymbolsInVSIXContainer> false </IncludeDebugSymbolsInVSIXContainer>
<IncludeDebugSymbolsInLocalVSIXDeployment>  false</IncludeDebugSymbolsInLocalVSIXDeployment>
<CopyBuildOutputToOutputDirectory>    true</CopyBuildOutputToOutputDirectory>
<CopyOutputSymbolsToOutputDirectory>    true </CopyOutputSymbolsToOutputDirectory>

Best solution is to remove all these properties so that it will take the default behavior and default will copy required dlls to extensions folder.

Can I change these VSIX project properties using the properties tab?

The answer is NO as the project properties tab don't have the UI to support these properties. There is already a bug raised to Microsoft.

Is there a real issue in my code?

If all these things are set properly and still our Roslyn VSIX extension is not working, there is something wrong in the code. Inspect the code for below scenarios.
  • Class level attributes.
  • The interfaces implemented 
  • Whether the SymbolKindsOfInterest property returns proper list?

More links


Happy debugging...

Tuesday, July 1, 2014

Philly.net - Code Camp 2014 - Day 2

This is continuation of my earlier post about day 1. I am following the same format of What I expected and What I got sections

Explaining, demonstrating and using the OpenStack.Net SDK By Don Schenck

What I expected

Cloud is really amazing when we think about how the internal system management software modules work together to provide on demand scaling. OpenStack gave me answer how it might be. Unfortunately I never had a chance to experiment it. So I thought there will be at least sometime dedicated for demonstrating how to setup a cloud using Open stack. Then about the .Net SDK which can be used to manage the cloud.

What I got

Unfortunately I was not able be there in the session from beginning. So when I entered in the hall, he was telling about the .Net SDK part. As of my expectation he did it well. But there was not much audience. Only 8 persons were there.

Beyond the basics - A Deep dive into the AngularJS works By Todd Snyder

What I expected

As per the name no basics. Only the internalsof how AngularJS works.

What I got

He started with SPA architecture and slowly explained the concepts of AngularJS such as Templates, Directives, Controllers , DataBinding, Modules etc...Then he showed in the PPT how certain things can be done such as databinding , $apply etc...It was not much interesting to me so went for brunch.

Entry level app development for Windows 8 By David Voyles

What I expected

I never planned this session. I just sit for this session because there was enough seats so that I can sit and have brunch. I really don't like to eat food by holding the plate in my hand. When I sit, I thought let me listen to something which I don't know also for any tips and tricks he may share from his experience.

What I got

It was demo time when I entered and he was showing great demos. He showed some stunning websites which are coded using HTML and Javascript and runs by leveraging the graphics acceleration feature of IE 11. Those sites are heavy graphics enabled sites using the WebGL technology. He was trying prove that, we can build really big apps / think clients using HTML/JS combination and render in browser itself.

Google glass with C# By Mike Heydt

What I expected

Since google declared that the same OS can be used in everywhere and any device, I was curious how they provide the API or build the programming model. Each and every device will differ so it may end up like so many if conditions in the code or if we think from the OS side it may need to deploy libraries which may not be used at all in particular device. As most of the sessions are having code demos, I was interested in C# code which can be deployed into the glass.

What I got

First of all, he has a glass and he wear the glass all the time. He showed the physical architecture of the glass such as where is the CPU, battery etc...Then explained the UI design principles. Mainly we need to use cards instead of activities. We can tap and slide using our fingers on the right side of the glass. The major draw back I saw it the inability to debug using simulator. We must need a hardware glass to do test or debug our program. So I decided to get out from the session.

Restful routing in ASP.Net MVC By Khalid Abuhakmeh

What I expected

Again this is a session which I didn't plan to attend. But something which I am interested as there was big fight between me and rest of the team regarding developing an ASP.Net MVC web site in the ReSTful way. That site was supposed to manage our own cloud like server environment which consists of database servers, processing servers, queues etc....All those things can be viewed as resources so I was arguing for ReSTful MVC page urls such as www.site.com/queuetype/2/queue/3 to point a resource and do the contextual operations inside it, instead of operation wise screens such as www.site.com/ListQueues?queuetype=2&queue=3 or www.site.com/AddQueue. It was difficult to make them understand and finally I gave up.

What I got

I came to know about a really nice library named RestfulRouting. Some more pros to provide as proof for my approach towards developing website using the ReST principle if we the requirement is to control resources.

WCF is dead. Long Live WCF! By Michael Montgomery

What I expected

I really got confused about this title. May be he will tell some new ways to leverage WCF features or tell about extensible featuires and all

What I got

He kind of proved that the way we are using WCF for distributed computing / SOA is not the best way. He is against all most all the configurations in WCF. According to him the WCF config values should be determined by the program not by the person who deploys the app. Really speaking last week we were struck with production issues which were caused by wrong values given by the deployment teams. We suggested to use server with minimum 32GB and they installed in a 6GB server and started complaining about the application. Ideally if there is 6GB of RAM in the server the application should have worked at all. Similarly we used to receive so much issues because the deployment teams will change even the protocol of WCF binding. Simply from netNamedPipe to NetTcpBinding without any consultation and when it fails the complaint will be filed.

This gap can be eliminated if the application (WCF layer) can adjust itself with the system. But it really needs homework in the area of load testing and leverage the WCF extensible features. He even showed how the pseudo code for such a WCF communication app can be built.

Knockout.js (Anti)Patterns By Tim Plourde

What I expected

More details about internal working of Knockout.JS and the anti patterns

What I got

Great tips how to avoid common problems in Knockout.JS. As its very easy people tend to develop very fast but soon it will result in performance and maintainability issues. He even have a nice site where he explain everything. I was really impressed the way he presents. He just goes to his site and explains from there. He also explained about knockout linting where we can easily analyze our code for what went wrong.

Overall it was a good experience. Variety of food items for the buffet.