WaveCalender 13: Magic 8 Ball

Struggling with decisions in life? Dilemmas? Wondering what the future has in store for us?

Ask the magic 8 ball!

The magic 8 ball originally created by Albert Carter in 1946 is a legendary fortune telling device or seeking device which is designed to answer every question. While the real thing is not compatible enough to be shared online with our friends, the guys in wave ActionScript library are so nice to create this wonderful magic 8 ball that you can share with your friends online on google wave with same wavelet allowing you to share its answers with your friends. It responds in real time and shakes as you click on it just like the way you do it in the real thing. With 20 different answers, the magic 8 ball is a good app to use when you’re struggling with decisions in life, dilemmas, and questions that your friends don’t even have the guts to answer.

The magic 8 ball gadget is built on Flex and using wave-as-client ActionScript library for Flex to connect to the JavaScript API available on Google Wave. This app shows you how simple apps can be so fun to use when you are on Google Wave. Come and enjoy this app with your friends for free on wavesandbox.com , if you have sandbox accounts, or on Google Wave Preview. Just click on the button that says add gadget and paste this gadget XML url: http://wave-as-client.googlecode.com/svn/trunk/example/wavemagic8/web/wavemagic8.xml

 

Wave Extension Installer XML file creator

 

After a while of strenuous coding and testing, the developer is ready to make his/her work public. But one obstacle still remains for the developer and that is to make the Wave extension Installer.

The Wave extension installer is important as this simplifies the task in installing the app on wave. Because the developer aims his/her work for the public to use, the developer should make everything easy for the users to install and use his/her app. Imagine if you have to make your users learn a scripting language before they can use your app, chances are your users may grow tired of it and may missed the chance of using your app.

The Wave Extension Installer XML File Creator is an app specifically designed for developers to simplify their work on creating Wave Extension Installers. This app is built on Flex and using the wave-as-client ActionScript Library for Flex. This is a nice app to use for first time developers and to some because after all those strenuous coding and testing, developers may get lazy to create the wave extension installer. With this app, all you have to do is fill out the form, click “Done”, and copy the generated XML content. Just remember the app is bigger than a regular size blip so you may have to maximize your wavelet to fully view the app.

You can try out the app in this gadget XML URL: http://wave-as-client.googlecode.com/svn/trunk/example/wave_install_creator/web/wave_install_creator.xml

 

Bookmark and Share

WaveCalender 12: Card gadget

The card gadget seems to be in its early stages still. I can see that the basic actions that we can do with a card or a deck can be done with this gadget. Flipping a card, dragging a card from the deck, stacking cards, peeking on one card, etc…. But there is one bug (or is it a feature?) in that when a player peeks on a turned up card, the peek action still occurs. It peeks at the back of the card. Well normally in a card game there’s no need to peek at the other side of a turned up card unless you scribbled your date’s number there and forgot about it. If it is a feature, it’s an unneeded one and looks to me like it screams for a fix on its irrelevance.

Peek Bug

The gadget has a lot of potential to accommodate card games. Solitaire, strip poker, pusoy dos, etc… what with the actions that a participant can do. But the problem is that it’s too macro in its scope that playing a card game will get confusing easily because of the lack of rules and scoring for that specific game. I guess I’m asking for a different gadget here. Maybe something patterned after this one. But at least some restrictions to participants that they can only do an action on a card that they have and not cause chaos on the other player’s hand would be great.

Multiple Participants

Bookmark and Share

WaveCalender 9: Embed Youtube videos in your Wave

It is not possible to share videos from Youtube unless you use a gadget. Olaf Lederer from Finalwebsites has created a youtube gadget generator.
It simply works by go to the site http://www.finalwebsites.com/googlewave/. Find your youtube file link and the size of the video. The result is a bit.ly url like http://bit.ly/6S4gEW.
You can then insert this url into your Wave and you will get a gadget with the embedded video inside.
youtube_gadget
What I like about this gadget is that a new gadget is created pr user. The way this is done is by creating an url like http://www.finalwebsites.com/googlewave/gadget.php?url=3WYYu4pZt-M&height=344&width=452, which is converted into the bit.ly url. By using this url it is really easy to generate the gadget XML to embed the video.

Bookmark and Share

Creating A Simple Inline Gadget To Show External Web Applications

In this post, I will discuss how to create a simple gadget that has the capability to show an external web application inside a wave. The purpose of this blog is to simply show how it is possible to create a gadget that can interact with an external web application. I have a vision that by creating gadgets will help developers create an external web application that interacts with a database storage residing in a server that supports Google Wave Robots’ APIs and whenever the form is updated, it will only need to send request to its server and not inside wave and later on the robot will  send an information to the wave regarding its notifications or create a wave robot/gadget that has the capabilities to add an external web applications dynamically to a wave . Writing this gadget is just as simple as coding a traditional XHTML /HTML page since Google gadgets are created using JavaScript and html.

Creating the gadget

First things first, I have created this gadget using iGoogle Gadget Editor. If you don’t have an account, you can use your Gmail account to sign in here, or if you don’t have any, you can also sign up to the given link and add the Google Gadget Editor in your iGoogle page.

Note: You can also use any text editor and upload the gadget in any available public  host and add it in a wave. Or Host it in any site that has the ability to run Google gadget such as iGoogle.

First step is to construct your XML gadget specifications:

–          Content Section. The <Content> section is where the real work of your gadget happens. It is where you specify the type of gadget, your programming logic, and often the HTML elements that determine the appearance of your gadget.

–          User Preferences. The <UserPrefs> section defines controls that allow users to specify settings for the gadget. For example, a personalized greeting gadget might provide a text field for users to specify their names.

–           Gadget Preferences. The <ModulePrefs> section in the XML file specifies characteristics of the gadget, such as title, author, preferred sizing, and so on.

You can find out more about it here.

This is how it looks after you have declared your gadget specification.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs
title="inline_external_page" height="350" width="1280"/>
<Content type="html">
<![CDATA[

]]></Content>
</Module>

Note: Most of the gadgets written for non-Wave containers can run in Wave. However, these gadgets are not able to take advantage of the live and multi-user environment that is Wave. The main difference between Wave gadgets and non-Wave gadgets is that a Wave gadget lives in a wave and can interact with the wave.

The next step is basically like writing a primitive XHTML/HTML code.  You will need to create a <div> section that will serve as the main container of your external page.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs
title="inline_external_page" height="350" width="1280"/>
<Content type="html">
<![CDATA[
<div id="main"><!--Main container for the iframe-->
<span>Title</span>

</div>
]]></Content>
</Module>

The next step you need to do is to create an <iframe> section that will hold the external web application that you are trying to show on the container.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs
title="inline_external_page" height="350" width="1280"/>
<Content type="html">
<![CDATA[
<div id="main"><!--Main container for the iframe-->
<span>Title</span>
<iframe name="check" id="check" height="100%" src ="https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/pcd!3aportal_content!2fcom.sap.sdn.folder.sdn!2fcom.sap.sdn.folder.application!2fcom.sap.sdn.folder.iviews!2fcom.sap.sdn.folder.crp!2fcom.sap.sdn.app.crp.mypoints?userid=J%2BrvmxDK7BA%3D" width="100%" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe> <!-- this is where contents of the links are displayed -->
</div>
]]></Content>
</Module>

Those are the steps that you need to follow on creating an inline gadget that holds an external web page. The next thing you need to do is to put it inside a wave, considering that you have already uploaded your gadget in a site/host that can hold a Google gadget.

Putting it in a wave:

First step is to login to your wave account here or if you don’t have any account, you can register here.

Once logged in; Create a new wave. Select Debug>Extensions>Add Gadget…


Inside wave

Place the URL of your gadget on the “Enter the URL for a gadget you want to add” text box and click Add by XML.

This is how it looks after you have successfully added your gadget inside the wave.
final

Those are the steps that i have done to create this simple gadget inside wave. Thank you and if there are any questions or suggestions please do feel free to leave a comment.

References:

http://code.google.com/apis/gadgets/docs/basic.html

http://code.google.com/apis/spreadsheets/spreadsheet_gadgets.html

Bookmark and Share