on 10-03-2006 6:22 PM
Hello you guys,
Im working on the development of a rotative banner, for someone that doesnt 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 portals 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:
Im 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 iviews *.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 dont 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");
}
}
}
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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???
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
| User | Count |
|---|---|
| 3 | |
| 3 | |
| 2 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.