5. WinJS
• Controls and
other UI building
blocks for
Modern UI style
apps
• Style sheets with
default Modern
UI style design
• Common
infrastructure for
responsive,
HTML / CSS
• Powerful engine
for creating user
interfaces
• Reuse skills &
code from the
standard web
• New HTML / CSS
features give you
the capabilities to
make great UI/UX
WinRT
• Seamlessly
integrate with the
Modern UI style
shell
• Connect to other
apps through
contracts
• Access storage,
devices, and
other capabilities
of the PC
9. Why WinJS Apps
If You are a web developer today …
Build Native Apps With Your Existing Skill Set and
Experience (mostly )
–
–
–
–
Familiar programming model
Full benefit of hardware acceleration
WinRT API & feature access
Popular JavaScript libraries work in WinJS apps - jQuery,
Ignite UI, Knockout, Angular, game engines, etc
10. WinJS.xhr
HTML/DOM Utils
WinJS Element
Attributes
Logging Utils
WinJS
WinJS.Promise
Element
Selection/
Querying
Keyboard Key
Enumeration
Validation
WinJS
WinJS.PromiseStat
eMachine
Coordinate
Conversion
Support for WinJS
declarative model
(supportedForProc
essing)
Class definition
and inheritance
WinJS.Class
Namespace
definition utilities
WinJS.Namespace
WinJS.ErrorFro
mName
Localized String
Utilities
Data-win-res
processing
Semantic Zoom
ViewBox
ListView
Flyout
SettingsFlyout
Menu
Menu
Command
GridLayout
ListLayout
WinJS Toolkits
Support for
declarative model
(processAll)
Controls
Utilities (
setOptions)
IZoomableView
Custom Layout
Interface
AppBar
IListBinding
Fragment loading
and rendering
WinJS.UI.Fragments
IListDataSource
IListDataAdapte
r
IListN
H
DataSourceStatus
StorageDataSo
urce
VirtualizedData
Source
Erro
FlipView
WinJS.UI.
Animation
helpers
Animation
Library
Data Binding
(as, bind)
Mixins
WinJS.Binding.
List
Conversions
List Projections
Support for
declarative
databinding
Animation System
Management
Application
Events
WinJS.
Application.
sessionState
WinJS.Navigation
Functions
local
(storage)
roaming
(storage)
temp
(storage)
WinJS.UI.Pages.
PageControl
WinJS.Binding.
Template
WinJS.UI.Pages.
IPageControlM
embers
Tooltip
Rating
TabContainer
TimePicker
DatePicker
ToggleSwitch
HTMLControl
Light StyleSheet
Dark StyleSheet
11. Personality
What Makes a Windows Store App a
Windows Store App?
•
•
•
•
•
•
•
•
•
Fast & Fluid
Live Tiles
Animations
Transitions
Charms
AppBar
Search
Contracts
Device Access
14. Windows UI Apps feature
adaptive layouts :
Layouts
•
•
•
Multiple screen size support
Snapped and filled view
states
Handle rotation
CSS Layouts :
• CSS Grid, CSS Flexbox, CSS
Multicolumn, Media Queries
• Fast & Fluid Native
performance
X
Full View
Snapped
View
X
Fill View
15. Transforms &
Animations
CSS & WinJS Animation Library
Page transition
Content transition
Fade in/out
Crossfade
Pointer up/down
Expand/Collapse
Reposition
Show/Hide popup
Show/Hide edge UI
Show/Hide panel
Add/Delete from list
Add/Delete from search list
Peek
Badge update
Start/End a drag or drag-between
Swipe hint
Swipe select/deselect
16. Touch, Pan, Zoom,
Scroll
Fast & Fluid Interaction via CSS
Windows Store Apps feature direct manipulation panning and zooming of content
as a predominant user interface paradigm.
CSS gives you:
• Support touch, mouse, and keyboard
• “Stick to the finger” experience for panning and zooming
• Consistent user experience with rails, inertia, and boundary feedback
• Support for snap points, nesting, and chaining
17. WinJS Stylesheets
Styling an App
•
Beautiful Dark & Light styles are built in
•
Well defined, meaningful selectors you can easily understand and override
•
Visual Studio templates help a lot
18.
19. default.css
• Transparent to developers
• Provides styles for:
– Base elements (HTML, Body, Iframe…)
– Text elements (H1, P, DD…)
– HTML controls (checkbox, radio
button, range…)
– WinJS controls (ratings, toggle…)
– Additional text element style classes
(title, subtitle, item text…)
– Additional HTML control style classes
(back button…)
20. Built-in styling classes
<!– Get a custom back button look -->
<button class="win-backbutton"></button>
<h1 class="win-title">win-title</h1>
<h1 class="win-contentTitle">wincontentTitle</h1>
<h1 class="win-contentSubtitle">wincontentSubtitle</h1>
23. Of standards and popular terms
Modern patterns and practices you might know/have seen
• Strict mode
• Promises [ async ]
• SPA
24. I’ll get back to you.. I promise!*
from the callback with love
var promise = doSomeWork();
promise.then(function(foo){
// continue working here
return doSomeMoreWork();
}).then(function(result){
// …
});
*but can’t promise to solve all your problems.
29. Pages & Navigation
Application Shell
Page Content
• Navigation template
• AppBar integration
• Load and [unload] chunks of HTML + CSS
+ JS
• Page content can be dynamic including
other WinJS controls within it
• Context & State are maintained
A series of events to control the process:
Before
Navigate
before navigation
attempt
Navigating
navigating away from
a page
Navigated
30. The platform differences
• No alert
• ms-appx:/// vs. http(s):// vs. file:/// vs. ms-appdata:///
X
X
• DOM Security - With great power come.. great restrictions :)
Still OK :
• window.close() //quite useless though
• createElement
31. Not in the face !!111!1!!
•
If ( using DOM) filter through toStaticHTML()
–
–
–
–
–
–
•
•
createContextualFragment
innerHTML / outerHTML
insertAdjacentHTML
pasteHTML
document.write / document.writeln
DOMParser.parseFromString
WinJS.Utilities.markSupportedForProcessing(functionName);
Alternative?
var someElement = document.getElementById('someElementID');
MSApp.execUnsafeLocalFunction( function() {
someElement.innerHTML = '<div onclick="console.log("hi");">hi</div>'
});
47. Debugging PhoneGap for
Windows Store Apps:
• 2 ways to debug PhoneCap/Windows 8.x App
– As WinJS App
– As PhoneGap App (winery, http://debug.phonegap.com/)
49. The take away
•
WinJS vs PhoneGap is a matter of API preference and code portability
•
Windows Store basic rules apply to PhoneGap
•
Do whatever you feel like, as long as you:
– Stay within platform look and feel
– Understand the sandbox model of the app
•
Mash up frameworks and tools:
– Should be compatible (like jQuery 2.x)
– Or use workarounds
50. •
Състезание 1: Windows
8.1 или Windows Phone 8
http://bgapps.promorc.com/
• Състезание 2: Win 8 app
– Best UX
– Most Innovative
– Best migrated from WP
– More worldwide
http://winappdevcon.promorc.com
51. Resources
•
The ‘everything you need and more’ place:
– http://msdn.microsoft.com/en-US/windows/apps/
• Windows 8 samples:
– http://code.msdn.microsoft.com/windowsapps/Windows-8-app-samples-4d76cbbf
• Windows 8.1 Samples:
– http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-AppSamples
• Free ebook: Programming Windows Store Apps with HTML, CSS, and JavaScript, Second
Edition (second preview):
• http://aka.ms/secondedition/secondpreview
http://blogs.msdn.com/b/microsoft_press/archive/2013/10/29/free-ebook-programmingwindows-store-apps-with-html-css-and-javascript-second-edition-second-preview.aspx
52. Resources & Q&A
•
•
•
WinJS for the PhoneGap developer blog series:
– http://blogs.msdn.com/b/glengordon/
Windows 8 Platform Guide
– http://docs.phonegap.com/en/edge/guide_platforms_win8_index.md.html
Next event: Building your first Analysis Services solution (11 of February, 2014)
– Speaker: Ivan Donev
