Monday, May 28, 2018

Java 10: The "var" keyword

Java 10 has introduced local variable type inference with the keyword var. This means that instead of writing:

Map<Department, List<Employee>> map = new HashMap<>();
// ...
for (Entry<Department, List<Employee>> dept : map.entrySet()) {
  List<Employee> employees = dept.getValue();
  // ...
}

you can use var to reduce boilerplate, as follows:

var map = new HashMap<Department, Employee>();
// ...
for (var dept : map.entrySet()) {
  var employees = dept.getValue();
  // ...
}

var removes the need to have explicit types written in your code. Not only does this reduce repetition but it also makes your code easier to maintain because if, for example, you decide to change the types of the objects stored in your map in the future, you would only need to alter one line of code.

Polymorphism:

Now let's take a look at how var behaves with polymorphic code. For example, if you have a class Shape with two subclasses, Square and Circle, what type will be inferred if you use var v = new Circle()? Let's try it out in JShell:

jshell> var v = new Circle();
v ==> Circle@4e9ba398

jshell> v.getClass();
$13 ==> class Circle

jshell> v = new Square();
|  Error:
|  incompatible types: Square cannot be converted to Circle
|  v = new Square();
|      ^----------^

As demonstrated above, v is of type Circle and if you try to reassign it to Square, the compiler will throw an error.

Anonymous classes:

One of the exciting things you can do with vars is create anonymous classes and refer to fields inside them! For example:

var person = new Object() {
  String name = "Joe";
  int age = 10;
};
System.out.println(person.name + ":" + person.age);

var infers the type of the anonymous class which means that you can use an anonymous class as a "holder" for intermediate values, without having to create and maintain a new class. Here is another example showing how you can create "temporary" person objects:

var persons = Stream.of("Alice", "Bob", "Charles")
    .map(s -> new Object() {
       String name = s;
       int age = 10;
    })
    .collect(toList());
persons.forEach(p -> System.out.println(p.name));
Other points to note:

You cannot use var without an explicit initialisation (assigning to null does not count) or within lambda expressions:

jshell> var v;
|  Error:
|  cannot infer type for local variable v
|    (cannot use 'var' on variable without initializer)
|  var v;
|  ^----^

jshell> var v = null;
|  Error:
|  cannot infer type for local variable v
|    (variable initializer is 'null')
|  var v = null;
|  ^-----------^

jshell> var v = () -> {}
|  Error:
|  cannot infer type for local variable v
|    (lambda expression needs an explicit target-type)
|  var v = () -> {};
|  ^---------------^

Saturday, May 26, 2018

HTML5 Date Input with jQuery Fallback

HTML5 introduced a new date input type which allows a user to enter a date using a date picker.

<input id="date" type="date" value="2018-05-26">

This is what it looks like in Chrome:

However, not all browsers support this input type. In unsupported browsers, such as Internet Explorer, you will simply see a text input field.

In this post, I will show how you can detect if a browser supports the date input type and how you can fall back to using jQuery's date picker if it doesn't.

Checking if the browser supports date input:

The following code creates an input element and sets its type to date. If the browser does not support date input, this operation will not work and the input type will degrade to text.

var input = document.createElement("input");
input.setAttribute("type", "date");
if (input.type !== "date") {
    console.log("browser does not support date input");
}
Alternatively, use the Modernizr library, which makes it easy to detect the features that a browser supports:
if (!Modernizr.inputtypes.date) {
    console.log("browser does not support date input");
}
Falling back to jQuery's date picker:

The JSFiddle below shows how you would use jQuery's date picker if the browser does not support date input.

Saturday, May 19, 2018

HTML: Disabling a Form on Submit

The following HTML snippet shows how you can disable the Submit button on a form to prevent multiple submissions. When the Submit button is clicked, the button is disabled and a progress bar is displayed.