An iPad/iPhone menu for SAP NetWeaver portal

Technique/그외2011. 1. 27. 10:00

An iPad/iPhone menu for SAP NetWeaver portal

An iPad/iPhone menu for SAP NetWeaver portal
Michael Nicholls
Business Card
Company: SAP Australia
Posted on Jan. 26, 2011 02:11 PM in Enterprise Portal (EP)

When most users launch the SAP NetWeaver Portal, they use a browser to launch it and they get a menu which might look like this:

My aim was to build a portal component that could be used to create a menu system a bit like this:

When the user launches the portal component from Safari, they get a screen similar to this:

The user stores their username and password to access the SAP NetWeaver Portal using the Settings option:

Using the Save option then saves the values and relaunches the URL, appending the user's username and password. The user must have already logged on to the SAP NetWeaver Portal successfully so that they do not have an initial or expired password. Selecting an option leads through the different navigation levels until you get a screen that lets you actually start an iView:

Creating the portal component in NWDS involved creating a new portal project. I called mine Mobile. There is a set of JavaScript code that I need to use, and to make things easy, I put it under the dist/images folder and called it Includeme.js. Here is the project structure:

The main component is called SiteMap. It is of type AbstractPortalComponent, and we need to make it anonymous, so that it can still work even if the user has not yet been authenticated. The source for Includeme.js is here:

<!DOCTYPE html> <html> <head> <title>SAP NetWeaver Portal</title> <meta name="viewport" content="width=default-width; user-scalable=no" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <link rel="apple-touch-icon-precomposed" href="icon.png" _mce_href="icon.png" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" _mce_href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css"></link> <mce:script _mce_src="http://code.jquery.com/jquery-1.4.4.min.js"></mce:script> <mce:script _mce_src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></mce:script> <mce:script type="text/javascript"></mce:script></head>

The code for the component is here:

package com.sap.anz; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.InputStreamReader; import java.util.Hashtable; import java.util.Iterator; import java.util.Locale; import java.util.StringTokenizer; import java.util.Vector; import javax.servlet.http.HttpServletResponse; import com.sap.security.api.IUser; import com.sapportals.portal.navigation.INavigationNode; import com.sapportals.portal.navigation.INavigationService; import com.sapportals.portal.navigation.NavigationNodes; import com.sapportals.portal.prt.component.AbstractPortalComponent; import com.sapportals.portal.prt.component.IPortalComponentProfile; import com.sapportals.portal.prt.component.IPortalComponentRequest; import com.sapportals.portal.prt.component.IPortalComponentResponse; import com.sapportals.portal.prt.pom.IEvent; import com.sapportals.portal.prt.runtime.PortalRuntime; public class SiteMap extends AbstractPortalComponent { IUser user; int counter; String heading; // BufferedWriter out = null; java.io.PrintWriter out = null; Vector parents; Vector folders; Vector menus; String myURL; int level; protected void doOnNodeReady( IPortalComponentRequest request, IEvent event) { IPortalComponentProfile profile = request.getComponentContext().getProfile(); HttpServletResponse response = request.getServletResponse(true); counter = 0; level = 1; parents = new Vector(); folders = new Vector(); menus = new Vector(); parents.add(new Integer(0)); folders.add("0,SAP NetWeaver Portal"); try { out = response.getWriter(); response.setContentType("text/html; charset=UTF-8"); com.sapportals.portal.prt.session.IUserContext userContext = request.getUser(); boolean anonymous = userContext.isMemberOfGroup("GRUP.SUPER_GROUPS_DATASOURCE.Anonymous Users",false); // read the contents of Includeme.js from the dist\images folder in the NWDS project String pubPath =request.getPublicResourcePath(); File jsfile = new File(pubPath+"\\images\\Includeme.js"); BufferedReader js = new BufferedReader( new InputStreamReader(new FileInputStream(jsfile))); String line; while ((line = js.readLine())!=null) { write(line); } js.close(); // write("</script></head>"); write("<body onLoad=\"onBodyLoad()\">"); myURL = "http://"+request.getServletRequest().getServerName()+ ":"+request.getServletRequest().getServerPort()+ "/irj/servlet/prt/portal/prtroot/com.sap.portal.pagebuilder.IviewModeProxy?iview_id=pcd%3A"; getNavigation(request,out); for (int i=0; i<folders.size();i++) { String s = folders.elementAt(i).toString(); StringTokenizer st = new StringTokenizer(s,","); int thisint = (new Integer(st.nextToken())).intValue(); // write("N"+thisint+","+st.nextToken()); write("<div data-role=\"page\" data-theme=\"b\" id=\"N"+thisint+"\">"); write("<div data-role=\"header\" data-theme=\"a\""); boolean writeSettings = false; if (i==0) { write("data-nobackbtn=\"true\">"); write("<span class=\"ui-btn-right\"><a href="\"#settingsConnection\"" _mce_href="\"#settingsConnection\"">Settings</a></span>"); writeSettings = true; } else { write("><a href=\"#N0\" data-icon=\"arrow-l\" data-transition=\"flip\">Home</a>"); } write("<h1>"+st.nextToken()+"</h1></div>"); if (anonymous) { write("<div data-role=\"content\" <center>Use the Settings option to setup your username and password</center></div>"); } write("<div data-role=\"content\">"); write("<ul data-role=\"listview\" data-inset=\"true\" data-theme=\"c\" data-dividertheme=\"a\">"); for (int j=0;j<menus.size();j++) { String thisone = menus.elementAt(j).toString(); st = new StringTokenizer(thisone,","); int thisfolder = (new Integer(st.nextToken())).intValue(); int thismenu = (new Integer(st.nextToken())).intValue(); String thisoption = st.nextToken(); if (thisfolder==thisint) { write("<li><a href=\"#N"+thismenu+"\" data-transition=\"flip\">"+thisoption+"</a></li>"); // write("option:"+thisoption+" "+thismenu); } } // if (writeSettings) { // write("<li><a href=\"#settingsConnection\" data-transition=\"flip\">Mobile connection settings</a></li>"); // } write("</ul>"); write("</div>"); write("<div data-role=\"footer\"></div></div>"); } write("<div data-role=\"page\" data-theme=\"b\" id=\"settingsConnection\">"); write("<div data-role=\"header\" data-theme=\"a\">"); write("<a href=\"#N0\" data-icon=\"arrow-l\">Home</a>"); write("<h1>Mobile connection settings</h1>"); write("<span onclick=\"setSettings();\" data-role=\"button\" data-icon=\"check\" class=\"ui-btn-right\">Save</span>"); write("</div>"); write("<div data-role=\"content\">"); write("<form action=\"#\" method=\"get\">"); // write("<label for=\"server\">Server:</label>"); // write("<input type=\"text\" id=\"server\" name=\"server\" value=\"\" placeholder=\"Please specify. eg. local.nsp.system\"/>"); // write("<label for=\"port\">Port:</label>"); // write("<input type=\"text\" id=\"port\" name=\"port\" value=\"\" placeholder=\"Please specify. eg. 50000\">"); write("<label for=\"username\">Username:</label>"); write("<input type=\"text\" id=\"username\" name=\"username\" value=\"Please specify username.\">"); write("<label for=\"password\">Password:</label>"); write("<input type=\"password\" id=\"password\" name=\"password\" value=\"Please specify password.\">"); write("</form>"); write("</div></div>"); write("<div data-role=\"dialog\" data-theme=\"b\" id=\"message\">"); write("<div data-role=\"header\" data-theme=\"a\">"); write("<h1> </h1>"); write("</div>"); write("<div data-role=\"content\">"); write("<p id=\"alert_message\"> </p>"); write("<a href=\"#N0\" data-role=\"button\" data-theme=\"c\"><center>OK</center></a>"); write("</div>"); write("<div data-role=\"footer\" data-theme=\"a\">"); write("</div>"); write("</div>"); write("</body></html>"); out.close(); } catch (Exception e) { } } public void getNavigation(IPortalComponentRequest request, java.io.PrintWriter response) throws Exception { try { NavigationNodes rootNodes = getrootnodes(request); int i = 1; for (Iterator it = rootNodes.iterator(); it.hasNext();) { INavigationNode rootNode = (INavigationNode) it.next(); String title = rootNode.getTitle(Locale.ENGLISH); addFolder(title, response); getRestofNodes(rootNode,response); i = i + 1; } } catch (Exception e) { response.write("<br>Error in getNavigation() - "+e.getLocalizedMessage()); } } public void addName(String text, String URL, java.io.PrintWriter response) { try { counter++; int parent = ((Integer) parents.elementAt(level-2)).intValue(); String miniURL = URL.substring(8); write("<div data-role=\"page\" data-theme=\"b\" id=\"N"+counter+"\">"); write("<div data-role=\"header\" data-theme=\"a\">"); write("<a href=\"#N"+parent+"\" data-icon=\"arrow-l\">Back</a>"); write("<h1>"+text+"</h1></div>"); write("<div data-role=\"content\">"); write("<a target=\"_new\" href="\""+myURL+miniURL+"\"" _mce_href="\""+myURL+miniURL+"\"">Launch the content</a>"); write("</div><div data-role=\"footer\"></div></div>"); //write("N"+counter+","+text+","+text+","+myURL+miniURL // +parent+",3"); menus.add(parent+","+counter+","+text+","); } catch (Exception e) { response.write("<br>Error in addName() - "+text+" - "+e.getLocalizedMessage()); } } public void addFolder(String foldername,java.io.PrintWriter response) { counter++; if (level > parents.size()) { parents.setSize(level); }; parents.set(level-1,new Integer(counter)); int parent = 0; if (level > 1) parent = ((Integer) parents.elementAt(level-2)).intValue(); folders.add(counter+","+foldername); menus.add(parent+","+counter+","+foldername+","); // write("N"+counter+","+foldername+","+parent); } private void write(String s) { if (out!=null) { try { out.write(s); out.write("\n"); } catch (Exception e) {} } } private void getRestofNodes(INavigationNode rootnode, java.io.PrintWriter response) throws Exception { level++; NavigationNodes childrenNodes = rootnode.getChildren(); for (Iterator it = childrenNodes.iterator(); it.hasNext();) { INavigationNode newNode = (INavigationNode) it.next(); String text = "" + newNode.getTitle(Locale.ENGLISH) +""; if (newNode.getChildren().size() > 0) { // response.write("<br>folder"+level+" "+text); addFolder(text, response); getRestofNodes(newNode,response); } else { addName(text,newNode.getName(),response); //response.write("<br>end"+level+" "+text+newNode.getName()); }; } level--; } public Hashtable getEnvironment(IPortalComponentRequest request) throws Exception { Hashtable environment = new Hashtable(); com.sapportals.portal.prt.session.IUserContext userContext = request.getUser(); String user = userContext.getUniqueName(); environment.put("NavigationPrincipal", userContext); environment.put("User", user); return environment; } private NavigationNodes getrootnodes(IPortalComponentRequest request) throws Exception { INavigationService navigationservice = (INavigationService) PortalRuntime .getRuntimeResources() .getService( "com.sap.portal.navigation.service.navigation"); return navigationservice.getInitialNodes(getEnvironment(request)); } public void doContent( IPortalComponentRequest request, IPortalComponentResponse response) { }; }

A copy of the PAR file can be found here

Michael Nicholls is a SAP NetWeaver trainer for SAP Australia.

http://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/23182%3Futm_source%3Dtwitterfeed%26utm_medium%3Dtwitter%26utm_campaign%3DFeed%253A+SAPNetworkWeblogs+%2528SAP+Network+Weblogs%2529

저작자표시 비영리 동일조건

'Technique > 그외' 카테고리의 다른 글

Step by Step Guide for Language Translation Tool (0)	2011.01.27
SAP Glossary availbale within App Store (0)	2011.01.27
900 index in usuable state with SAP Basis 7.00/7.01/7.02(Oracle DB) (0)	2011.01.07
The Future for SAP Business Intelligence (0)	2010.12.23
SOA Design Principles - Service Abstraction (0)	2010.12.23

Posted by AgnesKim

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

아주가끔은제정신