Page 98 - Modular_V1.1_Flipbook
P. 98

Palette pane: On the left, there is a palette pane from where we can select components like
                        buttons, images, and other functions required for our app.
                        View pane: To the right of the palette is the white area where we can view and arrange
                        added components.
                        Components pane: This pane shows a list of all the components added to the screen in a
                        hierarchical view.
                        Properties Pane: When we click on a component in the viewer, we see its properties listed
                        here. Properties of the components can be changed from here.
                  Creating a Talking App

                  In  the  Project  Designer  window,  we  will  design  the
                  interface  by  choosing  buttons,  images  or  text  boxes
                  and specify the functionalities of our app.
                  Adding a Button


                  Drag and drop a button from the Palette pane to the
                  View pane.
                  Testing the App

                  App Inventor allows us to test our app while creating, so, to test your app, connect your android
                  device and download MI A12 companion. Now follow the given steps.
                  Step 1     Click on Connect menu.
                  Step 2     AI Companion  from  the  drop-
                             down list.

                  Step 3     Open  MIT A12 Companion  on
                             your  device  connect  by  scanning
                             the  QR  code  or  typing  the  code
                             displayed on your screen.

                  Make sure your device and computer are connected to the wireless network to perform these steps.
                  If you do not have any android device, you can download Emulator on your computer which
                  works just like an Android device but works on the computer. The commonly used Android
                  Emulators are Android Studio, LD Player, Make Your Own etc.
                  Rename the Button


                  In the components pane, Button is displayed as Button1, you can rename it. To rename a button,
                  follow the steps given below:                      App will be visible on
                                                                      connected device.
                  Step 1     Click on Rename button.

                  Step 2     Type  the  new  name  for  the
                             component.  In  this  example.  We
                             have given the Talking Me.
                  Step 3     Click on OK button.

                  The new name for the button will appear in the
                  Component pane but in the View pane, button still has the name Text for Button1 displayed on it.

                  96      Touchpad MODULAR (Version 1.1)-X
   93   94   95   96   97   98   99   100   101   102   103