MSD_400_Doku_v1_EN

8/12/2019 MSD_400_Doku_v1_EN

1/20

Version: 2.0Status: May 31, 2012

Mobisys GmbHAltro ttst r. 26D-69190 Walldorfwww.mobisys.de

Documentation

MSB Screen Designer

Release 4

8/12/2019 MSD_400_Doku_v1_EN

2/20

DocumentationMSB Screen Designer

Release 4

Version: 2.0Status: May 31, 2012 Page 2

Copyright

Copyright 2012 Mobisys GmbH. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without theexpress permission of Mobisys GmbH. The information contained herein may be changed withoutprior notice.

Some software products marketed by Mobisys GmbH and its distributors may contain proprietarysoftware components of other software vendors.

SAP, SAP NetWeaver, SAP ERP, ABAP, BAPI and other SAP products and services referred to in thisdocument, as well as the corresponding logos, are registered trademarks of SAP AG in Germany orother countries.

Microsoft, Windows, and other Microsoft products and services mentioned in this document areregistered trademarks of Microsoft Corporation.

Citrix and Citrix products and services mentioned in this document, as well as the correspondinglogos, are registered trademarks of Citrix Systems, Inc.

HTML, XML, XHTML und W3C are trademarks or registered trademarks of W3C, World Wide WebConsortium, Massachusetts Institute of Technology. Java is a registered trademark of SunMicrosystems, Inc. JavaScript is a registered trademark of Sun Microsystems, Inc., used under licensefor technology invented and implemented by Netscape.

All other product and service names mentioned are the trademarks of their respective companies.Data contained in this document serves informational purposes only. National product specifications

may vary.

Mobisys is not liable for errors or omissions with respect to this publication. The only warranties forMobisys products and services are those that are set forth in the express warranty statementsaccompanying such products and services, if any. Nothing herein should be construed as constitutingan additional warranty.

8/12/2019 MSD_400_Doku_v1_EN

3/20


Release 4


Table of Contents

1 Introduction ....................................................................................................................... 42 System requirements ........................................................................................................ 53 Configuration ..................................................................................................................... 6

3.1 Connection to the SAP system .................................................................................. 63.2 Designer settings ....................................................................................................... 8

4 Loading an MSB application ............................................................................................. 95 The MSD user interface .................................................................................................. 106 Editing of transactions and screens ................................................................................ 12

6.1 Changing the screens of a transaction .................................................................... 126.2 Creating screens ...................................................................................................... 126.3 Create a transaction ................................................................................................. 136.4 Creating and editing components of a screen ......................................................... 146.5 Processing functions ................................................................................................ 15

6.5.1 Copying and inserting elements ....................................................................... 156.5.2 Deleting elements ............................................................................................. 156.5.3 Common shifting and aligning of components .................................................. 156.5.4 Screen templates .............................................................................................. 166.5.5 Displaying and hiding components ................................................................... 166.5.6 Screenshots ...................................................................................................... 16

6.6 Processing with a connection to the SAP system .................................................... 177 Layouts ............................................................................................................................ 18

7.1 Display and edit existing layouts .............................................................................. 187.2 Create new layouts .................................................................................................. 19

8

Notes ............................................................................................................................... 20

8/12/2019 MSD_400_Doku_v1_EN

4/20


Release 4


1 IntroductionWith the MSB Screen Designer (MSD) you can create and adapt mobile MSB applicationsgraphically according to the WYSIWYG principle.

The MSD is installed locally on a developer PC. From the SAP system, the screens areloaded, changed and then saved back in the SAP system.

The developers have the possibility to design and compile screen templates on their own, sothat they can access these templates and in this way rapidly obtain very attractive results.

Figure 1: The graphical development tool MSB Screen Designer

Any of the screen elements can then be dragged from the list displayed on the left anddropped onto the screen, and can then be filled with the corresponding attributes.

8/12/2019 MSD_400_Doku_v1_EN

5/20


Release 4


2 System requirementsYou can use the MSB Screen Designer Release 4 on computers with the following operatingsystems:

WindowsXP

WindowsVista

Windows7

The Microsoft .NET Framework 3.5 must be installed on the computer.

In the SAP system, MSB Runtime Release 4 and MSB Developer Release 4 are required.

8/12/2019 MSD_400_Doku_v1_EN

6/20


Release 4


3 ConfigurationIn the configuration screen, you can define cross-application settings for the MSD and theconnection to the SAP system.

The configuration is called via Extras -> Configurationin the main menu.

3.1 Connection to the SAP systemThe MSD communicates with the SAP system via http/ https and the Internet CommunicationFramework.

Prerequisite: In the SAP system, a service reference for the service /MOBISYS/MSDmust

have been created and activated.

On the SAPtab in the MSD configuration window, you maintain the connection to the SAPsystem as follows:

Figure 2: Settings for t he connection to the SAP system

You have to make the following entries in the above window:

Server:Enter the IP address of the SAP system or the SAP Web Dispatcher

Port:Enter the port defined via transaction SMICMin the SAP system

Service:Enter the service reference defined via transaction SICFin the SAP system

Receive-Timeout (Waiting period for response):Here you enter how long the MSD should wait for a response before it terminates thetransaction with the corresponding error message

8/12/2019 MSD_400_Doku_v1_EN

7/20


Release 4


HTTP version:The HTTP version used to communicate with the SAP system can be set here.

Versions 1.0 and 1.1 are supported, the HTTP-Version 1.1 is the default value. SSL:

The system determines whether a Secure Sockets Layer (SSL) encryption protocolshould be used for secure data transfer. The SSL encryption is activated by settingthis indicator. Please note that in this case, the corresponding settings are alsonecessary in the SAP system, and that another HTTP port (normally 443) has to beset in the MSB Client.

Strict server certificate:The certification is only possible when using SSL. It specifies that the server name ischecked against the name of the server on which certification was issued. Deactivatethe strict server certification if the certificate was issued on another server.

Locking argument:

Here you can define any argument to be used for locking transactions. In thestandard version, this is the MAC address of the computer. If several developers usethe MSD and have the same MAC address, then here, for example, you can maintainthe SAP user name.In this way, different developers working, for example, with the MSB ScreenDesigner on a terminal server or using a VPN connection to the SAP system with thesame MAC address can work without any conflicts. The locking argument can be,for example, the SAP user ID; this ID can have a suffix added to it if the same user isworking in different sessions.

The two fields User Nameand Passwordare optional. If a value is entered here, then it is

transferred into the Login window when logging into the SAP system.

Note 1:You can only maintain the connection data if no application is open.

8/12/2019 MSD_400_Doku_v1_EN

8/20


Release 4


3.2 Designer settingsOn the Designertab, you can maintain the cross-application settings of the MSD as follows:

Figure 3: Designer tab settings

The following entries must be made here:

Horizontal gridsize / Vertical gridsizeIncremental steps of the grid in horizontal (X) and vertical (Y) pixels, via which acomponent is locked (fixed) in a screenNote: In the MSD shifting is then only possible using the mouse.

Movement delay:Duration in ms defining how long a component must be marked before it can bemoved /shifted (in order to avoid unintentional changes)

Language:Interface language of the MSD (German or English)

Components out of visible range:Components can be positioned manually via the attributes, so that they arepositioned out of the range of the visible objects in the MSD.

8/12/2019 MSD_400_Doku_v1_EN

9/20


Release 4


4 Loading an MSB applicationAfter you have made the settings for the connection to the SAP system, you can use the

button to load and open an application from the SAP system. A logon screendisplays.

In the logon screen, enter your user name and the password for the SAP system. Via theindicator Save logon datayou can store these entries.

Then you select the application:

Figure 4: Select the MSB application

By setting the indicator Load complete application, you can specify whether the entireapplication should be loaded immediately or not. Otherwise, the transactions and screens willbe loaded step by step, after they have been individually selected in the project tree window.

Note 2:The application must have previously been created in the SAP system with the MSBApplication Builder. You can then continue to create transactions and screens in theMSD.

8/12/2019 MSD_400_Doku_v1_EN

10/20


Release 4


5 The MSD user interfaceIf an application is open, the following individual screen sections within the MSD aredisplayed:

Figure 5: The MSD User Interface

The MSD user interface is divided into the following four screen sections:

Component window with the component types

Project tree window with the project elements

Design windowwith the screens selected from the project tree and the displayeddevice type

Properties windowwith the properties of the selected component

The Components window, Project Tree window and Properties window can be arranged inany order. For this, you can click on the small arrow at the top right of the window to get the

following selection:

Componentswindow

Project tree

window

Propertieswindow

Design window

8/12/2019 MSD_400_Doku_v1_EN

11/20


Release 4


Figure 6: Selection of arrangement options for MSD windows

If you choose a location in which there is already a window, it then changes places with theprevious window.

Components windowComponents are elements which are used for the screen structure. In the edit mode, you canuse Drag & Drop to drag a component type from the component window to the screen in thedesign window.

Design windowIn this window, the screens are created with the help of a WYSIWYG Editor. By showing thecorresponding device, there is a realistic display of the input template.

Components, which have already been placed, can be selected, moved and changedin size as often as required.

The displayed device is chosen by selecting the corresponding device type in theproject tree window.

The size and position of the design window, as well as the image file to be used forthe device to be displayed, are specified in device type management in the MSBAdministration (SAP system).

Project tree windowThe elements are displayed hierarchically in the following tree structure:

ApplicationDevice type

TransactionScreen

Component

Within the project tree window, you can create new transactions and screens, as well asselect and edit existing screens via the right-mouse key, by positioning the cursor on aselected item.

When you select a specific screen, it is displayed immediately in the design window.

Properties windowEvery element of the tree structure has a predefined number of properties, which can bechanged in this window.

The number of properties varies, depending on the component type in question. Allproperties can also be maintained directly in the SAP system, in the MSB Application Builderwith transaction/MOBISYS/MSB.

8/12/2019 MSD_400_Doku_v1_EN

12/20


Release 4


6 Editing of transactions and screensAfter you have opened an application, it is first shown in display mode. You can display theproperties of the individual components, but not change them.

6.1 Changing the screens of a transactionIn order to make changes to an existing transaction, you have to switch to change mode:

For this, select a transaction in the project tree and select the Editbutton.

You can now change the screens of the transaction.

You save the changes at any time using the Savebutton.

After pressing the Refreshbutton, the complete application is reloaded. The changemode is then discontinued. Changes that were not saved will be discarded.

The edit mode is only active for one transaction at a time. If you want to change anothertransaction, save the changes and leave the change mode of the currently processedtransaction with the Refreshbutton. Then the next transaction can be processed by clickingthe Editbutton.

If a transaction has already been processed by another user, then the corresponding errormessage will be displayed when you try to change to the Edit mode.

Note 3:You can cancel your last change by using the function Edit -> Undo.

6.2 Creating screensIf you are in the edit/change mode for a transaction, you can use the right-mouse key on thetransaction to create new screens (also called masks in this version) as follows:

Figure 7: Create a screen (mask)

8/12/2019 MSD_400_Doku_v1_EN

13/20


Release 4


For the screen you then have to maintain the properties:

Figure 8: Properties of a screen/mask

The screen is identified by a unique numeric ID within the transaction.

Note 4:The screen ID can only be changed before it is saved in the SAP system.

Enter a description and specify whether the screen is active.

6.3 Create a transactionTo create a new transaction, use the right-mouse key in display mode for the device type:

Figure 9: Create a transaction

In the dialog box that displays, you now have to enter a unique name for the transaction,after which you are in edit mode.

Note 5:The transaction name can only be changed before it is saved in the SAP system.

8/12/2019 MSD_400_Doku_v1_EN

14/20


Release 4


6.4 Creating and editing components of a screenComponents can be added in Edit mode by using Drag & Drop from the component windowand pulling the component to the screen in the Design window.

The size and position of the component can be adjusted graphically in the Design window. Inthis way, the following properties are set:

Height (in pixel)

Length (in pixel)

Horizontal gridsize (pixel)

Vertical gridsize (pixel)

You can also change these properties in the Propertieswindow of the MSD. The display inthe middle Designwindow is then immediately updated.

The following component types are displayed in the Componentwindow:

Component type Use

Label Field to display text

Edit Field to input text

Memo Field for the entry of multi-line text

Button Buttons with single or multi-line labeling

ComboBox Selection box to be expanded

ListBox Selection list with vertical and horizontal scrollbars

MsbListView MSB List Viewer as a table for the display and entry of cells withvarious formatting options

DataGrid Selection list as a grid (similar to Excel) with easy re-sorting option,single and multiple selection, editing option.

CheckBox Labeled field for checkmarking

RadioButton Option button

RFID Reader Input field through which the installed RFID Reader is activated whenthe trigger button (on the mobile device ) is pressed.

RFID Writer Button, which when pressed, activates the RFID writing process.The data to be described is entered into the Descriptionproperty of thebutton.

RFID Multiple List object to read and display an optional amount of RFID tagssimultaneously

Picture (Image) To display pictures on the Client interface (various picture sizes aresupported)

Camera To take photos with the camera installed in the mobile device. Createsan image file which is sent to the SAP system and stored there.

Signature Signature field. Generates a bitmap from the signature on the device'sdisplay, which is sent to SAP and stored there.

Browser For the display of web pages

GPS Field for the determination and display of geocoordinates

Frame Frame for the visual grouping of other components

Subscreen Area for a subscreen

You can get a detailed description of these component types and their properties in theMobisys documentation MSB Developer Release 4.

8/12/2019 MSD_400_Doku_v1_EN

15/20


Release 4


6.5 Processing functionsDepending on the individual element types (transaction, screen, component), the right-mouse key menu of the element contains different functions in the Project Tree window or inthe Design window.

6.5.1 Copying and insert ing elements

Individual elements (transaction, screen or component) of the project tree can be copiedusing the right-mouse key menu, and inserted at another spot.

Components of a screen can also be inserted using the right-mouse key menu, by selectinga component in the Design window (Cut and Paste).

6.5.2 Deleting elements

Individual elements (transaction, screen or component) of the project tree can also bedeleted again using the right-mouse key menu. Note that all subordinate elements will thenalso be deleted.

Components of a screen can also be deleted using the right-mouse key menu, by selecting acomponent in the Design window.

6.5.3 Common shifting and aligning of components

In the Design window, you can shift several components of a screen at one time.

Proceed as follows:1. For this, click on the component.

2. Multiple selection is then carried out by pressing the CTRLkey.

In the right-mouse key menu, you will then see various functions for the processing andalignment:

8/12/2019 MSD_400_Doku_v1_EN

16/20


Release 4


Figure 10: Common processing of components in the Design window

6.5.4 Screen templates

Using the right-mouse key menu of the screen, you can save the data with Blueprint -> Saveallin the form of a template or blueprint stored as a local file. In the right-mouse key menu forthe transaction, you can save all screens of the transaction locally.

In Edit mode, you can then insert the screen that was previously saved by pressing the right-mouse key option Blueprint -> Insertin a transaction. This means that for this Screen ID, anavailable ID is automatically assigned, which you can change before saving.

6.5.5 Displaying and hiding components

Often, components with the property Not visibleTRUEare hidden and are not displayed until

the corresponding programming of the PBO function module has been carried out. With thefunction Edit -> Show Hidden Elementsyou can either display or hide the hidden elements

6.5.6 Screenshots

With the function Edit -> Screenshot -> Screenor Deviceyou can make a screenshot of thescreen or the screen with the device and store it in an image file (jpg format) on yourcomputer.

8/12/2019 MSD_400_Doku_v1_EN

17/20


Release 4


6.6 Processing with a connection to the SAP systemAn application can also be created without connection to the SAP system. This is useful ifbefore implementation, in the project phase, the screen design is to be developed, for thecreation of product specifications, for example.

Via the menu option File New.you can create a new project. When you select this option,a complete application structure opens automatically in the Project Tree window.

The creation, processing and deletion of transactions, screens and components is thencarried out in the same way as described in section 6.

With the function File -> Exportyou can also save the application locally on your computer.You can then reload this application at a later date without being connected to the SAP

system with the function File -> Import.

Note 6:If you want to work in offline mode, you must ensure that the entire application hasbeen entirely loaded from the SAP system.

Local transactions or screens created in this way can then be saved in the SAP system asfollows:

Save the individual screens of the locally changed application as a template (blueprint, seesection 6.5.4). Then you can insert the application that was loaded from the SAP system and

that must currently be in Edit mode.

8/12/2019 MSD_400_Doku_v1_EN

18/20


Release 4


7 LayoutsThe appearance of the components is controlled via the corresponding layout, which you cancreate and edit in the MSD.

Note: Deleting layouts via the MSD is not possible, you can only do this in the MSBAdministration of the SAP system.

7.1 Display and edit existing layouts

Via the main menu, select the option Extras > Layouts.

Figure 11: Maintenance of layouts in the MSD

8/12/2019 MSD_400_Doku_v1_EN

19/20


Release 4


In order to find a layout more easily, you can filter in the list according to Name and Device.

You can now select any layout. Different components with the selected layout are displayed

for preview at the bottom of the window.

You can change the settings of the layout as desired. Then select the Savebutton and thelayouts will be saved in the SAP system.

Note 7:The changes must then be included in a transport request of the SAP system, so thatthey can be transported to other systems.

7.2 Create new layouts

To create new layouts, select the New...button. The settings of the layout selected at thispoint are used as a presetting for the new layout.

Proceed as follows:

1. Enter the name of the new layout and select a device from the dropdown list.2. After pressing the Add button, the new layout is already selected for further

processing.3. By pressing the Save button, the new and edited layouts are stored in the SAP

system.

4. Newly created layouts, which have not yet been stored in the SAP system, can bedeleted locally by clicking the Deletebutton.

You can get further information on layouts in the documentation MSB Developer Release 4.

8/12/2019 MSD_400_Doku_v1_EN

20/20


Release 4

8 Notes

Date post:	03-Jun-2018
Category:	Documents
Upload:	amar1980
View:	216 times
Download:	0 times

MSD_400_Doku_v1_EN

Documents