Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (157).NET Core  (28).NET MAUI  (29)Angular  (64)ASP.NET  (48)ASP.NET Core  (72)ASP.NET MVC  (88)Azure  (31)Blazor  (130)DocIO  (22)Essential JS 2  (76)Essential Studio  (168)File Formats  (25)Flutter  (121)JavaScript  (165)Microsoft  (107)PDF  (64)React  (45)Succinctly series  (126)Syncfusion  (534)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (34)Webinar  (29)Windows Forms  (57)WinUI  (38)WPF  (131)Xamarin  (142)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (115)Chart  (55)Cloud  (11)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (53)Development  (322)Doc  (7)DockingManager  (1)eBook  (95)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (22)Extensions  (17)File Manager  (4)Gantt  (9)Gauge  (9)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (268)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (28)Performance  (8)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (33)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (20)Solution Services  (2)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (87)UI  (183)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (23)Visual Studio Code  (14)Web  (292)What's new  (177)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin

Create WinJS application using ES for JavaScript

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


[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:


       .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);





















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


Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top