You are here:   Blog
Register   |  Login

Jun 2

Written by: Michael Washington
6/2/2013 3:14 PM  RssIcon

image

You can quickly and easily create PhoneGap Android and IOS applications from your Visual Studio LightSwitch HTML Client websites using VS Nomad from Redgate.

image

You can download a free 7 day trial of VS Nomad at this link: http://vsnomad.com/

 

The LightSwitch Application

image

The first step is to create a LightSwitch HTML Client application.

image

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.

image

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 = $('<div/>').html(contentItem.value).text();
    // Set the content as the innerHTML of the element
    element.innerHTML = blogContent;
};

 

image

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

 

image

Create a VS Nomad Project.

image

Your license will be checked.

image

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>LightSwitchHelpWebsite</title>
    <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>

 

image

We right-click on the root node in the Solution Explorer and select Properties.

image

We set the Properties for the application.

image

When we hit F5 we can run the application and test it out in the various emulators.

image

To create the distributable application, we select Build with Nomad, then the application type we desire.

image

The application will build in the cloud service.

image

When it is complete, the dialog will indicate that it is ready.

image

The resulting file can then be run on mobile devices.

(it is recommended that you use DropBox to test your Android apps)

image

image

Download

The Android LightSwitch sample application is available at

http://blogs.lightswitchhelpwebsite.com/LightSwitchHelpWebsiteBlogs.apk

Tags: PhoneGap
Categories:

12 comment(s) so far...


Gravatar

Re: Create PhoneGap Applications From LightSwitch HTML Client in Minutes

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
Gravatar

Re: Create PhoneGap Applications From LightSwitch HTML Client in Minutes

@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
Gravatar

Re: Create PhoneGap Applications From LightSwitch HTML Client in Minutes

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
Gravatar

Re: Create PhoneGap Applications From LightSwitch HTML Client in Minutes

@infomaven - Nomad just makes it easier.

By Michael Washington on   7/21/2013 1:45 PM
Gravatar

Re: Create PhoneGap Applications From LightSwitch HTML Client in Minutes

Ah, ok. This is great information and a lot to take in. Thanks.

By infomaven on   7/27/2013 6:25 PM
Gravatar

Re: Create PhoneGap Applications From LightSwitch HTML Client in Minutes

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
Gravatar

Re: Create PhoneGap Applications From LightSwitch HTML Client in Minutes

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
Gravatar

Re: Create PhoneGap Applications From LightSwitch HTML Client in Minutes

@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
Gravatar

Re: Scroll list don´t work -- Create PhoneGap Applications From LightSwitch HTML Client in Minutes

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
Gravatar

Re: Create PhoneGap Applications From LightSwitch HTML Client in Minutes

@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
Gravatar

Re: Create PhoneGap Applications From LightSwitch HTML Client in Minutes

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
Gravatar

Re: Create PhoneGap Applications From LightSwitch HTML Client in Minutes

@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

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation