Introduction | AWT First Steps | Swing | AWT Example 1
The design of an user interface for a MI application is a challenge, because the size on the MI client display is rather small. In the MDK you find style guide suggestions for MI AWT applications that deal with the limited space. The MDK examples provide a building block for AWT applications that can be customized and extended.
User interface elements (like button, check box and so on) are placed in AWT in containers. By default, every container has layout manager which is an object that implements the LayoutManager interface. AWT supplies the following layout managers (sorted ascending from simple to very flexible):
MI AWT applications usually display data in tabular form. The MDK examples uses the BorderLayout in the following way:
Example:
The center page can display data in list form or detail data:
Because of different layout and navigation (= event handling) in the center page, the MDK example defines pages. The MDK provides the following pages:
When you import a MDK AWT example (for example, configExampleAWT.jar) you will get several packages on the workbench. The packages have the following structure:
com.sap.ip.me.mdk.api.awt.gui.*
This package contains the methods that are not example specific. It is not necessary
to change the methods but you can certainly change or extend the methods.
com.sap.ip.me.mdk.api.awt.gui.component
This package contains the components for the MDK examples. The components are based on the AWT components, like TextField, Image and Choice and are extended to match the requirements for the MI application, for example, providing the proper IDs for the event handling. The classes in this package are used by the classes in com.sap.ip.me.mdk.api.awt.gui.page.
ComponentConstants.java contains the color scheme and icon variables used by the components.
com.sap.ip.me.mdk.api.awt.gui.layout
This package contains the methods to manage the layout. The layout methods include the table view, which calculates the rows and columns and aligns the text accordingly. Especially the TableLayout method looks pretty complex with all the calculations to fit the panels properly in and handle the resizing.
com.sap.ip.me.mdk.api.awt.gui.page
This package contains the not application specific part of the pages and the event handler. The AbstractMEPage defines the basic implementation of a panel. This method is extended by class BasicPage and gets its final shape in the classes NoDetailPage, DetailPage and so on. Every event comes with an ID and this ID is returned so that the application can branch to the corresponding event handler. The final event handler is application specific. For example, if the user clicks on the customer number to see the details, the ID is used to get the customer number and to display the corresponding customer details.
com.sap.ip.me.mdk.api.awt.gui.panel
This package contains the panels for the MI application. The MDK provides panels for the header, footer and the navigation.
com.sap.ip.me.mdk.api.awt.gui.navigation
This package contains the implemented navigation types, for example page navigation, to browse through a table. The navigation type is used by the pages.com.sap.ip.me.mdk.api.awt.gui.util
This package contains the general helper classes.
The other packages contain the example. For the following description we assume that the package name of the example is example1.
example1
This package contains the main class that implements AwtApplication and the definition of constants, like the MI application name.example1.actionHandler
This package contains the customized event handler that is implemented from com.sap.ip.me.mdk.api.awt.gui.actionHandler.example1.page
This package contains the customized pages. CenterPage defines the layout of the center panel and calls the pages as necessary. The configuration API example of the MDK only uses the NoDetailsList page, persistence API examples also have a DetailPage.example1.dataHandler
This package contains the classes that collect the information that has to be displayed. The BasicDataHandler class contains methods to get a vector with all data, or suitable to the navigation, a certain portion of it (starting at a certain index and a defined amount of entries).
The generateData() method varies from example to example. In the configuration API example the generateData() method fills a vector with data collected with the configuration API and the persistence API example collects the persisted data.
The examples need the MANIFEST.MF file and the icons that are used for the user interface. The files are located in the following folders:
app-root/META-INF
Folder for MANIFEST.MF file. The MANIFEST.MF contains information about the application and the name of the main class that has to be started.
app-root/images
Icons that are used for the user interface.
If you want to use the MDK examples for your own projects, you have to adjust the following files and properties:
Constants.java
Example:
String MI_PACKAGENAME = "example1";
String TP_PAGEBASE = MI_PACKAGENAME + ".page.";