You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@wookie.apache.org by rg...@apache.org on 2013/02/19 01:13:10 UTC
svn commit: r1447560 - in /wookie/trunk/widgets/templates: settings/
settings/scripts/ testWidgets/settingsTestWidget/
Author: rgardler
Date: Tue Feb 19 00:13:10 2013
New Revision: 1447560
URL: http://svn.apache.org/r1447560
Log:
A settings template that injects a settings page into any other template and allows settings forms to be dynamically defined (note this is a rewrite of the original widget-templates settings template)
Added:
wookie/trunk/widgets/templates/settings/
wookie/trunk/widgets/templates/settings/content_primary.html
wookie/trunk/widgets/templates/settings/readme.txt
wookie/trunk/widgets/templates/settings/scripts/
wookie/trunk/widgets/templates/settings/scripts/settings_controller.js
wookie/trunk/widgets/templates/settings/settings.html
wookie/trunk/widgets/templates/settings/settings_primary.html
wookie/trunk/widgets/templates/settings/template_build.xml
wookie/trunk/widgets/templates/testWidgets/settingsTestWidget/
wookie/trunk/widgets/templates/testWidgets/settingsTestWidget/widget.properties
Added: wookie/trunk/widgets/templates/settings/content_primary.html
URL: http://svn.apache.org/viewvc/wookie/trunk/widgets/templates/settings/content_primary.html?rev=1447560&view=auto
==============================================================================
--- wookie/trunk/widgets/templates/settings/content_primary.html (added)
+++ wookie/trunk/widgets/templates/settings/content_primary.html Tue Feb 19 00:13:10 2013
@@ -0,0 +1 @@
+<a id="showSettings" href="#" data-role="button" data-mini="true">Settings</a>
Added: wookie/trunk/widgets/templates/settings/readme.txt
URL: http://svn.apache.org/viewvc/wookie/trunk/widgets/templates/settings/readme.txt?rev=1447560&view=auto
==============================================================================
--- wookie/trunk/widgets/templates/settings/readme.txt (added)
+++ wookie/trunk/widgets/templates/settings/readme.txt Tue Feb 19 00:13:10 2013
@@ -0,0 +1,38 @@
+This is a settings template. It will add a separate HTML (settings.html) page and
+associated scripts for managing settings. Your widget will need to provide a way to
+navigate to this page. By default this will be an element with an id of "showSettings"
+and will navigate to the settings page when clicked.
+
+For example:
+
+<a id="showSettings" href="#" data-role="button" data-mini="true">Settings</a>
+
+How it works
+============
+
+A new page, defined in settings.html is injected into the existing
+default page. This is used to display a dynamically generated settings
+form.
+
+The settings form is auto generated in the
+${widget.shortname}_settings_controller.getsettingDefinitions(group)
+method. To create your own settings simply override this methodb. If
+your widget needs a large number of different settings you can group
+settings together. Simply pass in the required group parameter to
+retrieve the desired group of settings.
+
+Groups can be used to describe related sets of settings. When the
+settings page is requested the user will be presented with a list of
+links to individual settings pages for each group. If no groups are
+defined then all settings will be displayed on a single settings
+page. Groups are defined in the
+${widget.shortname}_settings_controller.getGroups() method.
+
+Creating your settings
+======================
+
+Your widget should override the default settings definitions provided
+in
+${widget.shortname}_settings_controller.getSettingDefinitions(group)
+and ${widget.shortname}_settings_controller.getGroups().
+
Added: wookie/trunk/widgets/templates/settings/scripts/settings_controller.js
URL: http://svn.apache.org/viewvc/wookie/trunk/widgets/templates/settings/scripts/settings_controller.js?rev=1447560&view=auto
==============================================================================
--- wookie/trunk/widgets/templates/settings/scripts/settings_controller.js (added)
+++ wookie/trunk/widgets/templates/settings/scripts/settings_controller.js Tue Feb 19 00:13:10 2013
@@ -0,0 +1,186 @@
+<%
+/*
+ * 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.
+ */
+%>
+var ${widget.shortname}_settings_controller = {
+ init:function() {
+
+ },
+
+ /**
+ * Build and show the settings page.
+ * FIXME: Need to make this a JQuery function
+ */
+ showSettings: function(group) {
+ ${widget.shortname}_settings_controller.createForm(group);
+ $.mobile.changePage("#settings");
+ },
+
+ /**
+ * Get the names of the available settings groups.
+ * Groups are used to describe related sets of settings. When the
+ * settings page is requested the user will be presented with a
+ * list of links to individual settings pages for each group. If
+ * no groups are defined then all settings will be displayed on a
+ * single settings page.
+ *
+ * @return an array setting group names or an empty array if no groups are defined.
+ */
+ getGroups: function() {
+ var groups = [];
+ groups[0] = "about";
+ groups[1] = "contact";
+ return groups;
+ },
+
+ /**
+ * Get the settings in a given group. Note that the group names here must correspond
+ * to the group names returned by ${widget.shortname}_settings_controller.getSettings()
+ *
+ * @return an array containing a number of Setting objects
+ */
+ getSettings: function(group) {
+ var settings = [];
+ if (group == undefined || group == "about") {
+ settings[0] = new ${widget.shortname}_Setting("name", "Name", "The name you wish to be known by.", "text");
+ settings[1] = new ${widget.shortname}_Setting("description", "Description", "A short description that will be shown to people viewing your details.", "textarea");
+ } else if (group == "contact") {
+ settings[0] = new ${widget.shortname}_Setting("homepageURL", "Homepage URL", "Your homepage URL.", "email");
+ settings[1] = new ${widget.shortname}_Setting("email", "EMail", "Your email address.", "email");
+ }
+ return settings;
+ },
+
+ /**
+ * Process a settings form that has been submitted by storing all the settings
+ * in widget preferences. If settings groups are being used then we only process
+ * settings in that group.
+ *
+ * @param group the name of the group to process if groups are being used
+ */
+ submitSettingsForm: function(group) {
+ var settings = ${widget.shortname}_settings_controller.getSettings(group);
+ var value;
+ for (key in settings) {
+ value = $("#" + settings[key].id).attr("value");
+ widget.preferences.setItem(settings[key].id, value);
+ };
+ $.mobile.changePage("#home");
+ $.mobile.loadPage( "settings.html" );
+ },
+
+ /**
+ * Create the settings form and populate <div id="settings"> with it.
+ *
+ * Groups are used to describe related sets of settings. When the
+ * settings page is requested the user will be presented with a
+ * list of links to individual settings pages for each group. If
+ * no groups are defined then all settings will be displayed on a
+ * single settings page.
+ *
+ * @param group the name of the group of settings we need a form to represent
+ */
+ createForm: function(group) {
+ if (group == undefined) {
+ ${widget.shortname}_settings_controller.createGroupsIndex();
+ } else {
+ var settings = ${widget.shortname}_settings_controller.getSettings(group);
+ // FIXME: JQuerify the action
+ var form = $("<form action='javascript:${widget.shortname}_settings_controller.submitSettingsForm(\"" + group + "\")'>");
+
+ var title = $("<h3>Settings: " + group + "</h3>");
+
+ for (key in settings) {
+ var label = $("<label>" + settings[key].label + "</label>");
+ label.attr("for", settings[key].id);
+ form.append(label);
+
+ var input = $("<input>");
+ input.type = settings[key].type;
+ input.attr("id", settings[key].id);
+ input.attr("placeholder", settings[key].placeholder)
+ var value = widget.preferences.getItem(settings[key].id);
+ if (value != undefined) {
+ input.attr("value", value);
+ }
+ form.append(input);
+
+ form.append($("<br>"));
+ };
+
+ var submit = $("<input>");
+ submit.attr("type", "submit");
+ submit.attr("value", "Save");
+ submit.attr("class", "form-button");
+ form.append(submit);
+
+ var settingsElem = $("#settings-primary");
+ settingsElem.empty();
+ title.appendTo(settingsElem);
+ form.appendTo(settingsElem).trigger("create");
+ }
+ },
+
+ /**
+ * Populate the <div id="settings" page with an index to the various settings
+ * groups.
+ */
+ createGroupsIndex: function() {
+ var groups = ${widget.shortname}_settings_controller.getGroups();
+
+ var title = $("<h3>Settings Groups<h3>");
+
+ var list = $("<ul data-role='listview'>");
+ for (key in groups) {
+ var item = $("<li><a href='javascript:${widget.shortname}_settings_controller.showSettings(\"" + groups[key] + "\");'>" + groups[key] + "</a></li>");
+ list.append(item);
+ // FIXME: JQuerify
+ // groupLink.href = "javascript:${widget.shortname}_settings_controller.showSettings('" + groups[key] + "')"
+ }
+
+ var settingsElem = $("#settings-primary");
+ settingsElem.empty();
+ settingsElem.append(title);
+ settingsElem.append(list);
+ }
+};
+
+$('#home').live('pageinit',function(event) {
+ $.mobile.loadPage( "settings.html" );
+ $('#showSettings').on('click',function(event){
+ ${widget.shortname}_settings_controller.showSettings();
+ });
+});
+
+$('#settings').live('pageinit',function(event) {
+ ${widget.shortname}_settings_controller.init();
+});
+
+/**
+ * A setting to represent in the settings form.
+ *
+ * @param id is used to identiy the setting and the form element created for it.
+ * @param label is the text to place in the label for the form element.
+ * @param placeholder is the text that will appear in the form element if the setting has not been set
+ * @param type is the type of data to be stored in this setting, it is used to define the form element to use
+ */
+function ${widget.shortname}_Setting(id, label, placeholder, type){
+ this.id = id;
+ this.label = label;
+ this.placeholder = placeholder
+ this.type = type;
+}
Added: wookie/trunk/widgets/templates/settings/settings.html
URL: http://svn.apache.org/viewvc/wookie/trunk/widgets/templates/settings/settings.html?rev=1447560&view=auto
==============================================================================
--- wookie/trunk/widgets/templates/settings/settings.html (added)
+++ wookie/trunk/widgets/templates/settings/settings.html Tue Feb 19 00:13:10 2013
@@ -0,0 +1,32 @@
+<!--
+ 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.
+ -->
+<!DOCTYPE html>
+ <div data-role="page" class="type-home" id="settings" data-theme="d" >
+ <div id="header" class="header" data-role="header" data-position="fixed">
+ ${content.header}
+ </div> <!-- /header -->
+
+ <div data-role="content">
+ <div class="settings-primary" id="settings-primary">
+ ${settings.primary}
+ </div> <!-- /content-primary -->
+ </div> <!-- /content -->
+
+ <div id="footer" data-role="footer" class="footer" id="footer" data-position="fixed">
+ ${content.footer}
+ </div> <!-- /footer -->
+ </div> <!-- /page -->
Added: wookie/trunk/widgets/templates/settings/settings_primary.html
URL: http://svn.apache.org/viewvc/wookie/trunk/widgets/templates/settings/settings_primary.html?rev=1447560&view=auto
==============================================================================
--- wookie/trunk/widgets/templates/settings/settings_primary.html (added)
+++ wookie/trunk/widgets/templates/settings/settings_primary.html Tue Feb 19 00:13:10 2013
@@ -0,0 +1 @@
+<p>This is the settings.primary content.</p>
Added: wookie/trunk/widgets/templates/settings/template_build.xml
URL: http://svn.apache.org/viewvc/wookie/trunk/widgets/templates/settings/template_build.xml?rev=1447560&view=auto
==============================================================================
--- wookie/trunk/widgets/templates/settings/template_build.xml (added)
+++ wookie/trunk/widgets/templates/settings/template_build.xml Tue Feb 19 00:13:10 2013
@@ -0,0 +1,222 @@
+<?xml version="1.0"?>
+<!--
+ 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.
+-->
+<project basedir="." name="settings_template">
+
+ <target name="_init_template"
+ description="Define any template specifc properties">
+ <echo message="+------------------------------------------"/>
+ <echo message="| Initialising template properties for ${template.name}"/>
+ <echo message="+------------------------------------------"/>
+
+ <loadfile property="settings.primary"
+ srcFile="settings_primary.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <loadfile property="settings.primary"
+ srcFile="../common/settings_primary.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <loadfile property="settings.primary"
+ srcFile="${template.dir}/${template.name}/settings_primary.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <loadfile property="content.styles"
+ srcFile="content_styles.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <loadfile property="content.styles"
+ srcFile="../common/content_style.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <loadfile property="content.styles"
+ srcFile="${template.dir}/${template.name}/content_styles.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <loadfile property="content.scripts"
+ srcFile="content_scripts.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <loadfile property="content.scripts"
+ srcFile="../common/content_scripts.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <loadfile property="content.scripts"
+ srcFile="${template.dir}/${template.name}/content_scripts.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+
+ <!-- Load the content header -->
+ <loadfile property="content.header"
+ srcFile="content_header.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <loadfile property="content.header"
+ srcFile="../common/content_header.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <loadfile property="content.header"
+ srcFile="${template.dir}/${template.name}/content_header.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <!-- load tile content-->
+ <loadfile property="content.tile"
+ srcFile="content_tile.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <loadfile property="content.tile"
+ srcFile="../common/content_tile.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <loadfile property="content.tile"
+ srcFile="${template.dir}/${template.name}/content_tile.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <!-- load content from widget definition -->
+ <loadfile property="content.primary"
+ srcFile="content_primary.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <loadfile property="content.primary"
+ srcFile="../common/content_primary.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <!-- load content from template definition -->
+ <loadfile property="content.primary"
+ srcFile="${template.dir}/${template.name}/content_primary.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <loadfile property="content.footer"
+ srcFile="content_footer.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <loadfile property="content.footer"
+ srcFile="../common/content_footer.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <loadfile property="content.footer"
+ srcFile="${template.dir}/${template.name}/content_footer.html"
+ failonerror="false">
+ <filterchain>
+ <expandproperties/>
+ </filterchain>
+ </loadfile>
+
+ <!-- load properties we've set in other templates -->
+ <property file="${widget.build.dir}/${widget.shortname}.properties"/>
+
+ <echoproperties destfile="${widget.build.dir}/${widget.shortname}.properties" prefix=""/>
+ </target>
+
+ <target name="_prepare_template_files"
+ description="move all template files into the build director">
+
+ </target>
+
+ <target name="_generate_from_parent_templates">
+ <echo message="+------------------------------------------"/>
+ <echo message="| There are no parent templates for ${template.name}"/>
+ <!-- <echo message="| Generating from parent templates for ${template.name}"/> -->
+ <echo message="+------------------------------------------"/>
+
+ <ant antfile="${wookie.template.dir}/build.xml"
+ target="_generate_widget">
+ <property name="template.name" value="base"/>
+ <property name="copyWidgetFiles" value="false"/>
+ </ant>
+ </target>
+</project>
Added: wookie/trunk/widgets/templates/testWidgets/settingsTestWidget/widget.properties
URL: http://svn.apache.org/viewvc/wookie/trunk/widgets/templates/testWidgets/settingsTestWidget/widget.properties?rev=1447560&view=auto
==============================================================================
--- wookie/trunk/widgets/templates/testWidgets/settingsTestWidget/widget.properties (added)
+++ wookie/trunk/widgets/templates/testWidgets/settingsTestWidget/widget.properties Tue Feb 19 00:13:10 2013
@@ -0,0 +1,5 @@
+template.name=settings
+widget.shortname=SettingsTestWidget
+widget.name=Test Widget for the Settings Template
+widget.description=This is a very simple test widget from the settings template.
+widget.help=<p>Click the settings button to see the settings page.</p>
\ No newline at end of file