Archive

Archive for October, 2017

Java9 : ServiceLoader

java.util.ServiceLoader class loads the service providers/implementations at run time. While compile time ServiceLoader just need to know Service interface. With the Java9 modularity, we can add service implementation modules dynamically at run time, And Application can have new implementation with out effecting anything,

lets check with an example, create a module EventsAPI with an interface  EventService.java

EventsAPI/EventService.java


package events.api;

public interface EventService {
 public String getName();
}

EventsAPI/module-info.java


module events.api {
 exports events.api;
}

Create an implementation to the EventService interface in another module called FacebookEvents

FacebookEvents/FacebookEventService.java

package events.api.facebook;
import events.api.EventService;

public class FacebookEventService implements EventService{

 public FacebookEventService() {
     System.out.println("FacebookEventService Constructor");
 }
 public String getName() {
    return "facebook events";
 }
}

 

FacebookEvents/module-info.java

module events.api.facebook {
 requires events.api;

 provides events.api.EventService
 with events.api.facebook.FacebookEventService;
}

 

FacebookEvents module requires EventsAPI, because it need to have access to EventService.java interface.

And it provides EventService implementation with FacebookEventService.

Lets create a Client module EventsClient to consume EventsAPI

EventsClient/module-info.java

 

module client.calendar {
requires events.api;
uses events.api.EventService;
}

We are going to use ServiceLoader to find the implementations of EventService interface, here ServiceLoader requires uses keyword on EventService, otherwise compiler will throw an error.

Finally Client Test class

EventsClient/Calendar.java

package client.calendar;
import java.util.ServiceLoader;
import events.api.EventService;

public class Calendar {
public static void main(String[] args) {
System.out.println("Calendar events..!!!");
ServiceLoader<EventService> events = ServiceLoader.load(EventService.class);

for(EventService event : events) {
System.out.println(event.hashCode() + " : " +event.getName());
}
events.reload();
for(EventService event : events) {
System.out.println(event.hashCode() + " : " +event.getName());
}
}
}

In the EventsClient module, we din’t mention anything about FacebookEvents module, while running the above Calendar.java add FacebookEvents module, the output will be

output

Calendar events..!!!
FacebookEventService Constructor
1627960023 : facebook events
FacebookEventService Constructor
745160567 : facebook events

ServiceLoader found the EventService implementation FacebookEventService and showed the output, lets add another implementation to the EventService interface and examine the output from above client

TwitterEvents/module-info.java


module events.api.twitter {
requires events.api;
provides events.api.EventService
with events.api.twitter.TwitterEventService;
}

same as FacebookEventService, will have TwitterEventService which will implement EventService interface

TwitterEvents/TwitterEventService.java


package events.api.twitter;

import events.api.EventService;

public class TwitterEventService implements EventService{

public TwitterEventService() {
System.out.println("TwitterEventService Constructor");
}

public String getName() {
return "twitter events";
}
}

Run the EventsClient/Calendar.java by adding TwitterEvents module on the modulepath, output as follows

Calendar events..!!!
TwitterEventService Constructor
249515771 : twitter events
FacebookEventService Constructor
1627960023 : facebook events
TwitterEventService Constructor
321142942 : twitter events
FacebookEventService Constructor
745160567 : facebook events

We have just added TwitterEvents module in the run time, ServiceLoader is able to load the TwitterEventService and gave the desired output.

Source code is available at https://github.com/rameshcharykotha/java9practice

Thanks for reading..!!

Categories: Java, Java9

Angular 4: Component Example

Welcome to the new concept of components in angular 4.

Definition: component is a angular class , Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components.

Components always have a template and only one component can be instantiated per an element in a template.
A component must belong to an NgModule in order for it to be usable by another component or application. To specify that a component is a member of an NgModule, you should list it in the declarations field of that NgModule In app.module file.

we can create the component by using this command.

ng g component ‘component name’

this command will create the component ts file and html and spec.ts and css files with your component name. no need to create the component manually.

Component:

First We need to import the angular Component class from the Angular package: @angular/core

import { Component } from '@angular/core'; 

we will use this component with the component decorator @component

Component decorator must have the selector and template. if you don’t add these fields component will not valid. because Angular uses the selector to show the html content in the app. You will find the selectors in the chrome console Elements. This selectors will add dynamically to the DOM when your change the routers. The component should have less than 400 lines of code.

Selector : css selector that identifies this component in a template. means we can use the html templates with selector in the application. another advantage is we can use the selector  tag any where in the application to show the content of template html, its one of the best feature in Angular.

 selector: ‘app’,

Template:  inline-defined template for the view. Means it’s the html code, we can write html code in the template, or we can directly give the html src by giving the template url. If we have less html code its easy to add the html content in the template. no need to create another external html file.

 template: `{{title}}`,

TemplateUrl:  Template url is the external file containing a html template for the view. If we have multiple lines of  html content, its better to keep one html file. we can give the html url path in the ‘templateUrl’ field.

templateUrl: ‘./app.component.html’,

Same for styles: css styles we can add two ways by adding styles, styleUrls fields. we should write the styles in the brackets [], it is style guide.

Style:  Inline-defined styles to be applied to this component’s view means whatever we write the styles in the component, that css styles applied to html content in template or template Url. If we have less content of styles, we can add the styles in the styles filed.

styles: [‘h1 { font-weight: normal; }’]

styleUrls: list of urls to stylesheets to be applied to this component’s view. If we have multiple styles ,its better to keep the external css files

styleUrls: [‘./app.component.css ]

Component Structure:

import { Component } from '@angular/core';
@Component({
selector: 'app',
template: 'Hello
<h4>{{title}}</h4>
!',

styles: [‘h4 { font-weight: normal; }’]
})
export class welcome { title: string = 'World'; }

Here component class must add export. then only it will available in the project. we need to add ‘export’ keyword before the component class

Module:

Every Angular app has at least one NgModule class, the root module, conventionally named AppModule. Angular apps are modular and Angular has its own modularity system called NgModules. We will add the components in the ‘declarations’ of this module file.

Import statement  for the module:

import { NgModule } from '@angular/core';

NgModule is a decorator to use the ng module.

most important properties are:

  • declarations the view classes that belong to this module.All component class names  must add in the declarations.  Angular has three kinds of view classes: componentsdirectives, and pipes.
  • exports the subset of declarations that should be visible and usable in the component templates of other modules.
  • imports other modules whose exported classes are needed by component templates declared. We must add the the modules in the ‘imports’ field. whatever we use the modules, that should be place in the imports.
  • providers creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app. These providers are for services. whatever you have services , that services should be add in the provider field. providers will tell to angular how to inject a service.

bootstrap – the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.

Module  Structure:

import { NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]

})
export class AppModule { }

The module declares some objects to be public by marking them with the export key word.

Main.ts:

Launch an application by bootstrapping its root module. During development you’re likely to bootstrap the AppModule in a main.ts file like this one

import { platformBrowserDynamic } from '@angular/platform-browser';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

Source code present in the Github

https://github.com/Sathishchary/angular-app/ 

Categories: Angular

Java9: Welcome to Module world

Java 9 has been released on September 21 officially, Eclipse is supporting Java 9 from  Eclipse Oxygen.1a (4.7.1a), Lets jump into module world..!!!

Download Java 9 from here, and add it to Eclipse Installed JRE’s as below

Eclipse - JRE

That’s it, we are good to write Java 9 module programs in Eclipse.

  1. Create First java project and add module-info.java to it, right click on the project java9-module-info

module-info.java

module first {

}

Module should start with keyword module followed by its name. currently it doesn’t requires anything or it doesn’t export anything.

2. Let’s create Second java project,

module-info.java

module second {
exports second; --<em> second module is exporting a package "second"</em>
}

Second.java — create a simple Java class with public sayHello() method in second package

package second;

public class Second {
public void sayHello() {
System.out.println("Welcome to module world..!!");
}
}

Second java class will be available to other modules, as it is exporting second package.

3. Update first module –  module-info.java as below

module first {
requires second;
}

Now first module requires second module, but it will fail with module can not be resolved compilation error

“second cannot be resolved to a module”

we need to add second module as dependency to first module.

module-path

Check the new thing called modulepath

3. Create FirstTest.java in first package as below

package first;

import second.Second; // we are accessing Second.java from second module

public class FirstTest {

public static void main(String[] args) {
Second second = new Second();
second.sayHello();
}
}

Running the above would print “Welcome to module world..!!

source code can be found at Github

Categories: Java, Java9

Angular 4: Set up

Angular 4: Set Up

Welcome to Angular Family, It is one of the most power full and faster framework developed by Google. One of its feature is Single Page Application(SPA), It has only one index.html in entire application, Whatever we use all other htmls will include in main index.html. As it is Single Page Application, there is no browser reload. We will get know all the things in the later sections.

Now we will proceed with the installation of angular 4, We will see the basic angular 4 program in Type script.

Angular 4 installation:

Install Node.js

First we need to install the node.js to get access of npm commands.

i) Download it from this site – https://nodejs.org/en/download/

ii) Setup node.js exe file with ‘npm package manager’. After installation done,
Verify that you are running node v4.x.x or higher and npm 3.x.x or higher by running the commands node -v and npm -v in a terminal/console window. Other below node versions will produce errors.

iii) Download the visual studio for better writing angular code from below website.

https://code.visualstudio.com/Download

Install the Angular CLI Globally.

You need to install the angular cli(command line interface) to use the ng command. It will use to create the angular project.

1)Creating a Angular Project

Open a terminal window. Generate a new project by running the below command:

It takes some time to create the project. after creating the project, you need to download the npm packages in your project. Just type cd AngularApp to goto your project location
And type below command to download the dependencies of your package.json file.

you will see the node-modules folder above src folder of your project.

2) Serve the application

Just type the below command in your terminal to launch the server.

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

Using the –open (or just -o) option will automatically open your browser on

http://localhost:4200/

Your app greets you with a message:

app works!

Your project structure.

Out put:

plunker:

https://embed.plnkr.co/lQ0UOT5XLZoWbogOLokX/

 

Categories: Angular Tags: