cancel
Showing results for 
Search instead for 
Did you mean: 

Banner (rotative)...ANY HELP WILL BE REWARDED!!!!

Former Member
0 Kudos

Hello you guys,

I’m working on the development of a rotative banner, for someone that doesn’t know what it is…is a banner (in several web pages you can find one) that change the image present in it once on a while (every certain time), and each one of those image represent a point of entry for accessing to an specific place…in almost all of the cases, different web pages… in my case a specific portal’s role, user profile. The images that I want to present in the banner are store in the km repository. I found a solution that serves me well for my purpose, but I need to find another solution for achieve my goal and now I going to explain why:

I’m using a JSPDynpage PAR, as a parameters of this *.PAR , I get the all the paths where the images are physically store on the server, the names of those images and the paths of the roles (in the PCD) associated to each one of those image. In the before output method, I get the complete path where the image is store, and put it (render it) on my iview, then is executed a wait method and finally with the SUBMIT method, I send again the information (some variables that I need to change the image in the banner) to the browser and that result in the continuing refresh (request – response cycle) of my browser. Its important to know that only the iview’s *.PAR is refreshing when the submit method is execute, not all the page. Know, like I said before all works fine, but the problem is that I want to do this but I don’t want that my browser refresh every certain time…so the question is: is there another way to do this using EPCM API and avoiding the use of the submit method (no refresh the browser)?

Here is the source code if someone need to look it for give me some answers. Any help will be rewarded. Thanx a lot!!!

<%@ page pageEncoding="ISO-8859-1"%>

<%@ page import="java.util.List"%>

<%@ taglib uri="tagLib" prefix="hbj" %>

<%@ page language="java" %>

<%

String RefreshTime = (String) componentRequest.getValue("RefreshTime");

String imgURL = (String) componentRequest.getValue("imgURL");

String name = (String) componentRequest.getValue("name");

String URL = (String) componentRequest.getValue("URL");

%>

<hbj:content id="myContext" >

<hbj:page title="PageTitle">

<hbj:form id="myFormId" >

<hbj:inputField

id="InputName"

type="string"

maxlength="100"

visible = "FALSE"

value="<%=name%>"/>

<hbj:inputField

id="InputURL"

type="string"

maxlength="100"

visible = "FALSE"

value="<%=URL%>"/>

<hbj:gridLayout

id="myGridLayout1"

debugMode="FALSE"

width="100%"

cellSpacing="5">

<hbj:gridLayoutCell

rowIndex="1"

columnIndex="1"

width="100%"

horizontalAlignment="CENTER">

<hbj:link

id="link1"

text=""

target="_TOP">

<hbj:image

src="<%=imgURL%>"

alt="Banners"/>

<% link1.setOnClientClick("javascript:EPCM.doNavigate('"URL"')"); %>

</hbj:link>

</hbj:gridLayoutCell>

</hbj:gridLayout>

</hbj:form>

</hbj:page>

</hbj:content>

<SCRIPT LANGUAGE="JavaScript">

var tid = window.setTimeout("changeMessage()",<%=RefreshTime%>000);

function changeMessage(){

var myFormId = document.getElementById(htmlb_formid);

myFormId.submit();

}

function stopMessageBanner(){

if (typeof tid != "undefined"){

clearTimeout(tid);

}

}

</SCRIPT>

Anexo la clase java

import com.sapportals.htmlb.Image;

import com.sapportals.htmlb.InputField;

import com.sapportals.htmlb.Link;

import com.sapportals.htmlb.page.DynPage;

import com.sapportals.htmlb.page.PageException;

import com.sapportals.portal.htmlb.page.JSPDynPage;

import com.sapportals.portal.htmlb.page.PageProcessorComponent;

import com.sapportals.portal.prt.component.IPortalComponentProfile;

import com.sapportals.portal.prt.component.IPortalComponentRequest;

import com.sapportals.portal.prt.component.IPortalComponentURI;

public class ZbannersRotatives extends PageProcessorComponent {

public DynPage getPage(){

return new ZbannersRotativesDynPage();

}

public static class ZbannersRotativesDynPage extends JSPDynPage{

private IPortalComponentRequest request;

private IPortalComponentProfile profile;

private String RefreshTime ="";

private String path = "";

private String name1 = "";

private String name2 = "";

private String name3 = "";

private String url1 = "";

private String url2 = "";

private String url3 = "";

private String name = "";

private String URL = "";

public void doInitialization(){

request = (IPortalComponentRequest) this.getRequest();

profile = request.getComponentContext().getProfile();

RefreshTime = profile.getProperty("RefreshTime");

path = profile.getProperty("path");

name3 = profile.getProperty("name3");

url3 = profile.getProperty("url3");

name = name3;

URL = url3;

}

public void doProcessAfterInput() throws PageException {

request = (IPortalComponentRequest) getRequest();

profile = request.getComponentContext().getProfile();

path = profile.getProperty("path");

name1 = profile.getProperty("name1");

name2 = profile.getProperty("name2");

name3 = profile.getProperty("name3");

url1 = profile.getProperty("url1");

url2 = profile.getProperty("url2");

url3 = profile.getProperty("url3");

InputField currentInputName = (InputField) this.getComponentByName("InputName");

InputField currentInputURL = (InputField) this.getComponentByName("InputURL");

String name_var = "";

String url_var = "" ;

if (currentInputName != null) {

name_var = currentInputName.getString().getValue();

url_var = currentInputURL.getString().getValue();

}

if(name_var.equals(name3))

{

name = name1;

URL = url1;

}

if(name_var.equals(name1))

{

name = name2;

URL = url2;

}

if(name_var.equals(name2))

{

name = name3;

URL = url3;

}

}

public void doProcessBeforeOutput() throws PageException {

request = (IPortalComponentRequest) this.getRequest();

profile = request.getComponentContext().getProfile();

RefreshTime = profile.getProperty("RefreshTime");

IPortalComponentURI componentURI = request.createPortalComponentURI();

componentURI.setContextName("com.sap.km.cm.docs");

String docsURI = componentURI.toString();

String imgURL = docsURI + path + "/" + name;

Link linkBanner = new Link("lnkBanner");

linkBanner.setTarget("_blank");

linkBanner.setOnClientClick("javascript:EPCM.doNavigate('"URL"')");

Image oImgBanner = new Image(name,"Banner");

oImgBanner.setTooltip("Ayuda");

linkBanner.addComponent(oImgBanner);

request.putValue("linkBanner",linkBanner);

request.putValue("name",name);

request.putValue("URL",URL);

request.putValue("imgURL",imgURL);

request.putValue("RefreshTime",RefreshTime);

this.setJspName("ZbannersRotatives.jsp");

}

}

}

Accepted Solutions (0)

Answers (2)

Answers (2)

Former Member
0 Kudos

Hi,

there is a possibility to make a request to the server without refresh. You can use the XMLHttpRequest object.

1. create an AbstractPortalComponent component, that will return the desired output into the response (image with link). Let's call this component DataComponent.

2. create a component, that will output a DIV object with ID for example "myDivId" and a Javascript, that will periodically call a JS function (some JS <i>setTimeout(JsFunctionToCall(), waitTimeInMiliseconds)</i>). In this function you will create a XMLHttpRequest object (different for Mozilla and MSIE):

var xmlhttp = null;
// not MSIE
if (window.XMLHttpRequest) 
  xmlhttp=new XMLHttpRequest();
//  MSIE
else if (window.ActiveXObject) 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

now prepare the JS function that handles the output (takes the output from XMLHttpRequest object and puts it as is into the DIV contents):

xmlhttp.onreadystatechange = function() {stateXMLDocChanged();}

then set up (dataURL is the URL to DataComponent):

xmlhttp.open("POST",dataUrl,true);

...and get the data:


if (window.XMLHttpRequest) 
  xmlhttp.send(null);
else
  xmlhttp.send();

Now create the function that fetches the data and puts it into the DIV contents (get the DIV object with id 'myDivId' == myDiv)

stateXMLDocChanged(){
  myDiv.innerHTML=g_xmlhttp.responseText;
}

This is just a draft of a possible solution. You can see the concept working in our "EFP portal" <a href="http://www.szif.cz">www.szif.cz</a> (there is only one HTML for the output - no frames, no IFrames, but the 'iviews' are refreshed only 'locally').

Hope this helps you a bit,

Romano

PS: and yes, <a href="http://www.szif.cz">www.szif.cz</a> is a real SAP Portal

Former Member
0 Kudos

cool your EFP Portal ....where do i get more information about XMLHttpRequest Obj??? if my portal is a standard EP6 portal (not external facing) can i use this object too... a mean can i use this object on any simple html page???

Former Member
0 Kudos

Hi,

for more information about XMLHttpRequest check Google, or here is a good explanation:

<a href="http://www.xml.com/pub/a/2005/02/09/xml-http-request.html">Very Dynamic Web Interfaces</a>

You can use the XMLHttpRequest in any HTML - it is only a JS object that enables you to make HTTP request on the background without refreshing the page.

Romano

detlev_beutner
Active Contributor
0 Kudos

Hi Mariana,

First, if submitting code, please use the Code marker of the SDN editor, which makes it much more readable.

Second, if you set the iView to URL isolated, only the iView will be refreshed. Maybe the fastest and easiest method to achieve your aim.

Third, the way I would do this would completely be on client side. Preload all images via JS and use the timer to change the image displayed via JS; see for example http://javascript.internet.com/miscellaneous/preload-images.html for some JS example (google for "preload images javascript" for more results).

Hope it helps

Detlev

Former Member
0 Kudos

the thing is that the number of images isn't static, i can have 3 images or 2 images or even more on the repository and i must to grab them all and show them in the banner...so the solution that you gave me works fine if i have a finite number of images...what do i have to do if i don't have a fix number of images??? how can i manage "dynamically" the preloads of image on client side???

detlev_beutner
Active Contributor
0 Kudos

Hi Mariana,

> i can have 3 images or 2 images

> or even more on the repository

I can't realize the problem. Even if you use server-side roundtrips to exchange the images, on the server component you will know which (and how many) images there are. The same knowledge you have if you render the HTML/JS once and dyncamically create the HTML/JS content of the iView. No difference at all.

Hope it helps

Detlev