GUI requirements for Screen1
1. Label: Labels are the static text components which are used to display some headings or markings on the screen.
2. Button: A button will let you trigger the event and is a very essential component.
3. Text Box: This is the input field where the user can type. The typed value will be used later in the application through the block editor. 4. Horizontal arrangement: These are special components which keep all child components within them aligned horizontally.
5. Notifier: This is used to display some instructions or give controls over your existing components. You will discover more about its functionality as we implement it in our app. 6. Firebase DB: As you already know, this is the cloud based database utility from Google. We will use it to store the user’s data over the cloud. 7. Tiny DB: This is the database component for a local database on your device. Generally, this is where application related records are saved in the phone.
8. Barcode scanner: This is an advanced component to read and interpret barcode/QR code. It will use the existing barcode application or camera from your device.
9. Clock: The clock component will help in all time instance related actions.
Table 1 gives the components that we will need for this application, which will be dragged onto the designer from the left-hand side palette.
1. Drag and drop the components
mentioned in Table 1 to the viewer. 2. Visible components can be seen by you while the non-visible components will be located beneath the viewer under the tag ‘Non-visible’.
3. Labels, along with their respective text boxes, need to be put within the ‘Horizontal arrangement’ so as to keep them aligned horizontally. 4. If you have dragged and placed everything, the layout will look something like what’s shown in Figure 6.
5. Make the necessary property changes like we did when changing the text property for the label and button components.
6. Renaming the components helps to identify them in the block editor. 7. Your graphical user interface is now ready. Figure 6 shows how the application will look after the installation. Non-visible components will not be visible. 8. Shown in Figure 7 is the hierarchy of the components that we have dragged to the designer.