JavaScript AIR application – microlink
I wrote about how Flex Builder 3 can be used to create a JavaScript AIR application, how to set up the environment and how to debug a JavaScript AIR application. It is now time to actually create one that does something more than just displaying "Hello world". For that, I returned to an article written by me a about an Ajax pattern called microlink.
A microlink is a link that opens up content below it. It is a way to improve the ordinary link using Ajax.
In the original article I have used prototype.js and scriptaculous to implement this. Now I am using jquery because it is AIR-ready. That means it works off the shelf in AIR.
If we look into the Flex Navigator view we can see some new resources that are used in order to make the application. Let’s explain each of them one by one.
microlink.css is the stylesheet and is actually optional so I will not talk about this too much. I have used it in order to make the link more visible.
1: .button {
2: color: #003399;
3: }
4:
5: .button:hover {
6: text-decoration: none;
7: color: #66ffcc;
8: background-color: #003399;
9: }
10:
11: .button:active {
12: color: #ffffff;
13: background-color: #0099cc;
14: }
15:
16: .microdiv {
17: background-color: #ccccff;
18: border: 1px solid #9999cc;
19: }
microlink.js is the actual JavaScript piece of code that makes a regular link into a microlink. It contains just one function to handle the click event.
1: /**
2: * Function called when the microlink is called to update
3: * the div with remote content.
4: *
5: * @param {element} e the element that fired the event.
6: */
7: function onClickMicroLink(e) {
8: var elID = e.id;
9: var divID = elID.substr(0, elID.length-2); // remove trailing '_a'
10:
11: $('#'+elID).after(' <div id="'+ divID +'" class="microdiv" ' +
12: 'style="display:none"></div>');
13:
14: // Performs an AJAX request and updates a container's contents
15: // based on the response text.
16: // @see http://docs.jquery.com/Ajax
17: $.ajax({
18: url: e.href,
19: dataType: 'text',
20: cache: false,
21: success: function(text){
22: $('#'+divID).append(text);
23: $('#'+divID).fadeIn("slow");
24: }
25: });
26: }
Inside the index.html I have added just one more line (aside from including the jquery library):
1: <a id="microlink_a"
2: href="http://www.stratulat.com/blog/feed"
3: class="button"
4: onClick="onClickMicroLink(this); return false;">the microlink</a>
Now running the application will show a link. When you click this link an Ajax call will be made to the feeds page of this site. The response is treated as text and it will be injected as the contend of the div created on line 11. Of course, the real use of this is to replace the href of this link with something that is indeed valuable for your application.
This small example covers more than just creating a microlink. It also shows how to make an Ajax call from an AIR application and how to use the response which is done in just the same way as in a browser.
