cancel
Showing results for 
Search instead for 
Did you mean: 

Clock inside Web Dynpro iView

Former Member
0 Kudos

Hi,

I created a webdynpro application with a clock(HH:MM:SS), some input elements and buttons on it. The clock needs to change its time every second. I used timetrigger and set the time to 1sec. This makes the server call every second. It causes 2 problems, ofcourse bad design as it makes server call to get the latest time and because the view gets refreshed, if the user entering any value in input value, it is lost.

Is there any other way, I could code a digital clock in the format HH:MM:SS which changes its time every second without refreshing the WD View.

I noticed similar functionality is possible if I chosse portal eventing using Java without Web Dynpro application as this allows me to put client side eventing and java script code to read the user's system time.

Any advice or code sample to achieve is highly appreciated.

Thanks and Regards,

Raju

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

Raju,

Creating clocks with WD is a bad idea. If you able to create "clock" using other type of portal iView just go ahead.

As a workaround, you may create IFrame inside WebDynpro View, the source is DHTML/JavaScript code that dynamically displayes current <b>client</b> time.

Valery Silaev

EPAM System

http://www.NetWeaverTeam.com

Former Member
0 Kudos

Thanks Valery,

I like your second suggestion in the situation I am in.

Before I close this message, could you help me out with the following.

I never used IFrame before and I am not quite sure where I can code DHTML,JavaScript code. Could you please let me know and if it is possible with some code incorporated as part of example.

Regards,

Raju

Former Member
0 Kudos

Raju,

Follow this steps:

1. In "mimes" folder corresponding to your component create HTML file, say src/mimes/<qualified-component

-name/clock.html

2. Place this as content of clock.html:


<html>
<head>
  <style type="text/css">
    body 
    { 
      overflow: hidden; 
      border: 1px solid black; 
      margin:  0px; 
      padding: 1pt;
      font-family: Verdana, Arial;
      font-size: 8pt;
      color: navy;
      text-align: center;
    }
  </style>
  <script language="javascript"> 
    window.onload = function()
    {
      var elBody = this.document.getElementById("body");
      function pad(n){ return n < 10 ? "0" + n : "" + n; }
      function timer()
      {
        var now = new Date();
        elBody.innerHTML = 
          pad( now.getHours() ) + ":" + 
          pad( now.getMinutes() ) + ":" +
          pad( now.getSeconds() );
      }
      this.setInterval( timer, 1000 );
    }
  </script>
</head>
<body id="body"></body>
</html>

3. In component view create IFrame control, set propertise "width" to 70px, "heights" to 18px, "src" to clock.html

4. Build / deploy /run. Works in any modern browser.

Good luck,

Valery Silaev

EPAM Systems

http://www.NetWeaverTeam.com

Former Member
0 Kudos

Thanks Valery,

I think it should resolve my problem.

Regards,

Raju

ps: I am not seeing the usual assign points on the left side of your answer. Do you think that the proecedure is changed recently?

Former Member
0 Kudos

Raju,

Open your original question and make sure that "Mark as question" check box is turned on.

VS

Former Member
0 Kudos

VS,

The original question is with check box on. I can see only one option available, i.e., I resolved on my own.

Do you know to whom I should contact so that I can assign the points and close the message as solved.

Regards,

Raju Datla

Former Member
0 Kudos

Raju,

Thanks for points.

One small correction:

right before

this.setInterval( timer, 1000 );

insert line

timer();

Otherwise user sees clocks only after 1 second delay.

VS

Answers (0)