Responsive Design Support in RBD

What is Responsive Design?

Responsive design is an approach for creation of web pages that automatically scales its content elements to match the screen size on which it is viewed. So, instead of designing multiple websites for different devices with variable screen sizes, we can design just one website that scales up or down automatically, to match the device it’s being viewed on.

Responsive web designing can be achieved by making use of flexible layouts, flexible images and cascading style sheet media queries, to build pages that can change the display layout, by detecting the visitor’s screen size, platform and orientation.

Websites developed with responsive design support have the following benefits:
Rational Business Developer (RBD) supports the following popular frameworks for building responsive, device-independent web-sites:
  1. Bootstrap Framework
  2. Ionic Framework

Bootstrap is the most popular HTML, CSS, and JavaScript front end framework for developing responsive, mobile-first websites, with BootstrapCDN and a template starter page. It is sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development. The framework includes responsive CSS and HTML templates for buttons, tables, navigation, image carousels, and other elements that can be used for creating web pages. A few optional JavaScript plug-ins are also available in Bootstrap 4, which allows users to easily develop great responsive websites.

To learn more about Bootstrap Framework and the different versions of Bootstrap available for responsive designing, refer to the documentation at: https://getbootstrap.com/docs/4.0/getting-started/introduction/

Bootstrap uses its Grid design (which divides a screen into 12 equal columns), Scalable screen sizes and the navbar class (navigation bar) to provide the responsiveness that is expected from the framework. To learn more about achieving this responsiveness using Bootstrap, refer to the documentation at: https://medium.com/@duncandevs/responsive-web-design-with-bootstrap-70147ecd9d98

Ionic is an open source framework used for developing mobile applications. It contains very native-styled mobile UI elements and layouts for building Mobile UI, Native Apps and Progressive Web Apps with a native look and feel. Ionic framework needs a native wrapper like Cordova or PhoneGap to run as a native app on mobile devices. Ionic Framework App Development is a complete open-source SDK for hybrid mobile app development. Built on top of AngularJS and Apache Cordova, Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass.

Ionic Framework is a library of UI Components, which are reusable elements that serve as the customizable building blocks for an application. Ionic used its built-in platform continuity feature, native access feature, mobile navigation approach, and customizable theming (CSS properties) to achieve responsive web designing.

To learn more about Ionic Framework and the different versions of Ionic available for responsive designing, refer to the documentation at: https://ionicframework.com/docs/intro

Rational Business Developer (RBD) includes widgets which map to ionic or bootstrap web-components, to allow Responsive Web Designing capability. RBD users can easily drag and drop these widgets (that are automatically included as bundled components, while creating a new RUI project) into their samples to build responsive applications quickly.

Follow the steps below to Create Samples in RBD with responsive design capability, using Ionic Widgets:

  1. Create a New RUI Project as follows :

    Right-Click and choose New -> Project.

    Figure-1
  2. In the New Project dialogue box that opens, Select ‘EGL Project’ Wizard under ‘EGL’.

    Figure-2

  3. Choose the ‘Rich UI Project’ type for the EGL Project, and click on ‘Finish’ to create the RUI Project, and import the Ionic and Bootstrap webcomponents into the workspace, along with the other EGL Rich UI applications and custom widgets.

    Figure-3A

    The ‘com.ibm.egl.rui.ionic.sample’ plugin within the RUI Project contains reusable samples of the webcomponent widgets, that can be used for creating applications. The widgets that are part of the ‘com.ibm.egl.rui.ionic.widgets_1.0.0’ plugin can be used by dragging and dropping them into the required sample inside the ‘com.ibm.egl.rui.ionic.sample’ plugin.

    Figure-3B

  4. To Create a new Ionic Sample, Right-Click ‘samples.ionic’ sub-component under ‘EGLSource’ component of the ‘com.ibm.egl.rui.ionic.sample’ plugin, and choose ‘New’ -> ‘Rich UI Handler’.

    Figure-4

  5. Enter a name for the new Sample, and click on Finish, to create the new EGL Rich UI Handler part (.egl file) within the ‘samples.ionic’ package.

    Figure-5

  6. On the right-side panel, a list of all available widgets are shown in the ‘Palette’, under each webcomponent type.

    Figure-6A

    Drag and Drop the required widget into the Sample preview.

    Figure-6B

    Figure-6C
  7. Choose a Variable name for the widget and click on ‘OK’.

    Figure-7

  8. The pre-populated template for the widget gets created and is displayed in the newly created sample.

    Figure-8

  9. A Preview of the Searchbar widget sample can be seen in the display area. You may choose to modify the default text (“Enter your search text here…”) for the Searchbar widget by modifying the ‘placeholder’ parameter value.

    Figure-9A

    Figure-9B

Note : The above steps explain the process of creation of Samples for Ionics Widgets. For Bootstrap widgets, replace the project names as follows :
Limitations :
  1. Dojo widgets cannot work together with Dojo2 widgets.
  2. Bootstrap widgets cannot work together with Dojo or Dojo2 widgets.

It is recommended not to mix widgets from different frameworks together, except for the RUI widgets.