Introduction
In this section we will discuss the clipboard; how to copy and paste various text formats, HTML, URLs and rich text. Text formats are encapsulated in a data package. To put things into the clipboard, set the data package. Data packages are also used to share or send content between applications.
By using bitmaps we can select any file to copy and paste to the clipboard. The data package can also hold a bitmap. Select an image using the picker, copy it to the clipboard and then paste it back to the application. The DataPackage can also hold files. Select files using the picker, copy it to the clipboard, and then paste the files. This will copy the files into this app's local state folder.
Step 1 : First of all you will create a new Metro Style Application; let us see the description with images of how you will create it.
- Open Visual Studio 2011
- File -> New -> Project
- Choose Template -> JavaScript-> Windows Metro Style -> Application
- Rename this Application
Step 2 : In the Solution Explorer there are two files that we will primarily work with, default.js and default.html.
![solutionexplorer.gif]()
Step 3 : Open the default.html page and add the following code. The code will look as shown below.
Code :
<!DOCTYPE html>
<html>
<head>
<title>Clipboard</title>
<!-- WinJS references -->
<link href="winjs/css/ui-light.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="WinJS/js/base.js"></script>
<script type="text/javascript" src="WinJS/js/ui.js"></script>
<script type="text/javascript" src="WinJS/js/wwaapp.js"></script>
<!-- Base references -->
<link rel="stylesheet" type="text/css" href="css/base-sdk.css" />
<script type="text/javascript" src="base-sdk.js"></script>
<!-- Application references -->
<link rel="stylesheet" type="text/css" href="css/program.css" />
<script type="text/javascript" src="program.js"></script>
</head>
<body role="application" style="background-color:#ff6a00">
<div id="rootGrid">
<div id="header" role="contentinfo">
</div>
<div id="content">
<h1 id="featureLabel">
Clipboard</h1>
<h2 id="inputLabel">
Input</h2>
<div id="input" role="main" aria-labelledby="inputLabel">
<div class="options">
<h3 id="listLabel">
Select Option</h3>
<select size="3" id="Sections" aria-labelledby="listLabel" style="background-color:#ffd800">
<option selected="selected" value="1" style="color:#f00">1. Copy and cut text </option>
<option value="2" style="color:#001cff">2. Using bitmaps</option>
<option value="3" style="color:#300202">3. Using storage items</option>
</select>
</div>
<div class="details" role="region" aria-labelledby="descLabel" aria-live="assertive">
<h3 id="descLabel">
Details</h3>
<!-- Section 1 Input -->
<div class="item" id="Section1Input">
<p>
Use Clipboard to copy and paste different text formats, including unicode, HTML,
URIs, and rich text. Text formats are encapsulated in a DataPackage. To put things
into clipboard, set the DataPackage. To get things out of the clipboard, get the
DataPackage. You can also register to know when the contents of the clipboard have
changed.
<br />
DataPackages are also used to share or send content between applications.
</p>
<div id="text">
Enter text
<input id="Section1Text" value="regular ol' unicode" />
</div>
<div id="HTML">
Enter HTML
<input id="Section1Html" value="<b>copy me!</b>" />
</div>
<div id="URI">
Enter a URI
<input id="Section1URI" value="http://www.microsoft.com" />
</div>
<div id="RTF">
Enter rich text
<input id="Section1Rtf" value="rich text format" />
</div>
<br />
<button class="action" id="Section1Copy">
Copy</button>
<button class="action" id="Section1Cut">
Cut</button>
<button class="action" id="Section1Cancel">
Cancel</button>
<button id="Section1RegisterContentChanged">
Register</button>
<br />
<br />
<button class="action" id="Section1Paste">
Paste</button>
</div>
<!-- Section 2 Input -->
<div class="item" id="Section2Input">
<p>
The DataPackage can also hold a bitmap. Select image using the picker, copy it to
the clipboard, and then paste it back into the application.</p>
<button id="Section2Copy" class="action">
Select and copy</button>
<button id="Section2Paste" class="action">
Paste</button>
</div>
<!-- Section 3 Input -->
<div class="item" id="Section3Input">
<p>
The DataPackage can also hold files. Select files using the picker, copy it to the
clipboard, and then paste the files. This will copy the files into this app's local
state folder.</p>
<button id="Section3Copy" class="action">
Select and copy</button>
<button id="Section3Paste" class="action">
Paste</button>
</div>
<!-- Section 4 Input -->
<div class="item" id="Section4Input">
<p>
Using clipboard means you can get whatever is currently in it, including content
set by a different app. In this Section, go to different apps installed on your
system, then switch back to this app and click Paste. The clipboard will be inspected
and display everything currently in it.</p>
<button id="Section4Paste" class="action">
Paste</button>
</div>
</div>
</div>
<h2 id="outputLabel">
Output</h2>
<div id="output" role="region" aria-labelledby="outputLabel" aria-live="assertive">
<div id="statusMessage">
</div>
<!-- Section 1 Output -->
<div class="item" id="Section1Output">
<div id="Section1TextOutput">
</div>
<div id="Section1HtmlOutput">
</div>
<div id="Section1UriOutput">
</div>
<div id="Section1RtfOutput">
</div>
</div>
<!-- Section 2 Output -->
<div class="item" id="Section2Output">
<p id="Section2text">
</p>
<img class="imageHolder" id="Section2ImageHolder" alt="image holder" src="images/placeholder-sdk.png"
style="visibility: hidden" />
</div>
<!-- Section 3 Output -->
<div class="item" id="Section3Output">
<p id="Section3Output">
</p>
</div>
<!-- Section 4 Output -->
<div class="item" id="Section4Output">
<div id="Section4RequestedOperation">
</div>
<div id="Section4TextOutput">
</div>
<div id="Section4HtmlOutput">
</div>
<div id="Section4UriOutput">
</div>
<div id="Section4RtfOutput">
</div>
<div>
Bitmap:
<img class="imageHolder" id="Section4ImageHolder" alt="image holder" src="" style="visibility: hidden" />
</div>
<div id="Section4FilesOutput">
</div>
</div>
</div>
</div>
<div id="footer" role="contentinfo">
</div>
</div>
</body>
</html>
Step 4 : After applying this code, run this application and then we get the following output:
![output1.jpg]()
Copy and paste onto clipboard as shown below.
![output2.jpg]()
In the second point, using the bitmap we have selected and copied an image; after that paste onto the clipboard.
![0utput2.0.jpg]()
e
Select an image and click on the open button.
![output2.1.jpg]()
The selected image is shown onto the clipboard as output.
![output2.2.jpg]()
In the third point, by using the storage item we can select and copy these items.
![output33.jpg]()
Here we can choose an item from the given list.
![output3.jpg]()
After selecting and copying an item, paste it here and then give an output.
![output3.1.jpg]()