Create WinJS application using ES for JavaScript | Syncfusion Blogs
Detailed Blog page Skeleton loader
Blogs

Create WinJS application using ES for JavaScript

Syncfusion Guest Blogger profile iconSyncfusion Guest Blogger 2 min read Jul 26, 2019 Updated

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]

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]
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
Be the first to get updates
    
 
 
 
 Syncfusion Guest Blogger
Meet the Author
 Syncfusion Guest Blogger