Creating your first YAP App Multiple Views Programming Models ...

Download PDF
3 downloads 5382 Views 180KB Size Report
Comment
Programming Models ... You can make Ajax requests either by using the YUI. Connection Manager or ... 2 | Page http://l.yimg.com/a/i/us/pps/ydn-logo-small. png.
 

YAP Yahoo! Application Platform

 

developer.yahoo.com/yap

  The Yahoo! Application Platform (YAP) is an open, self-service, Web app environment. It allows you to reach our users

 and improve the Yahoo! user experience   by building and deploying new applications directly onto Yahoo! pages. You can write your Application frontend in HTML, CSS, JavaScript, and/or Flash and your backend in the language of your choice. With YAP, your Application can get in front of the largest daily audience on the Web. So are you ready to bring your ideas on to Yahoo!?

Creating your first YAP App  1. Download  the  sample  HTML  from http://bit.ly/oFuABw and upload it to your server.  2. Download the Gadget XML from http://bit.ly/oiWtd2 , change the YahooFullView Content element href to  point to the file you downloaded in the first step.  3. Go  to  My  Projects  page  (https://developer.apps.y ahoo.com/projects) and create a new YAP Project.  4. In  the  Project  Details  page  import  the  XML  you created in the second step.   5. Click on Preview to see your application in action.   

Here  is  another  tutorial  to  create  a  simple  Weather application ‐ http://yhoo.it/nvZPiF 

  More YAP samples at:  https://github.com/kkunal/yap‐hacks    

Multiple Views  As  seen  by  the  end  user,  a  YAP  App  has  multiple  views, Small  View  and  Canvas  View.  The  Small  View  of  an application  appears  to  end  users  as  a  module  contained within  a  Web  page.  As  the  application's  teaser,  the purpose  of  the  Small  View  is  to  draw  end  users  into  the Canvas View.  In  the  Small View,  the  code is  restricted  to HTML  or  YML.  You  cannot  specify  JavaScript  or  other languages for the Small View.  The  Canvas  View  is  the  application's  largest  and  richest interface  for  the  end  user.  Usually,  the  Canvas  View  is

1 | P a g e  

rendered  within  a  Yahoo!  landing  page.  The  application  code for the Canvas View is hosted on a server outside  of YAP.  To  specify  the  code's  location,  in  the  Gadget  XML,  enter the URL in the Canvas Content Node.   

Programming Models  In the Server‐Side model, the code for your Canvas View is  a  Web  application  that  is  hosted  by  and  runs  on  your  servers.  You  can  write  the  code  in  the  language  of  your  choice. At runtime, the YAP engine proxies requests to your  server,  adding  the  additional  information  listed  in  Parameters  Passed  to  an  Open  Application.  The  Canvas  View  of  your  application  can  access  this  additional  information programmatically.  In  the  Browser‐Side  OpenSocial  JavaScript  model,  the  application  is  written  in  JavaScript,  which  runs  on  the  browser.  Read  more  about  OpenSocial  here  ‐ http://code.google.com/apis/opensocial/    In the Browser‐Side Flash model, you can build social Flash applications  using  the  AS3  Social  SDK  (http://yhoo.it/pZMS5e)   

Ajax Requests  You  can  make  Ajax  requests  either  by  using  the  YUI  Connection  Manager  or  using  the  native  browser  XHR  object.  You  can  also  use  the  OpenSocial  gadgets.io.makeRequest  to  make  Ajax  requests  to  your  server. All the requests are proxied.  

http://l.yimg.com/a/i/us/pps/ydn‐logo‐small.png    OpenSocial Support  OpenSocial is API for accessing the user social data.  This is implemented by several social websites. YAP supports the OpenSocial  0.9  JavaScript  APIs  and  OpenSocial  0.8.1 RESTful  API.  The  code  for  your  Canvas  View  can  include calls to the OpenSocial JavaScript APIs.  You  can  use  opensocial.requestCreateActivity  to  insert  an update in to the user’s social update stream. Similarly, you can  use  opensocial.newDataRequest()  to  fetch  user’s activities or the network activities.  Opensocial  Activity  is  mapped  to  the  Yahoo!  Updates  API and Opensocial.Person/People is mapped to Yahoo! Profile and Connections. 

 

Yahoo! Markup Language (YML)  Similar  in  format  to  XML, Yahoo!  Markup  Language  (YML) provides  functionality  to  Open  Applications  in  a  safe  and standardized  fashion.  You  include  YML  tags  in  the  HTML code of an Open Application. YML tags make it easy for you to create applications that access social data, such as a list of  the  user's  friends.  Dynamic  and  secure  interactions: Several  YML  tags  provide  UI  widgets  and  and  rich interactions that normally require untrusted JavaScript. List of YML tags available.   yml:a  yml:audio  yml:customize  yml:form  yml:if‐env  yml:include  yml:message  yml:name  yml:profile‐pic  yml:pronoun  yml:share  yml:swf  yml:user‐badge  yml:friend‐selector   

 

CAJA  Since  YAP  allows  third  party  code  to  be  run  on  a  Yahoo! page,  there  is  a  security  layer  in  action  called  Caja.  Caja removes  unsafe  HTML/CSS/JavaScript.  The  cajoled (sanitized)  script  is  then  run  within  a  security  sandbox created  in  your  browser.  This  provides  a  way  to  safely include arbitrary third‐party content on our pages. So you need to make sure that your Javascript and HTML code are Caja  safe.  Caja  removes  anything  it  doesn't  understand, removes  HTML  and  CSS  that  isn't  on  a  white  list,  modify CSS rules, limiting them to a sandbox 
 and transforms JavaScript into forms known to be safe. 

  What will NOT work?  •                      • Document.write, window.event, node.attributes()  • eval, with, this, new, Javascript:void(0)  • External CSS and Javascript  • [] selectors, expression(), @import  • Some CSS Hacks  • Undeclared variables. Eg: foo = 3;  (var foo; should be declared either in the global or local  scope.) 

  

1 3

Register your Application at YDN  Define the attributes in the Gadget XML

2 | P a g e  

2 4

What should I use? • Stick to HTML 4.01 and CSS 2.1 specs.  • Use YML tags.  • Many of the common DOM operations work, such as  document.getElementById, document.createElement,  node.firstchild, etc.  •                     Test your Code at  http://www.cajadores.com/demos/testbed/      

YUI Support  YAP  supports  a  subset  of  YUI  2.8.  Other  libraries  like JQuery will not work well with Caja.    

Limited YUI 2.8 Support:  YUI Core: YAHOO Global Object, DOM Collection, Event  Utility.  YUI Utilities: Animation, Connection Manager,  DataSource, Drag and Drop, Element, ImageLoader,  Resize, Selector Utilities  YUI Library Control/Widgets: AutoComplete, Button,  Container, Menu, TabView, TreeView   

Parameters Passed to an Open Application  Following POST parameters are passed by the YAP engine  to an Application at runtime.  User information such as yap_viewer_guid,  yap_owner_guid, yap_tz, yap_jurisdiction, Session  information such as yap_viewer_access_token,  yap_viewer_access_token_secret, yap_appid,  yap_dropzone_id, yap_page_url and Authentication  information such as yap_consumer_key and  oauth_signature.  Read more at  http://developer.yahoo.com/yap/guide/yap‐params.html   

Other Things to Remember  Whenever you have made any changes to the Gadget  XML, Reload it in your Project Details page. Use the  ‘Update from Development Gadget’ button to push your  application live. When an application is pushed live,  anyone can access it using the URL.  URL for your APP Landing page is   • http://apps.yahoo.com/‐  You get the AppId from YDN when you register your  application.  Develop your application using the YAP features Push your application Live when you are done!