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.

 

Summary

 

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