Example of the Use of an Office Document 

Use

The example below illustrates the use of Office documents in a Web Dynpro application. Here you will learn about the structure of the view, the associated context structure, and the data binding of UI element property dataSource to a context attribute that contains the necessary data as a byte array and therefore must have data type binary.

In this example, pressing a pushbutton opens the Microsoft Word document example.doc in the browser window. The example.doc file is contained in the directory C:\temp\; the SAP J2EE Engine must also be installed on the C:\ drive.

The UI element retrieves the required data from the corresponding view context. The supply function fillNode converts the file to a byte array. If the document is to be displayed, the application has to call the static method ShowDocument, which is delivered by the class WDOfficeControlMethods.

When the pushbutton is pressed, an event is triggered whose event handling calls the method ShowDocument to display the document.

For a description of the UI element properties, see Web Dynpro OfficeControl API – IWDOfficeControl.

Prerequisites

You have created a Web Dynpro application and, within the Web Dynpro component (OfficeControlExampleComponent in the example), you have created a view (TestViewOfficeControl in the example) in which you want to insert the Office Control UI element. For a detailed description of the procedure for creating Web Dynpro projects, Web Dynpro components, the context structure, and the layout of the view, see Creating Your First Web Dynpro Application.

Procedure

Creating the View Layout in Which You Want to Display the Office Document

...

       1.      Determine the value of the text property.
The TextView UI element with the ID DefaultTextView is used to label the office document and is automatically generated during view creation. In this example, the value “Show Office Document” was assigned to the text property of this UI element.

       2.      Insert an OfficeControl UI element with ID OfficeControl1 in the view.
For this purpose, choose Insert Child in the context menu (right mouse button) for RootUI ElementContainer in the outline window or drag the UI element over the corresponding UI element icon  in the View Designer.

       3.      Insert the pushbutton UI element with the ID Button.

Creating the Context Structure

       4.      Create the context node

       5.      Create the context attribute. This context attribute must be of the type binary.

       6.      Create the supply function fillNode.

Context structure
Properties of the value node DocumentSourceNode
Properties of the value attribute DocumentContent

If you define the context structure first after creating the view, you can bind the UI element properties to the corresponding context elements directly after the insertion of the UI element into the view.

Creating the getDocument Action

Data Binding

Define data binding for the UI element properties (see the following screenshot).

       7.      Define data binding for the OfficeControl UI element properties (see the following screenshot).

    8.      Define the data binding for the pushbutton UI element Button1 – binding for action getDocument.

Controller Implementation: Supplying Data

The content of the documents is supplied by the supply function fillNode during initialization of the view. In the process, the data is converted to a byte array and saved in this format in the context. The application reads the content of the document as a binary file and fills the node element with this byte array at runtime. In the example source code below, the document is read from directory path C:/temp/ and converted to a byte array with the method getBytesFromFile. The getDocument action, which is executed by pressing the pushbutton, in turn converts the byte array using with method showDocument. It then displays it as a Word document in the browser window because the property activateInPlace is set to “true”.

The following source code shows only the most important parts of the controller implementation:

public void fillNode(IPrivateTestViewOfficeControl.IDocumentSourceNodeNode node, IPrivateTestViewOfficeControl.IContextElement parentElement)   {     //@@begin fillNode(IWDNode,IWDNodeElement)    ISimpleTypeModifiable mod = node.getNodeInfo().getAttribute("DocumentContent").getModifiableSimpleType();       ModifiableBinaryType bin = (ModifiableBinaryType)mod;       bin.setMimeType(new WebResourceType("doc", "application/msword", false));           IPrivateTestViewOfficeControl.IDocumentSourceNodeElement element = node.createDocumentSourceNodeElement();       node.addElement(element);           try       {         byte[] bytes = getBytesFromFile(new File("C:\\temp\\example.doc"));         element.setDocumentContent(bytes);       }       catch (IOException e)       {         // do something       }       //@@end   }     //@@begin javadoc:onActiongetDocument(ServerEvent)   /** Declared validating event handler. */   //@@end   public void onActiongetDocument(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )   {     //@@begin onActiongetDocument(ServerEvent)     WDOfficeControlMethods.showDocument(this.wdThis.wdGetAPI(),"OfficeControl1");     //@@end   }     /*    * The following code section can be used for any Java code that is    * not to be visible to other controllers/views or that contains constructs    * currently not supported directly by Web Dynpro (such as inner classes or    * member variables etc.). </p>    *    * Note: The content of this section is in no way managed/controlled    * by the Web Dynpro Designtime or the Web Dynpro Runtime.    */   //@@begin others   public static byte[] getBytesFromFile(File file)     throws IOException    {       FileInputStream is = new FileInputStream(file);       long length = file.length();       byte[] bytes = new byte[(int)length];       long bytesRead = is.read(bytes);       if (bytesRead < length)       {        throw new IOException("Could not completely read file "+file.getName());       }       is.close();            return bytes;      }    //@@end }

Result

When you have completed the data binding, you must first have built the respective Web Dynpro project and deployed the Web Dynpro application on the SAP J2EE Engine before you can actually call the application. 

You call the Web Dynpro application in the browser using a Web address. The result: When the pushbutton labeled “Show document” is pressed, a Microsoft Word document whose content is saved in the file example.doc appears in the browser window. If you set the property enableReadWrite to “true”, you can edit the file contents and save the changes either through the save icon  or the menu path File ® Save.