WinJS Controls

форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно

програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки

уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop

уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC

безплатен курс "Разработка на софтуер в cloud среда"

BG Coder - онлайн състезателна система - online judge

курсове и уроци по програмиране, книги – безплатно от Наков

безплатен курс "Качествен програмен код"

алго академия – състезателно програмиране, състезанияASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET

курсове и уроци по програмиране – Телерик академия

курс мобилни приложения с iPhone, Android, WP7, PhoneGapfree C# book, безплатна книга C#, книга Java, книга C# Дончо Минков - сайт за програмиране

Николай Костов - блог за програмиранеC# курс, програмиране, безплатно

WinJS ControlsCreating and accessing controls, Types, Event-

handling

George Georgiev

Telerik Software Academyacademy.telerik.com

itgeorge.net

http://academy.telerik.com/

http://itgeorge.net/

http://forums.academy.telerik.com/

http://kursove-uroci-knigi-obuchenie-programirane-web-design-csharp.info/

http://www.telerik-kids.com/

http://seocourse.telerik.com/

http://html5course.telerik.com/

http://schoolacademy.telerik.com/

http://mvccourse.telerik.com/

http://clouddevcourse.telerik.com/

http://www.bgcoder.com/

http://www.nakov.com/

http://codecourse.telerik.com/

http://algoacademy.telerik.com/

http://aspnetcourse.telerik.com/


http://mobiledevcourse.telerik.com/

http://www.introprogramming.info/

http://www.minkov.it/

http://www.nikolay.it/

http://csharpfundamentals.telerik.com/












Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Table of Contents

What are WinJS Controls? Creating controls

In markup In code

Common WinJS Controls DatePicker Rating Flyout Menu & MenuCommand AppBar & AppBarCommand 2
































What are WinJS Controls?Introduction to Windows Library for

JavaScript Controls
































What are WinJS Controls

Set of controls for Store Apps Combine several HTML elements to

achieve a more complex functionality

Generated by WinJS In DOM elements with special

attributes

Can be styled and have events attached just like regular HTML elements

Have implemented data-binding capabilities

4

<div data-win-control="…"></div>
































Creating WinJS ControlsCreating from markup, Creating from

code































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Creating WinJS Controls

Declaring WinJS controls in markup Create a host element (e.g. div) Set an attribute data-win-options to

some control type

You can set additional properties with the data-win-options attribute

You have to call WinJS.UI.processAll() To generate controls defined in

markup The Blank Template does this

6

<div data-win-control="WinJS.UI.TimePicker"></div>
































Creating WinJS Controls in markup

Live Demo

7
































Creating WinJS controls in JavaScript code Controls can be generated in code Create a host element (div) for the

control WinJS.UI holds 'constructors'' for

the WinJS controls Call a constructor and pass it the

container (div)

8

var hostElement = document.getElementById(‘host-id’);var ratingControl = new WinJS.UI.Rating(hostElement);
































Creating WinJS Controls in JavaScript

CodeLive Demo

9
































Accessing WinJS controls WinJS controls are "inside" their

host element First access the host element

Then use the element property winControl

10

var hostElement = document.getElementById(…)

var winJsControl = hostElement.winControl;
































Common WinJS ControlsDatePicker, Rating, Flyout, Menu,

AppBar































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Common WinJS Controls

DatePicker Enables picking dates Notable properties

minDate maxDate current – the selected date

12
































DatePickerLive Demo

13
































Rating Implements rating mechanism Notable properties

minRating maxRating userRating – the selected rating

14
































RatingLive Demo

15
































Flyout Looks like a dialog window

Attaches to a control Can be closed by clicking outside of

it Notable properties

show(element) method shows the flyout

innerHTML defines flyout markup You can add it at the html file too

Can have buttons, paragraphs, divs, etc.

anchor – defines the control to attach to

16
































FlyoutLive Demo

17
































Menu & MenuCommand Looks like a context menu Can have multiple MenuCommands

MenuCommands are buttons, checkboxes, etc.

MenuCommands defined in innerHTML of Menu

Menu attaches to a control anchor – defines the control to attach

to18
































Menu & MenuCommandLive Demo

19
































AppBar & AppBarCommand The App’s AppBar Has two sections – global and

selection Can have multiple

AppBarCommands in the sections AppBarCommands attach to one of

the sections

20
































AppBar & AppBarCommandLive Demo

21
































?

?? ? ?

??? ?

?

? ?

??

?

?

? ?

Questions?

WinJS Controls

schoolacademy.telerik.com




















































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Exercises

1. Implement a Time Calculator control A time calculator calculates the time between two

moments in time The time calculator should have two controls for

date input Start and end date

The time calculator should have two controls for time input

Start and end time The time input controls should be hideable A switch should show/hide the time input controls

The calculator should have a calculate button which opens a menu

The menu should display three options Calculate days Calculate hours Calculate days and hours

The calculator should print output in an html element

Style the calculator so that it looks like a single control (not just several controls lying around). Use touch-friendly design and layout. Read through this article and try to follow anything you find useful

http://msdn.microsoft.com/en-us/library/windows/apps/hh465304.aspx




















WinJS Controls

Text of WinJS Controls

Folder LC Controls

Präsentation Middle Tier Datenbank Internet Web Servicebruckner/dotnet/VO3_ASP_WS.pdf · Server Controls ASP.NET enthält 45 Server Controls ... •Grundlegende Controls •List

Virtual Controls

EXOcompact - Regin Controls

INPUT CONTROLS

Controls - parlonsaviation.com · ent. V00D11 029337 Pilots 27.2 Controls Description controls. ategories: • The controls the and (speedbrakes, spoilers,…) • The flaps high-lift

JSF Tab Controls

HVAC Controls

Layouts Controls

Controls cinquè

MANUAL DE INSTRUCCIONES - Entron Controls · ENTRON Controls, LLC. • 700120-001 • P

KL04RF - SALUS Controls

Trotter Controls

Paul Chu FRIB Controls Group Leader (Acting) FRIB Controls Plan

Deep Dive WinJS – Profitez à 100% de son potentiel

ENGINE CONTROLS - Unisalento.it

QCP Weld Controls

DelVal Controls

Inhoudsopgave...K02_0_67241 HANDLEBAR L03_0_67358 HANDLEBAR CONTROLS L03_1_77607 HANDLEBAR CONTROLS L.03.01.A0003_02 HANDLEBAR CONTROLS M02_0_67438 CONTROLS N02_0_67525 BRAKES N02_1_77691

Avant Controls

FLIGHT CONTROLS

About WinJS

Paper Results Controls

Type 6518/6519 - Fine Controls (UK) Ltd | Fine Controls

Controls 2

:::load controls:::

Johnson controls

Price Controls SFLS

Electric Guitar Controls

Servo Controls India

Documents

WinJS Controls

Text of WinJS Controls