|
|
|
|
|
|
Accelerometer (Soda Can) Drag and Drop (Poker Chip) Gestures (Flip and Rotate) Viewport (Fridge Note) Animation (Tiddlywinks) Animation (Coin Flip) Sound (Podcast) Sound (Cowbell) Sound (Single StationPlayer) Data (Cookie) Javascript API (Twitter) Javascript API (Google Maps) Simple Application (Flashlight) Simple Application (Hello World) Javascript API (Menu Demo) Animation (Slideshow Demo) Fonts (Embedding Custom Fonts) |
|
 Screen capture from iPhone Screen capture from iPhone Screen capture from iPhone Screen capture from iPhone Screen capture from iPhone Screen capture from iPhone Screen capture from iPhone Screen capture from iPhone Screen capture from iPhone Screen capture from iPhone Screen capture from iPhone Screen capture from iPhone Screen capture from iPhone Screen capture from iPhone Screen capture from iPhone Screen capture from iPhone Screen capture from iPhone |
Functionality:
Drive UI activity from the device's accelerometer
Suggested Uses:
Enhancing user experience with added realism, adding a second or third interface method beyond touch (shake or tilt).
How to see it:
Browse to this page on your portable device to run.
| | | | |
Functionality:
Allows users to interact with elements of your UI by touching them and then dragging them around the screen.
Suggested Uses:
Moving UI items, menus, rearranging photos, reordering objects.
How to see it:
Browse to this page on your portable device to run.
| | | | |
Functionality:
Use touch gestures to realistically change UI objects
Suggested Uses:
Extending the touch UI to include realistic actions like "swipe"
How to see it:
Browse to this page on your portable device to run.
| | | | |
Functionality:
The useViewport command allows developers to build an application for a single pixel width, which is then scaled to the dimensions of the device when the app is running.
Suggested Uses:
Greatly eases the task of creating apps that will run on different device screens and/or platforms.
How to see it:
Browse to this page on your portable device to run.
| | | | |
Functionality:
Dynamically animate UI elements with touch or by program control
Suggested Uses:
Animating objects or user interface elements
How to see it:
Browse to this page on your portable device to run.
| | | | |
Functionality:
Multi-object animation used to enhance a simulated real-world activity
Suggested Uses:
Enhancing user experience with added realism
How to see it:
Browse to this page on your portable device to run.
| | | | |
Functionality:
Play an audio or video podcast
Suggested Uses:
Delivering content from existing podcast sites.
How to see it:
Browse to this page on your portable device to run.
| | | | |
Functionality:
Play an audio event in response to a UI stimulus
Suggested Uses:
Enhancing user experience with added realism
How to see it:
Browse to this page on your portable device to run.
| | | | |
Functionality:
Use this as an example of how to tune into an appMobi or Shoutcast based stream.
Suggested Uses:
Good for passing the time listening to new music on your mobile device.
How to see it:
Browse to this page on your portable device to run.
| | | | |
Functionality:
Store and recall text strings in persistent memory between run sessions
Suggested Uses:
Saving configuration and/or context settings so the app remembers its status each time it is run.
How to see it:
Browse to this page on your portable device to run.
| | | | |
Functionality:
Access a Twitter account for viewing and posting
Suggested Uses:
Adding Twitter functionality to any app
How to see it:
Browse to this page on your portable device to run.
| | | | |
Functionality:
Gets a map of your current location
Suggested Uses:
Access Google map functionality from within an app - wide variety of uses.
How to see it:
Browse to this page on your portable device to run.
| | | | |
Functionality:
An example of an extremely simple application
Suggested Uses:
Finding objects in your car on a dark night. Also useful for clearing monsters from your 4 year old's closet.
How to see it:
Browse to this page on your portable device to run.
| | | | |
Functionality:
This application is a quick starting point and introduction to how to access functionality from the appMobi javascript library.
Suggested Uses:
This sample is a good place to start creating applications.
How to see it:
Browse to this page on your portable device to run.
| | | | |
Functionality:
This application demonstrates some of the powerful capabilities of the jQTouch library.
Suggested Uses:
This sample is great for a menu system that incorporates animations to display various data.
How to see it:
Browse to this page on your portable device to run.
| | | | |
Functionality:
Demonstrates iPhone-like page flip animations, use of JQTouch JavaScript library.
Suggested Uses:
inter-page transitions, photo viewers, slideshows
How to see it:
Browse to this page on your portable device to run.
| | | | |
Functionality:
The ability to embed custom fonts in an application
Suggested Uses:
Enables the developer to include a large amount of fonts in an application for customization.
How to see it:
Browse to this page on your portable device to run.
| | | | |
|
|
|
|
timer = AppMobi.accelerometer.watchAcceleration(suc, fail, opt);
| | | | |
|
| function init()
{
document.getElementById("dragItem").addEventListener("touchstart",function(e){ boolSelected=true; });
document.getElementById("dragItem").addEventListener("touchend",function(e){ boolSelected=false; });
document.getElementById("dragItem").addEventListener("touchmove",function(e){ if (boolSelected==true) { doDrag(e); return false; } });
}
function doDrag(e)
{
try
{
var nY = e.touches[0].pageY;
nY = nY - dragItemHeight;
var nX = e.touches[0].pageX;
nX = nX - dragItemWidth;
nY=Math.round(nY);
nX=Math.round(nX);
document.getElementById("dragItem").style.top=nY + "px";
document.getElementById("dragItem").style.left=nX + "px";
}
catch(e)
{ }
} | | | | |
|
|
//This snip of code starts the process of sensing a swipe gesture
function onTouchStart(e)
{
if (e.touches.length == 1)
{
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
window.document.addEventListener('touchmove', onTouchMove, false);
window.document.addEventListener('touchend', onTouchEnd, false);
}
}
window.document.addEventListener('touchstart', onTouchStart, true); | | | | |
|
| //set a standard width for the application
AppMobi.display.useViewport(768,1446);
| | | | |
|
| //This application uses the xui javascript library
//For more information see: http://xuijs.com/documentation
function animateElement(ele,newX,newY)
{
var objTweenObject = new Object();
objTweenObject.left = newX + "px";
objTweenObject.top = newY + "px";
objTweenObject.duration = '1.5';
objTweenObject.easing='ease-in-out';
chaseX=newX;
chaseY=newY;
clearTimeout(messageTimeout);
x$('#txtProcessing').html("Moving to X:" + newX + " Y:" + newY);
messageTimeout=setTimeout("x$('#txtProcessing').html(' ');",2000);
x$(ele).tween(objTweenObject);
} | | | | |
|
| visibleside.style.webkitTransform = 'rotateX(' + rotationangle + 'deg) scale(' + currentscale + ',' + currentscale + ')'; | | | | |
|
|
AppMobi.player.playPodcast(podcastURL);
| | | | |
|
| AppMobi.player.playSound("sounds/catmeow2.wav"); | | | | |
|
| AppMobi.player.startStation(netStationID,false,false); | | | | |
|
| //to save a cookie
AppMobi.cache.setCookie(name,value,daysTillExpiry);
//to get cookie data
AppMobiCookies[selectedText].value;
//to delete a cookie
AppMobi.cache.removeCookie(name); | | | | |
|
| AppMobie.device.setBasicAuthentication('api.twitter.com', 'Twitter API', username, password); | | | | |
|
| AppMobi.geolocation.getCurrentPosition(suc,fail); | | | | |
|
| function lightswitch()
{
if (boolLightOn==true)
{
document.getElementById("off").style.visibility="visible";
document.getElementById("on").style.visibility="hidden";
document.body.style.backgroundColor="black";
}
else
{
document.getElementById("on").style.visibility="visible";
document.getElementById("off").style.visibility="hidden";
document.body.style.backgroundColor="white";
}
boolLightOn=!boolLightOn;
} | | | | |
|
| @import "jqtouch/jqtouch.min.css";
@import "themes/jqt/theme.css";
| | | | |
|
| @font-face {
font-family: 'AnagramRegular';
src: url('Anagram-webfont.eot');
src: local('?'), url('Anagram-webfont.woff') format('woff'), url('Anagram-webfont.ttf') format('truetype'), url('Anagram-webfont.svg#webfontPPYxxLzF') format('svg');
font-weight: normal;
font-style: normal;
} | | | | |
|
|
|
|
| Note:You can actually see and use these demonstration apps on your mobile device if you navigate here using your mobile device. You'll be prompted to install a "test container" app on your device and then you can experience the apps and download the source to see how easy it is to create compelling mobile apps with appMobi. |
|
|
|
|
|
|
