EGL Development User Group - Group home

In a previous post, I introduced a new EGL library for developing native-looking mobile web applications for iOS (Apple iPad/iPhone) and Android. We now want to describe some of the technical highlights of a sample mobile mortgage app we built to demonstrate the libraries capabilities.

To refresh your memory, here are some screen shots of the resulting app ...






Hopefully after reading this blog post and looking through the code, you'll be ready to start building your own mobile applications with EGL!
Pre-reqs

• Install Rational Business Developer 8.0.x (60 day trial is available)
• Download and setup the EGL Mobile Web library. For directions, see the EGL Mobile Web documentation.
  

Getting the code

Download the sample mobile mortgage app project .zip and then import into your workspace (File > Import > General > Existing Projects into Workspace). Make sure you have already imported the EGL Mobile Web library.

Exploring the code organization
The EGL source code for the application is contained in the EGLSource folder of the com.ibm.egl.samples.mortgage.mobile project:



Some of the noteworthy packages ...

• common - contains a single EGL library (MortgageLib) that has a single function for calculating a mortgage payment based on loan amount, interest rate, and term.
• services - contains an EGL service (MortgageService), which will be generated as Java and deployed to a web server, and interfaces for two external services that can perform the mortgage calculation. Both of these EGL interfaces (and associated EGL records) were created by importing the .wsdl files into RBD and using the EGL Services > Create EGL Client Interface wizard. One invokes a CICS transaction on System z, the other an RPG program on IBM i.
• ui - contains the Rich UI handler parts for the mobile mortgage app.
• utils - contains a library (MobileMortgageAppLib) used by some of the UI parts. The package also contains an EGL interface representing an external Yahoo! XML web service for accessing information about local businesses.
  

You may recognize some of this code from the Rich UI mortgage application (see the Learn EGL while building a cool app! blog post for more details).

Exploring the user interface code
The real meat of the application is in the "ui" package. As discussed above, this package contains the Rich UI handler (RUIHandler) parts that make up the UI components of the application. A Rich UI handler is a logical UI component, containing both the UI definition (i.e. widgets and layouts) and UI-specific functions (like widget event handler functions). The main handler in (and entry point into) this application is MainMobileHandler.egl.

Right click on ui > MainMobileHandler.egl and select Open With > EGL Rich UI editor to open the handler in the visual editor. You should by in the Design tab of the editor, as shown:


Switch to the Source tab so we can walk through some of the code.

Key points:

• Defined at the top of this handler are five DojoMobileView variables. Each view represents a different screen the user will see as they are using this application. The first (mainView) is the primary view displayed first when the application is launched (notice it is specified as the only widget in the "initialUI" of the handler). See the RBD help for more information on RUIHandler and initualUI. The other 4 views represents the other panels (or screens) in the application.
• A headerTitle is specified for each mobile view - this is the text that appears at the top of the screen when this view is activated. Some views also define a backView - this is the view that should be activated when the back button at the top of the header (not the actual browser Back button) is clicked.
• The children of mainView are two DojoMobileLists. The first list (List) contains 3 list items (Calculate Mortgage, Find a Lender, and Settings). Notice each DojoMobileListItem specifies an actionView - this is the view that should be activated when the list item is selected. For example, notice the first DojoMobileListItem child of List. Its text is "Calculate Mortgage" and its activeView is "calcMortgageView", meaning this view will be displayed when the item is clicked.
  
• Because other parts of the application need access to the variables representing the views of the application, the start() function sets them in a common, global place (MobileMortgageAppLib).

Most of the other code is standard EGL Rich UI code. I encourage you to look through the code and play with the application. If you have a question, don't hesitate to post to the EGL forum.

Happy mobile developing!

Will