1 / 35

Improving e:Vision user interface using Bootstrap and jQuery

Improving e:Vision user interface using Bootstrap and jQuery. 22.05.2014. What is Bootstrap?. CSS and Javascript framework used to speed up the development of websites and web applications Open Source project available from GitHub Supports HTML5 and CSS3 Supported by all major browsers

minda
Download Presentation

Improving e:Vision user interface using Bootstrap and jQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014

  2. What is Bootstrap? • CSS and Javascript framework used to speed up the development of websites and web applications • Open Source project available from GitHub • Supports HTML5 and CSS3 • Supported by all major browsers • Uses LESS which controls the CSS, adding features that allow greater complexity and customisation while improving maintainability

  3. Why use Bootstrap? Fast Easy Maintainable Cross Platform

  4. Bootstrap Features – Grid System

  5. Bootstrap Features – CSS

  6. Font Awesome

  7. Bootstrap Features – Javascript

  8. Bootstrap – Responsive Design

  9. Bootstrap and E:Vision

  10. Bootstrap CSS-based TKT and different Field Input Types TTQs records Dynamic ListBox TTQ Record Picker TTQ within the bootstrap dropdown Date Picker TTQ Button Type TTQ

  11. Old Application Decision Entry search screen

  12. Bootstrap user interface and mimicking the Ajax by using the iframes based framework SRL within the iframe

  13. Bootstrap Modals

  14. Showing the state of the application within the modal e.g. Search or Processing

  15. Zooming the text within the modal

  16. Running the Task or SRL within the modal/iframe – STEP1

  17. Running the Task or SRL within the modal/iframe – STEP2

  18. Running the Task or SRL within the modal/iframe – STEP3

  19. Running modal in the background to perform the DMU actions – STEP1

  20. Running modal in the background to perform the DMU actions – STEP2

  21. Ajax

  22. Ajax to help solve the performance issue

  23. Last Step – onload() assign values to the variables on the parent screen • On Close button click run the jquery/ajax function to update the table

  24. Setup variables on the parent Bulk Clearance Check screen

  25. Execute the function with Ajax GET request to retrieve data from the SITS database, create the Json object and update the details on the parent screen

  26. SRL and RQI records called by the ajax GET equest to return the Json object with the details of updated record

  27. Table updated by the Ajax request without the need of refreshing the screen

  28. Bootstrap UI Examples

  29. UKBA – Immigration Overview Screen

  30. Configuration Management System screen

  31. Bursary Applications Management screen

  32. Student Self Service – Course Details screen

  33. Exam Attendance Screen

  34. UKBA – Maintain Passport Details Screen

  35. Questions? Tomasz Pogoda – tomasz.pogoda@ed.ac.uk Jon Martin – jon.martin@ed.ac.uk

More Related