Thursday, 22 September 2016

FXBilling - A free and open-sourced JavaFX Billing Application

Hi, I am happy to share with all the readers of my blog a billing application named FXBilling that I have developed in JavaFX. Before I tell more about this application, please have a look at its screenshot below:


More screenshots of the application can be viewed here.

This application is targeted at small-scaled Indian Traders, and is a JavaFX port of my earlier released C# billing application named Biller. The features include invoice generation & printing, invoice search, payment receipt, payment search, customer account lookup & printing, database backup & restoration.

I have taken every care to make this application bug-free; however, a bug or two may still have crept in. So, if you come across any bug, please let me know.

The Java version 8 (update 72) has been used to develop this application. Hence, you will require this or a newer version of Java to run the application. You can download Java SE Runtime Environment (JRE) from here.

FXBilling Executable Download Link

FXBilling Source Code Download Link

FXBilling Windows Installer Link

I trust that you will find this application useful whether you are a developer or a user, and you will also enjoy using it as much as I have enjoyed developing it. Do provide your feedback through the comments section below.

Thanks for your time!








Friday, 29 January 2016

An Indian Matrimony website with source code in ASP.NET Web Pages

Today, I am sharing a website that I have developed to teach myself website development. It is a basic version of a typical Indian Matrimony website that allows users to register themselves, post their profiles and search for a suitable partner.

The website is complete as all the bare minimum features have been implemented. The website enables quick and advanced partner search as well as a search by Profile Id. The user can register with the site and create his/her profile; he/she can also upload up to 3 photos. The registration is not required to perform a partner search. Although, it is required to send a message to a user.

The facility to send a message to a user is not yet implemented. It is a critical feature as the website doesn't disclose the contact details of its users; so, in the absence of this feature, an interested person has no means to contact a profile owner. This facility (and some other facilities like blocking a message from a user, pagination of partner search results etc.) may be make available in a future release of the website.

The website has been developed in ASP.NET Web Pages 3 framework using Visual Studio 2013 Community Edition. The data store is SQL Server 2012. The server side language is C#.

No third party library or framework has been used either on the client side or the server side. It is all native, pure and standards-complaint HTML, CSS and JavaScript on the client side. The website supports modern browsers only (A modern browser usually means a browser that has been released not more than 2 years back). I have tested the application in the latest version of Chrome for Windows (version 48), but it should work in all capable modern browsers as no Chrome-specific property, feature or method has been used.

This source code could be a great learning resource for a person looking to learn website programming as it tries to make maximum use of the modern APIs like Constraint Validation API, asynchronous file upload through AJAX, displaying file upload progress through a Progress Bar etc. Best of all, it is all done through natively-available features. So, one is not burdened with the necessity to learn 3rd party libraries.

Website source code  |  Screenshots

Hope, you find this project useful. Please feel free to provide your feedback through the comments section.

Thanks for reading this post :-)

Friday, 4 October 2013

Automatic client-side validation using the HTML5 'pattern' attribute

The new "pattern" attribute defined in HTML5 facilitates automatic validation of a textbox value by allowing the developer to define a Regular Expression pattern for the field. On form submission, the input value is validated against the pattern, and if the validation fails, the browser highlights the field and shows an error message.
Let's see an example that illustrates all this:



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pattern attribute example</title>
</head>
<body>
<form>
<label id="pincode">Pin Code:</label>
<!--"required" attribute makes input mandatory in an input element -->
<input type="text" id="pincode" name="pincode"
pattern="^[1-9][0-9]{5}$" required
title="A six digit number that doesn't begin with zero.">
<br /> <br />
<button type="submit">Submit</button>
</form>
</body>
</html>


Running the above code in the Google Chrome browser gives me the following screenshot:


Wednesday, 2 October 2013

JavaScript Slideshow

In this post, I will illustrate how to periodically change the image source of an 'img' element using JavaScript. This is a simple Slideshow, and doesn't show any animation in sliding in and sliding out of images. Images will be shown one after one at an interval of 3 seconds. Let's see the code now:



<!DOCTYPE html>
<html>
<head>
<title>JavaScript Slideshow</title>
</head>
<body>
<img >
<script>
var photos = ["file:///C:/Users/Public/Pictures/Sample Pictures/Tulips.jpg",
"file:///C:/Users/Public/Pictures/Sample Pictures/Penguins.jpg",
"file:///C:/Users/Public/Pictures/Sample Pictures/Lighthouse.jpg",
"file:///C:/Users/Public/Pictures/Sample Pictures/Koala.jpg",
"file:///C:/Users/Public/Pictures/Sample Pictures/Jellyfish.jpg"];
setInterval(changePhoto, 3000); //change image every 3 seconds
var imageElement = document.getElementsByTagName("img")[0];
imageElement.src = photos[0];
var arrayIndex = 0;
var arrayLength= photos.length;
function changePhoto() {
arrayIndex++;
if (arrayIndex === arrayLength) {
arrayIndex = 0;
}
imageElement.src = photos[arrayIndex];
}
</script>
</body>
</html>



Monday, 30 September 2013

Extending properties/methods of an existing class in JavaScript

In JavaScript, properties/methods of an existing class can be extended by using the 'prototype' property of that class. Let's see an example of how to add a function named 'isInt' to String class. This function, as is obvious from its name, tells whether the text content of the target String is a number or not.


<script>
if (String.prototype.isInt == null) {
String.prototype.isInt = function() {
var result = parseInt(this.valueOf());
return !isNaN(result);
}
}
var i = "27";
var j = "shyam";
var paraElement = document.getElementById("output");
paraElement.innerHTML = ("Is '27' an integer : " + i.isInt());
paraElement.innerHTML += (" <br > Is 'shyam' an integer : " + j.isInt());
</script>

Displaying validation failed messages to user using JavaScript and CSS

We need to alert the user of the failed validation if he has entered wrong input values in a web form. The validation is done prior to the form submitted to the server (back-end), and the submission is cancelled if the validation fails. Let's see an example of how to do client-side validation, and show error message(s) on validation failure.


<!DOCTYPE html>
<html>
<head>
<title>CSS Tooltip</title>
<style>
#nameError {display: none; color: red; font-weight: bold; font-size: 1.2em; margin-left: 10px; background-color: #FFDAB9;}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Student Information</legend>
<div>
<label id="studentName">Student name:</label>
<input name="student">
<span id="nameError">Name not specified, or not of valid length.</span>
<br />
(Minimum allowed length is 3, and max allowed length is 12.)
</div>
<div>
<button type="submit">OK</button>
</div>
</fieldset>
</form>
<script>
var frm = document.forms[0];
frm.addEventListener("submit", onFormSubmit, false);
var nameField = document.getElementsByName("student")[0];
var errorElement = document.getElementById("nameError");
function onFormSubmit(e) {
if (nameField.value.length < 3 || nameField.value.length> 12) { //validation failed
e.preventDefault();
errorElement.style.display = "inline-block";
nameField.focus();
}
}
</script>
</body>
</html>

See a screenshot of the displayed validation message:

Showing tooltip for a DOM element using CSS.

Some websites show tooltips for input controls to help user enter the correct values. This not only provides for better user experience, but also potentially reduces the server network traffic as there are less chances of the failed validation at the server end, and the resultant transmission of error messages from the server to the user.

The question is how to show the tooltip to the user as a DOM element doesn't expose any property for tooltip? The answer lies in using CSS. Let's see an example of how it is done.





<!DOCTYPE html>
<html>
<head>
<title>CSS Tooltip</title>
<style>
div {position: relative;}
#nameTip {position: absolute; left: 20%; top: 8%;}
span {display: none;}
div:hover span{display: inline; color: green; background-color: yellow;}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Student Information</legend>
<div>
<label id="studentName">Student name:</label>
<input type="text" id="studentName">
<span id="nameTip">Minimum allowed length is 3, and max length is 12</span>
</div>
<div>
<label id="dob">Date of birth:</label>
<input type="text" id="dob">
<span id="dobTip">Date should be in the format like 2013-29-09</span>
</div>
<div>
<button type="submit">OK</button>
</div>
</fieldset>
</form>
</body>
</html>



See the screenshot below of the tooltip popped up (the mouse is not visible in the screenshot, and I don't know how to capture it):



PS: I later discovered that DOM Elements expose a attribute called "title", and setting the value of this attribute effectively works as a tooltip for that element.