Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.
-
Upload
cori-williamson -
Category
Documents
-
view
218 -
download
2
Transcript of Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.
![Page 1: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/1.jpg)
Improving e:Vision user interface using Bootstrap and jQuery
22.05.2014
![Page 2: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/2.jpg)
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
![Page 3: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/3.jpg)
Why use Bootstrap?
FastEasyMaintainableCross Platform
![Page 4: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/4.jpg)
Bootstrap Features – Grid System
![Page 5: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/5.jpg)
Bootstrap Features – CSS
![Page 6: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/6.jpg)
Font Awesome
![Page 7: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/7.jpg)
Bootstrap Features – Javascript
![Page 8: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/8.jpg)
Bootstrap – Responsive Design
![Page 9: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/9.jpg)
Bootstrap and E:Vision
![Page 10: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/10.jpg)
• 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
![Page 11: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/11.jpg)
• Old Application Decision Entry search screen• Old Application Decision Entry search screen
![Page 12: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/12.jpg)
• 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
![Page 13: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/13.jpg)
Bootstrap Modals
![Page 14: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/14.jpg)
• 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
![Page 15: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/15.jpg)
• Zooming the text within the modal• Zooming the text within the modal
![Page 16: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/16.jpg)
• Running the Task or SRL within the modal/iframe – STEP1• Running the Task or SRL within the modal/iframe – STEP1
![Page 17: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/17.jpg)
• Running the Task or SRL within the modal/iframe – STEP2• Running the Task or SRL within the modal/iframe – STEP2
![Page 18: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/18.jpg)
• Running the Task or SRL within the modal/iframe – STEP3• Running the Task or SRL within the modal/iframe – STEP3
![Page 19: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/19.jpg)
• Running modal in the background to perform the DMU actions – STEP1• Running modal in the background to perform the DMU actions – STEP1
![Page 20: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/20.jpg)
• Running modal in the background to perform the DMU actions – STEP2• Running modal in the background to perform the DMU actions – STEP2
![Page 21: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/21.jpg)
Ajax
![Page 22: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/22.jpg)
• Ajax to help solve the performance issue• Ajax to help solve the performance issue
![Page 23: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/23.jpg)
• 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
![Page 24: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/24.jpg)
• Setup variables on the parent Bulk Clearance Check screen• Setup variables on the parent Bulk Clearance Check screen
![Page 25: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/25.jpg)
• 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
![Page 26: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/26.jpg)
• 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
![Page 27: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/27.jpg)
• 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
![Page 28: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/28.jpg)
Bootstrap UI Examples
![Page 29: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/29.jpg)
• UKBA – Immigration Overview Screen• UKBA – Immigration Overview Screen
![Page 30: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/30.jpg)
• Configuration Management System screen • Configuration Management System screen
![Page 31: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/31.jpg)
• Bursary Applications Management screen• Bursary Applications Management screen
![Page 32: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/32.jpg)
• Student Self Service – Course Details screen• Student Self Service – Course Details screen
![Page 33: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/33.jpg)
• Exam Attendance Screen• Exam Attendance Screen
![Page 34: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/34.jpg)
• UKBA – Maintain Passport Details Screen• UKBA – Maintain Passport Details Screen
![Page 35: Improving e:Vision user interface using Bootstrap and jQuery 22.05.2014.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649ea05503460f94ba3a61/html5/thumbnails/35.jpg)
Questions?Tomasz Pogoda – [email protected] Martin – [email protected]