Google seems to finally approved Wave Sandbox access for some developers who did not attend the I/o. We are publishing a few screenshots and background information on the Google Wave platform below. It is interesting that we are running Disqus comments on the TypeHost site and there are quite a few similarities between Disqus & Google Wave, as well as some major differences. XMPP is doing really well over all in keeping the messaging instant – you can see people typing updates as it happens on the screen.

My first work embedding a Wave in a Drupal blog page was fairly simple. I added the script to the header of page.tpl.php manually, along with the body init code. Set the “waveframe” width and height in the blog page and that is basically it for the embed. One problem, it is like pouring a huge amount of JavaScript into an iframe. The iframe is not a good theme option for a CMS site particularly. Reply, editing, etc. from two accounts & browsers (FF/Chrome) are working in the Drupal page in synch with the Wave inbox now, but the animated wave playback does not display on the embed page.

For those interested in Google Wave development, here are some screenshots and documentation of the Google Wave sandbox:

Getting Started with Wave

This wave should help you get started in using Wave.

NOTE: This wave is shared with all wave-users, so we only allow a limited set of admins to edit it. If you try to edit or respond to it, your Wave Client will crash. Don’t worry, we’re working on a better UI for that!

As you are currently seeing, Wave is laid out in Panels, let me go through each of them to give you a flavor for Wave:

Uploading Bar

You might periodically see a green bar at the top of the screen that says “Uploading Waves”. This bar indicates that there is data queued up to be sent to the server, so, if you see this, don’t close you browser until it goes away!

Navigation Panel

The Nav Panel is where you will find shortcuts to get to various lists of Wave. It is also where you can manage Folders (yes, there are Folders!) and Saved Searches. Try out some cool things like:

All links in the Nav Panel are actually Searches, look for what they populate in the Search box!

Contacts Panel

The Contact Panel shows all contacts that are currently stored in your account. Try out some cool things like:

Click on your own Avatar in the contact Panel, click on “Change Photo” and it will take you to a settings page allowing you to set up your Avatar picture. Make sure to make it available to everyone in the domain!

the Search box will allow you to find the specific contact you’re looking for.

Clicking on a user’s Avatar will show their information and allow you to create a Wave with them.

You can set your “cool line” by clicking on your own profile at the top of the panel. This won’t be the same as your Gmail IM status, so feel free to set a unique wavy status here.

Make sure any contacts you want to use in Wave are in your contacts (accessible from https://www.google.com/contacts/a/wavesandbox.com).

Search Panel

The Search Panel will allow you to find all of your various Waves. Try out some cool things like:

Cmd+Click (on Mac) or Ctrl+Click (on Windows) to open the Wave in a new Panel

Select a Wave, then click Folders to move a Wave to a Folder

Shift click on Multiple Waves to apply and then choose and Action

Wave Panel

This Panel is where your Waves will open. Try out some cool things like:

Playback!

shift+enter while editing will end your edit, shift+enter while not editing will create a new message!

Maximize the Wave to get more real estate for it

Private Reply from the Message Menu to talk to a smaller number of folks on the Wave

Wave InBox – Debug Settings:

Show objects created
Log wavelet shelf
Evict all shelved wavelets
Dump open remote calls
Extensions
Network
Exceptions
Get current Wave ID
Copy current wave
Show UDW of current wave
Show CC Info
Trigger Wavelet.removeParticipant
Trigger Blip.delete
Attachments
Digests
Participants and Profiles
Toggle fine-grained timing
Misc
Set Window Size

Firebug:

Viewing the page with Firefox Firebug gives all of the JavaScript, CSS, HTML, etc. that is loading from the remote site, and a lot of code. This is why the page load is slow initially. I hope the CMS solution for integrating Google Wave does not rely on the iframe for implementation in the future, but the embed does depend on it now. iFrames are really the last option in Drupal and are problematic at the theme layer. Until I figure out how to add dynamic wave IDs to the header code of every page individually, it looks like a limit of one Wave embed per site. That may make an easy option just to display a dedicated wave in a drupal block, but the iframe issue makes that a theme issue.

Summary:

Still just a few hours into the sandbox, but it is a nice model. Basically set your application up on google-apps and then widgetize it, add it to the wave through the extension API. Same with robots. Google has some templates and examples for Java and Python code extensions and robots online at: http://code.google.com/apis/wave/embed/guide.html

Related: Whitepaper – Using Attachments in Google Wave

http://www.waveprotocol.org/whitepapers/google-wave-attachments

This is a post from Web Dev News, a site brought to you by Xavisys Web Development.

Google Wave Sandbox – Developer’s Preview

Since “Google Wave” was introduced at the Google I/O Conference in San Francisco May 27th to 28th, 2009, there has been a lot of buzz and attention surrounding the new platform. What exactly is Google Wave? According to the development team, it is the biggest upgrade to email since the introduction of the web, a type of combination between email, blog, forum comment section, instant message system, and widget board. Google Wave shows the enormous influence that Facebook is having on the future of the web – in a way, the preview looks as if the majority of Google services were integrated and remixed into an animated Facebook stream. The big differences are in the standards behind the interface: XMPP particularly allows the Wave documents to function like an instantaneous, shared whiteboard in addition to a saved multimedia document with filtered permission levels.

What is a wave?

“A wave is equal parts conversation and document. People can communicate and work together with richly formatted text, photos, videos, maps, and more.

A wave is shared. Any participant can reply anywhere in the message, edit the content and add participants at any point in the process. Then playback lets anyone rewind the wave to see who said what and when.

A wave is live. With live transmission as you type, participants on a wave can have faster conversations, see edits and interact with extensions in real-time.”

Source: http://wave.google.com/help/wave/about.html

For those that did not attend the I/O conference, the essential resource is the launch video from that day that is viewable at:

Google Wave Developer Preview at Google I/O 2009

Developing For Google Wave:

Google plans to open source much of the code behind the Google Wave platform, and one of the points confirmed is that anyone- ISPs, private groups, individuals, companies, websites, domains, will be able to operate their own Wave server based on the Wave Federation Protocols. Developers who would like to build new applications for the Wave platform should review the draft specifications and white papers available at:
http://www.waveprotocol.org/

The Google Wave API is intended to enable developers to embed Wave documents in standard web pages as well as to “extend” the platform by embedding widgets within a Wave itself. The Wave extensions allow for the embedding of virtually the entire archive of iGoogle widgets, and allow programmers to develop Java, Python, ActionScript, and other applications to add new functionality to a Wave. For more information on the Wave API, visit: http://code.google.com/apis/wave/

Related: http://googlewavedev.blogspot.com/2009/05/introducing-google-wave-apis-what-can.html

“On May 28th, the second day of Google I/O, we unveiled Google Wave as a developer preview. But, we’d never actually had non-Google developers use it, and we were eager to see how it’d play out… So, on the Friday after I/O, about 60 developers assembled down at Google HQ for the very first Google Wave API hackathon. After five hours of hacking and ad-hoc discussions with members of the Wave APIs team, there were a whopping 17 demos to show off. We were awed by how enthusiastically developers dove in to the APIs that day, and excited to see what they created. Their accomplishments were especially amazing as no one had even used the product prior to the hackathon.”

Source: http://googlewavedev.blogspot.com/2009/06/1-wave-sandbox-5-hours-17-awesome-demos.html

Examples:

Embed API – Methods to communicate w/ server:

LoadWave
SetUIConfig
AddReply
Follow

Sample Google Wave Embed Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Wave Embed API Example: Simple Wave</title>
<script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var wavePanel = new WavePanel('http://wave.google.com/a/wavesandbox.com/');
wavePanel.loadWave('wavesandbox.com!w+waveID');
wavePanel.init(document.getElementById('waveframe'));
}
</script>
</head>
<body onload="initialize()">
<div id="waveframe" style="width: 500px; height: 100%"></div>
</body>
</html>

Source:http://code.google.com/events/io/sessions/ProgrammingWithAndForGoogleWave.html

This is a post from Web Dev News, a site brought to you by Xavisys Web Development.

Understanding Google Wave Development – Part 1