Introduction

IBM Business Developer (RBD) provides business developers with an integrated environment to rapidly develop Enterprise Generation Language (EGL) applications, which are then generated into COBOL, Java, and Javascript applications. RBD takes away the complexity of working with multiple technologies and frameworks, thus bringing in uniformity where the developers work only with EGL and rapidly develop their applications.

Ionic V4 and Bootstrap V4 are mobile-first front-end web development frameworks that provide modern web pages with responsive design support. RBD V9.6 has added extensive support to responsive design. The developers use EGL to rapidly develop UI pages with Ionic and Bootstrap widgets. RBD generates corresponding Javascript, HTML, CSS from the EGL files. RBD V9.6 has added more than 150 EGL web components (EGL widgets) to support Ionic and Bootstrap frameworks.

Why Should I Use RBD V9.6 to develop Rich UI?

RBD developers can easily drag and drop EGL widgets into their EGL-Rich UI pages for Ionic and Bootstrap to rapidly develop applications. RBD eliminates the need to set up the infrastructure required to develop in each of the individual frameworks. It comes with a rich set of samples that can be used as templates to design new applications quickly. 

Prerequisites

1. IBM Business Developer (RBD) V9.6
2. Knowledge of developing using EGL and RBD
3. Knowledge of Ionic V4 and Bootstrap V4

Create Rich UI pages with EGL Ionic 4 widgets

Unlike Ionic 3 and earlier versions that support angular, Ionic 4 provides web components that are compatible with multiple UI frameworks like react, vue, or vanilla JavaScript. RBD 9.6 does not yet support react, vue, or angular. Usage in RBD 9.6 is based on vanilla JavaScript framework. The end-user works with EGL widgets, which are mapped to the corresponding Ionic 4 web components.

Creating Ionic Applications using RBD 9.6

Ionic framework is generally used to create Single Page Applications (SPAs). In SPAs, a single HTML page remains loaded, and new content is dynamically loaded and unloaded into an SPA as required. This typically involves usage of ion-router (EGL equivalent - IonRouter) and ion-nav (EGL equivalent - IonNav) to navigate to and from components within vanilla JavaScript applications. Ionic widgets can be used in combination with RichUI GridLayout.

Platform Continuity

Ionic framework provides the iOS theme for iOS apps and Material Design theme for Android apps. This can be done by setting mode as ‘iOS’ or ‘md’ in the widget property. The property has getter and setter methods.

setAttribute() and getAttribute() methods

Extensive care has been taken in RBD 9.6 to make sure that all Ionic widgets have all the required attributes and getter/setter methods for them. However, if a widget does not have a required attribute readily, it is possible to use setAttribute(name, value) and getAttribute(name) methods to add an attribute.

Ion Controller Widgets

Ion Controller widgets are very critical in controlling the user interactions with the application.

IonMenuController: Used to control menu operations like opening and closing the given menu. It is used along with one or more IonMenu widgets.

IonModalController: Used to present and dismiss a modal page, as required. A Modal Page could be a custom RUIWidget that is passed as an argument in the present() method.

IonPopoverController: Used to present and dismiss a pop-over, as required. A Popover page could be a custom RUIWidget that is passed as an argument in the present() method.

IonAlertController: Used to present and dismiss an ion-alert.

IonActionSheetController: Used to present and dismiss an ion-action-sheet. 

Application Routing

Ion Router:

IonRouter handles all the routing needs within an application. For a given application, there must be only one IonRouter. IonRouter has a tree of IonRoutes that define which URL routes to which component. The component attribute defined in the IonRouter must be the same as the one defined in the target.   

Unlike, the ion router web component for Angular, IonRouter (which is for vanilla javascript) does not throw any lifecycle events and does not manipulate the DOM of the HTML file. It simply coordinates the URLs for the navigation outlets of Ionic like the IonTabs and IonNav.

IonRouter emits two events: ionRouteDidChange and ionRouteWillChange. These events can be listened to, to handle data binding.

Limitation of IonicRouter

When an IonRouter component is used, it is best to listen to IonRouter or IonRoute emitted events rather than events emitted by other components during routing. Due to a limitation, the IonRouter limits events triggered by other components like a button.

Ion Navigation:

Linear navigation is common in traditional web applications where the user presses the back and forward buttons in the browser to navigate back and forth. Mobile applications, on the other hand, implement non-linear parallel navigation. Here, the user can navigate across each tab in parallel, and each tab can have its own navigation stack where components are pushed and popped. This is where IonNav comes into the picture. New components could be pushed and popped from the navigation stack by using IonNav, IonNavPush, and IonNavPop widgets.

A typical use case for using the IonNav widget family would be to maintain a navigation stack for a modal, for example, without using the router and without tying it in the app URL.

Auth Guards

In vanilla javascript web components for Ionic v4, there is no support for the more sophisticated angular auth guards. However, there is an alternative that is not technically savvy but gets the job done.

IonRouteRedirect widget can act as AuthGuards to prevent access to certain parts of the application based on a given criterion like user login, authorized as an administrator, and so on.

A typical flow for user login auth guard looks as follows:

1. The user opens the login page.
2. On start(), add the IonRouteRedirect component as a child to the IonRouter. IonRouteRedirect is set with appropriate from and to attributes.
3. The user attempts to log in.
4. On success, IonRouteRedirect is removed as a child of IonRouter. The home page content is shown.
5. On failure, IonRouteRedirect is set in motion, redirecting the user to the login page again.
6. The user is redirected to the login page irrespective of the URL that the user is trying to access within the application.

Authentication Service

It is recommended to handle authentication and authorization using a separate EGL service. A token-based authentication – authorization like JSON Wen Token (JWT) would be sufficient for most SOA EGL applications. In this case, there will usually be a dedicated authentication service that acts as a handler to the client (usually an EGL RUI application).  It will call an EGL authentication service running on the server that is bound to the RUI application using @BindService.

However, it depends on the application as to what mechanism it requires to implement and must be dealt with on a case-by-case basis. Discussions on the details of the authentication service are beyond the scope of this paper.

Tab-based navigation using IonicRouter

The router-based navigation can be used to navigate between each individual tab. This can be achieved by adding the Ion-Nav component as a child to each tab, and a tab button for each tab will be associated with a specific URL to navigate. The URL to route is defined by the IonRoute component.

tabs IonTabs{children =[ionTabHome,ionTabPayment,ionTabAddPayment,ionTabBar]};

ionTabHome IonTab{tab = "home", children =[ionTabHomeNav],tab="home"}; ionTabHomeNav IonNav{}; ionTabPayment IonTab{tab = "Paymentlist", children =[ionTabpaymentNav],tab="Paymentlist"}; ionTabpaymentNav IonNav{}; ionTabAddPayment IonTab{tab = "AddPayment", children =[ionTabAddPaymentNav]}; ionTabAddPaymentNav IonNav{};

ionTabBar IonTabBar{slot = "bottom", children =[ionTabButtonHome,ionTabButtonPayment,ionTabButtonAddPayment]}; ionTabButtonHome IonTabButton{ href= "/home", tab = "home", children =[new IonLabel{text = "Home"}]}; ionTabButtonPayment IonTabButton{ href= "/paylist", tab = "Paymentlist", children =[new IonLabel{text = "Payment list"}]}; ionTabButtonAddPayment IonTabButton{href= "/payadd",tab = "AddPayment", children =[new IonLabel{text = "Add Payment"}]};

Ionic CDN Limitation

The “includeIonic.html” in the “com.ibm.egl.rui.ionic.widgets_1.0.0” widget library has CDN links for Ionic framework “ionic.js” and the related stylesheet “ionic.bundle.css”. The RUI pages developed will render ionic components only if the machine is connected to the internet. To overcome this limitation, download “ionic.bundle.css” and “ionic.js” and then place it in the folder “com.ibm.egl.rui.ionic.widgets_1.0.0\WebContent”. Also, make the below changes to the “includeionic.html”.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

<link href="ionic.bundle.css" rel="stylesheet">

<script src="ionic.js"></script>

Deployment

In IBM Business Developer V9.5, Cordova library and Cordova tools were introduced. The users can leverage the Cordova projects to deploy Ionic projects as a native application to the desired platform.