Copied RSS Feed

.NET

Create WinJS application using ES for JavaScript

Syncfusion Guest Blogger
2 min read Jul 26, 2019

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.

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.

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

Tags:

JavaScript

Meet the Author

Syncfusion Guest Blogger
Share