Kitchen Sink Sample App

The Kitchen Sink Sample App:

  • Used to demonstrate how you can open/close views in different target zones.
  • Give access for the attachment URL of an email to your App.
  • Get properties of the view which initiated the call.
  • Access per-user-per-app persistent store.

Try It Out

See Quick Start to learn how to get the full source for this example, install it, and run it in Yahoo! Mail.

Create Your Kitchen Sink App

Below, we create an app based on the Kitchen Sink sample.

  1. > ymdt create ksink -S 'Kitchen Sink'
  2. Yahoo! Mail Development Tool Version 1.31
  3. Developer server: developer.mail.yahoo.com
  4. create:
  5. Getting sample 'Kitchen Sink' into ksink/:
  6.     changed appid to 38e32c5j3gopl.
  7.     downloading ksink//config.xml. . .
  8.     downloading ksink//auth.xml. . .
  9.     downloading ksink//icon.png. . .
  10.     downloading ksink//thumbnail.png. . .
  11.     downloading ksink//views/compose.html. . .
  12.     downloading ksink//views/ksink.html. . .
  13.     downloading ksink//views/load.html. . .
  14.     downloading ksink//views/mrd.html. . .
  15.     downloading ksink//views/uninstall.html. . .
  16.     downloading ksink//assets/gb.gif. . .
  17.     downloading ksink//assets/ksink.js. . .
  18.     downloading ksink//assets/logo.gif. . .
  19.     downloading ksink//assets/mx.gif. . .
  20.     downloading ksink//assets/styleme.css. . .
  21.     downloading ksink//assets/trap_liam.swf. . .
  22.     downloading ksink//assets/us.gif. . .
  23.     downloading ksink//assets/warning.jpg. . .
  24. Done all gets for ksink/.
  25. Application '32ohi6ph68cpm' created.
  26. NOTE: Your application has been created.
  27. You no longer need to run ymdt create for this application.
  28. Use ymdt put to upload files instead.
  29. Starting operation at 14:27:26
  30.     uploading ksink/auth.xml. . .
  31.     uploading ksink/config.xml. . .
  32.     uploading ksink/icon.png. . .
  33.     uploading ksink/thumbnail.png. . .
  34.     uploading ksink/assets/gb.gif. . .
  35.     uploading ksink/assets/ksink.js. . .
  36.     uploading ksink/assets/logo.gif. . .
  37.     uploading ksink/assets/mx.gif. . .
  38.     uploading ksink/assets/styleme.css. . .
  39.     uploading ksink/assets/trap_liam.swf. . .
  40.     uploading ksink/assets/us.gif. . .
  41.     uploading ksink/assets/warning.jpg. . .
  42.     uploading ksink/views/compose.html. . .
  43.     uploading ksink/views/ksink.html. . .
  44.     uploading ksink/views/load.html. . .
  45.     uploading ksink/views/mrd.html. . .
  46.     uploading ksink/views/uninstall.html. . .
  47. Done all puts for ksink/.
> ymdt create ksink -S 'Kitchen Sink'
Yahoo! Mail Development Tool Version 1.31
Developer server: developer.mail.yahoo.com
create:
Getting sample 'Kitchen Sink' into ksink/:
    changed appid to 38e32c5j3gopl.
    downloading ksink//config.xml. . .
    downloading ksink//auth.xml. . .
    downloading ksink//icon.png. . .
    downloading ksink//thumbnail.png. . .
    downloading ksink//views/compose.html. . .
    downloading ksink//views/ksink.html. . .
    downloading ksink//views/load.html. . .
    downloading ksink//views/mrd.html. . .
    downloading ksink//views/uninstall.html. . .
    downloading ksink//assets/gb.gif. . .
    downloading ksink//assets/ksink.js. . .
    downloading ksink//assets/logo.gif. . .
    downloading ksink//assets/mx.gif. . .
    downloading ksink//assets/styleme.css. . .
    downloading ksink//assets/trap_liam.swf. . .
    downloading ksink//assets/us.gif. . .
    downloading ksink//assets/warning.jpg. . .
Done all gets for ksink/.
Application '32ohi6ph68cpm' created.
NOTE: Your application has been created.
You no longer need to run ymdt create for this application.
Use ymdt put to upload files instead.
Starting operation at 14:27:26
    uploading ksink/auth.xml. . .
    uploading ksink/config.xml. . .
    uploading ksink/icon.png. . .
    uploading ksink/thumbnail.png. . .
    uploading ksink/assets/gb.gif. . .
    uploading ksink/assets/ksink.js. . .
    uploading ksink/assets/logo.gif. . .
    uploading ksink/assets/mx.gif. . .
    uploading ksink/assets/styleme.css. . .
    uploading ksink/assets/trap_liam.swf. . .
    uploading ksink/assets/us.gif. . .
    uploading ksink/assets/warning.jpg. . .
    uploading ksink/views/compose.html. . .
    uploading ksink/views/ksink.html. . .
    uploading ksink/views/load.html. . .
    uploading ksink/views/mrd.html. . .
    uploading ksink/views/uninstall.html. . .
Done all puts for ksink/.

Install and Run Your App in Yahoo! Mail Beta

This app only works in the new Yahoo! Mail beta. If you are not already using Yahoo! Mail beta, go to http://features.mail.yahoo.com and click on 'TRY IT NOW' button. Logout and Login into your Yahoo! Mail beta and agree to the terms to start using beta.

After logging into Yahoo! Mail, notice the Applications Pane in the lower left corner of the page. Click the gear icon in the upper right-hand corner of the Applications Pane.

This launches the Yahoo! Mail Gallery. Find the app named 'Kitchen Sink (private)' with your Yahoo! ID listed as the developer. It is marked '(private)' because only you can see it while it's under development.

Click the 'Add' button, then close the Gallery. You should now see a 'Kitchen Sink (private)' app in the Applications Pane. Click its icon and the app should show show you a tab with the App opened.

Close/Open Views in App

You can use our Application.closeView API and Application.openView API to open/close Views in different target zones. If the view object passed to closeView function is NULL, it will close the view intiating the call.

A few examples to open/close views in different target zones are listed below. You can try them out, by clicking on the buttons 'Close', 'Open Dialog', 'Open Tab', 'Close that tab' and 'Close Dialog' after launching the App from the Applications pane. 

  1. Compose an email to joe:
  2. <input id="body"><button onclick="openmail.Mail.compose({ to: 'joe@joe.joe', subject: 'hi joe', body: document.getElementById('body').value })">Compose</button>
  3. <hr>
  4. Close self:
  5.     <button onclick="openmail.Application.closeView()">Close</button>
  6. <hr>
  7. Open another tab with different content:     
  8.     <button onclick='openmail.Application.openView(
  9.         { id: "otherTab", view: "ksink.html", target: "tab", title:"Y! Groups", 
  10.           context:"tab", parameters: {text:"data for the tab"} 
  11.         }
  12.         )'>Open Tab    
  13.     </button>
  14. <br>
  15. Open a dialog: 
  16.     <button onclick='openmail.Application.openView(        
  17.         { id: "otherDialog", view: "ksink.html", target: "dialog", height: 500, parameters: {textData:"some data for the dialog"}, 
  18.             title:"Bunny!", context:"dialog"
  19.         }
  20.         )'>Open Dialog
  21.     </button>
  22. <br>
  23. Open a dialog and close it 10s later:
  24.     <button onclick='openmail.Application.openView(
  25.         { id:"otherDialog", view: "ksink.html", target: "dialog", parameters: {textdata:"this dialog will close itself"}, 
  26.           title:"Self Closing", context: "dialog self-closed"} );
  27.           setTimeout("openmail.Application.closeView({ id: \"otherDialog\" })",10000
  28.         )'>Open Dialog
  29.     </button><br>
  30. <hr>
  31. <button onclick='openmail.Application.closeView({ id: "otherTab" })'>Close that tab</button> 
  32. <button onclick='openmail.Application.closeView({ id: "otherDialog" })'>Close Dialog</button><br>
  33. <hr>
  34.  
  35.  
Compose an email to joe:
<input id="body"><button onclick="openmail.Mail.compose({ to: 'joe@joe.joe', subject: 'hi joe', body: document.getElementById('body').value })">Compose</button>
<hr>
Close self:
    <button onclick="openmail.Application.closeView()">Close</button>
<hr>
Open another tab with different content:     
    <button onclick='openmail.Application.openView(
        { id: "otherTab", view: "ksink.html", target: "tab", title:"Y! Groups", 
          context:"tab", parameters: {text:"data for the tab"} 
        }
        )'>Open Tab    
    </button>
<br>
Open a dialog: 
    <button onclick='openmail.Application.openView(        
        { id: "otherDialog", view: "ksink.html", target: "dialog", height: 500, parameters: {textData:"some data for the dialog"}, 
            title:"Bunny!", context:"dialog"
        }
        )'>Open Dialog
    </button>
<br>
Open a dialog and close it 10s later:
    <button onclick='openmail.Application.openView(
        { id:"otherDialog", view: "ksink.html", target: "dialog", parameters: {textdata:"this dialog will close itself"}, 
          title:"Self Closing", context: "dialog self-closed"} );
          setTimeout("openmail.Application.closeView({ id: \"otherDialog\" })",10000
        )'>Open Dialog
    </button><br>
<hr>
<button onclick='openmail.Application.closeView({ id: "otherTab" })'>Close that tab</button> 
<button onclick='openmail.Application.closeView({ id: "otherDialog" })'>Close Dialog</button><br>
<hr>
 
 

getAttachmentUrl in App

Use our getAttachmentUrl API to access the time sensitive URL of a message's attachment content. To get to the attachment content, look for 'disposition' value 'attachment' in message's mime part and retrieve the static 'url' value. 'url' can then be used with getAttachmentUrl API to get to the actual content. You must specify <format>full</format> in your config, for the <data><mail_message>, to get access to the data in response.data.part array.

The view's load handler uses getParameters() to retrieve the context and parameters arguments originally passed to openView(). 

  1. function getAttachmentUrl(){
  2.     openmail.Application.getParameters(function(o){
  3.          if (!o){
  4.             alert("Response failed");
  5.             return;
  6.          }
  7.          if (o.data && o.data.part){
  8.            var part, url;
  9.            for ( part in o.data.part){
  10.                if (o.data.part[part].disposition == "attachment"){
  11.                    url = o.data.part[part].url;
  12.                    var args = {url: url};
  13.                     YAHOO.util.Dom.get('attachurl').value = "Fetching...";
  14.                    openmail.Application.getAttachmentUrl(args , function(data){
  15.                         YAHOO.util.Dom.get('attachurl').value = data.url ? data.url : (data.error? data.error : "error");
  16.                     });
  17.                    return;
  18.                 } //if
  19.            }//for
  20.              YAHOO.util.Dom.get('attachurl').value = "There is no attachment data.";
  21.         } //if
  22.     });
  23. }
  24.  
  25.  
function getAttachmentUrl(){
    openmail.Application.getParameters(function(o){
         if (!o){
            alert("Response failed");
            return;
         }
         if (o.data && o.data.part){
           var part, url;
           for ( part in o.data.part){
               if (o.data.part[part].disposition == "attachment"){
                   url = o.data.part[part].url;
                   var args = {url: url};
                    YAHOO.util.Dom.get('attachurl').value = "Fetching...";
                   openmail.Application.getAttachmentUrl(args , function(data){
                        YAHOO.util.Dom.get('attachurl').value = data.url ? data.url : (data.error? data.error : "error");
                    });
                   return;
                } //if
           }//for
             YAHOO.util.Dom.get('attachurl').value = "There is no attachment data.";
        } //if
    });
}
 
 

getParameters in App

Use our getParameters API to retrieve properties associated with the view that invoked the function.

Code for this view includes a button that opens another instance of itself, with application-defined context and additional parameters. The view's load handler uses getParameters() to retrieve the context and parameters arguments originally passed to openView(). 

  1. <body>
  2. ...
  3.     <button onclick='openmail.Application.openView({
  4.     id:"otherDialog", view:"full", target:"dialog", title:"Bunny!",
  5.     context:"button-launched view",
  6.     parameters:{ my: 1; custom: "JSON"; stuff:null }
  7.  
  8.     })'>
  9.     Open Dialog
  10.  
  11.     </button>
  12. </body>
  13. <script>
  14. ...
  15. //load handler
  16. function refresh() {
  17.     openmail.Application.getParameters(function(args){
  18.     // if view opened by button above:
  19.     //    args.context is "button-launched view"
  20.     //    args.data is { my: 1; custom: "JSON"; stuff:null }
  21.     var ta = document.createElement("textarea");
  22.     ta.value = YAHOO.lang.JSON.stringify(args);
  23.     ta.style.width="100%";
  24.     ta.style.height="100px";
  25.     document.getElementById("params").appendChild(ta);
  26.  
  27.     });
  28.  
  29. }
  30. ...
  31.  
  32. </script>
  33.  
  34.  
<body>
...
    <button onclick='openmail.Application.openView({
    id:"otherDialog", view:"full", target:"dialog", title:"Bunny!",
    context:"button-launched view",
    parameters:{ my: 1; custom: "JSON"; stuff:null }
 
    })'>
    Open Dialog
 
    </button>
</body>
<script>
...
//load handler
function refresh() {
    openmail.Application.getParameters(function(args){
    // if view opened by button above:
    //    args.context is "button-launched view"
    //    args.data is { my: 1; custom: "JSON"; stuff:null }
    var ta = document.createElement("textarea");
    ta.value = YAHOO.lang.JSON.stringify(args);
    ta.style.width="100%";
    ta.style.height="100px";
    document.getElementById("params").appendChild(ta);
 
    });
 
}
...
 
</script>
 
 

getData, setData and removeData in App

Use our getData, setData and removeData APIs to manipulate the keys in the per-app-per-user persistent store.

You can try these options by clicking on 'get test data', 'set test data' and 'remove test data' buttons when you lauch the app. 

  1. <html>
  2. Set Example Data (mykey1=myval1, mykey2=myval2, mykey3=myval3), mykey2 set to expire in 30s: <button onclick='testSetData()'>set test data</button><br>
  3. Get Example Data : <button onclick='testGetData()'>get test data</button><br>
  4. Remove Example Data (remove mykey3): <button onclick='testRemoveData()'>remove test data</button><br>
  5. </html>
  6. ... 
  7. function testSetData() {
  8.      var ttl = 30;
  9.      openmail.Application.setData( {
  10.        keys: {
  11.          mykey1: "myval1",
  12.          mykey2: "myval2",
  13.          mykey3: "myval3"
  14.        },
  15.        ttl: { mykey2: ttl }
  16.      },
  17.        function(result) {
  18.          if(result.error && result.error != YAHOO.openmail.ERR_NONE)
  19.              alert("Error calling setData(): " + result.errorMsg + "\n");
  20.          else
  21.              alert("Called setData with:" + "\n"  +
  22.                    "mykey1=myval1" + "\n" +
  23.                    "mykey2=myval2 with ttl=" + ttl + "\n" +
  24.                    "mykey3=myval3" );
  25.        }
  26.      );
  27. }
  28.  
  29. function testGetData() {
  30.     openmail.Application.getData(
  31.         { keys: ["mykey1", "mykey2", "mykey3" ] },
  32.         function(result) {
  33.           var errors = result.errorCode;
  34.           alert( "mykey1=" + result.data["mykey1"] +
  35.                  ", errorCode=" + errors["mykey1"] + "\n" +
  36.                  "mykey2=" + result.data["mykey2"] +
  37.                  ", errorCode=" + errors["mykey2"] + "\n" +
  38.                  "mykey3=" + result.data["mykey3"] +
  39.                  ", errorCode=" + errors["mykey3"] + "\n" );
  40.         }
  41.     );
  42. }
  43.  
  44. function testRemoveData() {
  45.     openmail.Application.removeData(
  46.         { keys: ["mykey3"] },
  47.         function(result) {
  48.           if(result.error && result.error != YAHOO.openmail.ERR_NONE)
  49.               alert("Error calling removeData(): " + result.errorMsg + "\n");
  50.           else
  51.               alert("No error detected calling removeData().");
  52.         }
  53.     );
  54. }
  55.  
  56.  
<html>
Set Example Data (mykey1=myval1, mykey2=myval2, mykey3=myval3), mykey2 set to expire in 30s: <button onclick='testSetData()'>set test data</button><br>
Get Example Data : <button onclick='testGetData()'>get test data</button><br>
Remove Example Data (remove mykey3): <button onclick='testRemoveData()'>remove test data</button><br>
</html>
... 
function testSetData() {
     var ttl = 30;
     openmail.Application.setData( {
       keys: {
         mykey1: "myval1",
         mykey2: "myval2",
         mykey3: "myval3"
       },
       ttl: { mykey2: ttl }
     },
       function(result) {
         if(result.error && result.error != YAHOO.openmail.ERR_NONE)
             alert("Error calling setData(): " + result.errorMsg + "\n");
         else
             alert("Called setData with:" + "\n"  +
                   "mykey1=myval1" + "\n" +
                   "mykey2=myval2 with ttl=" + ttl + "\n" +
                   "mykey3=myval3" );
       }
     );
}
 
function testGetData() {
    openmail.Application.getData(
        { keys: ["mykey1", "mykey2", "mykey3" ] },
        function(result) {
          var errors = result.errorCode;
          alert( "mykey1=" + result.data["mykey1"] +
                 ", errorCode=" + errors["mykey1"] + "\n" +
                 "mykey2=" + result.data["mykey2"] +
                 ", errorCode=" + errors["mykey2"] + "\n" +
                 "mykey3=" + result.data["mykey3"] +
                 ", errorCode=" + errors["mykey3"] + "\n" );
        }
    );
}
 
function testRemoveData() {
    openmail.Application.removeData(
        { keys: ["mykey3"] },
        function(result) {
          if(result.error && result.error != YAHOO.openmail.ERR_NONE)
              alert("Error calling removeData(): " + result.errorMsg + "\n");
          else
              alert("No error detected calling removeData().");
        }
    );
}
 
 

You can get the complete source for the Kitchen Sink app by running ymdt get -S 'Kitchen Sink'.