Introduction to WinJS
WinJS is an open source JavaScript library developed by Microsoft. It has been designed with a primary goal of simplifying Windows Store app development for Windows 8, using HTML 5 and JavaScript as an alternative for XAML and C#, VB.NET, or C++ (CX).
Create a simple image viewer application
The following steps will help you understand how to create an application by using WinJS and Essential Studio for JavaScript controls.
Step 1:
Visual Studio 2012 provides a project template to create WinJS applications. Create a blank project from this template as shown in Figure 1. WinJS templates are available in JavaScript > Windows Store.
![clip_image002[4]](https://blog.syncfusion.com/wp-content/uploads/2018/08/clip_image0024.jpg "clip_image002[4]")
Figure 1: WinJS project template selection
Step 2:
Add code into the project template created with an HTML page to develop this application. As it is developed by using Syncfusion JavaScript controls, you have to refer to its dependent scripts and style sheets in the <head> section.
Note: You can get the above referred scripts and style sheets from the following location:
C:\Users\{User name}\AppData\Local\Syncfusion\EssentialStudio\{version}\JavaScript\assets
Or
[Installed Samples location]\Syncfusion\EssentialStudio\{version}\JavaScript\assets
Step 3:
In the HTML page, add the following code examples to create the application by using Essential Studio for JavaScript:
[CSS]
.photo {
background-repeat: no-repeat;
background-size: 60%;
background-position: center;
height: 100%;
width: 100%;
}
.photo1 {
background-image: url(images/nature.jpg);
}
.photo2 {
background-image: url(images/bird.jpg);
}
.photo3 {
background-image: url(images/snowfall.jpg);
}
.photo4 {
background-image: url(images/sculpture.jpg);
}
.photo5 {
background-image: url(images/seaview.jpg);
}
[HTML]
Step 4:
Now build and run the application. You can see the image viewer application in Figure 2.
![clip_image004[4]](https://blog.syncfusion.com/wp-content/uploads/2018/08/clip_image0044.png "clip_image004[4]")
Figure 2: Image viewer application
Sample for Reference
We have attached the image viewer application project for your assistance. You can get it here: ImageViewer
Content Contributor: Thivya K Content Editor: Diljith H
