How To Customize My Widget Installer?

By ahlikom 28 Sep, 2015

There are some blogger are non fully satisfied alongside my tutorial on how to practise a uncomplicated widgets installer. They wanted to acquire extra. You required learning well-nigh using the JSON-feeds in addition to later all yous wanted to acquire how to brand the widget customizable.

I trust yous volition similar this tutorial. I volition develop yous how to brand a customizable Table Of Contents Widget and how to generate an installer for this widget.

For the argue of this tutorial it volition endure an extremely uncomplicated widget. If nosotros acquire inwards also sophisticated, the code volition endure to a greater extent than complicated in addition to less slowly to understand. Our purpose is to accept yous past times the manus in addition to brand yous empathise everything that happens. You tin hand notice piece of occupation from at that spot to develop this widget into something helpful for yourself.

Now verbalize well-nigh TOC widget in addition to how it works.

The TOC-widget volition acquire the posts-feed from your blog, alongside a maximum of 100 posts. It volition display a listing of the posttitles. You tin hand notice customize three settings: the widget title, the release of posts to display, in addition to whether or non to sort the posts alphabetically.

What the Installer has to do

We volition practise an Installer. The Installer is a HTML-document alongside a shape that contains a few fields in addition to a few buttons in addition to some javascript. It is best to host this installer from a webserver where yous tin hand notice upload>

<body>

<span style="width:130px;">Widget Title</span>: <input type="text" size=30 name="widget.title" value="Table of Contents"/><br/>

<span style="width:130px;">Blog url</span>: http://<input type="text" size=10 name="iblogurl" value="yourblogname"/>.blogspot.com<br/>

<span style="width:130px;">Number of posts</span>: <input type="text" size=3 name="inumposts" value="20"/><br/>

<span style="width:130px;">Sort posts</span>: <input type="checkbox" name="isortposts" checked/><br/>

<br/>

<br/>

</form>

</body>

</html>

Step 7: Creating javascript functions to practise the customized widget.

We stimulate got to write ii javascript functions that respond to buttons beingness pressed. One to reset the shape to its default values, in addition to i to practise the widget code. Let's starting fourth dimension alongside a role for resetting the shape field. The role defaultvalues() volition laid upwards the shape to its default values when the Reset clitoris is clicked. Here is the code:

role defaultvalues() {

document.getElementsByName("widget.title")[0].value = "Table of Contents";

document.getElementsByName("iblogurl")[0].value = "yourblogname";

document.getElementsByName("inumposts")[0].value = "20";

document.getElementsByName("isortposts")[0].checked = true;

document.getElementsByName("go")[0].disabled = true;

}

This role looks upwards the formfields past times at that spot name, in addition to sets their contents. The terminal business greys out the Install-button, hence that nosotros tin hand notice entirely click it if nosotros stimulate got customized the widget settings.

The minute role nosotros volition practise is the role customize(), that is invoked when the user clicks the Customize-button. The code of this role is:

role customize() {

// Get input values

var blogurl = document.getElementsByName("iblogurl")[0].value;

var numposts = document.getElementsByName("inumposts")[0].value;

var sortposts = document.getElementsByName("isortposts")[0].checked;

// Generate widgetcode

var txtarea = document.getElementsByTagName("textarea")[0];

txtarea.value = "\<script style='text/javascript'\>";

txtarea.value = txtarea.value + "function showtoc(json) { ";

txtarea.value = txtarea.value + "var toc = novel Array(); ";

txtarea.value = txtarea.value + "var numentries = json.feed.entry.length; ";

txtarea.value = txtarea.value + "if (numentries \> numposts) numentries = numposts; ";

txtarea.value = txtarea.value + "for (var i = 0; i \< numentries; i++) { ";

txtarea.value = txtarea.value + "if (i == json.feed.entry.length) break; ";

txtarea.value = txtarea.value + "var entry = json.feed.entry[i]; ";

txtarea.value = txtarea.value + "var posttitle = entry.title.$t; ";

txtarea.value = txtarea.value + "toc.push(posttitle); } ";

txtarea.value = txtarea.value + "if (sortposts) toc.sort(); ";

txtarea.value = txtarea.value + "for (var i = 0; i \< numentries; i++) ";

txtarea.value = txtarea.value + "document.write('\<br/\>' + toc[i] + '\<br/\>'); } ";

txtarea.value = txtarea.value + "\</script\>";

txtarea.value = txtarea.value + "\<script style='text/javascript'\>";

txtarea.value = txtarea.value + "var numposts = " + numposts + "; ";

if (sortposts) { txtarea.value = txtarea.value + "var sortposts = true; "; }

else { txtarea.value = txtarea.value + "var sortposts = false; "; };

txtarea.value = txtarea.value + "\</script\>";

txtarea.value = txtarea.value + "\<script src='http://" + blogurl + ".blogspot.com/feeds/posts/default?alt=json-in-script&max-results=100&callback=showtoc'\>\</script\>";

// Show add together button

var addbutton = document.getElementsByName("go")[0];

addbutton.disabled = false;

}

What happens hither - yous won't believe it - is that this javascript-function writes the javascript-code for the widget! Now that is variety of Baron of Munchhaussen, if yous are familiar alongside this High German nobleman who pulled himself out of the H2O past times his ain neck. The entire widget-code (without the comments) is written into the textarea of the shape in addition to the Install-button is enabled.

Step 8: Create the Widget Installer

From steps six in addition to seven nosotros tin hand notice straightaway practise the widget installer. Open Notepad, in addition to practise a textfile alongside the next content:

<html>