WinJS: SplitView and Custom Navigation

First, I would like to thanks the “anonymous” person who requested me if I could give him an example on how to apply navigation to the SplitView.
 
I created a class that allows navigation using the SplitView example given in this link.

index.html

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

    <!--- Download the last version of WinJS --->
    <link href="lib/WinJS_4.3/css/ui-dark.css" rel="stylesheet" />
    <script src="lib/WinJS_4.3/js/base.js"></script>
    <script src="lib/WinJS_4.3/js/ui.js"></script>
    <link href="css/default.css" rel="stylesheet" />

    <!--- This is where the custom NavigationClass will recide ---> 
    <script src="js/navigation.js"></script>

    <script src="js/main.js"></script>

</head>
<body class="win-type-body">
    <div id="app">
        <div class="splitView" data-win-control="WinJS.UI.SplitView">
            <!-- Pane area -->
            <div>
                <div class="header">
                    <button class="win-splitviewpanetoggle"
                            data-win-control="WinJS.UI.SplitViewPaneToggle"
                            data-win-options="{ splitView: select('.splitView') }"></button>
                    <div class="title">
                        <h3 class="win-h3">SplitView Pane Area</h3>
                    </div>
                </div>

                <div class="nav-commands">
                    <!--- Added selector id to identify the menu items --->
                    <div id="menuItemHome" data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>
                    <div id="menuItemTime" data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Time', icon: 'clock'}"></div>
                </div>
            </div>

            <!-- Content area -->
           <!-- added a unique identification to the contentArea" which would be used by our navigation class -->
            <div id="contentArea" class="contenttext">
                <h2 class="win-h2">SplitView Content Area</h2>
            </div>
        </div>
    </div>
</body>
</html>

home.html

<!DOCTYPE html>
<html>
<head>
    <tiutle>Home</title>
</head>
<body>
    <div>Home content</div>
</body>
</html>

time.html

Share

Notes : Computer Graphics with OpenGL – Part 2

< Previous (Computer Graphics with OpenGL – Part 1) | (Computer Graphics with OpenGL – Part 3) Next >

NOTIFICATION: These notes are published for educational purposes. Using these notes is under your own responsibility and risk. These notes are given ‘as is’. I do not take responsibilities for how you use them.

PDF Content:

  • Sutherland-Hodgeman polygon clipping
  • Pipeline clipping approach
  • Geometric transformation in 3D space
  • Camera
  • Coordinate system
  • Coordinate system properties
  • Coordinate system representation

 

Share

Notes: Operative Systems – Part 5

< Previous (Operative Systems – Part 4) | (Operative Systems – Part 6) Next >

NOTIFICATION: These notes are published for educational purposes. Using these notes is under your own responsibility and risk. These notes are given ‘as is’. I do not take responsibilities for how you use them.

PDF Content:

  • Page tables
  • Multilevel page tables
  • Page size
  • Page table management
  • Page fault time
  • Page fault handling
  • Not recently used page replacement algorithm
  • Not recently used algorithm (NRU)
  • Locking pages in memory
  • Page replacement algorithms
    • Optimal page replacement (OPR)
    • First in first out (FIFO)
    • Second change
    • Last recently used (LRU)
    • Not frequently used (NFU)
    • Assigning
    • Working set
    • Clock
    • WS clock

Operative_Systems_5

Share

DNX: C#: Events

As you may know, Microsoft is getting into the open source community with the ASP.NET and DNX with the mono project.
The .NET Execution Environment (DNX) is a software development kit which allows you to run .NET applications on Windows, Mac, and Linux using different frameworks such as .NET framework, .NET Core, and Mono. However, everything are not roses. There are many incomplete libraries, incompatibilities, lack of documentation, and most of the examples such as doing SQL or SOAP do not work depending on which the library targets you are planning to code for. Therefore, I decided to test the basics on all the library targets. I am starting with DNX451.

Events seems to be working fine in DNX451 with C#. Below is a code example for those who wish to play with it.

 

Program.cs

Share

NodeJS Tutorial: Part 2

This is the continuation of the previous part of this tutorial [link] were we when over installation, basic settings, and package versioning.

Express: Setup

On the previous part [link], we showed the installation of the package Express. Express is a fast, minimalist web framework built for NodeJS.

First, we need to create a JavaScript file with the main part of our program. In this case, we create the file app.js with this line:

var express = require('express');

The method required give us a reference that points to the dependency package Express. However, this doesn’t provide us anything that we can use until we create an instance of Express.

Share