Geekly Articles each Day
📜 ⬆️ ⬇️

Drop wave

image
  Picture from dreamstime.com


As you already know, probably one of the merits of the Google Wave project is its openness. And not only in terms of the availability of source codes and the documentation of the protocol. But also in the fact that it is possible to use the “waves” not only on the Google wave-server (i.e., not only through the Google “client”). You can work with the wave right on your site!

Yes, yes, I know - now you are throwing me rotten pineapples screaming, “we are not allowed into the sandbox, and this one is talking about openness!” Suffer, guys, everything will be - now, as far as I know, the remnants of 20,000 invites are sent to the “sandbox For developers.
And from September 30, they will also be distributing 100 thousand accounts already in the working Wave.wego.google.com. As they say, "we will all be there." :)
So what am I talking about? Oh yes. That all will be in the Wave and the Wave will be everywhere.
')
I'll try to talk about the possibilities of embedding “waves” of Google Wave using the example of CMS Drupal . Although in fact it does not matter whether it is this CMS or any other. It doesn't even matter if this is a site using some kind of Content Management System. Google provides an open API for embedding “waves” into any html pages. While the API is very simple, let's hope that the whole thing will develop further.

And, until it started, I’m honestly warning you that you can watch the embedded wave only if you have access to the sandbox. Cruel, I know.
But this is temporary, the guys from Google are already in the know and are working hard on anonymous access to the embed wave.

So, what do we have for August 2009?
For starters, here are two official links:
Manual - code.google.com/intl/en-RU/apis/wave/embed/guide.html
Help - code.google.com/intl/en-RU/apis/wave/embed/reference.html

1. In order not to retell the official manual, let's look at the embedding by example.

  <! 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>
 // Add javascript with the Embed Wave API. 
     <script src = "http://wave-api.appspot.com/public/embed.js" type = "text / javascript"> </ script>

     <script type = "text / javascript">
 // Initialization function of the wave that will be called after the page loads.
     function initialize () {
       // Create a new instance of the WavePanel class, indicating to it the address of the wave server.
       // While using the address of the developer "sandbox". 
       // When other wave servers appear, you can specify them here. 
       // Do not forget to specify a slash at the end of the address.
       var wavePanel = new WavePanel ('http://wave.google.com/a/wavesandbox.com/');
	   // Load a specific wave. 
           // It is determined by its waveID (looks something like "2Bi7arMxYM% 25A").
       wavePanel.loadWave ('wavesandbox.com! w + waveID');
	   // Finally, insert the wave into a div with id "waveframe"
       wavePanel.init (document.getElementById ('waveframe'));
     }
     </ script>
   </ head>
  
   <body onload = "initialize ()">
 // This iframe will be placed in this div with your wave.
 // It is advisable to set a sufficient width for the div, 
 // so that avatars of all participants of the wave fit,
 // therefore it is usually better to set width right away: 100%;
     <div id = "waveframe" style = "width: 500px; height: 100%"> </ div>
   </ body>
 </ html>


Here is a sample code given in the manual (I just added my own explanations). Take it, just copy it and paste it into your material (node) on Drupal. Just put a real wave id instead of waveID. And do not forget to enable the “Full HTML” input filter (this removes filtering of unwanted html tags in Drupal if someone is not up to date).

Everything will work. The wave will be shown in the iframe on your page, you can easily add, delete and edit the “blips” (ie, individual messages within the wave). You can still create affiliated waves (wavelets, “waves”, “wavelets” - Russian terminology is still well-established).

2. But in fact, for embedding, even this code is enough (we can remove the definition of the DOCTYPE and the html tag):

  <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 + 2Bi7arMxYM% 25A');
       wavePanel.init (document.getElementById ('waveframe'));
     }
     </ script>
   <body onload = "initialize ()">
     <div id = "waveframe" style = "width: 100%; height: 100%"> </ div>
   </ body>


3. Go ahead. Somehow I do not want to have two body tags in the source code of the page. Therefore, we will remake our code by adding at the same time some of the Wave Embed API features: we will insert buttons and color the wave.

  <script src = "http://wave-api.appspot.com/public/embed.js" type = "text / javascript"> </ script>
 <div id = "waveframe" style = "width: 100%; height: 100%"> </ div>
 // Add the buttons "Connect to this wave" and "Answer" 
 // ("Follow this wave" and "Reply")
 <form id = "comment_form"> 
     <button type = "button" onclick = "wavePanel.addReply ()"> Talk here </ button> 
     <button type = "button" onclick = "wavePanel.addParticipant ()"> Follow the rabbit </ button> 
 </ form> 

 <script> 
 var wavePanel = new WavePanel ('https://wave.google.com/a/wavesandbox.com/');
 // Set up the design for the site design (background, text, font, size / font size). 
 // Font size can only be specified in pt or px.
 wavePanel.setUIConfig ('# 446666', '#cceedd', 'verdana', '9pt');

 wavePanel.loadWave ('wavesandbox.com! w + i7arMxYM% A');
 wavePanel.init (document.getElementById ('waveframe')); 
 </ script>


When the buttons are pressed, the wavePanel.addReply () and wavePanel.addParticipant () functions are performed. The first button adds a new “blip” to the wave, and the second adds the current user to the participants of this wave. But after all, a new “blip” could have been added before, you say. Yes, but this button adds it as an answer to the initial wave message.
And the important note on the second button is that it adds to the participants a wave not a Drupal user (the wave about Drupal knows nothing), but the current user Waves. Therefore, for this feature to work, you must be logged in to Google Wave.

Note: as you noticed, in the first version, wavePanel.init () was called on the onload event. This was necessary so that before inserting the wave the whole page was rendered, the DOM was built, all external scripts and images were inserted. Probably, the second option, where we removed this check, is not the best solution and in some cases may lead to some consequences.
“But for now everything works,” said the operator of the Chernobyl nuclear power plant, snapping switches.

4. Studying the Wave Embed API shows us that wavePanel.loadWave () and wavePanel.init () have the ability to call callback functions. Why this is needed in the national economy is not very clear. But it is possible to suggest, for example, such an option - to issue a welcome message when the wave is loaded using the site username.

  <script src = "http://wave-api.appspot.com/public/embed.js" type = "text / javascript"> </ script>
 <div id = "waveframe" style = "width: 100%; height: 100%"> </ div>
 // Add an element in which we will display some value, for example, the username of the Drupal site. 
 // Or his wave address, if he indicated it in his profile when registering on your site.  Or something else.
 // It’s not necessary to display all this here; you can use any element on the page.
 <span id = "waveuser"> <? php global $ user;  print $ user-> name;?> </ span>
 
 <form id = "comment_form"> 
     <button type = "button" onclick = "wavePanel.addReply ()"> Reply for all </ button> 
     <button type = "button" onclick = "wavePanel.addParticipant ()"> Come on, citizen </ button> 
 </ form> 
 <script> 
 var wavePanel = new WavePanel ('https://wave.google.com/a/wavesandbox.com/');
 wavePanel.setUIConfig ('# 446666', '#cceedd', 'verdana', '9pt');
 // For example, add a function call with a greeting to the user, in which we use his name.  Similarly, you can add a callback to wavePanel.init ()
 wavePanel.loadWave ('wavesandbox.com! w + i7arMxYM% A', welcomeMsg ("Welcome to World Wide Wave,"));
 wavePanel.init (document.getElementById ('waveframe'));
 
 // Actually callback function, which in this example forms a welcome message
 function welcomeMsg (text) {
   var item = document.getElementById ("waveuser");
   if (item) {
     item.innerHTML = text + item.innerHTML + "!";
   }
 }
 </ script>


As a result, when the wave is loaded, our user will receive a message like “Welcome to World Wide Wave, Neo!”. That, in general, corresponds to the new reality.

Note: you could get the username for the welcome message in other ways. But here is just an example, you can do it your way.

5. Another, more useful in my opinion, the use of callback is as follows. As I have already said, if you now build in a wave on a page of a site, then only account holders will see it in the sandbox. Regular visitors will stumble upon a "stub" with a message about the need to login to wavesandbox.com. In order not to embarrass mere mortals with this distressing inequality, you can use this trick:

a. Make the div that is initially invisible in which the wave will be displayed.
  <div id = "waveframe" style = "width: 100%; height: 100%; visibility: hidden;"> </ div>

b. And when the wave is initialized, we call the callback function that makes this “visible” div.
  window.wavePanel.init (document.getElementById ('waveframe'), initCallback); 
 function initCallback () { 
   document.getElementById ("waveframe"). style.visibility = "visible"; 
 }


Thus, if you are not logged in to the sandbox, you will not see any trace of a wave on the page.

On this humane and optimistic note, allow me to finish the allowed speeches today. Next time we can talk about modules for Drupal, which should make the embedding process more convenient and flexible.

ps We have not yet used the getFrameId () function from the Embed API, which allows us to get the identifier of the generated iframe. But I still do not understand how it could be used wisely.

A few more useful links to the topic "Drupal and Google Wave":
- discussion in the group “Google Wave Russia”
- discussion on the site Drupal.ru
- discussion group at the office of Drupal.org

Upd.: They asked for screenshots. For now, keep this:
image

Source: https://habr.com/ru/post/66509/

More articles:


All Articles