-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
202 lines (176 loc) · 13.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<!--
* Copyright 2011 Research In Motion Limited.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,user-scalable=no,initial-scale=1.0">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<title> WebWorks Kitchen Sink </title>
<script src="js/toggle.js" type="text/javascript"></script>
<script type="text/javascript">
function doPageLoad(event)
{
var minusIconLook = document.getElementById("lookfeelheader").getElementsByTagName("img")[0];
minusIconLook.addEventListener("click", function(e) { collapseSection("lookfeelheader", "lookfeelcontent"); }, false);
var minusIconFunc = document.getElementById("functionheader").getElementsByTagName("img")[0];
minusIconFunc.addEventListener("click", function(e) { collapseSection("functionheader", "functioncontent"); }, false);
var minusIconTest = document.getElementById("testingheader").getElementsByTagName("img")[0];
minusIconTest.addEventListener("click", function(e) { collapseSection("testingheader", "testingcontent"); }, false);
}
window.addEventListener("load", doPageLoad, false);
</script>
</head>
<body>
<h1>WebWorks Kitchen Sink</h1>
<p>
The purpose of this application is to demonstrate the multitude of capabilities and functionality (everything but the "kitchen sink") that can be built into a BlackBerry WebWorks application.
</p>
<h2 id="lookfeelheader">Look and Feel <img src="img/minimize.png" alt="minimize icon"/></h2>
<ul id="lookfeelcontent" class="section">
<li class="category"><h3>User Interface</h3> - Design your app to look the way you want it to</li>
<li> <a href="html/browser/formfields.html"> HTML Form Fields</a> <img src="img/html5_logo_sm.png" alt="html5 logo"/> Collect information from users</li>
<li> <a href="html/css3/fonts.html"> Fonts </a> <img src="img/css3_logo.png" width="20" alt="css logo"/> Use standard or custom fonts</li>
<li> <a href="html/css3/mediaquery.html"> Media Query </a> <img src="img/css3_logo.png" width="20" alt="css logo"/> Single CSS for multiple screen dimensions</li>
<li> <a href="html/browser/viewport/viewport.html"> Viewport </a> Virtual rendering area for Web content</li>
<li> <a href="html/browser/pagedimensions.html"> Screen Dimensions</a> Detect page width & height </li>
<li> <a href="html/browser/orientation.html"> Orientation </a> Detect when page layout changes</li>
<li> <a href="html/browser/toolbars.html"> Fixed Toolbars </a> Static header and footer </li>
<li> <a href="html/css3/overflow.html"> Scrollable DIVs </a> Scroll content without scrolling page </li>
<li> <a href="html/browser/position.html">Fixed position elements</a> Elements remain in place during scrolling</li>
<li class="category"><h3>User Experience</h3> - Make your content more enjoyable / easier to use.</li>
<li> <a href="html/browser/useragent.html"> User Agent </a> Detect what browser your users have </li>
<li> <a href="html/html5/inputtypes.html">Input Types</a> <img src="img/html5_logo_sm.png" alt="html5 logo"/> Associates virtual keyboard variant with input fields</li>
<li> <a href="html/apis/ui.html"> Dialog API</a> <img src="img/gear.png" alt="gear icon"/> Manipulate system dialog boxes.</li>
<li> <a href="html/apis/menu.html">Menu API</a> <img src="img/gear.png" alt="gear icon"/> Manipulate menu items for the application.</li>
<li> <a href="html/usecase/spacing.html"> Use of whitespace </a> Give users enough space for interaction</li>
<li> <a href="html/usecase/progress.html"> Progress indicator </a> Display progress while events processing</li>
<li> <a href="html/css3/transformations.html"> Transformations </a> <img src="img/css3_logo.png" width="20" alt="css logo"/> Move, scale and rotate in 2D or 3D</li>
<li> <a href="html/css3/animations.html"> Animations </a> <img src="img/css3_logo.png" width="20" alt="css logo"/> Use animation to provide visual feedback </li>
<li> <a href="html/browser/window.html"> Window object</a> Represents an open window in a browser. </li>
<li> <a href="html/html5/notifications.html">Web Notifications</a> <img src="img/html5_logo_sm.png" alt="html5 logo"/> Update system icon tray </li>
<li class="category"><h3>User Input</h3> - Respond to physical user input. </li>
<li> <a href="html/browser/touch.html"> Touch Events</a> <img src="img/globe.png" alt="globe icon"/> Respond to Touch events (start, move, end)</li>
<li> <a href="html/browser/gestures.html">Swipe Gestures</a> Transform touch events into swipe gestures</li>
<li> <a href="html/browser/keyevents.html"> Keyboard events </a> Listen for key press events </li>
<li> <a href="html/browser/motion.html"> Accelerometer </a> <img src="img/html5_logo_sm.png" alt="html5 logo"/> Measure the 3D motion of a physical device </li>
<li> <a href="html/browser/zoom.html"> Pinch To Zoom </a> <img src="img/globe.png" alt="globe icon"/> Control default pinch-to-zoom behavior</li>
<!--
TO DO CREATE THE FOLLOWING:
<li> <a href="html/apis/focus.html"> Focus navigation </a> </li>
<li> <a href="html/browser/preventDefault.html"> Prevent Default events </a> </li>
<li> <a href="html/browser/touchmeta.html"> Touch META tags </a> </li> <meta id="touch-event-mode" content="native"/>
-->
<li class="category"><h3>Graphics</h3> - Provide amazing visual effects.</li>
<li> <a href="html/browser/flashplayer.html"> Flash </a> <img src="img/globe.png" alt="globe icon"/> Use Flash content in your app </li>
<li> <a href="html/html5/canvas.html">Canvas</a> <img src="img/html5_logo_sm.png" alt="html5 logo"/> Use HTML5 canvas content</li>
<!--
TO DO CREATE THE FOLLOWING:
<li> <a href="html/browser/webgl.html"> WebGL </a> </li>
<li> <a href="html/browser/svg.html"> SVG </a> </li>
<li> <a href="html/browser/3dcss.html"> 3D CSS</a> </li>
<li> <a href="html/browser/3dcss.html"> CSS3 Overview </a> </li>
-->
<li></li>
</ul>
<h2 id="functionheader">Functionality <img src="img/minimize.png" alt="minimize icon"/></h2>
<ul id="functioncontent" class="section">
<li class="category"><h3>Storage</h3> - Memory or file system</li>
<li> <a href="html/apis/dir.html">Directory API</a> <img src="img/gear.png" alt="gear icon"/> Interact with directories on the file system.</li>
<li> <a href="html/apis/file.html">File API</a> <img src="img/gear.png" alt="gear icon"/> Interact with files on the file system.</li>
<li> <a href="html/html5/storage.html">LocalStorage & SessionStorage</a> <img src="img/html5_logo_sm.png" alt="html5 logo"/> Save key/value string pairs in memory </li>
<li> <a href="html/html5/db.html">Web Database</a> <img src="img/html5_logo_sm.png" alt="html5 logo"/> Relational database storage (SQLlite)</li>
<li> <a href="html/html5/cache/cache.html">Application Cache</a> <img src="img/html5_logo_sm.png" alt="html5 logo"/> Automatic offline storage for remote content </li>
<li> <a href="html/html5/file.html">File Reader</a> <img src="img/html5_logo_sm.png" alt="html5 logo"/> Read file details from local system </li>
<li> <a href="html/usecase/upload.html"> Upload a file </a> Transfer a local file to remote Web server </li>
<!--
TO DO CREATE THE FOLLOWING:
<li> <a href="html/apis/cache.html"> WidgetCache </a> </li>
-->
<li class="category">Multimedia</li>
<li> <a href="html/apis/audio.html">Audio API</a> <img src="img/gear.png" alt="gear icon"/> Listing of supported audio functionality </li>
<li> <a href="html/apis/audioplayer.html">Audio Player API</a> <img src="img/gear.png" alt="gear icon"/> Plays audio using Java extension.</li>
<li> <a href="html/html5/audio.html">Audio</a> <img src="img/html5_logo_sm.png" alt="html5 logo"/> Play audio natively through web engine</li>
<li> <a href="html/html5/video.html">Video</a> <img src="img/html5_logo_sm.png" alt="html5 logo"/> Play video natively through web engine</li>
<li class="category">Device Harware Access</li>
<li> <a href="html/apis/camera.html">Camera API</a> <img src="img/gear.png" alt="gear icon"/> Use camera to capture pictures and videos</li>
<li> <a href="html/apis/microphone.html">Microphone API</a> <img src="img/gear.png" alt="gear icon"/> Record audio from the microphone</li>
<li> <a href="html/html5/geo.html">Geolocation</a> <img src="img/html5_logo_sm.png" alt="html5 logo"/> Get GPS coordinates (HTML5 solution)</li>
<li> <a href="html/browser/gps.html"> GPS </a> <img src="img/globe.png" alt="globe icon"/> Get GPS coordinates (legacy BlackBerry solution) </li>
<li class="category">Device OS Integration</li>
<li> <a href="html/apis/app.html"> Application API</a> <img src="img/gear.png" alt="gear icon"/> Application level Functions and attributes </li>
<li> <a href="html/apis/appevent.html"> Application Events API</a> <img src="img/gear.png" alt="gear icon"/> Access events triggered by the application</li>
<li> <a href="html/apis/system.html">System API</a> <img src="img/gear.png" alt="gear icon"/> System level functions and attributes</li>
<li> <a href="html/apis/systemevent.html"> System Events API</a> <img src="img/gear.png" alt="gear icon"/> Access events triggered by the system</li>
<li> <a href="html/apis/identity.html">Identity API</a> <img src="img/gear.png" alt="gear icon"/> BlackBerry Smartphone user and account information</li>
<li> <a href="html/apis/invoke.html">Invoke API</a> <img src="img/gear.png" alt="gear icon"/> Launch external applications</li>
<li> <a href="html/browser/schemes.html"> URI schemes </a> <img src="img/globe.png" alt="globe icon"/> URI schemes supported by the Web engine </li>
<li> <a href="html/browser/navigator.html"> Navigator object</a> Provides information about the current platform </li>
<li> <a href="html/usecase/content.html"> MIME</a> <img src="img/globe.png" alt="globe icon"/> How to open 3rd party file MIME types</li>
<li> <a href="html/apis/phone.html">Phone</a> <img src="img/gear.png" alt="gear icon"/> Information about active BlackBerry Smartphone phone accounts.</li>
<!--
TO DO CREATE THE FOLLOWING:
<li> <a href="html/apis/message.html">Message</a> <img src="img/gear.png" alt="gear icon"/> </li>
<li> <a href="html/apis/camera.html">Find</a> <img src="img/gear.png" alt="gear icon"/> </li>
<li> <a href="html/apis/pim.html">PIM</a> <img src="img/gear.png" alt="gear icon"/> </li>
-->
<li class="category">Network Connectivity</li>
<li> <a href="html/html5/websockets.html">Web Sockets</a> <img src="img/html5_logo_sm.png" alt="html5 logo"/> Two-way communication with a remote host </li>
<li> <a href="html/html5/offline.html">Network Connectivity</a> <img src="img/html5_logo_sm.png" alt="html5 logo"/> Detect whether network connection is active </li>
<li> <a href="html/browser/protocols.html"> Protocols </a> <img src="img/globe.png" alt="globe icon"/> Protocols supported by the Web engine</li>
<li> <a href="html/browser/carriernetwork.html">Carrier Network</a> <img src="img/globe.png" alt="globe icon"/> Information about active carrier network</li>
<!--
TO DO CREATE THE FOLLOWING:
<li> <a href="html/apis/push.html">Push</a> </li>
-->
<!--
TO DO CREATE THE FOLLOWING:
<li class="category">Monetization</li>
<li> <a href="html/apis/payment.html">Payment</a> </li>
<li> <a href="html/apis/advertising.html">Advertising</a> </li>
-->
<li class="category">3rd Party Frameworks</li>
<li> <a href="html/usecase/twitter.html"> Twitter Web APIs </a> Integrate your Web content with Twitter </li>
<li class="category">Performance</li>
<li> <a href="html/html5/workers.html">Web Workers</a> <img src="img/html5_logo_sm.png" alt="html5 logo"/> Multi-thread JavaScript processing </li>
<li> <a href="html/browser/dhtml.html"> DHTML </a> Update HTML dynamically after page load</li>
<li> <a href="html/browser/xhr.html"> XmlHttpRequest </a> Asynchronous HTTP requests from client</li>
<li> <a href="html/css3/sprite.html"> CSS Sprites </a> Reduce HTTP requests for image resources </li>
<li> <a href="html/browser/typedarrays.html"> Typed Arrays </a> Fast access to binary data arrays </li>
<li></li>
</ul>
<h2 id="testingheader">Testing <img src="img/minimize.png" alt="minimize icon"/></h2>
<ul id="testingcontent" class="section">
<li class="category">BlackBerry</li>
<li> <a href="html/debug/ripple.html"> Ripple </a> Mobile emulator for BlackBerry Smartphone and PlayBook </li>
<li> <a href="html/debug/webinspector.html"> Web Inspector </a> Full suite of debugging and profiling tools</li>
<li class="category">3rd Party</li>
<li> <a href="html/debug/jsconsole.html"> JSConsole </a> Remote debugging of console.log statements</li>
<li> <a href="html/debug/firebuglite.html"> Firebug Lite </a> Lightweight version of Firebug browser plugin</li>
<li> <a href="html/debug/weinre.html"> Weinre </a> Web Inspector Remote server</li>
<li></li>
</ul>
<div id="legend">
<b>Legend</b>:
<ul>
<li> <img src="img/html5_logo_sm.png" alt="html5 logo"/> HTML5 feature </li>
<li> <img src="img/css3_logo.png" width="20" alt="css logo"/> CSS3 feature </li>
<li> <img src="img/gear.png" alt="gear icon"/> WebWorks JavaScript APIs feature </li>
<li> <img src="img/globe.png" alt="globe icon"/> BlackBerry Web engine feature</li>
</ul>
</div>
</body>
</html>