Jun
2
Written by:
Michael Washington
6/2/2013 3:14 PM
(THIS SERVICE IS NO LONGER AVAILABLE - SORRY!) See: http://vsnomad.com/
You can quickly and easily create PhoneGap Android and IOS applications from your Visual Studio LightSwitch HTML Client websites using VS Nomad from Redgate.
You can download a free 7 day trial of VS Nomad at this link: http://vsnomad.com/
The LightSwitch Application
The first step is to create a LightSwitch HTML Client application.
The key to making it work when deployed as a PhoneGap application, is to set all containers and custom controls, to Stretch to Container.
If you don’t do this, the screens may not scroll properly.
In the sample application, we display HTML text from the database by setting the field to a Custom Control and selecting the Edit Render Code link in the control Properties.
The following code is used for the method:
myapp.ViewBlogEntry.Entry_render = function (element, contentItem) {
// Create a DIV
// Set the contents of the DIV to the value of the contentItem
// Get the text representation
var blogContent = $('').html(contentItem.value).text();
// Set the content as the innerHTML of the element
element.innerHTML = blogContent;
};
Publish and deploy the LightSwitch application to a server that the PhoneGap application can access.
The sample application has been deployed here:
http://blogs.lightswitchhelpwebsite.com/HTMLClient/default.htm
Create The PhoneGap Application
Create a VS Nomad Project.
Your license will be checked.
The project will be created.
For the sample application we change the contents of the index.html page to the following:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>LightSwitchHelpWebsitetitle>
<script type="text/javascript">
// Work around viewport sizing issue in IE 10 on Windows Phone 8
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
document.writeln("<style>@-ms-viewport { width: auto!important; }style>");
}
script>
head>
<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<iframe src="http://blogs.lightswitchhelpwebsite.com/htmlclient/" width="100%" height="100%">iframe>
body>
html>
We right-click on the root node in the Solution Explorer and select Properties.
We set the Properties for the application.
When we hit F5 we can run the application and test it out in the various emulators.
To create the distributable application, we select Build with Nomad, then the application type we desire.
The application will build in the cloud service.
When it is complete, the dialog will indicate that it is ready.
The resulting file can then be run on mobile devices.
(it is recommended that you use DropBox to test your Android apps)
Download
The Android LightSwitch sample application is available at
http://blogs.lightswitchhelpwebsite.com/LightSwitchHelpWebsiteBlogs.apk
16 comment(s) so far...
I was hoping to learn by recreating the same app. However, I don't see that we have access to the database and thus no screen creation. Did I miss something?
By Robert on
7/10/2013 12:33 PM
|
@Robert - You can take my code sample and just point it to your own application and it will work.
By Michael Washington on
7/10/2013 12:34 PM
|
I'm kind of new to this, so please bear with me.
It is my understanding that PhoneGap acts as a wrapper to provide access to a smart phone's native functions (like camera, contacts, etc).
Is Nomad a dependency, or is it just added to make things easier?
By infomaven on
7/21/2013 11:07 AM
|
@infomaven - Nomad just makes it easier.
By Michael Washington on
7/21/2013 1:45 PM
|
Ah, ok. This is great information and a lot to take in. Thanks.
By infomaven on
7/27/2013 6:25 PM
|
hello,
first i say thanks to you really you have provide a informative blog here and something which i haven't hear before i hope it is also beneficial for mobile app developers.
By Cross Platform Mobile Development on
10/8/2013 4:14 AM
|
First of all thanks for providing such a great solution. Please guide me "How to make an offline android app using LightSwitch HTML application"? Its working perfectly as it should but need to work it on offline mode.
Thanks in advance.
By Salman Tarique on
12/5/2013 4:37 AM
|
@Salman Tarique - Sorry I don't know how to do that, and I did try.
By Michael Washington on
12/5/2013 4:38 AM
|
Hello.
First thanks for your helpful web about Lightswitch development.
I have an issue with this sample.
Install your sample on two android phones (with versions Froyo and GingerBird), thats was ok, but when tap for scrolling the list, this its freeze.
I test in my own app, with LS-VS2012 and last free ver of VSNOMAD, adapting your sample for working with my app. The problem its the same. Scroll not work :-( . When test the my app with webbrowser Firefox on this phones, the app work but not smoothly
When test my app with the emulator, the scrolling works fine. I test it with all the emulators.
¿with since ver of android nomad work with no problems?
I would appreciate any advice about what indicated
Regards. Paul C.
By Paul on
3/19/2014 2:39 PM
|
@Paul - Unfourtunately PhoneGap has its limitations. It worked for me on devices I tested with but it does not support all devices. You may be able to alter the .css to resolve some issues, you will find help with this in the forums on the PhoneGap site: http://community.phonegap.com/nitobi/products/nitobi_phonegap_build
By Michael Washington on
3/19/2014 2:42 PM
|
Hello,
I just wish to ask you if there is any sample application for LightSwitch HTML Client that shows how to use the mobile phone camera to take pictures and update the appropriate record field. I am developing an Inventory Management application and the users wish to take pictures of items that are stored in the warehouses.
Regards,
By papageor on
5/26/2014 12:09 AM
|
@papageor - I know of no clear examples. On some phones, the choose file (file upload), allows a person to use their camera.
By Michael Washington on
5/26/2014 4:12 AM
|
Good article, however nomad is no longer available. Is there an alternative way that one can do this now? 15 October 2014
By Anele Mbanga on
10/15/2014 2:43 PM
|
@Anele Mbanga - You will want to use one of the alternatives that they list on their page.
By Michael Washington on
10/15/2014 2:43 PM
|
Hello,
I looked at the alternatives, will you be able to provide a tutorial or little insight on how to work with the alternatives for lightswitch html client. I had searched for hours to find documentation for the alternatives and lightswitch.
I appreciate your help
Thanks
By @Hanif on
12/5/2014 11:13 AM
|
@Hanif - Sorry I had no plans to work on it.
By Michael Washington on
12/5/2014 11:13 AM
|