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"
