24 October 2017

Patching of Jdeveloper 12.1.3 for AM freeze on click of Data Model

set ORACLE_HOME = C:\Oracle\Middleware\Oracle_Home

SET PATH=%PATH%;C:\Oracle\Middleware\Oracle_Home\OPatch



cd C:\Soft\p19165416_121300_Generic_AM Issue\19165416

then opatch apply

5 July 2017

Customizing the ReactJS sample application created using react-cli

Some time you may want to create the react.js application using react-cli and you may also want to customize it according to your requirements.

react-cli command always get the latest version of all the libraries. for instance if you look at the package.json file then you will see the following contents:

package.json
========================================================================

{
  "name": "testapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "react-scripts": "1.0.10"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

========================================================================

You can that it has downloaded the version of react and react-dom as 15.6.1.

if you want to download the other version of the react or react-dom then you can change the version number here. You can just delete the node_modules folder then and then run the npm install command. 


it will install all the library with the same version you have specified. For big application which may contains the Router, Redux, Grunt and JS Obfuscator i will recommend you to use the below package.json file.


package.json

=======================================================================

{
  "name": "testapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-loader": "^6.2.5",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "css-loader": "^0.25.0",
    "fixed-data-table": "^0.6.3",
    "grunt": "^1.0.1",
    "grunt-babel": "^6.0.0",
    "grunt-cli": "^1.2.0",
    "grunt-contrib-uglify": "^2.2.0",
    "grunt-contrib-watch": "^1.0.0",
    "jquery": "^3.1.1",
    "js-obfuscator": "^0.1.1",
    "react": "^15.3.2",
    "react-bootstrap": "^0.30.3",
    "react-cookie": "^0.4.8",
    "react-datepicker": "^0.29.0",
    "react-dom": "^15.3.2",
    "react-redux": "^4.4.5",
    "react-router": "^3.0.0",
    "react-router-redux": "^4.0.7",
    "react-tabs": "^0.8.0",
    "redux": "^3.0.0",
    "youtube-player": "^5.4.0"
  },
  "devDependencies": {
    "react-scripts": "1.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Build a Simple ReactJS application using react-cli

Hi All,

In this blog we will see how we can create a sample application using react-cli.  It is a command line interface tool that seeks to automate some tasks when working on a React.js project.

To starts with you have to install it globally by running following command:

npm install -g react-cli

The you have to run the following command in command window:

npm install -g create-react-app 

Now once it is installed you can create any directory where you want to create you sample ReactJS application.

I have created a folder with name "TestApp" in my local drive.

Now you have to run the following command to create the sample application.

create-react-app testapp 

While it is creating application and downloading all the artifacts related to this you can see the following things in command line as shown below:



So it will create a ReactJS application with name "testapp" under folder "TestApp" as you can see in the above screenshot.

Once the above step is completed you can see the following message in the command window as shown below:


 
if you check your application folder you can see the following artifacts has been created inside the project folder.


if you see inside the src folder, the following things it has been created automatically for you.

Now change your directory to testapp from TestApp by running the following command.

cd testapp

Now run the below command to start the npm server.

npm start




now once you open the following URL you can see your sample react application in your browser as shown below:


Making/Customizing Scroll bar in bootstrap using CSS



::-webkit-scrollbar styles the entire scrollbar & ::-webkit-scrollbar-thumb Is used to style the thumb or holder(didn’t know the perfect word) which we use to hold to scrollbar.



::-webkit-scrollbar{
    height:10px;
    width:10px;
    border-radius: 1px;
    background: transparent;
        transition: all 0.3s ease;
}
::-webkit-scrollbar:hover{
    background: #c6c7ca;
}
::-webkit-scrollbar-thumb{
    background:#777779;
    border-radius: 1px;
}




12 May 2017

Router Example in Angular2

Hi All,

In this blog I am going to show you how you can implement the Routing in Angular2 application.

To Starts with this we need to create following files in your application:

1. home.component.ts (under home folder)
2. login.component.ts (under login folder)
3. app.component.ts
4. main.ts
5. index.html


create a folder with name home and then create a file with name  home.component.ts with below contents:

====================================================================
home.component.ts
====================================================================

import {Component} from 'angular2/core';

@Component({
  selector: 'home',
  template: `
      <h1>My Home Page</h1>
  `
})
export class Home {
  constructor() {

  }
}


create a folder with name login and then create a file with name  login.component.ts with below contents:

====================================================================
login.component.ts
=====================================================================
import {Component} from 'angular2/core';

@Component({
  selector: 'login',
  template: `
      <h1>My Login Page</h1>
  `
})
export class Login {
  constructor() {

  }
}




 Now create the app.component.ts in the parent folder of your application with following content:
======================================================================
app.component.ts
===================================================================== 
 import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Home} from './home/home.component.ts';
import {Login} from './login/login.component.ts';

@Component({
  selector: 'my-app',
  template: `
    <div class="app">
      Hello world!
      <nav>
        <ul>
          <li>
            <a [routerLink]=" ['Home'] ">Home</a>
          </li>
          <li>
            <a [routerLink]=" ['Login'] ">Login</a>
          </li>
        </ul>
      </nav>
      <main>
        <router-outlet></router-outlet>
      </main>
    </div>
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path: '/', name: 'Home', component: Home, useAsDefault: true },
  { path: '/login', name: 'Login', component: Login }
])
export class AppComponent {
 
}


Now create the file with name main.ts with following contents:

=====================================================================
main.ts
=====================================================================
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {ROUTER_PROVIDERS} from 'angular2/router';

bootstrap(AppComponent, [
  ROUTER_PROVIDERS
]);


Now create the index.html file in parent folder with the following content:

======================================================================
index.html
======================================================================
 <!doctype html>
<html>
  <head>
    <title>Superfast Angular 2 setup</title>
    <base href="."/>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2-polyfills.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.3.2/typescript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/Rx.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/router.js"></script>
    <script>
    System.config({
      transpiler: 'typescript',
      typescriptOptions: {
        emitDecoratorMetadata: true
      },
      map: {
        app: './js'
      },
      packages: {
        app: {
          main: './main.ts',
          defaultExtension: 'ts'
        }
      }
    });
    System
      .import('app')
      .catch(console.error.bind(console));
    </script>
  </head>
  <body>
    <my-app>
      Loading...
    </my-app>
  </body>
</html>


at the end you will have following directory structure. Since I have created it in a IDE other than eclipse so the directory structure will be little bit may be different in your case.


Once you run the application it will be rendered as follows:



Setting up the environment for Angular2 and Hello World Example in Angular2

Hi All,

In this post I am going you to show you how you can set up the environment for Angular2.

You may want to run your application in different servers. So here I am going to show you how you can run your Angular2 application in the following two servers:

1. lite-server (static server)
2. Weblogic Server 10.3

Lets do the setup for lite server. 

First of all go to any directory in your computer and create a folder in that directory with name "angular2-example".

You can do it by the command line also by typing the following command.

mkdir  angular2-example

Now once the directory is created you need to create three files.

1. tsconfig.json
2. typings.json
3. package.json

1.  tsconfig.json

This file is TypeScript compiler configuration file. It guides the compiler to generate JavaScript files after compilation.

The content of this file will be as follows:

{
  "compilerOptions": {
    "target": "es6",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}



2. typings.json


The typings.json file is used to identify TypeScript definition files in your Angular application.


 The content of this file will be as follows:

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}



3. package.json

package.json is the files which contains all the packages defined which are required by the application.


The content of this file will be as follows:

{
  "name": "angular2-demo",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

 
Once these files are created go to your folder and run the following command in run command.

npm install




This command will install are the dependencies which are defined in package.json.

Error messages in red may appear while installing npm, just ignore them.



Now our configuration is done.

Let's create a Hello World component to verify whether our setup is done properly or not.

create one folder with name app inside angular2-example folder and create the following files.

1. app.component.ts
=========================================================================
import {Component} from "angular2/core";

@Component({
   selector: 'my-app',
   template: '<h2>Hello Kunal ! How Are You ?</h2>'
})


export class AppComponent {

}

==========================================================================

2. main.ts

=========================================================================

import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./app.component"

bootstrap(AppComponent);


=========================================================================


Now create the index.html file and write the following inside it.

<!doctype html>
<html>
  <head>
    <title>Hello World</title>
    <base href=".">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2-polyfills.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.3.2/typescript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/Rx.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/router.js"></script>
    <script>
    System.config({
      transpiler: 'typescript',
      typescriptOptions: {
        emitDecoratorMetadata: true
      },
      map: {
        app: './app'
      },
      packages: {
        app: {
          main: './main.ts',
          defaultExtension: 'ts'
        }
      }
    });
    System
      .import('app')
      .catch(console.error.bind(console));
    </script>
  </head>
  <body>
    <my-app>
      Loading...
    </my-app>
  </body>
</html>

Now we can run the lite server and test our application.

To run the lite server we need to run the following command in command line

npm start

Now you can see the result in the browser as shown below:

 
 Now if you want to run the same application in the weblogic server you can create the Web application in the eclipse or any other IDE and then place the app folder and index.html inside web folder. You do not need to put three configuration files (tsconfig.json,  typings.json,  package.json) and then you can run the application as you run any other J2EE project in eclipse or any other IDE.

Then you can see the same result as above.

That's it  .

Happy Coding :)







 

3 October 2016

Creating Menu in ReactJS using Bootstrap

Hi Friends,

Extending my previous post to enable the application to show the dropdown on your page. To show the dropdown on our page we are going to use the bootstrap library of ReactJS.

To use the bootstrap feature given by ReactJS, we need to install the library related to this.  To install it we need to run the following command in command prompt window:

npm install react-bootstrap --save

Then you have to import this library in your code as follows:

import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import MenuItem from 'react-bootstrap/lib/MenuItem';


Once it is imported you can add the dropdown in your component class as shown below:

<div><Nav bsStyle="tabs" activeKey={this.state.activePage} onSelect={this.handleSelect}>
            <NavItem eventKey={1} >Tab1</NavItem>
            <NavItem eventKey={2}>Tab2</NavItem>
            <NavItem eventKey={3}>Tab3</NavItem>
            <NavDropdown eventKey={4} title="Actions" id="nav-dropdown">
                <MenuItem eventKey="4.1">Submit</MenuItem>
                <MenuItem eventKey="4.2">Add Another</MenuItem>
                <MenuItem eventKey="4.3">Delete This</MenuItem>
                <MenuItem divider />
                <MenuItem eventKey="4.4">Go To Other Page</MenuItem>
            </NavDropdown>
        </Nav>
        <div><p>Tab selected {this.state.activePage} </p></div>
        </div>



So the complete jsx code will look like as follows:

import React from "react";
import ReactDOM from "react-dom";
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import MenuItem from 'react-bootstrap/lib/MenuItem';

var TabApp = React.createClass({
 getInitialState: function() {
    return {
    activePage: 1
    };
  },
 handleSelect(eventKey) {
     var activePageNum=this.state.activePage;
    console.log("Active page ====>"+activePageNum);
    console.log("Event Kay ====>"+eventKey);
        this.setState({
            activePage: eventKey
        });
    },
componentDidMount: function() {
  this.setState({activeKey: 1});
  },
   render: function(){

        return ( <div><Nav bsStyle="tabs" activeKey={this.state.activePage} onSelect={this.handleSelect}>
            <NavItem eventKey={1} >Tab1</NavItem>
            <NavItem eventKey={2}>Tab2</NavItem>
            <NavItem eventKey={3}>Tab3</NavItem>
            <NavDropdown eventKey={4} title="Actions" id="nav-dropdown">
                <MenuItem eventKey="4.1">Submit</MenuItem>
                <MenuItem eventKey="4.2">Add Another</MenuItem>
                <MenuItem eventKey="4.3">Delete This</MenuItem>
                <MenuItem divider />
                <MenuItem eventKey="4.4">Go To Other Page</MenuItem>
            </NavDropdown>
        </Nav>
        <div><p>Tab selected {this.state.activePage} </p></div>
        </div>
        );
     }

 });

ReactDOM.render(
 <TabApp/>,
     document.querySelector("#container")
);


Your HTML code will be as follows:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <div id="container"></div>
  <script src="output/myCode.js"></script>
</body>
</html> 


Once you run your page you can see the following screen:

 Thanks and Happy Coding :)