Upload
cori-williamson
View
218
Download
2
Embed Size (px)
Citation preview
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
• Uses LESS which controls the CSS, adding features that allow greater complexity and customisation while improving maintainability
Why use Bootstrap?
FastEasyMaintainableCross Platform
Bootstrap Features – Grid System
Bootstrap Features – CSS
Font Awesome
Bootstrap Features – Javascript
Bootstrap – Responsive Design
Bootstrap and E:Vision
• Bootstrap CSS-based TKT and different Field Input Types TTQs records• Bootstrap CSS-based TKT and different Field Input Types TTQs records
Record Picker TTQ within the bootstrap dropdown Date Picker TTQ
Dynamic ListBox TTQ
Button Type TTQ
• Old Application Decision Entry search screen• Old Application Decision Entry search screen
• Bootstrap user interface and mimicking the Ajax by using the iframes based framework• Bootstrap user interface and mimicking the Ajax by using the iframes based framework
SRL within the iframe
Bootstrap Modals
• Showing the state of the application within the modal e.g. Search or Processing• Showing the state of the application within the modal e.g. Search or Processing
• Zooming the text within the modal• Zooming the text within the modal
• Running the Task or SRL within the modal/iframe – STEP1• Running the Task or SRL within the modal/iframe – STEP1
• Running the Task or SRL within the modal/iframe – STEP2• Running the Task or SRL within the modal/iframe – STEP2
• Running the Task or SRL within the modal/iframe – STEP3• Running the Task or SRL within the modal/iframe – STEP3
• Running modal in the background to perform the DMU actions – STEP1• Running modal in the background to perform the DMU actions – STEP1
• Running modal in the background to perform the DMU actions – STEP2• Running modal in the background to perform the DMU actions – STEP2
Ajax
• Ajax to help solve the performance issue• Ajax to help solve the performance issue
• 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• 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
• Setup variables on the parent Bulk Clearance Check screen• Setup variables on the parent Bulk Clearance Check screen
• 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
• 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
• SRL and RQI records called by the ajax GET equest to return the Json object with the details of updated record
• SRL and RQI records called by the ajax GET equest to return the Json object with the details of updated record
• Table updated by the Ajax request without the need of refreshing the screen• Table updated by the Ajax request without the need of refreshing the screen
Bootstrap UI Examples
• UKBA – Immigration Overview Screen• UKBA – Immigration Overview Screen
• Configuration Management System screen • Configuration Management System screen
• Bursary Applications Management screen• Bursary Applications Management screen
• Student Self Service – Course Details screen• Student Self Service – Course Details screen
• Exam Attendance Screen• Exam Attendance Screen
• UKBA – Maintain Passport Details Screen• UKBA – Maintain Passport Details Screen
Questions?Tomasz Pogoda – [email protected] Martin – [email protected]