Friday 25 December 2015

Create a Movies windows store app using the Html5 and Javascript

In this post we are going to see how to create a Windows Store App using Html5 and Javascript, This app can be run in windows 10 and Windows 8.1.

In this post we are trying to get the following result 







First we see something about the Windows App, In Windows App WinRT is the Key core which is used to create the App, We can create App in various combination ways.  

HTML5+CSS+Javascript  , 
HTML5+CSS+Javascript+C#,
 XAML+C#

Now in this post we are going to see how to create a app using the HTML5, First create a project in Javascript language, select the Window8 menu and Blank App(Windows 8.1)








Then here two files are mandatory we are going to start coding, default.html and default.js. Data binding to UI logic resides in default.js. To do the development we need to add some CSS coding one in the default.css and another one for grouplisting in the file groupitems.css

default.css:
#contenthost {
    height100%;
    width100%;
}

.fragment {
    /* Define a grid with rows for a banner and a body */
    -ms-grid-columns1fr;
    -ms-grid-rows128px 1fr;
    display-ms-grid;
    height100%;
    width100%;
}

.fragment header[role=banner] {
  /* Define a grid with columns for the back button and page title. */
  -ms-grid-columns37px 83px 1fr;
  -ms-grid-rows1fr;
   display-ms-grid;
 }

.fragment header[role=banner] .win-navigation-backbutton {
  -ms-grid-column2;
   margin-top57px;
   positionrelative;
   z-index1;
}

.fragment header[role=banner] .titlearea {
   -ms-grid-column3;
    margin-top37px;
}

.fragment header[role=banner] .titlearea .pagetitle {
   widthcalc(100% - 20px);
 }

.fragment section[role=main] {
  -ms-grid-row2;
  height100%;
}


groupitems.css:
.groupeditemspage section[role=main] {
    -ms-grid-row1;
    -ms-grid-row-span2;
}

.groupeditemspage .groupeditemslist {
    height100%;
    positionrelative;
    width100%;
    z-index0;
}

    /* This selector is used to prevent ui-dark/light.css from overwriting changes
       to .win-surface. */
    .groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface {
        margin-bottom60px;
        margin-left45px;
        margin-right115px;
        margin-top128px;
    }

    .groupeditemspage .groupeditemslist.win-rtl .win-horizontal.win-viewport .win-surface {
        margin-left115px;
        margin-right45px;
    }

    .groupeditemspage .groupeditemslist .win-groupheader {
        padding0;
    }

    /* Use grid and top level layout for truncation */
    .groupeditemspage .groupeditemslist .group-header {
        -ms-grid-columnsminmax(0, max-content) 7px max-content;
        -ms-grid-rowsmax-content;
        display-ms-inline-grid;
        line-height1.5;
    }

    /* Override default button styles */
    .groupeditemspage .groupeditemslist .group-header.group-header:hover
    .group-header:hover:active {
        backgroundtransparent;
        border0;
        margin-bottom1px;
        margin-left5px;
        margin-right5px;
        margin-top1px;
        min-height0;
        padding0;
    }

      .groupeditemspage .groupeditemslist .group-header .group-title {
            displayinline-block;
        }

     .groupeditemspage .groupeditemslist .group-header .group-chevron {
            -ms-grid-column3;
            displayinline-block;
      }

     .groupeditemspage .groupeditemslist .group-header .group-chevron::before {
                content"\E26B";
                font-family'Segoe UI Symbol';
      }

            .groupeditemspage .groupeditemslist .group-header 
.group-chevron:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::before {
                content"\E26C";
            }

   .groupeditemspage .groupeditemslist .item {
        -ms-grid-columns1fr;
        -ms-grid-rows1fr 90px;
        display-ms-grid;
        height250px;
        width200px;
    }

        .groupeditemspage .groupeditemslist .item .item-image {
            -ms-grid-row-span2;
        }

        .groupeditemspage .groupeditemslist .item .item-overlay {
            -ms-grid-row2;
            -ms-grid-rows1fr 21px;
            backgroundrgba(0, 0, 0, 0.65);
            display-ms-grid;
            padding6px 15px 2px 15px;
        }

            .groupeditemspage .groupeditemslist .item .item-overlay .item-title {
                -ms-grid-row1;
                colorrgba(255, 255, 255, 0.87);
                overflowhidden;
                width220px;
            }

            .groupeditemspage .groupeditemslist .item .item-overlay .item-subtitle {
                -ms-grid-row2;
                colorrgba(255, 255, 255, 0.6);
                width220px;
            }

@media screen and (-ms-high-contrast) {
    .groupeditemspage .groupeditemslist .item .item-overlay {
        colorWindowText;
    }
}


Now after created the CSS, now we concentrate on Data logic Let we create a Collection with some values then Bind that to a Binding.List class, later CreateGroup from that List , then bind to the WinControl.

var groupItems = [];
                groupItems = [
                    {key:"Action",title:"Action",subtitle:"",imageUrl:"",
                       description:"This section deals with the Action Movies"},
                    { key: "Drama", title: "Drama", subtitle: "", imageUrl: ""
                       description: "This section deals with the Drama Movies" },
                    { key: "Cartoon", title: "Cartoon", subtitle: "", imageUrl: ""
                       description: "This section deals with the Cartoon Movies" },
                    { key: "SciFi", title: "SciFi", subtitle: "", imageUrl: ""
                       description: "This section deals with the SciFi Movies" },
                    { key: "Love", title: "Love", subtitle: "", imageUrl: ""
                       description: "This section deals with the Love Movies" }
                ];

                var items = [];
                items = [
                    { group:groupItems[0], title: "The Dark Night"
                      subtitle:"Hero with many ideas",description:"", Story:""
                      imageUrl: "Content/images/darknight.jpg", },
                    { group: groupItems[1], title: "Face Off", subtitle: ""
                      description: "", Story: "", imageUrl: "Content/images/faceoff.jpg",  },
                    { group:groupItems[0], title: "Avengers", subtitle:"",description:""
                      Story:"",imageUrl: "Content/images/avengars.jpg", },
                    { group:groupItems[1], title: "KingsMan", subtitle:"",description:""
                      Story:"",imageUrl: "Content/images/kingsman.jpg", },
                    { group: groupItems[1], title: "Mad Fury", subtitle: "", description: "",                        Story: "", imageUrl: "Content/images/madfury.jpg" },
                    { group: groupItems[0], title: "The Matrix", subtitle: "",description: ""                        ,Story: "", imageUrl: "Content/images/matrix.jpg",  },
                    {group:groupItems[2],  title: "Tarzan", subtitle:"",description:""
                       Story:"",imageUrl: "Content/images/tarzan.jpg", },
                    { group:groupItems[2], title: "Lion King", subtitle:"",description:""
                      Story:"",imageUrl: "Content/images/lionking.jpg", },
                    { group:groupItems[4], title: "One I Love", subtitle:"",description:""
                      Story:"",imageUrl: "Content/images/oneilove.jpg", },
                    { group: groupItems[0], title: "Furious 7", subtitle: "", description: ""
                      , Story: "", imageUrl: "Content/images/furious7.jpg",  },
                    { group: groupItems[3], title: "The Terminator", subtitle: ""
                   description: "", Story: "", imageUrl: "Content/images/terminator.jpg",  },
                    { group: groupItems[3], title: "Star Wars", subtitle: "", description: ""
                        , Story: "", imageUrl: "Content/images/starwars.jpg", },
                    { group: groupItems[4], title: "Holiday", subtitle: "", description: ""
                       Story: "", imageUrl: "Content/images/holiday.jpg", },
                    { group: groupItems[4], title: "Love Story", subtitle: "",description: ""
                      , Story: "", imageUrl: "Content/images/lovestory.jpg", },
                    { group: groupItems[4], title: "Before SunRise", subtitle: ""
                  description: "", Story: "", imageUrl: "Content/images/beforesunrise.jpg", }
                ];

       

                /* Binding List from array */
                var itemBindingList = new WinJS.Binding.List(items);

                /* Create a Grouped items from List */
                var moviesGenre = itemBindingList.createGrouped(
                    function (item) { return item.group.key},
                    function (item) { return { group: item.group }; }
                    );

                /* Bind the data to control from the Grouped data */
                var listViewControl = document.getElementById("moviesAlbum").winControl;
                listViewControl.itemDataSource = moviesGenre.dataSource;
                listViewControl.groupDataSource = moviesGenre.groups.dataSource;



We have to place the above code inside the callback of WinJS.UI.processAll().done which is present inside the args.setpromise .

var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;

Now we see the full source in Js side



Source Code default.js:

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
               
            } else {
                
            }
            args.setPromise(WinJS.UI.processAll().done(function () {                             

            var groupItems = [];
                groupItems = [
                    {key:"Action",title:"Action",subtitle:"",imageUrl:"",
                       description:"This section deals with the Action Movies"},
                    { key: "Drama", title: "Drama", subtitle: "", imageUrl: ""
                       description: "This section deals with the Drama Movies" },
                    { key: "Cartoon", title: "Cartoon", subtitle: "", imageUrl: ""
                       description: "This section deals with the Cartoon Movies" },
                    { key: "SciFi", title: "SciFi", subtitle: "", imageUrl: ""
                       description: "This section deals with the SciFi Movies" },
                    { key: "Love", title: "Love", subtitle: "", imageUrl: ""
                       description: "This section deals with the Love Movies" }
                ];

                var items = [];
                items = [
                    { group:groupItems[0], title: "The Dark Night"
                      subtitle:"Hero with many ideas",description:"", Story:""
                      imageUrl: "Content/images/darknight.jpg", },
                    { group: groupItems[1], title: "Face Off", subtitle: ""
                      description: "", Story: "", imageUrl: "Content/images/faceoff.jpg",  },
                    { group:groupItems[0], title: "Avengers", subtitle:"",description:""
                      Story:"",imageUrl: "Content/images/avengars.jpg", },
                    { group:groupItems[1], title: "KingsMan", subtitle:"",description:""
                      Story:"",imageUrl: "Content/images/kingsman.jpg", },
                    { group: groupItems[1], title: "Mad Fury", subtitle: "", description: "",                        Story: "", imageUrl: "Content/images/madfury.jpg" },
                    { group: groupItems[0], title: "The Matrix", subtitle: "",description: ""                        ,Story: "", imageUrl: "Content/images/matrix.jpg",  },
                    {group:groupItems[2],  title: "Tarzan", subtitle:"",description:""
                       Story:"",imageUrl: "Content/images/tarzan.jpg", },
                    { group:groupItems[2], title: "Lion King", subtitle:"",description:""
                      Story:"",imageUrl: "Content/images/lionking.jpg", },
                    { group:groupItems[4], title: "One I Love", subtitle:"",description:""
                      Story:"",imageUrl: "Content/images/oneilove.jpg", },
                    { group: groupItems[0], title: "Furious 7", subtitle: "", description: ""
                      , Story: "", imageUrl: "Content/images/furious7.jpg",  },
                    { group: groupItems[3], title: "The Terminator", subtitle: ""
                   description: "", Story: "", imageUrl: "Content/images/terminator.jpg",  },
                    { group: groupItems[3], title: "Star Wars", subtitle: "", description: ""
                        , Story: "", imageUrl: "Content/images/starwars.jpg", },
                    { group: groupItems[4], title: "Holiday", subtitle: "", description: ""
                       Story: "", imageUrl: "Content/images/holiday.jpg", },
                    { group: groupItems[4], title: "Love Story", subtitle: "",description: ""
                      , Story: "", imageUrl: "Content/images/lovestory.jpg", },
                    { group: groupItems[4], title: "Before SunRise", subtitle: ""
                  description: "", Story: "", imageUrl: "Content/images/beforesunrise.jpg", }
                ];

                      
                /* Binding List from array */
                var itemBindingList = new WinJS.Binding.List(items);

                /* Create a Grouped items from List */
                var moviesGenre = itemBindingList.createGrouped(
                    function (item) { return item.group.key},
                    function (item) { return { group: item.group }; }
                    );

                /* Bind the data to control from the Grouped data */
              var listViewControl =    document.getElementById("moviesAlbum").winControl;
                listViewControl.itemDataSource = moviesGenre.dataSource;
                listViewControl.groupDataSource = moviesGenre.groups.dataSource;



            }));
        }
    };

    app.oncheckpoint = function (args) {

    };

    app.start();
})();





Source Code default.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CalcApp</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- CalcApp references -->
    <link href="/css/default.css" rel="stylesheet" />
    <link href="Content/css/groupitems.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>

    <!-- These templates are used to display each item in the ListView declared below. -->
    <div class="headertemplate" data-win-control="WinJS.Binding.Template">
        <button class="group-header win-type-x-large win-type-interactive" role="link" tabindex="-1" type="button">
            <span class="group-title win-type-ellipsis" data-win-bind="textContent: group.title"></span>
            <span class="group-chevron"></span>
        </button>
    </div>

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <img class="item-image" src="#" data-win-bind="src: imageUrl; alt: title" />
            <div class="item-overlay">
                <h4 class="item-title" data-win-bind="textContent: title"></h4>
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
            </div>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="fragment groupeditemspage">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Movies List</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div id="moviesAlbum" class="groupeditemslist win-selectionstylefilled"
                aria-label="List of groups" 
                data-win-control="WinJS.UI.ListView" 
                data-win-options="{
                    layout: {type: WinJS.UI.GridLayout, groupHeaderPosition: 'top'},                                    
                    groupHeaderTemplate: select('.headertemplate'),                   
                    itemTemplate: select('.itemtemplate'),                  
                }">
            </div>
        </section>
    </div>
</body>
</html>


data-win-control, data-win-options , data-win-bind are the key attributes which use in the application.


Output:
************












From the above post you can learn how to create a Windows store App using the Html5 and Javascript