IBM Rational HATS Customized Amazing Features by Royal Cyber

Editor's Notes

• #2: Ladies and Gentlemen,Hello and Welcome to the Webinar “IBM Rational HATS Customized Amazing Features by Royal Cyber”. In this webinarwe will talk about how Royal Cyber can help you in modernizing IBMi and IBMz server based Green Screen applications to the latest current output mediums per your aspirations. My name is Yasir Hasan and I have with me our HATS expert, Muhammad Imran.
• #3: Let us start with the Agenda. We will start with the brief Introduction about us, i.e. Royal Cyber. Then we will discuss the IBM Rational HATS tool. In the next section we will describe what Royal Cyber has done over the years on top of HATS. Mostly the implementation require something beyond the default options, so a lot of additional out of the box thinking has to be done for the development of client’s requirements. In the demonstration sections, we will explain different implementations that we had done to serve our clients. Then we will discuss the benefits of HATS technically and from Business perspective. Eventually we will conclude the presentation by answering your questions, concerns and queries. Let us start with the brief introduction about us.
• #5: Royal Cyber is a modernized e-business Solutions provider. We are IBM Premier Business partner, IBM Authorized trainer and Microsoft Certified Gold Partner.Since the company’s inception in 2002, our experts have been leaders in providing training and consultancy of IBM Rational, WebSphere, Tivoli, Lotus, Cognos and Microsoft family Solutions to businesses worldwide including many Fortune 500 companies.
• #6: Headquartered in Chicago, Illinois we have a global footprint with offices and development centers across North America, Asia, Europe, Africa and the Middle East, as you can see in the slide.
• #7: Here is our brand portfolio. As you can see we have covered all the possible bases with our solutions from Enterprise Modernization to Database servers.
• #8: Now we will give you brief understanding of IBM Rational HATS. What you can accomplish using HATS.
• #9: Rational HATS is a premier IBM product suite that is inarguably the best tool for presenting old green screen applications built on IBM i, z servers, in modernized manner rapidly and efficiently. HATS modernized version can be prepared for various output mediums. There is no need to make any changes in the existing applications, so the matured environment stays at the backend ensuring businesscontinuation or stability. that is built on open, proven platforms and technologiesThere is no need to migrate data with HATS implementation. It is hard to train people on old obsolete technologies, so moving to HATS permits new resources to come on board quickly, and it is easy to find resources for modern technologies. HATS does not only display the content of green screen application on the modernized interface. There are so many things that HATS can do, like modernizing Green screen per the recent UI standards, using macros, customization and other techniques to show Green Screens data in organized and friendly manner. Advance controls and widgets can also be used, which are naturally absent in the Green screens. HATS can also be used for creating Mobile version for specific devices for your on-the-business needs.
• #10: This is the overall development process… Like any application we create these days, a HATS application is created on a modern IDE, Eclipse in our case. The HATS application is deployed on Web Sphere Application Server. Of course, during the design the developers always have the Green Screen in front of them as the basic idea of HATS is to modernize the legacy application. Now, when the end user accesses the application via his/her system, WAS becomes responsible for showing the modernized view to the end user and at the same time, performing tasks like picking and providing data to Green Screen, running Web Services and providing data to wherever required.
• #11: You can see here, the development environment is not very complex, and people who are developers, don’t need to be informed that this is a modernized interface.
• #12: Data from legacy servers like System I and System z can be used at various places as demonstrated in the slide. Data once processed by HATS can be deployed for web applications, rich clients, portals and mobile devices. Web services can also be created to allow communication between multiple systems.
• #13: This is the overall architecture of the HATS implementation, where the Mainframe server is used for the green screen application. The HATS application is deployed on the WAS (Application server) and then it can be used on various platforms, browsers, devices via HTTP protocol, web services, etc.
• #14: Let me remind you that there is so much that we can cover in a webinar. So, we also offer detailed HATS trainings. Listed on the screen are few of our trainings sessions details,A two day long Workshop where you will learn the HATS development from scratch…Other than that, we offer Online and Onsite Instructor led trainings as well. The curriculum for the workshop is fixed, but for the ILT sessions we can have customized curriculum as well. You can find the URL for each in the Chat box and we will also provide it to you in the email.
• #15: HATS options are available to everyone who uses HATS. The question is, what’s so special with Royal Cyber? The question will be answered in this section and sections followed by it, where we will explain how Royal Cyber fulfilled different technical needs for implementing client specific needs by implementing innovative and creative solutions on top of HATS.
• #16: We have divided the Royal Cyber’s implementation in these areas. In widgets section we will discuss the widgets, controls used for various needs, like different type of tables, radio button, check box, dropdowns, calendar controls, etc. In the keys section, we will discuss the various function and control keys implementation by using buttons, popup menus. In the menu we will show you the different creative menu styles that we have implemented to improve data representation and accessibility. In the Mobile support section, we will show you what we have accomplished for the mobile gadgets and how our Responsive design approach built on top of HATS makes the application universal meaning there is no restriction of OS, platform, Browsers, device type, etc.
• #17: In the Utilities sections we will discuss the Utilities developed by Royal Cyber to cater different client requirements, like displaying flat data in organized tabbed manner, data export in different formats, implementation of graphs and popup and API based implementation for Google Maps, Barcode, Social Media integration, etc. In the Web services section we will discuss the various web services based implementations generated from HATS or generated for HATS. In the Others section, we will discuss the AJAX, Portals, DOJO, jQuery in HATS and enabling HATS to integrate with other Applications
• #19: Data available in Legacy application can be presented in the User friendly modern interface based table
• #20: In scrollable table, data of multiple pages can be presented on the same page. User needs to use the standard scroll bar to traverse data horizontally or vertically.
• #21: If there is too much data to be shown, then instead of flat or scroll based table, it is better to implement pagination. There are various pagination schemes available, here you click the page number to reach that very page. User can also move forward backward, to first page, to last page by using the available control. Furthermore, user can type the page number to reach the desired page. Search feature can also be implemented, to filter the data according to the provided parameters.
• #22: One to one mapping of Green screen and modernized screen is implemented. System moves forward based on the record clicked by the user.
• #23: The Screen Combination transformation provides a way to combine multiple host screens into one web page. This is done using the new Screen Combination transformation. The resulting web page displays all of the data from all of the screens. This transformation amounts to special new form of a screen customization that includes a looping macro built into it. In this screen, the records are coming from various green screens. System will perform further operations based on the record clicked by the user.
• #24: In green screens user has to remember what option to select for subfile record to perform desired operation. However, in the counterpart modernized screen, the options are displayed in the dropdown, so there is no explicit need to remember the option associated with the record.
• #25: From the list of records user can make selection from the radio button or checkbox, making it very easy to select records.
• #26: Multiple operations associated with a record like selection, deletion, printing, etc can be displayed with the record as buttons or icons. The desired operation can be accomplished just by clicking the icon/button. Again, the major benefit is that user does not need to remember the codes of the operation.
• #27: HATS code reads green screen, parses text and uses it to display the record in modern calendar based interface
• #28: HATS code reads green screen, parses text and uses it to fill in values for a custom JavaScript scheduler widget.
• #29: Text from green screen is captured by HATS and given to the JS widget, green screen’s daily data is aggregated by JS widget, and monthly summary is presented.
• #30: Clicking a month drills down and a user friendly and modern view of the scheduler represents detailed daily view. The view can also be customized with styling, different colors, etc.
• #31: Generally the data in green screen applications is presented in capital case, however, based on the requirements the data could be displayed in mixed case, sentence case, lower case, upper case, Capitalize each word, toggle case, etc
• #33: In the modernized screens, the function keys operations could be displayed in the form of buttons or icons. This not only makes operations easy, but also user does not need to remember all the key operations. Button implementation is implemented along with the function keys, meaning the keys still remain operational and the same functionality could also be achieved through the buttons/icons.
• #34: In this example, the buttons are made attractive with the implementation of animation and icons. A certain theme based buttons/icons could also be implemented.
• #35: Function keys can also be shown in the form of popup, so that they can be called or used on demand rather than displaying on the page always.
• #36: Standard keys used for operations these days like Tab, Page up, Page down, etc can also be associated with different operations on the modernized screens. This makes navigation very easy, especially when there are many data fields are presented on the screen.
• #38: People using green screen do not need to be told again that menu navigation is a very cumbersome task there. However, with the Royal Cyber HATS implementation, the same could be achieved efficiently with the implementation of dynamic menus. Menus are not only created by mapping the green screen, but also we go in Database and populates the menu based on the roles and rights of the users. Here you can see the two levels of GUI based menu, so user does not have to remember the menu ids (four characters in this case)
• #39: This is another implementation of the menu. In the green screen, the child screen had to be accessed by traversing multiple screens, however, with the modernization the menu grows based on the hierarchy, so reaching any level becomes very convenient menu navigation.
• #40: This one is another implementation of the menu. Observe the scroll bar appearing at the last level. As informed earlier, the menus are dynamic and populated based on the roles and rights of the logged in user
• #41: In this example the sub menus are shown in the form of tree, so the menu looks less cluttered, especially if there are many sub-levels.
• #42: Popup menus can be minimized, maximized, hidden, close or dragged per the user’s convenience.
• #43: Popup menus can be minimized, maximized, hide, close or dragged per the user’s convenience.
• #45: With HATS we can create interfaces designed for mobile devices, this further increases the reach of the application.
• #46: Responsive web design With HATS can make applications viewable across multiple devices by remaining in the budget with minimum duplication of efforts. Adopting this golden strategy, we make application adaptable according to the medium it is being viewed on rather than anticipating the device/OS/platform to support it …
• #47: The solution remains the same, i.e. Implementation via Rational HATS.. However, by making few changes in the design one code is written to make application responsive to the viewing medium. For end users, it is all seamless, they don’t know neither they need to know the difference in approach. Simple techniques like anticipating different screen sizes and adjusting the content accordingly, making images scalable per the viewing screen, adjustment to cater portrait and landscape views; can prevent from making multiple code bases and need to store and manage content at multiple places.
• #48: The Responsive Web design caters to the variations in Landscape and Portrait mode across devices, so it displays the content accordingly….
• #50: This is a sample HATS application, you can see the green screen and corresponding HATS web screens on multiple devices, see how the output changes.
• #52: With the HATS, data from multiple green screens or a single BUSY green screen, could be divided into multiple tabs for better management and viewing experience. Here you can see that green screen has a lot of content, so the mapped modernized screen is divided into two tabs.
• #53: In this example you can see, the source data is retrieved from multiple screens and in the modernized screen, it is presented under the same screen with various tabs. This keeps the data in more organized manner and saves a lot of navigation time.
• #54: Here you can see another example, where data from 3 different green screens is divided into three tabs.
• #55: It is a very common need to have the data in MS-EXCEL, PDF, RTF or any other desired format. Here you can see the green screen data is first organized in the tabular manner. In the next slide you will see how the data is exported in PDF and MS-EXCEL formats, just by clicking the Generate PDF or Generate EXCEL buttons respectively.
• #56: Here you can see the output formats in PDF and MS-EXCEL formats
• #57: There are various situations where user requires some assistance, like showing a list of values, showing a message or help text, etc. For this Pop-ups are very useful. Here you can see the list of US states along with their abbreviations are shown in the Pop-up screen.
• #58: This is another example, with slightly different data shown in the popup. We will discuss functionality based popups later.
• #59: For executives,higher management, decision makers or analysts, quick and easy to read graphs for decision making are extremely helpful. It is hard to read and understand the trend analysis in the numerical form, however, it is a different story altogether when the same data is presented in the form of charts or graphs. The flat numerical data can be transformed into charts and graphs easily using HATS. Although only line chart is demonstrated here, but HATS support various other graph types as well like Bar Chart, column chart, pie chart, etc.
• #60: It is often needed to show the map on web pages, By extracting the address, zip code or coordinates from the relevant fields in the green screen, Google MAP integration can be implemented on modernized screens. Apart from Google Maps, integration with other similar services like Yahoo Maps, Wiki Maps, etc.
• #61: Bar codes are frequently used in different business settings. RC has firm grasp over the implementation of any bar code device with HATS application. In this example, the generic bar code data is read from the bar code scanner and then stored into the Green Screen application. Similarly, bar code stored in the system is also retrieved when needed for matching.
• #62: The HATS application is developed for these specific devices i.e. Motorola MC 9090 & MC9060 Scanners.
• #63: Here you can see, how our application is being used for an Inventory & Warehouse Management Application. Entire inventory is stored with bar code tagged to it, the scanners are then used for identifying the items.
• #64: Here you can see the product details are stored in the green screen application with the barcode. The bar code is retrieved on demand in the PDA.
• #65: Social Media integration with applications like Facebook, Twitter, Google plus, Linkedin, My Space is a bit rare in modernized version of green screen applications. Nevertheless, this integration if needed, can be implemented by Royal Cyber.
• #66: Green screen scattered data is organized by applying various techniques as showed in previous slides. Similarly, the data can also be organized for generating printer friendly version of the content.
• #67: Printing is very simple, as all user needs to do is to Press Print (or similar) button in Modernized screen. The general print menu depending on the OS will appear and you can have printouts per your requirement.
• #68: On host generally numeric and format specific values are shown without any particular format. But on modernized webpage values can be displayed as per the desired format, for instance, Dollar format, currency format, accounting notation, to name a few.
• #69: Our special implementation allows direct JDBC data access, meaning accessing data directly from the database based on the search query, to make the overall operations faster. Now here you can see, a search is requested from the modernized screen. Now we request the database for the relevant search results and green screen application to share the interface to show the data.
• #70: Now DB server and Green screen returns the requested data or information, the modernized screen is populated based on the data retrieved.
• #71: Once the data is obtained from a green screen or db or both, Pagination could be applied on it for easier access to the data. Various other pagination schemes can be implemented per requirement and type of data to be accessed. With that, I would like to request Imran to take the webinar further.
• #72: Thank you Yasir. I will start with the Demonstration of Web Services.
• #74: Here we can see that data from multiple screens is displayed on single modernized screen. Web services are loading and populating the data on single web page.
• #75: Here is another example, two HATS web services each collecting data from multiple green screens is used for showing data in the modernized screen
• #77: Here you can see that web service is created to communicate with .NET, and you can see that per transaction time is saved making the overall process efficient. *** can not make it out anything in the picture, need better one please.
• #78: Here you can see a non-HATS web service is used for pulling data and consumed by the Modernized screen. Modernized webpage is also pulling the data from the Green screen. Eventually data from both the sources is being showed to the application user.
• #80: The difference between websphere and green screen server’s timeout is a big issue to handle for the programmers. The time difference requires an approach that keeps on checking if the legacy server present at backend has timed out or not. Traditionally this is handled by developing an applet but it has its own flaws like connection issues or if java is disabled by the browsers, then there is no way to know if the backend serve is timed out or not. However, with the AJAX based implementation this tasks becomes easy as a small (sometimes even invisible from the front end) components keeps on doing it to keep the modernized screen and its counterpart legacy screens consistent from session’s perspective. There are no firewall issues and there is no explicit need to have Java enabled, making this the perfect solution so far.
• #81: Here is the more traditional use of AJAX as the component to bring in data to populate fields. In this implementation the grids or tables are filled without refresh based on certain events, like data insertion, etc.
• #82: In this example, the AJAX is populating the tabs when clicked (on demand). Request send to the server does not require refreshing the whole page, only the required data is pulled from the legacy server and/or database.
• #83: Portals are used very frequently by companies these days. HATS can also be used for developing counterpart portal application of the green screen application.
• #84: Here you can see, multipleportlets are implemented based on the data retrieved from green screen application.
• #85: Combine / Integrate This is a example of Combine / Integrate data from various sources into a single Web interface.Here you can see data from 5250 application from 3270 application and from virtual Terminal in a single web interface.In short, 3 green screen different applications are merged on solitary portal.
• #86: Dojo Toolkit is an open source modular JavaScript library designed to ease the rapid development of applications and web sites. This is a modernized page of DOJO. We can use DOJO framework in HATS in a full fledge manner.
• #87: Here we can see, that DOJO implementation forces the user to enter valid Postal and Country code. Now, traditionally the data is being sent to the green screen and then the error message is returned and then user has to re-enter the correct value. Whereas with DOJO implementation, it is ensured that at least the format of the data is necessarily entered in correct manner in modernized screen, like no characters in a numeric field, etc. It saves the user’s time and ensures the correctness of data. Furthermore, other client side facilities like data masking, tool tips can also be easily implemented.
• #88: DOJO also allows the implementation of different controls, like the data picker shown in this slide.
• #89: On this page we have used jQuery for achieving the requirement of data insertion. It is a div base popup that opens on a webpage as part of current JSP. User clicks on any item on the opened popup and it gets inserted in the root page. On demand jQuery component/library can be used in HATS application easily.
• #90: With HATS implementation applications can be integrated seamlessly. Like here you can see, highlighted grid is populated from a .Net application, whereas rest of the screen’s data is being pulled from the green screen. This is just a beginning as there is no restriction whatsoever of the platform, OS, browser, IDE, language for the accomplishment of integration. With that, I will request Yasir to conclude the Webinar.
• #96: Hope to see you again. Bye…So , this is it from our side. Once again thank you very much for your participation… We hope you enjoyed the session and found it educational and interesting… Please feel free to contact us for any queries. You can get 40 hours of Consultancy free of cost from us, for any kind of modernization. And let me remind you again about our HATS training programs. Stay tuned with us for more trainings and webinars. Thank you very much for your participation. We hope you enjoyed the session. Good bye from All of us. Hope to see you again.