101companies

Headline

Web programming based on the Language:HTML5 ecosystem with local Technology:Web storage

Motivation

This implementation illustrates the use of client side data storage within a web application. Specifically, HTML5 offers a Language:JavaScript API for Technology:Web storage to permanently store data as key-value pairs on the client side. While this implementation supports session-independent storage, there is a similar implementation Contribution:html5session which supports session storage instead.

Illustration

The illustration section is devided into two parts. The first section shows the method of data storage, the second section shows the implementation of the Feature:Total. Most of the web application is written in Language:JavaScript.

Web storage

The Technology:Web storage API provides the 

localStorage
and the 
sessionStorage
objects. This application uses 
localStorage
, at which the use of 
sessionStorage
in Contribution:html5session is completely the same. We initialize our own variable 
storageObject
in order to keep the possibility for a simple exchange of the storage principe: 

    var storageObject = localStorage;

The value of the key-value pairs provided by web storage have to be primitive data types or a string. Since Language:JavaScript provides a great Language:JSON support, we store the Feature:Hierarchical_company data as JSON encoded string within the web storage. But first we have to create the company objects. Since JavaScript does not provide classes, there is a possibility to emulate classes with functions. The example shows one of these emulated classes for the company: 

function Company(id, name) {
	this.id = id;
	this.name = name;
	this.departments = new Array();
}

After providing the functions for each company, department and employee, we are now able to instantiate the company structure: 

function loadData(reset) {
	// If the company does not exist, it must be created locally.
	if (storageObject.company == null || reset == true) {
		// create company ...
		var company = new Company(0, "Meganalysis");
	
		...

		// save company
		storageObject.setItem('company', JSON.stringify(company));

	}
	return JSON.parse(storageObject.getItem('company'));
}

The 

setItem('company', JSON.stringify(company))
call encodes the company as JSON string and stores it to a variable 
company
within our 
storageObject
. If this 
company
variable already exists, the method simply returns the stored company. To get the company string, the 
getItem('company')
method has to be invoked on the 
storageObject
.

Feature implementation

The data-structure is a tree, which can be traversed to cut salaries or determine the total of the whole company or individual departments. The following example shows the method for totalling companies with the help of totalling departments: 

// This method calculates the total for a company.
function totalCompany(company) {
 	var total = 0;
 	var len = company.departments.length;
 	for (var i = 0; i < len; i++) {
 	 	// To get the total for the company, this method calls the total method for departments and adds the results.
 		total += totalDepartment(company.departments[i]);
 	}
 	return total;
}

// This method calculates the total value for departments.
function totalDepartment(department) {
 	var total = 0;
 	var len = department.subdepartments.length;
 	// Here, the total values of all subdepartments are added recursively.
 	for (var i = 0; i < len; i++) {
 		total += totalDepartment(department.subdepartments[i]);
 	}
 	var lenEmp = department.employees.length;
 	// Here, the salaries of all contained employees are added.
 	for (var i = 0; i < lenEmp; i++) {
 		total += department.employees[i].salary;
 	}
 	return total;
}

The function 

totalCompany
uses the function 
totalDepartment
, to get the values of its subdepartments. This total values are calculated recursively.

GUI generation

The Language:HTML code for the GUI is completely generated with JavaScript. The following code generates the name textfield for the company view: 

...

// Create a form for the company view.
var content = "<form name=\"company\">";

// Create a table within the company view.
content += "<table border=0>";

// Create a table row with the name textfield and a save button.
content += "<tr><td align=\"right\">Name: </td>";
content += "<td><input type=\"text\""
	+ " class=\"text\" name=\"name\" value='"
	+ model.headline
	+ "'>";
content += " <input type=\"button\" name=\"save\""
	+ " class=\"button\" value=\"save\""
	+ " onclick=\"controller.changeName(this.form.name.value)\">"
	+ "</td></tr>";
...

// Close table and form tags.
content += "</table>";
content += "</form>";

// Move the content to the 'content' division of the company.html file.
document.querySelector('#content').innerHTML = content;

...

The first step is to create an HTML form (

<form name="company">
) including the table as a grid for proper alignment of the GUI components. The table row starting with the 
<tr>
tag contains the name label, the name textfield and the save button. The textfield (the first 
<input ... />
) is initialized with the value 
model.headline
, which contains the name of the company. The save button (second 
<input ... />
) invokes the method 
changeName
, where the 
this.form.name.value
parameter contains the current content of the name textfield. Finally, the last allocation (
 ... = content;
) moves the generated HTML code to the content division of the document this!!company.html.

Architecture

All files of the application are contained in one folder:

Usage

(C) 2012-2024 softlang.org and contributors

There are no revisions for this page.

User contributions

    This user never has never made submissions.

    User edits

    Syntax for editing wiki

    For you are available next options:

    will make text bold.

    will make text italic.

    will make text underlined.

    will make text striked.

    will allow you to paste code headline into the page.

    will allow you to link into the page.

    will allow you to paste code with syntax highlight into the page. You will need to define used programming language.

    will allow you to paste image into the page.

    is list with bullets.

    is list with numbers.

    will allow your to insert slideshare presentation into the page. You need to copy link to presentation and insert it as parameter in this tag.

    will allow your to insert youtube video into the page. You need to copy link to youtube page with video and insert it as parameter in this tag.

    will allow your to insert code snippets from @worker.

    Syntax for editing wiki

    For you are available next options:

    will make text bold.

    will make text italic.

    will make text underlined.

    will make text striked.

    will allow you to paste code headline into the page.

    will allow you to link into the page.

    will allow you to paste code with syntax highlight into the page. You will need to define used programming language.

    will allow you to paste image into the page.

    is list with bullets.

    is list with numbers.

    will allow your to insert slideshare presentation into the page. You need to copy link to presentation and insert it as parameter in this tag.

    will allow your to insert youtube video into the page. You need to copy link to youtube page with video and insert it as parameter in this tag.

    will allow your to insert code snippets from @worker.