On 12 January 2012 17:38, Scott Wilson <[email protected]> wrote: > 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.
Thanks cc'ing the orginating project list for info. I've been watching your commits go by - look like some great improvements, thanks. I'll have a play with them soon. > 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. +1 Ross > > 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" >> >> > -- Ross Gardler (@rgardler) Programme Leader (Open Development) OpenDirective http://opendirective.com
