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


Reply via email to