Here I have given example in ES6.  When the state of component changes, then ReactJS will re render the component. By using this concept, we can manipulate classes on the go

classnames npm package 

install classnames npm package. Here is the syntax
npm install classnames --save

To Run Example Code

execute below commands
npm install
npm start
now open index.html in browser

Example Component 

Observe below component. Whenever user clicks on buttons, respective class manipulation actions will happen. Here redTextClass will be added and removed based on redText state variable 
import React from 'react'
import classNames from 'classnames'

class ExampleApplication extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
       redText: false
    };
    this.addClass = this.addClass.bind(this);
    this.removeClass = this.removeClass.bind(this);
    this.verifyClass = this.verifyClass.bind(this);
  }

  addClass() {
    this.setState({
      redText:true
    });
  }

  removeClass() {
    this.setState({
      redText:false
    });
  }

  verifyClass() {
    alert(this.state.redText);
  }

  render() {
    return (
      <div>
        <p className={classNames("boldTextClass", {"redTextClass":this.state.redText})}>some text here</p>
        <button onClick={this.addClass}>add class</button>
        <button onClick={this.removeClass}>remove class</button>
        <button onClick={this.verifyClass}>verify class</button>
      </div>
    );
  }

}

ExampleApplication.propTypes = {
}

ExampleApplication.defaultProps = {
}

export default ExampleApplication;
Read More
Here I have given example in ES6.  When the state of component changes, then ReactJS will re render the component. By using this concept, we can manipulate attributes on the go

To Run Example Code

execute below commands
npm install
npm start
now open index.html in browser

Example Component 

Observe below component. Whenever user clicks on buttons, respective attribute manipulation actions will happen. Here data-val attribute can be changed by user given value. You can read attributes by giving reference too. Observe below highlighted code 
import React from 'react'
import RemovableComponent from './RemovableComponent'

class ExampleApplication extends React.Component {

  constructor(props) {
    super(props);
    this.emptyComponent = this.emptyComponent.bind(this);
    this.removeComponent = this.removeComponent.bind(this);
    this.resetComponent = this.resetComponent.bind(this);
    this.state = {
       empty: false,
       remove: false
    };
  }

  emptyComponent() {
    this.setState({
      empty: true,
      remove: false
    });
  }

  removeComponent() {
    this.setState({
      empty: false,
      remove: true
    });
  }

  resetComponent() {
    this.setState({
      empty: false,
      remove: false
    });
  }

  render() {
    return (
      <div>
        <RemovableComponent empty={this.state.empty} remove={this.state.remove}/><br/><br/>
        <button onClick={this.emptyComponent}>empty component</button>
        <button onClick={this.removeComponent}>remove component</button>
        <button onClick={this.resetComponent}>reset component</button><br/>
      </div>
    );
  }

}

ExampleApplication.propTypes = {
}

ExampleApplication.defaultProps = {
}

export default ExampleApplication;
Read More
Here I have given example in ES6.  When the state of component changes, then ReactJS will re render the component. By using this concept, we can empty or remove the element. To implement this, you need to make your element as component

To Run Example Code

execute below commands
npm install
npm start
now open index.html in browser

Removable Element As Component 

Build react component for the element which you want to remove or empty. Observe below component. If below component receives remove property as true, this will return null value. If it receives empty as true then it will return empty div element. 
import React from 'react'

class RemovableComponent extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    if(this.props.empty) {
      return (
        <div className={"removable"}>

        </div>
      );
    } else if(this.props.remove) {
      return null;
    } else {
      return (
        <div className={"removable"}>
          This is sample Component Text
        </div>
      );
    }
  }

}

RemovableComponent.propTypes = {
  empty:React.PropTypes.bool,
  remove:React.PropTypes.bool
}

RemovableComponent.defaultProps = {
  empty:false,
  remove:false
}

export default RemovableComponent;

Main Component 

Observe below component. This is the component which controls above RemovableComponent. Whenever user clicks on buttons, the respective actions like remove, empty and reset actions will happen. The state variables of this main component are passed as properties of above RemovableComponent
import React from 'react'
import RemovableComponent from './RemovableComponent'

class ExampleApplication extends React.Component {

  constructor(props) {
    super(props);
    this.emptyComponent = this.emptyComponent.bind(this);
    this.removeComponent = this.removeComponent.bind(this);
    this.resetComponent = this.resetComponent.bind(this);
    this.state = {
       empty: false,
       remove: false
    };
  }

  emptyComponent() {
    this.setState({
      empty: true,
      remove: false
    });
  }

  removeComponent() {
    this.setState({
      empty: false,
      remove: true
    });
  }

  resetComponent() {
    this.setState({
      empty: false,
      remove: false
    });
  }

  render() {
    return (
      <div>
        <RemovableComponent empty={this.state.empty} remove={this.state.remove}/><br/><br/>
        <button onClick={this.emptyComponent}>empty component</button>
        <button onClick={this.removeComponent}>remove component</button>
        <button onClick={this.resetComponent}>reset component</button><br/>
      </div>
    );
  }

}

ExampleApplication.propTypes = {
}

ExampleApplication.defaultProps = {
}

export default ExampleApplication;
Read More
This is continuation of article Login With Twitter Using Java. By using Twitter OAuth features, If you want to update status of user from your java web application, This article will help you. Suppose if you create a news sharing website, Your website will get more traffic if users share those news on their twitter's timeline. They can do that directly from your application if they given access to your application. Twitter is having java library twitter4j to access twitter services. Download twitter4j and add those jars to WEB-INF folder.
---   Click here to see demo  ---  Download eclipse code ---

Project

I have provided sample project here, download it. Open Setup.java and give your twitter app credentials, database credentials. Create MySQL database schema with name "demos". Created below specified table. Import this project into Eclipse, add it to tomcat server, run index.html

There are 2 types of Update Status features are there.  
  1. Update status to your own profile using access token and access token secret which were generated manually
  2. Update status on user's timeline using oauth access token and access token secret that were saved in database

Process - Oauth Status Update

  1. Register your application in twitter developers page
  2. Provide access link to user ( Generate link using Twitter4j ) 
  3. User will be redirected to twitter access page. User will give permission to application
  4. Access token will be sent to Callback URL
  5. Get access token and store it in database
  6. Whenever you want to update status on user's timeline, get access token from access token secret from database and update status using them
   // configure twitter object with consumer key and consumer secret 
   ConfigurationBuilder cb = new ConfigurationBuilder();
   cb.setDebugEnabled(true)
     .setOAuthConsumerKey(Setup.CONSUMER_KEY)
     .setOAuthConsumerSecret(Setup.CONSUMER_SECRET); 
   TwitterFactory tf = new TwitterFactory(cb.build());
   Twitter twitter = tf.getInstance();
   
   // get user details from by user id
   UserPojo user = TwitterDAO.selectUser(4);
   // set access token and access token secret and user id
   AccessToken accessToken1 = new AccessToken(user.getAccess_token(), user.getAccess_token_secret(), user.getTwitter_User_id());
   twitter.setOAuthAccessToken(accessToken1);
   
   // update status from
   twitter.updateStatus("Sample tweet from standalone java");

Process - Status Update To Your Own Profile

If you want to update status to your own profile, you can do it with default access token and access token secret. Observe below screenshot.  
Build AccessToken object with above access token and access token secret and user id. Update status as like above
Read More
If you implement "Login With Twitter" for your website, users don't need to remember  password for your website, so users will feel comfortable to use your website. In advance, you can access users  timeline feed. Twitter is providing Twitter4J to implement twitter api using java, download this twitter4j and add it to build path

Project

I have provided sample project here, download it. Open Setup.java and give your twitter app credentials, database credentials. Create MySQL database schema with name "demos". Created below specified table. Import this project into Eclipse, add it to tomcat server, run index.html

Implementation

  1. When user click on Login with twitter button, Provide them access link which is generated by Twitter4j with your app credentials. 
  2. User will be redirected to twitter api page
  3. Once user gives permission, access token and oauth verifier will be sent to callback URL
  4. Now verify the access token with oauth verifier. It will generate access token object which will have access token and access token secret 
  5. Now save access token and access token secret in database with user details like twitter user id and screen name.
User cant change their twitter user id, so we can use this to identify user. If user login again, we can process user's account using twitter user id. Whenever you want to update status on user's timeline, you can do with these saved access tokens.

Create App In Twitter Developer Page

Open twitter apps webpage.  Create your app and get Consumer Key and Consumer Secret Key. Observe below diagram.

Database Table

Created database table like below.

CREATE TABLE `demos`.`twitter_user` (
  `user_id` INT NOT NULL AUTO_INCREMENT COMMENT '',
  `twitter_user_id` INT NULL COMMENT '',
  `screen_name` VARCHAR(45) NULL COMMENT '',
  `access_token` VARCHAR(100) NULL COMMENT '',
  `access_token_secret` VARCHAR(100) NULL COMMENT '',
  `created_date` DATETIME NULL DEFAULT CURRENT_TIMESTAMP COMMENT '',
  PRIMARY KEY (`user_id`)  COMMENT '',
  UNIQUE INDEX `twitter_user_id_UNIQUE` (`twitter_user_id` ASC)  COMMENT '');

Prepare Signin Link

Observe below code. Configure twitter object with Consumer Key and Secret Key, Generate request token with callback URL, save it to session. Generate authentication URL and redirect to that URL
// configure twitter api with consumer key and secret key
ConfigurationBuilder cb = new ConfigurationBuilder();
cb.setDebugEnabled(true)
  .setOAuthConsumerKey(Setup.CONSUMER_KEY)
  .setOAuthConsumerSecret(Setup.CONSUMER_SECRET);
TwitterFactory tf = new TwitterFactory(cb.build());
Twitter twitter = tf.getInstance();
request.getSession().setAttribute("twitter", twitter);
try {
    
    // setup callback URL
    StringBuffer callbackURL = request.getRequestURL();
    int index = callbackURL.lastIndexOf("/");
    callbackURL.replace(index, callbackURL.length(), "").append("/callback");

    // get request object and save to session
    RequestToken requestToken = twitter.getOAuthRequestToken(callbackURL.toString());
    request.getSession().setAttribute("requestToken", requestToken);
    
    // redirect to twitter authentication URL
    response.sendRedirect(requestToken.getAuthenticationURL());

} catch (TwitterException e) {
    throw new ServletException(e);
}

Callback Servlet

Callback servlet will receive oauth_verifier parameter. Verify access token with that verification code, then you will get access token object, Now save or update access token or access token secret to database. Here we identify user with twitter user id that is always constant. TwitterDAO.selectTwitterUser method gives user object based on twitter user id.
// Get twitter object from session
Twitter twitter = (Twitter) request.getSession().getAttribute("twitter");
//Get twitter request token object from session
RequestToken requestToken = (RequestToken) request.getSession().getAttribute("requestToken");
String verifier = request.getParameter("oauth_verifier");
try {
    // Get twitter access token object by verifying request token 
    AccessToken accessToken = twitter.getOAuthAccessToken(requestToken, verifier);
    request.getSession().removeAttribute("requestToken");
    
    // Get user object from database with twitter user id
    UserPojo user = TwitterDAO.selectTwitterUser(accessToken.getUserId());
    if(user == null) {
       // if user is null, create new user with given twitter details 
       user = new UserPojo();
       user.setTwitter_user_id(accessToken.getUserId());
       user.setTwitter_screen_name(accessToken.getScreenName());
       user.setAccess_token(accessToken.getToken());
       user.setAccess_token_secret(accessToken.getTokenSecret());
       TwitterDAO.insertRow(user);
       user = TwitterDAO.selectTwitterUser(accessToken.getUserId());
    } else {
       // if user already there in database, update access token
       user.setAccess_token(accessToken.getToken());
       user.setAccess_token_secret(accessToken.getTokenSecret());
       TwitterDAO.updateAccessToken(user);
    }
    request.setAttribute("user", user);
} catch (TwitterException | DBException e) {
    throw new ServletException(e);
} 
request.getRequestDispatcher("/status.jsp").forward(request, response);

Read More
Observe below Image. HTML5 Video can be displayed through text, if text have 2 different stroke opacity and fill opacity properties. Normal HTML text won't provide stroke opacity and fill opacity features, Only SVG text does. So we have to implement this using SVG text.

SVG Text

<svg class="blur" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="1050" height="498">
      <text x="30" y="350" fill="white" stroke="darkkhaki" stroke-width="3" fill-opacity="0" stroke-opacity="1">SVG</text>
</svg>
fill-opacity is 0 means filling area of text is completely transparent. stroke-opacity is 1 means stroke width of text is completely visible. Whatever displayed in the background, it will be visible to user through text

Markup

Observe below markup. Here I placed video as background to this demodiv
<div class="demoDiv">
    <svg class="blur" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="1050" height="498">
      <text x="30" y="350" fill="white" stroke="darkkhaki" stroke-width="3" fill-opacity="0" stroke-opacity="1">SVG</text>
    </svg>
    <video id="work-letter-video-one" class="letter-video" autoplay="" preload="auto" loop="">
     <source src="letter-smoke.webm">
     <source src="letter-smoke.mp4">
   </video>
</div>

CSS

.demoDiv {
  position: relative;
  width: 883px;
  margin: auto;
}

.demoDiv text {
  font-size:400px;
}

.demoDiv video {
  width: 100%; 
  position: absolute;
  left:0px;
  top:0px;
  z-index:-1
}
Read More
I am going to create beautiful menu using CSS3 transition effect. Observe below image. When user hover the menu text, the text color will change gradually character by character.  This type of effect can be created by simple CSS3 transition

Markup

Observe below markup. menu-link-default-txt is default text. menu-link-over is text to be displayed from 0% to 100% on mouse over, menu-link-default-txt will be hidden from 100% to 0%. 

Left To Right Animation

<a href="http://flaticon.sodhanalibrary.com/" class="menu-link menu-link-left" target="_blank">
   <div class="menu-link-txt">
    <div class="menu-link-default">
        <div class="menu-link-default-txt">My Blog</div>
    </div>
    <div class="menu-link-hover">My Blog</div>
   </div>
</a>
Click here to see DEMO

Left To Right Animation

<a href="http://flaticon.sodhanalibrary.com/" class="menu-link menu-link-right" target="_blank">
   <div class="menu-link-txt">
    <div class="menu-link-default">
        <div class="menu-link-default-txt">My Blog</div>
    </div>
    <div class="menu-link-hover">My Blog</div>
   </div>
</a>

CSS

.menu-link {
    display: block;
    padding: 14px 5px;
    color: #fff;
    overflow: hidden;
    font-size:100px;
}

.menu-link:before, .menu-link:after {
    content: '';
    position: absolute;
    left: 5px;
    bottom: 4px;
    width: 35px;
    height: 1px;
    background-color: #e9a065
}

.menu-link:before {
    -moz-transform: translate(-50%, 0) scale(0, 1);
    -ms-transform: translate(-50%, 0) scale(0, 1);
    -webkit-transform: translate(-50%, 0) scale(0, 1);
    transform: translate(-50%, 0) scale(0, 1);
    -moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.menu-link:after {
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1)
}

.menu-link:hover:before {
    -moz-transform: translate(0%, 0) scale(1, 1);
    -ms-transform: translate(0%, 0) scale(1, 1);
    -webkit-transform: translate(0%, 0) scale(1, 1);
    transform: translate(0%, 0) scale(1, 1);
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1)
}

.menu-link:hover:after {
    -moz-transform: translate(50%, 0) scale(0, 1);
    -ms-transform: translate(50%, 0) scale(0, 1);
    -webkit-transform: translate(50%, 0) scale(0, 1);
    transform: translate(50%, 0) scale(0, 1);
    -moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.menu-link:hover .menu-link-default {
    width: 0%
}

.menu-link:hover .menu-link-hover {
    width: 100%;
    opacity: 1;
}

.menu-link-left .menu-link-txt {
    float: left;
    position: relative
}

.menu-link-left .menu-link-default {
    float: right;
    width: 100%;
    padding: 5px 0;
    white-space: nowrap;
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    overflow: hidden
}

.menu-link-left .menu-link-default-txt {
    float: right
}

.menu-link-left .menu-link-hover {
    position: absolute;
    left: 0;
    top: 0;
    opacity:0;
    width: 0%;
    padding: 5px 0;
    color: #e9a065;
    white-space: nowrap;
    overflow: hidden;
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1)
}

.menu-link-right .menu-link-txt {
    float: right;
    position: relative
}

.menu-link-right .menu-link-default {
    float: left;
    width: 100%;
    padding: 5px 0;
    white-space: nowrap;
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    overflow: hidden
}

.menu-link-right .menu-link-default-txt {
    float: right;
    width:100%;
}

.menu-link-right .menu-link-hover {
    position: absolute;
    right: 0;
    top: 0;
    width: 0%;
    padding: 5px 0;
    color: #e9a065;
    white-space: nowrap;
    overflow: hidden;
    opacity:0;
    width: 100%;
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1)
}
Read More

Blogroll

Follow this blog by Email

Popular Posts