Creating a Basic Mobile application or Hello World App using jQuery Mobile and visual Studio 2012
  • Dear Reader.
    Today i will discuss with you on how to create a Basic mobile application using jQuery Mobile and Visual Studio, Please note that this Tutorial is a part of my old discussion located at http://www.codingresolved.com/discussion/1486/getting-started-with-jquery-mobile-development-using-visual-studio-and-phonegap-or-appache-cordova/p1

    Please read my last post before implementing this discussion.

    You can find Step by Step guide on creating a basic mobile application using jQuery mobile and visual studio 2012 below. 

    Step 1: Downloading jQuery Mobile libraries & Css 
    • Goto http://jquerymobile.com/download and download latest version of jQuery mobile ( I have downloaded file jquery.mobile-1.3.2.zip )
    • Extract all files in a folder. goto demos folder and copy js and css folder.
    • Create a new folder named jQuery-mobile at desktop. Now paste copied folders inside this folder.
    Step 2: Creating a new project using Visual Studio
    • Open Visual Studio 2012.
    • Click New Project.
    • Search for word gap and select phonegap. enter name for project. I am naming it 'BasicMobileApp'
    image

    • Visual studio will create a new Phonegap mobile application project for you. Now this is the time for understanding Project directory structure.
    • You can see the solution or project in Solution explorer. If you are unable to see Solution Explorer press Ctrl+Alt+L to view the Solution Explorer.
    image
    • Our main working will be inside www folder. 
    • File ApplicationIcon.png will be the Launcher Application icon that will be shown in Mobile Menu. You can change this by replacing the file at project folder. Image SplashScreenImage.jpg will be Splash Screen image that will be shown to user when application is loaded on user screen. This Image will be shown until the application is loaded completely. 
    • File MainPage.xaml and MainPage.xaml.cs will contains some XML and C-sharp code that will tell the Application to load contents from www folder.
    •  Folders cordova, cordovalib and Plugins contains some PhoneGap or Appache Cordova libraries that will help solution to run on a Mobile device.
    Step 3: Adding Jquery Mobile Libraries to your project.
    • Drag and drop folder jQuery-mobile from your desktop to folder www. Make sure that the folder is under www folder and it should look like this 
    image
    • Now open file index.html and add following code in its head section. 


     	<link href="jQuery-mobile/css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css" />
    <link href="jQuery-mobile/css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css" />
    <link href="jQuery-mobile/css/jquery.mobile.structure-1.3.2.css" rel="stylesheet" type="text/css" />
    <link href="jQuery-mobile/css/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" type="text/css" />
    <link href="jQuery-mobile/css/jquery.mobile.theme-1.3.2.css" rel="stylesheet" type="text/css" />
    <link href="jQuery-mobile/css/jquery.mobile.theme-1.3.2.min.css" rel="stylesheet" type="text/css" />

    <script src="jQuery-mobile/js/jquery.js" type="text/javascript"></script>
    <script src="jQuery-mobile/js/jquery.mobile-1.3.2.js" type="text/javascript"></script>
    <script src="jQuery-mobile/js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
    • Now add following code after <body> tag


     <div data-role="page">

    <div data-role="header">
    <h1>My First Application</h1>
    </div>
    <!-- /header -->

    <div data-role="content">
    <p>HELLO WORLD</p>
    </div>
    <!-- /content -->

    </div>
    <!-- /page -->


    Now index.html will look like this

    image

    Test the Application. To test the Application please press Run/Debug button located at top menu bar.  See below image

    image

    After Emulator is launched, you can see the application loading at emulator. i am having following at my emulator.
    image image

    Adding a list to my Application
    To add a new list to mobile application, please replace


      <p>HELLO WORLD</p> 

    With

      <ul data-role="listview">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
    </ul>
    APPLICATION FINAL LOOKS


    And now application will look like
    image

    This is our final basic application that contains a list with some items. You can play with it by adding some more useful stuff. 
    Next time i will come with some another nice tutorial, if you have any questions about this please feel free to ask in discussions.


  • 2 Comments sorted by
  • amazing work sajid thanks for this kind of sharing its really appreciable work. 
  • Hello Sir,

    I need to know about cordova.js file, which creates while project builds. I want to get the path of cordova.js for each platform.

    Thanks in Advance.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, or you want to Ask a new Question, Please Login or Create a new Account by Clicking below

Login with Facebook

Popular Posts of the Week

Top Posters Weekly

Optimum Creative