Just wanted to say thanks to Ross and Steve for contributing their work on widget templates, I found it really simple to create a Twitter widget using it - take a look and see what you think.
I think the system I've put in to replace XSL processing is kind-of-OK but eventually we may want to use something a bit more sophisticated like JSRender instead. S On 12 Jan 2012, at 17:18, [email protected] wrote: > Author: scottbw > Date: Thu Jan 12 17:18:09 2012 > New Revision: 1230648 > > URL: http://svn.apache.org/viewvc?rev=1230648&view=rev > Log: > Created an example Twitter widget using the Browse template to help > demonstrate how the templates work - I've included comments in the properties > file explaining why each property is being overridden. See WOOKIE-295. > > Added: > incubator/wookie/trunk/widgets/templates/widgets/twitter/ > > incubator/wookie/trunk/widgets/templates/widgets/twitter/content_footer.html > > incubator/wookie/trunk/widgets/templates/widgets/twitter/content_header.html > incubator/wookie/trunk/widgets/templates/widgets/twitter/style/ > > incubator/wookie/trunk/widgets/templates/widgets/twitter/style/screen.css.add > incubator/wookie/trunk/widgets/templates/widgets/twitter/widget.properties > > Added: > incubator/wookie/trunk/widgets/templates/widgets/twitter/content_footer.html > URL: > http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/templates/widgets/twitter/content_footer.html?rev=1230648&view=auto > ============================================================================== > --- > incubator/wookie/trunk/widgets/templates/widgets/twitter/content_footer.html > (added) > +++ > incubator/wookie/trunk/widgets/templates/widgets/twitter/content_footer.html > Thu Jan 12 17:18:09 2012 > @@ -0,0 +1 @@ > +<a class="button" href="#help" data-role="button" data-rel="dialog" > data-transition="pop" data-icon="info">Help</a> > > Added: > incubator/wookie/trunk/widgets/templates/widgets/twitter/content_header.html > URL: > http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/templates/widgets/twitter/content_header.html?rev=1230648&view=auto > ============================================================================== > --- > incubator/wookie/trunk/widgets/templates/widgets/twitter/content_header.html > (added) > +++ > incubator/wookie/trunk/widgets/templates/widgets/twitter/content_header.html > Thu Jan 12 17:18:09 2012 > @@ -0,0 +1 @@ > +<h3>${widget.name}</h3> > > Added: > incubator/wookie/trunk/widgets/templates/widgets/twitter/style/screen.css.add > URL: > http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/templates/widgets/twitter/style/screen.css.add?rev=1230648&view=auto > ============================================================================== > --- > incubator/wookie/trunk/widgets/templates/widgets/twitter/style/screen.css.add > (added) > +++ > incubator/wookie/trunk/widgets/templates/widgets/twitter/style/screen.css.add > Thu Jan 12 17:18:09 2012 > @@ -0,0 +1,62 @@ > +/* > + * Licensed to the Apache Software Foundation (ASF) under one or more > + * contributor license agreements. See the NOTICE file distributed with > + * this work for additional information regarding copyright ownership. > + * The ASF licenses this file to You under the Apache License, Version 2.0 > + * (the "License"); you may not use this file except in compliance with > + * the License. You may obtain a copy of the License at > + * > + * http://www.apache.org/licenses/LICENSE-2.0 > + * > + * Unless required by applicable law or agreed to in writing, software > + * distributed under the License is distributed on an "AS IS" BASIS, > + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. > + * See the License for the specific language governing permissions and > + * limitations under the License. > + */ > + > +/* > + * These are some additional CSS properties we've added just for the Twitter > + * widget. These will be appended to the stylesheet for the widget. > + */ > + > + > +/* > + * Override default ui background with a nice turquoise > + */ > +.ui-page { > + background-color:#008D99; > + background-image: none; > +} > + > +.tweet { > + font: 100% Georgia, serif; > + color: #085258; > +} > + > +.tweet_list { > + border-radius: 0.5em; > + list-style: none; > + margin: 0; > + padding: 0; > + overflow-y: hidden; > + background-color: #8ADEE0; > +} > + > +.tweet_list li { > + overflow-y: auto; > + overflow-x: hidden; > + padding: 0.5em; > + list-style-type: none; > +} > + > +.tweet_list .tweet_avatar { > + padding-right: .5em; float: left; > +} > + > +/* > + * Override slightly annoying text shadow from JQMobile > + */ > +.tweet_text { > + text-shadow: none; > +} > \ No newline at end of file > > Added: > incubator/wookie/trunk/widgets/templates/widgets/twitter/widget.properties > URL: > http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/templates/widgets/twitter/widget.properties?rev=1230648&view=auto > ============================================================================== > --- > incubator/wookie/trunk/widgets/templates/widgets/twitter/widget.properties > (added) > +++ > incubator/wookie/trunk/widgets/templates/widgets/twitter/widget.properties > Thu Jan 12 17:18:09 2012 > @@ -0,0 +1,60 @@ > +template.name=browse > +widget.shortname=twitter > +widget.name=Twitter > +widget.description=See whats happening on Twitter > +widget.help=<p>Initially this widget displays the most recent tweets in the > Twitter timeline.</p> <p>You can either click on their icon, or expand the > search form and enter a twitter screen name, to see the most recent tweets > from a particular person.</p><p>Alternatively, if you leave the search form > blank, this will show the public timeline again.</p> > + > +# > +# The name of the XML element that represents a single item. In a Twitter > XML API call, each tweet is in an element called <status>, so this > +# is what we put here. > +# type: string > +# > +browse.item.name="status" > + > +# The URL from which to retrieve data for the browse index. We override this > with the public timeline API URL for Twitter, so > +# this will give us a mix of the latest public tweets > +# > +# type: string > +# variables: sort = the sort term for APIs that support it > +# order = the sort order for APIs that support it > +browse.index.url="http://api.twitter.com/1/statuses/public_timeline.xml"; > + > +# The URL from which to retrieve search data. > +# We override this here with the user_timeline API URL for twitter, > including the screenname as the query > +# > +# type: string > +# variables: query = query string entered into the search form > +# sort = the sort term for APIs that support it > +# order = the sort order for APIs that support it > +browse.search.url="http://api.twitter.com/1/statuses/user_timeline.xml?screen_name="; > + query + "&include_entities=true" > + > +# > +# The template string to use for the collection of items to browse. This is > used to hold > +# the set of items to display. We override this to set the class to > "tweet_list" and use a UL rather > +# than a DIV > +# > +# type: string > +# > +browse.collection.template = "<div id='results' > data-role='collapsible-set'><ul class='tweet_list'>${ITEMS}</ul></div>" > + > +# > +# The template string to use for item summaries, representing a single > record but before > +# the item detail has been retrieved. We override this to provide all the > info in the summary > +# and not the detail template - this is because the Twitter API is rate > limited, and we can > +# populate the whole thing directly in one call. > +# > +# Note the OnClick event handler that triggers a search for the user by > their screen_name. This > +# is missing quotes as these are added at some point in the processing of > the parameter - if you > +# include a quote or an escape character then between Ant and JQuery > something will go wrong :( > +# (Still, it works as is) > +# > +# type: string > +# > +browse.item.summary.template = <li class='tweet result' wid='${ID}'><a > href='#' > onclick=${widget.shortname}_browse_controller.search('${SCREEN_NAME}')><img > class='tweet_avatar' alt='Avatar for ${SCREEN_NAME}; click to read more > tweets from this user' title='See more tweets from ${SCREEN_NAME}' > src='${PROFILE_IMAGE_URL}'></a><span > class='tweet_text'>${TEXT}</span></b><div class='detail'></div></li> > + > +# > +# The names of the elements to map into the template placeholders. E.g. if > it contains "title", then $TITLE in the template > +# would be replaced by the content of the <title> element in the XML data. > +# In our case these are the important elements returned by the Twitter API. > +# > +browse.item.elements = > "id,name,screen_name,text,profile_image_url,created_at,source" > >
