Creating Analog Clock for Different Country in ADF

Hi Friends,

In this post I am going to show you that how you can create the analog clock for different country in ADF using ADF faces component, JavaScript and JQuery. You can create the clock for different country as shown below:


To create this you need the following files:

1. Clock face, Second hand, Minute hand and hour hand icons. which you can down below image and use it. These icons you need to put inside "images" folder of public_html folder of your project.




2. You need following JQuery Library:

  1. jquery.easing.1.3.js
  2. jquery-1.2.6.min.js
  3. jquery-1.3.2.min.js
  4. jQueryRotate.js
Create one folder with name "js" inside public_html folder of your project and put all above mentioned .js file inside this folder. These library you can download from Google.


3. You need to create you own CSS file and use it in you ADF application. Hope this you all knows that how to use your custom CSS in ADF application. If you don't know kindly refer the link given below.

 http://docs.oracle.com/cd/E16764_01/web.1111/b31973/af_skin.htm


Now in you jspx page or jsff page write the following code for creation of the Clocks.

 <?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document id="d1">
          <af:resource type="javascript" source="/js/jquery-1.3.2.min.js"/>
      <af:resource type="javascript" source="/js/jQueryRotate.js"/>
       <af:resource type="javascript" source="/js/jquery.easing.1.3.js"/>
   <af:resource type="javascript">
  var currentSecsR = 0;
var currentMinR = 0;
var currentHourR = 0;

function rotateObject(obj, deg) {
    $(obj).rotate(deg);
}

function updateTime1() {
    // setup new date object, and get current time in hours, minutes and seconds
    currentTime = new Date();
    currentHours = currentTime.getHours();
    if (currentHours > 12) currentHours -= 12;
    currentMins = currentTime.getMinutes();
    currentSecs = currentTime.getSeconds();
    // write it to a div so we can see the time
   
    // calculate rotations for the hands based on current time
    currentSecsR = currentSecs*6; // set rotation for second hand
    currentMinR = currentMins*6; // set rotation for minute hand
    currentHourR = currentHours*30; // set rotation for hour hand (12 hour clock)
   
    // call the function to rotate the hands rotate the hands
    rotateObject('#second11', currentSecsR);
    rotateObject('#minute11', currentMinR);
    rotateObject('#hour11', currentHourR);
   
    // run the function again after 1 second
    setTimeout(updateTime1, 1000);
}
function updateTime2() {
     d = new Date();
        utc = d.getTime() + (d.getTimezoneOffset() * 60000);
        currentTime = new Date(utc + (3600000*(+11)));
    currentHours = currentTime.getHours();
        if (currentHours > 12) currentHours -= 12;
    currentMins = currentTime.getMinutes();
    currentSecs = currentTime.getSeconds();
    // write it to a div so we can see the time
   
    // calculate rotations for the hands based on current time
    currentSecsR = currentSecs*6; // set rotation for second hand
    currentMinR = currentMins*6; // set rotation for minute hand
    currentHourR = currentHours*30; // set rotation for hour hand (12 hour clock)
   
    // call the function to rotate the hands rotate the hands
    rotateObject('#second12', currentSecsR);
    rotateObject('#minute12', currentMinR);
    rotateObject('#hour12', currentHourR);
   
    // run the function again after 1 second
    setTimeout(updateTime2, 1000);
}
function updateTime3(){
         d = new Date();
        utc = d.getTime() + (d.getTimezoneOffset() * 60000);
        currentTime = new Date(utc + (3600000*(0)));
    currentHours = currentTime.getHours();
    if (currentHours > 12) currentHours -= 12;
    currentMins = currentTime.getMinutes();
    currentSecs = currentTime.getSeconds();
    // write it to a div so we can see the time
   
    // calculate rotations for the hands based on current time
    currentSecsR = currentSecs*6; // set rotation for second hand
    currentMinR = currentMins*6; // set rotation for minute hand
    currentHourR = currentHours*30; // set rotation for hour hand (12 hour clock)
   
    // call the function to rotate the hands rotate the hands
    rotateObject('#second13', currentSecsR);
    rotateObject('#minute13', currentMinR);
    rotateObject('#hour13', currentHourR);
   
    // run the function again after 1 second
    setTimeout(updateTime3, 1000);
}
function updateTime4() {
    d = new Date();
        utc = d.getTime() + (d.getTimezoneOffset() * 60000);
        currentTime = new Date(utc + (3600000*(+1)));
    currentHours = currentTime.getHours();
    if (currentHours > 12) currentHours -= 12;
    currentMins = currentTime.getMinutes();
    currentSecs = currentTime.getSeconds();
    // write it to a div so we can see the time
   
    // calculate rotations for the hands based on current time
    currentSecsR = currentSecs*6; // set rotation for second hand
    currentMinR = currentMins*6; // set rotation for minute hand
    currentHourR = currentHours*30; // set rotation for hour hand (12 hour clock)
   
    // call the function to rotate the hands rotate the hands
    rotateObject('#second14', currentSecsR);
    rotateObject('#minute14', currentMinR);
    rotateObject('#hour14', currentHourR);
   
    // run the function again after 1 second
    setTimeout(updateTime4, 1000);
}
function updateTime5() {
    d = new Date();
        utc = d.getTime() + (d.getTimezoneOffset() * 60000);
        currentTime = new Date(utc + (3600000*(+9)));
    currentHours = currentTime.getHours();
    if (currentHours > 12) currentHours -= 12;
    currentMins = currentTime.getMinutes();
    currentSecs = currentTime.getSeconds();
    // write it to a div so we can see the time
   
    // calculate rotations for the hands based on current time
    currentSecsR = currentSecs*6; // set rotation for second hand
    currentMinR = currentMins*6; // set rotation for minute hand
    currentHourR = currentHours*30; // set rotation for hour hand (12 hour clock)
   
    // call the function to rotate the hands rotate the hands
    rotateObject('#second15', currentSecsR);
    rotateObject('#minute15', currentMinR);
    rotateObject('#hour15', currentHourR);
   
    // run the function again after 1 second
    setTimeout(updateTime5, 1000);
}

$(document).ready(function() {
    updateTime1();
        updateTime2();
        updateTime3();
        updateTime4();
        updateTime5();
});

    </af:resource>
      <af:form id="f1">
      <af:panelGroupLayout id="pgl2" layout="horizontal">
     <af:spacer width="1100" height="10" id="s1"/>
          <af:panelGroupLayout id="pgl3" layout="vertical"  inlineStyle="width:170px; height:750px; border-color:Black; border-style:solid; border-width:1px; background-color:White;">
           <af:outputText value="Local Time" id="ot1"
                     inlineStyle="font-weight:bold;" styleClass="outputTextClass1"/>
    <af:panelGroupLayout id="pgl4" layout="horizontal" styleClass="pg14">
      <af:image source="../../../../images/clockface.jpg" id="face11" inlineStyle="width:160px;height:160px"/>
        <af:image source="../../../../images/sechand.png" id="second11" styleClass="second11"/>
        <af:image source="../../../../images/minhand.png" id="minute11" styleClass="minute11"/>
        <af:image source="../../../../images/hourhand.png" id="hour11" styleClass="hour11"/>
    </af:panelGroupLayout>
                        <af:separator id="s2"/>
                        <af:outputText value="Melbourne, Australia" id="ot2"
                     inlineStyle="font-weight:bold;" styleClass="outputTextClass2"/>
    <af:panelGroupLayout id="pgl5" layout="horizontal" styleClass="pg15">
        <af:image source="../../../../images/clockface.jpg" id="face12" inlineStyle="width:110px;height:110px"/>
        <af:image source="../../../../images/sechand.png" id="second12" styleClass="second12"/>
        <af:image source="../../../../images/minhand.png" id="minute12" styleClass="minute12"/>
        <af:image source="../../../../images/hourhand.png" id="hour12" styleClass="hour12"/>
    </af:panelGroupLayout>
                        <af:separator id="s3"/>
                        <af:outputText value="London, U.K." id="ot3"
                     inlineStyle="font-weight:bold;" styleClass="outputTextClass2"/>
    <af:panelGroupLayout id="pgl6" layout="horizontal" styleClass="pg15">
         <af:image source="../../../../images/clockface.jpg" id="face13" inlineStyle="width:110px;height:110px"/>
        <af:image source="../../../../images/sechand.png" id="second13" styleClass="second13"/>
        <af:image source="../../../../images/minhand.png" id="minute13" styleClass="minute13"/>
        <af:image source="../../../../images/hourhand.png" id="hour13" styleClass="hour13"/>
    </af:panelGroupLayout>
                        <af:separator id="s4"/>
                        <af:outputText value="Paris, France" id="ot4"
                     inlineStyle="font-weight:bold;" styleClass="outputTextClass2"/>
    <af:panelGroupLayout id="pgl7" layout="horizontal" styleClass="pg15">
         <af:image source="../../../../images/clockface.jpg" id="face14" inlineStyle="width:110px;height:110px"/>
        <af:image source="../../../../images/sechand.png" id="second14" styleClass="second14"/>
        <af:image source="../../../../images/minhand.png" id="minute14" styleClass="minute14"/>
        <af:image source="../../../../images/hourhand.png" id="hour14" styleClass="hour14"/>
    </af:panelGroupLayout>
                        <af:separator id="s5"/>
                        <af:outputText value="Tokyo, Japan" id="ot5"
                     inlineStyle="font-weight:bold;" styleClass="outputTextClass2"/>
    <af:panelGroupLayout id="pgl8" layout="horizontal" styleClass="pg15">
         <af:image source="../../../../images/clockface.jpg" id="face15" inlineStyle="width:110px;height:110px"/>
        <af:image source="../../../../images/sechand.png" id="second15" styleClass="second15"/>
        <af:image source="../../../../images/minhand.png" id="minute15" styleClass="minute15"/>
        <af:image source="../../../../images/hourhand.png" id="hour15" styleClass="hour15"/>
    </af:panelGroupLayout> 
   </af:panelGroupLayout>
 </af:panelGroupLayout>
</af:form>
</af:document>
</f:view>
</jsp:root>







Now for each StyleClass mentioned in above code you have to write your CSS as follows in you custom CSS file:


.second11 {
        position:relative;
    left: -7.8em;
    width: 12px;
    height: 140px;
    z-index: 4;
}
.second12 {
    position: relative;
    left: -5.6em;
    width: 12px;
    height: 120px;
    z-index: 4;
}
.second13 {
    position: relative;
    left: -5.6em;
    width: 12px;
    height: 120px;
    z-index: 4;
}

.second14 {
    position: relative;
    left: -5.6em;
    width: 12px;
    height: 120px;
    z-index: 4;
}
.second15 {
    position: relative;
    left: -5.6em;
    width: 12px;
    height: 120px;
    z-index: 4;
}
.minute11 {
    position: relative;
    left: -9.1em;
    width: 15px;
    height: 130px;
    z-index: 3;
}
.minute12 {
    position: relative;
    left: -6.9em;
    width: 15px;
    height: 110px;
    z-index: 3;
}
.minute13 {
    position: relative;
    left: -6.9em;
    width: 15px;
    height: 110px;
    z-index: 3;
}
.minute14 {
    position: relative;
    left: -6.9em;
    width: 15px;
    height: 110px;
    z-index: 3;
}
.minute15 {
    position: relative;
    left: -6.9em;
    width: 15px;
    height: 110px;
    z-index: 3;
}
.hour11 {
    position: relative;
    left: -10.4em;
    width: 13px;
    height: 120px;
    z-index: 2;
}
.hour12 {
    position: relative;
    left: -8.2em;
    width: 13px;
    height: 120px;
    z-index: 2;
}
.hour13 {
    position: relative;
    left: -8.2em;
    width: 13px;
    height: 120px;
    z-index: 2;
}
.hour14 {
    position: relative;
    left: -8.2em;
    width: 13px;
    height: 120px;
    z-index: 2;
}

.hour15 {
    position: relative;
    left: -8.2em;
    width: 13px;
    height: 120px;
    z-index: 2;
}
.outputTextClass1{
    position: relative;
    left:50px;
}
.outputTextClass2{
  position: relative;
    left:40px; 
}

.pg14{
    position: relative;
    left:5px;
}
.pg15{
      position: relative;
    left:30px; 
}

Now just run your page and you can see the running Clock on your jspx page.

Happy Coding :)

Comments

Post a Comment

Popular posts from this blog

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

Image
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",     "modu...
Read more

Showing number of rows or row count on top and bottom of table in ADF.

Image
Hi Friends, We will see today how to show the page count on top and bottom of table in ADF. I am assuming that you all know how to create the table to show data from view object in ADF. Assume you have a table which contains the information of employees from employees table of HR schema. Now surround this table with a panel collection. Now your panel collection has some facet with name "statusbar", "toolbar" etc. Right click on facet "toolbar" and select "insert after f : facet toolbar and then "Facet Secondary Toolbar" as shown below in image. Now on facet "statusbar" and "secondaryToolbar" put toolbar component from component pallet. Then put a output text inside each toolbar as follows:  <f:facet name="secondaryToolbar">             <af:toolbar id="t3" stretchId="s2">               <af:spacer width="10" height="10" id="s2...
Read more

Build a Simple ReactJS application using react-cli

Image
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. On...
Read more