Upload Image file from system in Web dynpro view

Transcription

1 Upload Image file from system in Web dynpro view Applies to: Web Dynpro for Java UI Development, SAP NetWeaver 2004s. For more information, visit the User Interface Technology homepage. For more information, visit the Web Dynpro Java. Summary This article demonstrates how to upload an Image file from system to same Web Dynpro view. 0-byte resource creation on server saves memory consumption as well. Author: Khushboo Singhal Company: L&T InfoTech Created on: 02 September 2008 Author Bio. Khushboo Singhal has been working in L&T InfoTech for the last 10 months as NetWeaver- Web Dynpro Consultant SAP AG 1

2 Table of Contents Introduction...3 Prerequisite...3 Creating Application Create Web Dynpro project...3 Create Layout...4 Create Context in View Create Action imageupload Properties for UI Elements Properties of context elements Implementation: Result...10 Create an application for WD project...10 Now select the option Deploy New Archive and Run...10 Related Content...12 Disclaimer and Liability Notice SAP AG 2

3 Introduction This tutorial provides demonstration of uploading an Image file from system to Web dynpro view using three UI element : FileUpload, LinktoAction, Image. File Upload UI elements provide path for Image file, when user clicks on Link upload an Action imageuplaod gets executed and corresponding Image file is displayed in same view Prerequisite Access to SAP NetWeaver AS Java and SAP Net Weaver Developer Studio installed in your system. Creating Application 1. Create Web Dynpro project 2008 SAP AG 3

4 Create Layout 2008 SAP AG 4

5 Create Context in View 2. Create Action imageupload For Action imageupload select parameter of type Java Native Type.IResourceElement SAP AG 5

6 3. Properties for UI Elements Set properties for Group UI element: Height-100%, Width -100%, Layout- Matrix Layout For Fileupload UI element:. For LinkToAction UI element: Bind action imageupload to onaction property 2008 SAP AG 6

7 For Image UI element: 4. Properties of context elements ImgResource attribute select Resource type from Dictionary Simple Type. For Picture value attribute select binary from drop down. Set ImgURL attribute type as string from drop down. For Resource Value node pass supply function: 2008 SAP AG 7

8 5. Implementation: Write Code as following o for wdmodifyview //@@begin wddomodifyview // if (firsttime) { IWDLinkToAction linktoaction = (IWDLinkToAction) view.getelement("linktoaction"); linktoaction.mappingofonaction().addsourcemapping("nodeelement", "resourceelement"); //@@end For supplyresource //@@begin supplyresource(iwdnode,iwdnodeelement) IPrivateUploadCompView.IResourceElement resourceelement; // Resource Node Element resourceelement = wdcontext.noderesource().createresourceelement(); node.addelement(resourceelement); // Resource Node Element resourceelement = wdcontext.noderesource().createresourceelement(); node.addelement(resourceelement); } // Resource Node Element resourceelement = wdcontext.noderesource().createresourceelement(); node.addelement(resourceelement); //@@end For onactionimageuplaod //@@begin onactionimageuplaod(serverevent) if (wdcontext.currentresourceelement().getimgresource()!= null) { 2008 SAP AG 8

9 // copy URL string from IWDResource object to // context attribute 'UploadImgURL'. Image gets // visible on the UI based on databinding definition. wdcontext.currentresourceelement().setimgurl( wdcontext.currentresourceelement().getimgresource().geturl(wdfiledownloadbehaviour.op EN_INPLACE.ordinal())); } //@@end 0byte resource creation:- //@@begin others private IWDResource create0byteresource( IWDNodeElement datanodeelement, String calcattrname, String resourcename, WDWebResourceType resourcetype) { return WDResourceFactory.createResource( datanodeelement.getattributepointer(calcattrname), resourcename, resourcetype); } //@@end 2008 SAP AG 9

10 6. Result Create an application for WD project Now select the option Deploy New Archive and Run 2008 SAP AG 10

11 Select the Image file from your system. Click on upload link.it will display the selected image in same Web Dynpro view SAP AG 11

12 Related Content Please include at least three references to SDN documents or web pages For more information, visit the User Interface Technology homepage. For more information, visit the Web Dynpro Java 2008 SAP AG 12

13 Disclaimer and Liability Notice This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document SAP AG 13