Tuesday, April 10, 2012

5 Cool Things you can do with HTML5 (p4)

The fourth part of this series of posts will cover Notifications. When you are a user of GMail and using Chrome, you probably are familiar with those little boxes that popup when you've got new mail. Those type of notifications you can create in your APEX application as well - using HTML5!
Alas, at this moment, these type of notifications only work in Chrome. In Firefox you can add this extension so it'll work in that browser as well. The other ones will follow - sooner or later...
You can also use this plugin that mimics this feature - to be safe on every platform, but that one will appear in your browser, so that's not a desktop notification.
But how do you create a real desktop notification?
As usual with HTML5, you just need a few lines of code. The code below is executed in a Dynamic Action when a button is pressed:

function RequestPermission (callback) {
window.webkitNotifications.requestPermission(callback);
}
function showNotification(){
if (window.webkitNotifications){
  if (window.webkitNotifications.checkPermission() > 0) {
  RequestPermission(showNotification);
  }
  else {
  window.webkitNotifications.createNotification(
  "#APP_IMAGES#HTML5.jpg", //Put link to your icon here
  "Notification",
  "Now you are notified!").show();
  }
 }
else
{ alert('Sorry, you have to switch to another browser to use notifications - or use the other button ;-)');
}
}
//Run:
showNotification();


Just like geoLocations, the browser has to ask the user for permission to use Desktop Notifications (for a domain). Once the permission has been granted you can call the "show()" method, containing an image, the title and the actual message. Easy and cool, huh!

And you can even get completely wild by creating notifications that contain HTML or adding event listeners to your notifications - for instance doing something when the notification is closed. See this for some more examples.

See the working APEX example on : http://apex.oracle.com/pls/apex/f?p=22115:NOTIFICATIONS.

Friday, April 06, 2012

5 Cool Things you can do with HTML5 (p3)

Location, location, location, it's all about location...


Probably one of the most frequently used HTML5 features is geoLocation. Why? Because it is very easy to use and cool too!
You can check the corresponding example page on http://apex.oracle.com/pls/apex/f?p=22115:GEOLOCATION.
So how does that work?
In fact it is just a few lines of code. First include the Google Javascript API (<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>).
The next step (on Page Load) is to actually get the current position of the browser device by
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showLocation, handleError);
} else {
  error('GeoLocation is not supported in this browser');
}
Where  showLocation specifies the callback method that retrieves the location information. This method is called asynchronously with an object corresponding to the Position object which stores the returned location information. So you can use this function to actually draw the map and place the marker. And ErrorHandler is an optional parameter that specifies the callback method that is invoked when an error occurs in processing the asynchronous call. This method is called with the PositionError object that stores the returned error information. So when somethings goes wrong you can show an alert with your own message.
Depending on the security settings of the browser, your user might see a message like "apex.oracle.com wants to track your physical location". The user has to accept or deny access to this information. In the privacy settings of your browser you can see what sites have access to your location.

And for actually determining your position, Google uses either your IP-address - so that might be quite inadequate when you use proxies - or the GPS in your (mobile) device. For the latter type of device you can also use navigator.geolocation.watchPosition(showLocation, handleError);. Then that function will be called every time the Geo of your device changes. So you can draw a map of where the user of your app has been during the period the app is active (like Runkeeper does).

You can see the full W3C API description here.

Wednesday, April 04, 2012

5 Cool Things you can do with HTML5 (p2)

As promised in the previous post in this series, this one will be about Web Storage.
Before the HTML5 era, you could store information on the client (browser) using a cookie. But that has two disadvantages (or limitations). First of all, a cookie's size is limited to 4096 bytes (but that differs over the different browsers and versions) and secondly - even more important - is that a cookie is always sent with every HTTP request, resulting in more data being sent over the wire. And that reduces scalability and decreases performance.
Using HTML5 you can use another type of storage, or even two types: sessionStorage and localStorage. In most browsers the storage is limited to 2.5Mb, but some go up to 5Mb or even unlimited. See this page for all limits per browser. And it is important to know that sessionStorage lives as long as your browser/tab is open - and is deleted on close, while localStorage stays on the client - even after a shutdown of the machine. 
In a storage only key-value pairs are stored - so it's a sort of NOSQL ;-) . You can add or replace a value in your store using localStorage.setItem("test", "12345"); or shorter : localStorage.test="12345"; You can even leave the quotes out, while all values are stored as text anyway.
And similar, you can retrieve a value using localStorage.getItem("test"); or localStorage.test;
One more thing: you can only access contents of the storage in a page when the storage is created from the same domain - so no cross domain sharing of data!
You see the contents of the storage from a domain, by opening up the Javascript console and issue the localStorage command and inspect the contents of the object. Or, in Chrome, open up the Developer Tools (Ctrl-Shift-I) and check the Resources tab. The users of the APEX Developer Addon will see that this (nice!) tool uses the localStorage feature as well...

You see the full W3C defintion on Web Storage here.

How could this be useful in an APEX environment?
When you want to welcome a user back, with a message like "Nice to see you back, we haven't seen you since <some date/time>", you can store that last date in the database. But then a user needs a login, otherwise you wouldn't recognize him. If you store that information in the localStorage, you can use that to say hello again - assuming he didn't remove the localStorage and he uses the same browser ;-)
A more sophisticated use could be, when you think of a webshop. A lot of people do "window shopping" on the net: filling up their virtual baskets with stuff...but never proceed to the counter. If you issue some kind of submit or AJAX call, every time a user adds something to his basket, you get a lot of network traffic and database processing for...what? For nothing actually. So when you keep this shopping on the client side, and submit the contents of the localStorage.basket to the database if  and only if the user presses the [proceed to checkout] button, you maximize the use of your resources. Positive impact on scalability and performance! 

Next post will be about ... GeoLocation!

Monday, April 02, 2012

5 Cool Things you can do with HTML5 (p1)

Recently I did a presentation with the title "5 cool things you can do with HTML 5". I even did that presentation 3 times within a week: OUG Ireland had the premiere, then OUG Norway and OGH APEX Day as the last one of the week. I've planned the same - or similar - presentation for the upcomig Collaborate and OUG Bulgaria conferences.

As the most stuff I present is demo (the slide deck is just 5 pages), people frequently ask whether I could write blogpost on one of the subjects. So why not create a sequence of 5 posts....that should make sense.
So this is that first of five posts. I hope, not promise, to finish it within a week or two...

Cool thing 1 - Input Types
With HTML5, you can use both new Input Types as well as additional Attributes. New Input Types are  URL, email, number, search and more - see http://www.w3schools.com for a complete list. The definition is very straightforward. In your HTML, replace type="text" with type="email". So the definition is something like : <input type="email"  value="" size="30">. 
In a regular, desktop, browser that change doesn't seem to do anything, but if you visit that page using a mobile browser, you definitely notice the difference: (On an iPad/Phone/Pod) the virtual keyboard changes and will contain a "@" sign. And something similar happens for URL's (a ".com" key will appear) and numeric fields. And that's all without any coding!
But in an APEX environment you can't natively use these kind of fields - unless you write all the code the retrieve and store the information yourselves. Luckily there is a plugin available (on http://apex-plugin.com/) that bridges that gap. And even better...in APEX 4.2 these item types will be 100% native available!
Apart from the new input types, you can also use the new attributes as defined on http://www.w3schools.com. Two of those new attributes are particulary cool : Placeholder and Required. The "placeholder" attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The hint is displayed in the input field when it is empty, and disappears when the field gets focus.
The "required" attribute - not surprisingly - specifies that an input field must be filled out before submitting the form. You can set these attributes using the "HTML Form Element Attributes" property of any (text) field. And when you combine that with a CSS3 style setting using a pseudo class ":required" selector, like
  :required {
    border-color: #88a;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);
  }
you get the red boxes around the input field.

Custom data attributes
Another new HTML5 feature is the support for custom attributes inside HTML elements. In the old world you could add an item using:
<input type="text" id="Roel" value="Roel Hartman" book="Expert Oracle APEX" twitter="RoelH" />
So you could use any custom attribute name you can come up with. In HTML5 however, you should prefix your custom attributes with "data-". So the HTML for the example above should be:
<input type="text" id="Roel" value="Roel Hartman" data-book="Expert Oracle APEX" data-twitter="RoelH" />
Having done that, you can easily access your custom attributes in Javascript:
$("#Roel").data().twitter;
And you can also create, change or remove the data-values by something similar to:
$("#Roel").data().testing="Test123";
 (or using the setAttribute, getAttribute and removeAttribute methods).

The last thing I would like to mention is the "speech" option, see a previous blogpost (http://roelhartman.blogspot.co.uk/2012/01/wouldnt-you-like-to-talk-to-your-apex.html) for more info on that one!

You can see them all in action (and whether your browser supports it or not) on : http://apex.oracle.com/pls/apex/f?p=22115:INPUTTYPES

The next post will cover Web Storage!