CS375: Software Engineering - GUI
Activity Goals
The goals of this activity are:- To implement a Progressive Web App (PWA) in JavaScript, HTML5, and CSS
- To create interactive user interfaces using Python
- To explain best practices in developing user interfaces for usability
Supplemental Reading
Feel free to visit these resources for supplemental background reading material.The Activity
Directions
Consider the activity models and answer the questions provided. First reflect on these questions on your own briefly, before discussing and comparing your thoughts with your group. Appoint one member of your group to discuss your findings with the class, and the rest of the group should help that member prepare their response. Answer each question individually from the activity, and compare with your group to prepare for our whole-class discussion. After class, think about the questions in the reflective prompt and respond to those individually in your notebook. Report out on areas of disagreement or items for which you and your group identified alternative approaches. Write down and report out questions you encountered along the way for group discussion.Model 1: A Static Progressive Web App for Mobile Clients
Review the example below as a class.
Questions
- How do we name elements in HTML5 for dynamic updating? What is the name of the main body element that we're updating?
- What JavaScript command is used to set the content of a web page element?
- How do we define each list item to be a box?
- How do we ensure that each box appears in a dynamically-sized grid?
- How do we intercept a fetch and serve the content locally, serving as a cache?
- Load the web page in a Chrome browser on your mobile device, if you have one. From the Chrome menu, you can add the app to your home screen. Try changing the navigation color and the home screen icon.
Embedded Code Environment
You can try out some code examples in this embedded development environment! To share this with someone else, first have one member of your group make a small change to the file, then click "Open in Repl.it". Log into your Repl.it account (or create one if needed), and click the "Share" button at the top right. Note that some embedded Repl.it projects have multiple source files; you can see those by clicking the file icon on the left navigation bar of the embedded code frame. Share the link that opens up with your group members. Remember only to do this for partner/group activities!Model 2: A Dynamic PWA Using a Backend Web Service
Questions
- In
script.js, where has thecoursesarray gone? - How has the service worker changed to intercept fetches and forward them to the web server if they are remote data calls?
- What would happen if the server side data changed? What could we do about this?
Embedded Code Environment
You can try out some code examples in this embedded development environment! To share this with someone else, first have one member of your group make a small change to the file, then click "Open in Repl.it". Log into your Repl.it account (or create one if needed), and click the "Share" button at the top right. Note that some embedded Repl.it projects have multiple source files; you can see those by clicking the file icon on the left navigation bar of the embedded code frame. Share the link that opens up with your group members. Remember only to do this for partner/group activities!Model 3: Application Graphical User Interface (GUI) with Python
Questions
- In your own words, what is a callback function?
- Design a GUI using
pygubu-designerwith an input and a display element, and connect them with a callback. - Choose a UI design basic principle and describe it in your own words with an example. You may draw a sketch or use PowerPoint to do this.