Split Application Development Using JavaScript in Microsoft Visual Studio

Step 1
  • Open Visual Studio.
  • Then go to FILE-->New-->Project.

Step 2
  • You will be shown many types of applications to create.
  • In that search for Java Script language and select windows application development and the split app as shown in the figure.
  • Before clicking the OK button, remember to give an apt name for your application and the location where it gets stored.
Step 3
  • You will find a huge code block. Don't panic. 
  • Here you are going to develop the application with the help of a template even if you don't know how to code.
  • Just click on the Solution Explorer menu in the right corner of the window as shown in the figure.  
Step 4
  • You will get a bunch of menus when you click in there.
  • Now expand the JS folder and click on the data.js file.
  • A file gets opened as in the below-shown figure. 
  • Find the lines of code as in this image.
Step 5
  • Now simply press the F5 button or click on the Local Machine option in the top.
  • You will get the output of the template which you are using now. 
  • It will be as it is in this image.
  • Feel happy that you have created your own Windows application.
Step 6
  • Now let us see how to edit this template and create an application.
  • Just click on the close button to close this output window.
  • Take a look over the next image in which I have made two small changes. 
  • Compare this image with the previous image in which the original code was found.
  • It is marked with a red line.
Step 7
  • Now run your application again by clicking on Local Machine or by pressing F5.
  • You will find the changes which have happened in the output because of your code.,
Step 8
  • Now let us change the image for the title which appears on the screen.
  • To use your own picture in your project, first, you need to include the picture inside your project. It is shown step by step in the screenshot.
  • Simply right-click on the images folder on the right side solution explorer pan. Then go to ADD-->Existing Item.
  • This will let you browse some pictures on your PC. Just choose it and it will be included in your project. 
  • But be sure that the images are of JPG type.
Step 9
  • Here I have chosen a picture. It is included in the images folder with its name. It is indicated in the screenshot. 
  • Just have a look over the screenshot so that you will get an idea.
  • Here I have used a content holder castyle="font-family: Roboto, sans-serif;" his a datatype.
  • This helps to hold the location of the image which is going to be added to the project.
  • All these are shown in the figure.
  • In the code for group 1, I have replaced background image content with mynewimage which is already created by me in the top with the datatype VAR.
  • This will now make the line of code of group 1 will search for the specified mynewimage content.
Step 10
  • Now in the middle of the quotations of mynewimage, the path of the image to be displayed in your app is copied and pasted.
  • This is done by clicking the image name in the images folder. 
  • In the properties window, the full path of the image will be shown.
  • Just double click on the path and press CTRL+C to copy the path.
Step 11
  • Now paste the path in between the double quotes of the var mynewimage=" images/the picture name which you upload";
  • This will simply call the image which is present in that location.
  • But be sure that the path of the image is given in the same format as it is in the screenshot.
  • Then only you can see the image in the output.
Step 12
  • Now it is time to run your application and check out your changes. 
  • Save the project by clicking save all button in the top left corner or by pressing CTRL+S.
  • You will find the image in the output.
  • In the same way, you can change the image of each and every tile. The same method and code apply to all the images in the application.
Step 13
  • Now let us change the image of every subgroup inside the main group. 
  • Again in the same way include a new image into the project and create a container for the image path with the var datatype. 
  • This time you need to call this image from another place in the code. This is shown in the figure.
Step 14
  • Now run the program again.
  • This time click on the first main tile where you changed your own icon first.
  • Now you will get into the new sub-tiles. 
  • There you will find the changes that happened int they imaged due to your coding.
Step 15
  • Now let us try changing the content in the application.
  • Even this works in the same way as we created the datatype for the image.
  • Again create some datatype and add some content in between the quotes. Then call it in from the content code. This is also indicated in the screenshot.
Step 16
  • Now save the whole project.
  • Again run the project and open the sub-tiles.
  • You can find the updated information along with the new content.
  • You can follow the same process to create an application using a template for your own idea.
Note- This is what I was able to explain in this article. Comment out if you have any other queries regarding the application.


In the next article, I will explain the steps to create app packages and publishing the application in the store. Thank you.