DEV Community: Rishikrishna

Method References in Java

Rishikrishna — Thu, 26 May 2022 13:35:54 +0000

Before we get to method references, I would highly encourage you to read my lambda expressions article.

What are Method References?

When a lambda expression does nothing but call an existing method, it's often clearer to use that method by name. Method references are compact, easy-to-read lambda expressions that already have a name.

Consider this class Car:

public class Car{
  String modelName;
  int modelNum;
  LocalDate registrationDate;
  String vehicleNum;             

  public String getModelName(){..}

  public void printCar() {..}

  public static int compareByModelName(Car c1, Car c2){
    return c1.getModelName().compareTo(c2.getModelName());
  }
}

Suppose you want to sort an array of car instances by the modelName, you could define a class that implements the comparator interface and then sort like so,

public class CarModelNameCompartor implements Comparator<Car> {
  public static int compare(Car a, Car b) {
    return a.getModelName.compareTo(b.getModelName());
  }
}

Arrays.sort(cars, new CarModelNameComparator());

Or you could make use of the simple lambda expression:

Arrays.sort(cars, (a, b) -> 
  a.getModelName().compareTo(b.getModelName());

However, our class has already implemented a method that can compare cars by modelName.

Arrays.sort(cars, (a, b) -> Car.compareByModelName(a, b));

When a lambda expression has only one statement that calls to another method, we can directly use or refer that method.

Arrays.sort(cars, Car::compareByModelName);

Method References and Lambda expressions

Method references are semantically the same as the method being called inside lambda expression body (a, b) -> Car.compareByModelName(a, b).

The parameter list is copied from the Comparator compare method.
Its body calls the compareByModelName method passing in those parameters.

Types of Method References

Static method reference
Instance method reference
Instance method reference of an arbitrary object of a particular type
Constructor reference

public class MethodReferencesExample {
  public static <T> T merge(T a, T b, BiFunction<T,T,T> merger) {
    return merger.apply(a, b);
  }

  public static String appendStringsStaticMethod(String a, String b) {
    return a + b;
  }

  public String appendStringsInstanceMethod(String a, String b) {
    return a + b;
  }

  public static void main(String args[]) {
    String one = "Hello";
    String two = "World";

    // Referring a static method
    System.out.println(merge(one, two, MethodReferencesExample::appendStringsStaticMethod));

    //Referring an instance method
    MethodReferencesExample obj = new MethodReferencesExample();

    System.out.println(merge(one, two, obj::appendStringsInstanceMethod));

    //Referring an arbitrary object method of a particular type
    System.out.println(merge(one, two, String::concat));
  }
}

In all of the method references above, the same HelloWorld output will be generated.

Reference to a Constructor

A Constructor can be referenced the same the way as referencing a static method, like HashSet::new.

public static List<Car> getObjects(int length, Supplier<Car> supplier){
  List<Car> list = new ArrayList<Car>();

  for(int i = 0; i < length; i++){
    list.add(supplier.get());
  }

  return list;
}

List<Car> cars = getObjects(5, Car::new);

Similar lambda expression for Car::new would be

() -> { return new Car(); }.

Conclusion

As mentioned above, if a lambda expression only calls an existing method then using method reference can make code more readable and clear.

Thanks for reading the blog. Feel free to provide inputs and suggestions for any areas of improvement. :)

Lambda Expressions in Java

Rishikrishna — Mon, 23 May 2022 12:42:40 +0000

In Java, we all know we can pass data as arguments, but what about passing functionality as an argument? In this tutorial, we'll see just how to do that. Let me explain that with an ideal use case.

Ideal use case

Suppose you are building a car tracking application for the country, and you want to display all cars of a particular state.For example Tamil Nadu, the vehicle number of a car contains 'TN' in it.

One would represent a Car like this:

public class Car {
  String modelName;
  int modelNum;
  LocalDate registrationDate;
  String vehicleNum;             

  public String getModelName(){..}

  public void printCar() {..}

  ...
}

Approach 1: Create methods for the search criteria.

public static void printCarsIn(List<Car> cars, String state){
 for(Car c : cars) {
  if(c.getVehicleNum().contains(state)){
    c.printCar();
  }
 }
}

printCarsIn(cars, "TN");

You are checking each instance of the cars list to see if it's vehicle number contains 'TN' in it. If so, you print it.

This approach is more likely to make your application brittle. What if you update Car class so that it contains different members or perhaps different data types for its members. Or what if the search criteria is changed. You have to rewrite a lot of code in all of the defined methods. The search criteria can instead be separated into a different class.

Approach 2: Specify search criteria in a local class.
The following class checks whether an instance of Car is from Tamil Nadu.

interface CheckCar {
  boolean test(Car c, String state);
}

class CheckCarsInState implements CheckCar {
  public boolean test(Car c, String state) {
    return c.getVehicleNum().contains(state);
  }
}

Now, you can create an instance of this CheckCarsInState class and use it to check the criteria.

public static void printCarsIn(List<Cars> cars, String state, CheckCar tester){
  for(Car c : cars){
    if(tester.test(c, state)){
      c.printCar();
    }
  }
}

printCarsIn(cars, "TN", new CheckCarsInState());

Although we have separated the search criteria, we have additional code for declaring a new class.

Approach 3: Using an anonymous class

An anonymous class can be used if only one instance is required from a class.

interface CheckCar {
  boolean test(Car c, String state);
}

public static void printCarsIn(List<Cars> cars, String state, CheckCar tester){
  for(Car c : cars){
    if(tester.test(c, state)){
      c.printCar();
    }
  }
}

//method call
printCarsIn(cars, "TN", new CheckCar() {
  public boolean test(Car c, String state) {
    return c.getVehicleNum().contains(state);
  }
});

But still, the anonymous class looks bulky considering the CheckPerson interface contains only one method. We can instead use a lambda expression.

Approach 4: Lambda expression to pass functionality
The CheckPerson is a functional interface (an interface with only one abstract method). Lambda expressions can be used against functional interfaces.

interface CheckCar {
  boolean test(Car c, String state);
}

public static void printCarsIn(List<Cars> cars, String state, CheckCar tester){
  for(Car c : cars){
    if(tester.test(c, state)){
      c.printCar();
    }
  }
}

printCarsIn(cars, "TN", (c, state) -> c.getVehicleNum().contains(state));

With lambda expressions, you specify the criteria for which you want to search when calling the function.

Syntax of Lambda expression

Parameter list: A list of parameters enclosed in parentheses. The parentheses can be avoided if only one parameter is used.

c -> c.printCar();

Arrow token, ->
Body: The body can either be a block of statements or an expression. If it is a single expression, the evaluation will be returned. Alternatively, you can use a return statement like so,

c -> {
  //...
  return c.getVehicleNum();
}

Note: A single return statement is not an expression, so it can't be used without braces.

Thanks for reading the blog. Feel free to provide inputs and suggestions for any areas of improvement. :)

Html Forms and different Form controls.

Rishikrishna — Wed, 02 Feb 2022 09:18:04 +0000

In Web development, Forms are one of the main interfaces between users and the application or website. It allows users to provide data to the website which will be stored or processed in the backend. Examples of where we can use forms are, to enter payment information, feedback forms, etc.

Essentially, form element has two attributes, action and method. The action attributes contains a url to which the data must be sent for processing. The method attributes contains the http verb. About http verbs.

Basic Markup:

<form action="/" method="POST">

</form>

Form Controls

Form controls are used inside the form tag, that can collect various types of data from users. Some form controls used are dropdown lists, buttons, checkboxes and mostly <input>. They can be implemented to accept values in specific format and can be associated with labels to provide meaning to both sighted and visually impaired users.

Input
The input element is one of the mostly used form control. It contains type attribute that denote the type of data it can accept.Examples are text, email, number, date.

<label for="name">Enter name:</label>
<input type="text" id="name" name="user name">

For a label to be associated with an input, the input's id must match the label's for.
The name attribute acts a reference to the data after the form is submitted.

Email address field
<input type="email" name="email" id="email">

This input with type email allows user to enter an email with basic in-built validation. Additionally, multiple allows to enter multiple email ids separated by commas.

Search field

<input type="search" name="search" id="search">

The search input creates a basic search box with an 'x' at the end, when clicked clears the value entered. In most modern browsers, the values entered are saved and reused to offer auto-completion.

Phone number field

<input type="tel" name="tel" id="tel">

This field accepts only numbers so it is used for entering phone numbers. When accessed via touch device, it opens a numeric keypad. Moreover, the pattern is used to give regex constraints.

Number field

<input type="number" name="number" id="number" min="1" max="10" step="2">

The number field is similar to the phone number field, but provides arrow buttons at the end to increase or decrease the value. Minimum and maximum constraints can be set through min and max attributes.

While incrementing or decrementing, you can increase the value by setting step="2".

Slider control

<input type="range" id="slider" name="amount" min="100" max="1000" step="100" value="500"> <output for="slider"></output>

The slider is also used to select numbers where an accurate value isn't required. The output element outputs the value selected from the slider.

Color Picker

<input type="color" name="color" id="color">

The color picker displays browsers default color palette in which you can select a color. The value returned is a 6-digit lowercase hexadecimal color.

Date and Time Picker

<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" step="7" id="myDate">

The date picker also opens browser default date picker when clicked. min, max, & step can be set like in the above example. Futhermore, you can give different types to select particular value like month or week.

To select month,
<input type="month">

To select week,
<input type="week">

To select time,
<input type="time">
The displayed time will be in 12 hour format whereas the returned value will be in 24 hour format.

To select date and time,
<input type="datetime-local">

Selection Elements

There are two types of selection inputs. Select dropdown and datalist element.

Select dropdown
This allows the user to select a value from a predefined list.

<select name="book">
    <option>Alchemist</option>
    <option>Atomic Habits</option>
    <option selected>Rich Dad Poor Dad</option>
    <option>The Green Mile</option>
<select/>

A default value can be given using selected on an option if required.
Additionally, grouping of options inside a list is possible by placing a number of options together inside <optgroup/>.

<optgroup label="Paulo Coelho">
   <option>The Alchemist</option>
   <option>Eleven Minutes</option>
</optgroup>

Datalist
The datalist also contains option elements like select element. It is then linked with an input element. As we enter values inside the input, the options that match the given text are shown. It auto-completes the text entered by the user.

<label for="country">Enter country:</label>
<input type="text" name="country" id="country" list="mySuggestion">
<datalist id="mySuggestion">
  <option>USA</option>
  <option>India</option>
  <option>China</option>
  <option>Canada</option>
  ...
</datalist>

Note: Try datalist with <input type="range"> and <input type="color">. Have it a go to see the result.

Radio Buttons

Radio buttons are essentially used to select only one out of many options. If a user needs to select an option with 5 or less numbers, radio buttons are preferred rather than list.

<div>
  <label for="red">Red</label>
  <input type="radio" id="red" name="color" value="red">

  <label for="green">Green</label>
  <input type="radio" id="green" name="color" value="green">

  <label for="blue">Blue</label>
  <input type="radio" id="blue" name="color" value="blue">
</div>

The value of name attribute must be same in a group of radio buttons, so that previously selected option can be disabled while selecting a new one.

Checkboxes

Checkboxes are similar to radio buttons. But they allow you to select more than one option in a group.

<div>
    <label for="coding">Coding</label>
    <input type="checkbox" id="coding" name="hobbies" value="coding">

    <label for="music">Music</label>
    <input type="checkbox" id="music" name="hobbies" value="music">

    <label for="gym">Gym</label>
    <input type="checkbox" id="gym" name="hobbies" value="gym">
</div>

Note: Most often, fieldset elements are used to group radio buttons and checkboxes. And, a legend element is represented as a caption to the fieldset. Check it out here.

Button

Buttons are used as a clickable input for triggering various actions. There are three types of buttons.

Submit Button
<button type="submit"></button>
This submits the form that the button is contained within.

Reset Button
<button type="reset"></button>
This resets the contents user entered in the form to their default.

Generic Button
<button></button>
It is generally used as event listeners with the combination of javascript to trigger events in an interactive UI.

Textarea

The textarea element allows you to input text in a text box that can span multiple size. The size can be given through rows and cols. As a user, you will able to resize it by default. However, it can be controlled with the resize property in CSS. Unlike input, textarea requires a closing tag.

<label for="comment">Feedback</label>
<textarea id="comment" name="comment" rows="4" cols="50">
</textarea>

Output Elements

So far we have looked at various ways to input different types of data. Now let's take a look at few ways for outputting data.

Progress Bar

A progress bar is used to visually output what the progress is for a task. A real time scenario will be to show how much percent of files have been downloaded.

<progress max="100" value="50">50/100</progress>

For the record, the min attribute can't be set.

Meter

Meters are used to visually display fixed values in a range.

<meter min="0" max="100" value="75" low="33" high="66" optimum="80">75</meter>

The range is split into three parts delimited by low and high. The preferred part, average part and the worst part.
Then the meter is colored based on the value, green if its in the preferred part, yellow if its in the average part or red for worst part.

Note: For both progress and meter, if the browser does NOT the support the element, the content present inside the element is considered as a fallback and for assistive technologies like screen readers.

Thank you for staying and reading the entire article. If you feel like you don't understand a topic or need more information, the MDN docs are always a good resource. :)

An Introduction to Webpack

Rishikrishna — Mon, 24 Jan 2022 06:12:20 +0000

What is Webpack?

Webpack is a bundling tool made from javascript. For instance, It can take up a collection of javascript files and produce a single output javascript file. It can bundle images, css files, javascript files, etc to produce static assets.

Why we need bundling?

Without a module bundler like webpack, one would import packages using html script tags,

<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

This type of approach is not advisable since it has few drawbacks.

When unused scripts are included, unnecessary code is included.
When scripts are included in the wrong order, or if its missed, the application will fail.
The packages are imported in the global namespace.

However, if the application code is bundled with webpack, it uses a dependency graph to find out what packages are needed to use in the application and ignores the unused packages. It then uses this dependency graph to generate an optimised and minified bundle which will be executed in the correct order.

Next, a module bundler can compile languages which cannot be understood by the browser like typescript with the use of transpilers like babel.

How to use webpack

npm install webpack webpack-cli --save-dev
After adding these to package.json, webpack can be used from command line.

Let's consider an example of using lodash in a project. Let's install lodash from npm.

npm install lodash (A modern JavaScript utility library delivering modularity, performance & extras.)

index.js

import lodash from 'lodash';
import printMe from './print.js'

let value = lodash.join(['a', 'b', 'c'], '~');

console.log(value);
printMe();

Let's have another file named print.js, which exports a function to index.js.

print.js

export default function printMe() {
    console.log('I get called in index.js');
}

Next we setup webpack.config.js file.

webpack.config.js

path module provides utilities for working with file and directory paths

const path = require('path');

module.exports = {
    entry: {
        index: './src/index.js',
    },
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

This specifies basically that index.js is our entry file and we want it to be compiled. We also specify that the compiled version be renamed as main.js and placed in subfolder dist, possibly where index.html is also placed.

Now, we shall use webpack from command line,

npx webpack

This will run webpack that is installed in the node_modules folder, starts with the index.js file and finds all require/import statements and replaces them with their appropriate code to create a single output file named main.js inside dist subfolder.

Now this main.js file can be used in index.html file as such,

<script defer src="main.js"></script>

Conclusion

That's webpack in a nutshell. We no longer populate packages in global namespace via external scripts. Any new packages or libraries will be added using require/import as opposed to external scripts.

Note: By default, webpack uses production mode, which will produce minified output file. If you want the output file to be readable to developers, you can use development mode in webpack config file.

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
    },
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

Thanks for reading the blog. Feel free to provide inputs and suggestions for any areas of improvement. :)

Check out this guide if you want to learn about loading other assets like css files.