windows store application development
DESCRIPTION
TRANSCRIPT
![Page 1: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/1.jpg)
Windows Store app
development FOYZUL KARIM
![Page 2: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/2.jpg)
What is Windows 8 anyway?
![Page 3: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/3.jpg)
Your own Start screen, Live
![Page 4: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/4.jpg)
Share yourself
![Page 5: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/5.jpg)
New ways of interaction Touch and mouse
![Page 6: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/6.jpg)
Searching made easy
![Page 7: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/7.jpg)
App Store
![Page 8: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/8.jpg)
And many more…
![Page 9: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/9.jpg)
“ ”
Okey… But I don’t know
.NET…
YOU MIGHT ASK!!!
Which programming languages does this Operating System support?
![Page 10: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/10.jpg)
“ ”
You can develop if you
are…
![Page 11: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/11.jpg)
Web developer HTML, CSS, Javascript, jQuery
Distribute easily
Windows Store apps sell in more than 200 markets, with support for local currencies in over 120 markets, and developers can localize their apps in more than 100 languages. Windows Store also offers full platform support for free apps, trials (time-based and feature-based) and paid apps, including in-app purchase. The revenue share base is 70%, but when an app achieves $25,000 USD in revenue—aggregated across all sales in every market—that app moves to 80% revenue share for the lifetime of that app.
The web is native
in Windows 8
Windows Store apps support most web standards like HTML5, CSS3, and JavaScript. Use common elements like canvas, SVG, video, audio, 2D transforms, transitions and animations just like you would when supporting many modern browsers. You can also use common frameworks and libraries like jQuery.
When you write your Windows Store app using web standards, it has access to all the underlying performance benefits of Windows 8, including the high-performance Chakra JavaScript engine, GPU-powered hardware acceleration and hardware sensors such as accelerometers, GPS and gyroscopes.
Build on what you
already have
Your best stuff is on the web and you don’t have time to rebuild it. Windows Store apps support the >iframe< element and WebView controls so you
can present your best content in a new way. You can even combine it with other coding languages like C#, C++, VB, and XAML into one powerful app.
![Page 12: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/12.jpg)
![Page 13: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/13.jpg)
![Page 14: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/14.jpg)
Windows Developer C#, C++, VB .NET
Build apps that
reach more
people Apps are core to the Windows 8 experience, and with the reach of the Windows install base and the Windows Store distribution channel, you have the opportunity to reach
hundreds of markets worldwide. And unlike other platforms, Windows 8 apps scale automatically across devices – all while using the same code.
Easier distribution
and app
maintenance Access the Windows Store and package your Windows Store app for distribution directly within Visual Studio – all without having to build your own install package. Once your app is
available through the Windows Store, you have access to valuable telemetry data to monitor your app quality including JavaScript exception rate, crash rate and app responsiveness rate.
Connect to the
OS and cloud
With the new Windows contracts, your app integrates seamlessly with other apps to create powerful user experiences like sharing, searching and file pickers with
very little code. And through cloud roaming, you can create a continuous experience across devices by roaming data that lets people pick up a task right where they left off.
![Page 15: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/15.jpg)
Ratio Interactive
![Page 16: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/16.jpg)
Designers Adobe photoshop, Illustrator
Speak a modern
design language
Microsoft's design language was created with digital in mind. It allows content to come to life and at the same time help maintain a consistent personality and experience for
the user. The language provides a universal tool to craft great apps that scale gracefully across multiple screen sizes.
Unleash your
creativity on a
new digital
canvas With Windows 8, your app is the star of the show, as the operating system fades to the background. Your app can take advantage of unique features like live tiles, contracts
and cloud services to design experiences that engage with users in new ways.
Elegant hardware
provides the
perfect stage for
your experience Windows 8 runs on amazing hardware, from tablets to laptops to all-in-ones with large high-definition screens. It’s the perfect place to showcase your creativity and vision
through the experiences you create.
![Page 17: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/17.jpg)
![Page 18: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/18.jpg)
![Page 19: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/19.jpg)
![Page 20: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/20.jpg)
So? Which platform do you prefer as
your development environment ?
Web platform
Html
CSS
JS
.NET platform
C#
Visual Basic
Others
C++
![Page 21: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/21.jpg)
I prefer money. What about money? Image courtesy: http://www.insidehousing.co.uk/pictures/643xAny/2/5/0/37250_MONEY_MAGNET.jpg
![Page 22: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/22.jpg)
Earn from your apps Choose business model wisely
Selling differently
Collect full price before download
Time limited trial
Feature limited trial
In app purchase
Advertising
Attention-grabbing ads that are not perceived as intrusive
Code that is easy to integrate with both Windows 8 and your app to help prevent
crashes and protect battery life
Attractive revenue shares for developers
The reach of Microsoft’s global sales force and its strong relationships
Third party transactions
Develop your own payment system into your CRM or other existing system
![Page 23: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/23.jpg)
Getting started
Get the tools
Get the developer license
Start development and create 'Hello World'
![Page 24: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/24.jpg)
Windows Store app
It runs on Windows 8 operating system
It runs on both tablet and desktop environment at a time
Compiled binaries of all supported languages are using same
runtime engine
Runtime engine is called WinRT
![Page 25: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/25.jpg)
![Page 26: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/26.jpg)
Windows 8 Platforms and Tools High level overview
![Page 27: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/27.jpg)
What tools do we need
Windows 8 Operating system
Visual Studio 2012 Integrated Development Environment
Blend Designing IDE
![Page 28: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/28.jpg)
Developer license
Visual studio
• Getting a developer license
• Renewing the license
Command prompt
• Getting a developer license
![Page 29: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/29.jpg)
Application
development
![Page 30: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/30.jpg)
Templates
![Page 31: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/31.jpg)
JavaScript templates
![Page 32: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/32.jpg)
C# Templates
![Page 33: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/33.jpg)
Visual Basic Templates
![Page 34: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/34.jpg)
C++ Templates
![Page 35: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/35.jpg)
Blank application templates
JavaScript Application C# Application C++ Application
![Page 36: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/36.jpg)
Deep Dive into JavaScript Shall we?
![Page 37: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/37.jpg)
Hello Rock Stars
http://starshapedrock.com/wp-content/uploads/2008/08/star1.jpg
![Page 38: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/38.jpg)
HTML Code
Code Simulated output
Image Courtesy http://starshapedrock.com/wp-content/uploads/2008/08/star1.jpg
![Page 39: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/39.jpg)
I don’t see
any main
program
or starting
code?
My Gosh..
its Magic!!!
![Page 40: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/40.jpg)
Application Manifest
![Page 41: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/41.jpg)
Where the hell is JavaScript?
![Page 42: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/42.jpg)
default.js
![Page 43: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/43.jpg)
http://img9.joyreactor.com/pics/post/full/funny-pictures-auto-rage-comics-heck-no-383799.jpeg
A tale of
Promise
![Page 44: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/44.jpg)
What do we mean by promise? In programming world?
![Page 45: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/45.jpg)
http://wiki.commonjs.org/wiki/Promises
Promises provide a well-defined interface for interacting with an
object that represents the result of an action that is performed asynchronously, and may or may not be finished at any given point in
time. By utilizing a standard interface, different components can
return promises for asynchronous actions and consumers can utilize
the promises in a predictable manner.
http://msdn.microsoft.com/en-us/library/windows/apps/br211867.aspx
A promise provides a mechanism to schedule work to be done on a value
that has not yet been computed. It is a convenient abstraction for managing
interactions with asynchronous APIs.
![Page 46: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/46.jpg)
Promise.then promise.then(onComplete, onError, onProgress).done( /* Your success
and error handlers */ );
![Page 47: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/47.jpg)
WinJS.UI.processAll()
Returns Promise object
![Page 48: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/48.jpg)
WinJS.UI.processAll().then()
Promise object has a method ‘then()’
![Page 49: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/49.jpg)
WinJS.UI.processAll().then(
function completed() { document.getElementById("definitionButton").addEventListener("click",
buttonClicked);
}
)
Inside of the then method we add necessary code
![Page 50: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/50.jpg)
args.setPromise(
WinJS.UI.processAll().then(
function completed() { document.getElementById("definitionButton").addEventListener("click",
buttonClicked);
}
)
);
setPromise makes sure that splash screen isn't taken down until the
app's page is ready.
![Page 51: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/51.jpg)
What else can promise do?
![Page 52: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/52.jpg)
Strict Mode (JavaScript)
Strict mode is a way to introduce better error-checking into your
code.
When we use strict mode, we cannot,
use implicitly declared variables, or
assign a value to a read-only property, or
add a property to an object that is not extensible
![Page 53: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/53.jpg)
Two examples
"use strict"; function testFunction(){
var testvar = 4; return testvar; }
testvar = 5;
variable declaration outside the
function causes the syntax error
"Variable undefined in strict
mode."
function testFunction(){ "use strict";
testvar = 4; return testvar; } testvar
= 5;
The variable declaration outside
the function does not cause a
syntax error, but the declaration
inside the function does.
![Page 54: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/54.jpg)
HTML
![Page 55: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/55.jpg)
JavaScript code to change the div’s text
![Page 56: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/56.jpg)
Output in
simulator
![Page 57: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/57.jpg)
What about registering button
clicks?
![Page 58: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/58.jpg)
![Page 59: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/59.jpg)
Data Dash (data-*) Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements. [w3c]
<div id="contenthost"
data-win-control="Application.PageControlNavigator"
data-win-options="{home: '/pages/home/home.html'}">
</div>
![Page 60: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/60.jpg)
Windows Controls DATA-WIN-CONTROL
![Page 61: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/61.jpg)
WinJS.UI.* Windows controls in Javascript library
![Page 62: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/62.jpg)
Rate this App!
Code Output
![Page 63: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/63.jpg)
Rate this App!
function to return the element
Add the event listener
Event description
![Page 64: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/64.jpg)
Working with Data
![Page 65: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/65.jpg)
Data binding
![Page 66: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/66.jpg)
Style and Data
binding
![Page 68: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/68.jpg)
Data storage locations
User data
Libraries accessed by the Windows Runtime StorageFile and file pickers
SkyDrive
HTML5 File API
App data
Application Data APIs for the Windows Runtime
IndexedDB
Extensible Storage Engine (ESE)
HTML5 Web Storage
WinJS.Application.sessionState
WinJS.Application.local state storage
WinJS.Application.roaming
state storage
Server
HTML5 Application Cache
Cookies
Cloud Services, OpenData Services, and Cloud Databases
![Page 69: Windows Store application development](https://reader033.vdocuments.site/reader033/viewer/2022051323/5497215dac795925288b543d/html5/thumbnails/69.jpg)
Lets go to IDE…Thank you.