Hello World Sample App

The Hello World sample app:

  • Launches a tab view when the app's icon is clicked.
  • Invokes a Yahoo! Mail API from the launched view.

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.

config.xml

This config.xml tells Yahoo! Mail to load your app's views/main.html in a tab when the app's icon is clicked. 

  1. <?xml version="1.0"?>
  2. <openmail_app_config version="2">
  3.   <name>Hello World</name>
  4.   <description>Hello World Sample App</description>
  5.   <data/>
  6.   <events>
  7.     <click>
  8.       <action>
  9.         <launch>
  10.           <view>main.html</view>
  11.           <target_zone>tab</target_zone>
  12.         </launch>
  13.       </action>
  14.     </click>
  15.   </events>
  16. </openmail_app_config>
  17.  
<?xml version="1.0"?>
<openmail_app_config version="2">
  <name>Hello World</name>
  <description>Hello World Sample App</description>
  <data/>
  <events>
    <click>
      <action>
        <launch>
          <view>main.html</view>
          <target_zone>tab</target_zone>
        </launch>
      </action>
    </click>
  </events>
</openmail_app_config>
 

views/main.html

main.html demonstrates how to pull in the Yahoo! Mail APIs and then use one one of the API calls, Mail.compose. When the "Compose" button is clicked, the form invokes Mail.compose, which will open the mail composer with some fields prepopulated from the form.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4.    <!--  load local asset yui for ssl support -->
  5.    <script src="/yahoo/mail/combo?2.9.0/build/yahoo/yahoo-min.js&2.9.0/build/dom/dom-min.js"></script>
  6.  
  7.    <script src="http://mail.yimg.com/nq/om/api/1.1.19/om-min.js"></script>
  8. </head>
  9.  
  10. <body>
  11. <textarea id="body" cols="60" rows="10">Enter some text and press the <b>bold</b> compose button.</textarea>
  12. <p/>
  13. <button onclick="demoCompose()">compose</button>
  14. <input type="checkbox" value="rich" name="rich" id="richtext"/> Rich text
  15.  
  16. <script>
  17. function demoCompose(){
  18.     var bodyTxt = YAHOO.util.Dom.get('body').value;
  19.     var richText = YAHOO.util.Dom.get('richtext').checked;
  20.     var mailBlob = {
  21.         to: 'hello@to.com',
  22.         cc: 'hello@cc.com',
  23.         bcc: 'hello@bcc.com',
  24.         subject: 'hello world',
  25.         html: richText,
  26.         body: bodyTxt
  27.     };
  28.     openmail.Mail.compose( mailBlob );
  29. }
  30. </script>
  31. </body>
  32. </html>
  33.  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <!--  load local asset yui for ssl support -->
   <script src="/yahoo/mail/combo?2.9.0/build/yahoo/yahoo-min.js&2.9.0/build/dom/dom-min.js"></script>
 
   <script src="http://mail.yimg.com/nq/om/api/1.1.19/om-min.js"></script>
</head>
 
<body>
<textarea id="body" cols="60" rows="10">Enter some text and press the <b>bold</b> compose button.</textarea>
<p/>
<button onclick="demoCompose()">compose</button>
<input type="checkbox" value="rich" name="rich" id="richtext"/> Rich text
 
<script>
function demoCompose(){
    var bodyTxt = YAHOO.util.Dom.get('body').value;
    var richText = YAHOO.util.Dom.get('richtext').checked;
    var mailBlob = {
        to: 'hello@to.com',
        cc: 'hello@cc.com',
        bcc: 'hello@bcc.com',
        subject: 'hello world',
        html: richText,
        body: bodyTxt
    };
    openmail.Mail.compose( mailBlob );
}
</script>
</body>
</html>