Category Archives: Components

App Inventor to add “Responsive Design” features next week

MIT App Inventor upgrade coming next Monday – the upgrade will support apps running on devices with different size screens, such as a smart phone versus a tablet.

There’s one important rule when using App Inventor to create apps with responsive design:

Specify widths and heights of components as percentages of the screen width and height, rather than as fixed numbers of pixels.

For example, to make a button whose width is half the screen width, set the button’s width to be 50 percent rather than setting it to a specific number of pixels.

See Responsive Design in App Inventor

Please see the link for details on this upcoming change.

Apps written in Java and the Android SDK have access to additional methods of creating flexible design layouts, or even multiple layouts, for different screen sizes.

MIT begins testing “App Inventor Extension Components”

MIT has begun testing a new App Inventor feature that will enable developers to create their own “extension components”. Extension components are written in Java. Once created and tested, these new components may be shared with other App Inventor developers for use in programs.

What this means: if App Inventor lacks a feature or capability, then a Java developer familiar with App Inventor and its components software development kit will be able to add new features to App Inventor. Over time, the capabilities and power of App Inventor are likely to grow enormously – and rapidly. The ability to extend App Inventor’s features/components is an exciting and tremendously important development for the future of App Inventor!

For now, this feature is in “test mode”.

Source: App Inventor Extension Components available for testing | Explore MIT App Inventor

App Inventor Stores Numbers as “Floating Point” Format

When you type a number, such as “123”, computers convert the text values of “123” into an internal representation used by the computer. There are many possible ways that numbers can be represented inside a computer. For example, the computer could:

  • keep numbers in their original text format “123” (decimal format)
  • convert them into a binary representation (binary integers)
  • a “floating point” representation (floating point or “float” format)
  • or even a “binary coded decimal” (BCD) representation.

Each internal format has benefits and drawbacks, depending on the application. Most computers (and programming systems) convert entered numbers from their original text format into either integer format or floating-point number format.

App Inventor converts values to floating point format. Which is fine, except that you will encounter some odd and subtle issues. As the link below notes, in App Inventor arithmetic, 0.3 + 0.6 does not equal 0.9!

Continue reading App Inventor Stores Numbers as “Floating Point” Format

New App Inventor 2 “Companion” app released today; new features

Changes between nb143i and nb144 (June 30, 2015)

  • When a component is renamed in the designer, any related collapsed blocks will be properly renamed now.
  • Screen1 now has properties that permit you to hide both the top “Status” and “Title” Bars
  • The selected item in a ListView is now highlighted
  • Activity Starter component now has a “Activity Canceled” event
  • Fix to the Player Component so it doesn’t spontaneously start playing after a phone call or other interruption
  • Bugfix to Image Sprite rotation which had left screen artifacts on some devices
  • Add Math blocks to convert between decimal, Hexidecimal and Binary representation
  • Clock Component now permits you to format a date or time arbitrarily. You provide a “format string”
  • You can now have both a Background Image and a Background Color and the “right thing” happens
  • TextToSpeech: The designer now uses dropdown menus to select Country and Language. Added blocks to fetch the supports countries and languages on a given device

Source: Release Notes for MIT App Inventor 2 (Beta)

Can you make a video player in App Inventor? Not really, unfortunately.

A question from a reader: Can we make a video player in App Inventor?

The short answer is, unfortunately, not really.

In the App Inventor Designer, in the Palette’s Media section, you can drag a Video Player into the viewer. But this Video Player only plays video files (WMV, MP4) that are stored inside your app (not on the web) and these files are limited to just 1 megabyte in size. Therefore, the Video Player feature in App Inventor is so limited as to not be very useful for most applications.

 

Identifying the cause of serious errors in App Inventor apps

Some times App Inventor 2 apps stop working (well mine sometimes do this, may be your’s don’t!)

Besides looking carefully at your blocks code, there are some additional steps that may be helpful in identifying the cause of the problem.

1. Check your blocks code very carefully to see if you can spot an error in your program.

2. Add a status message area in the user interface (using the Designer) and then in your blocks code, add blocks to assign status texts to this message area. Your status message could include a message indicating what section of your code is running, or to display the values of variables in your program.

3. Add a special “Error handler” to catch and display information when the program encounters a serious problem. The following section is adapted from my tutorial on basic Bluetooth communications.

Error  Handling

For most of our App Inventor apps, we ignore potential errors – if errors occur, the app stops running and Android displays error messages.

Our app can intercept the error condition by adding an error event handler to the main screen, Screen1. In the Blocks editor, select the Screen1 component and then select the When Screen1.ErrorOccurred event. Drag this to the Blocks editor and then add the following code.

The ErrorOccurred event has four parameter values (local variables) that contain information about the error. This error handler displays the error values on your device screen, rather than immediately shutting down the app.

BTServerErrorHandler

 

To use this code, add a text label to your user interface – in the example above, the label has been renamed to lblStatus.

There is no guarantee that these error values will identify the specific problem but they may give an indication as to where the problem is occurring in your program!

Multiline text input in App Inventor

The App Inventor TextBox control supports both single line and multi-line input; the TextBox control default to single line mode – and you may not have realized it can support multiple line text input too!

In single line input, text is entered using the on screen keyboard, followed by the Enter key (or you can use an external Bluetooth keyboard). Once the enter key is pressed, the on screen keyboard goes away.

Multi-line mode is enabled by checking the Multiline checkbox item in the control properties. However, the Enter key is used to enter multiple text lines – that means you need to complete the multiline text entry by adding another control, such as a Done button.

The multi-line control is easy to use – and needs just a single line of blocks code to implement! Describing the operation of the control takes more time!

App View

The multiline TextBox looks like a single line text box, as shown here, after entering “first line” into the TextBox control as the app is running.

Screenshot_2015-04-08-18-03-40

To enter a second (or third…) line, tap the green/blue Enter button at the lower right of the onscreen keyboard. Here is the result after typing three lines of text:

Screenshot_2015-04-08-18-03-57

Continue reading Multiline text input in App Inventor

Using TimePicker and DatePicker for entering time and date information

The TimePicker and DatePicker User Interface Controls

Entering the date and time are common features of business applications. We could use a text edit box and let the user type in times (like 10:30) or dates (12 January 2015) but both methods require the user to enter the time or date in the proper format – and the app needs to test the entered data to ensure it was entered correctly.

A better solution is to use App Inventors TimePicker and DatePicker controls. Both provide a graphical method of selecting input values. For example, the TimePicker displays the following:

TimeDate_TimePickerUIThe time is set by pressing the + or – buttons above and below the hours and minutes. The AM/PM indicator is a toggle – when it shows PM, a press changes it to AM, and when it shows AM, a press changes it to PM. With this input system, the user can never entered an invalid time (the user could, of course, enter the wrong time, but that is a different problem!)

Continue reading Using TimePicker and DatePicker for entering time and date information

Displaying web pages in your Android apps

Last year, I presented a short tutorial on displaying web pages from inside your App Inventor apps. Now, here is a some what improved version that prompts for a web address URL, checks to see if http:// has been entered, and if not, prepends http:// to the front of the address. Then the web page is displayed.

The Designer View

There is not much to the user interface – a text box to enter the web URL and a button to display the web page. The page then appears below the button, and the content may be scrolled on the screen.

To create this user interface, drag a horizontal layout onto the screen and then add a label for the “Web page URL” prompt, followed by a text box for the data entry. Then add the Display web page button.

From the User Interface section of the Palette, at the left of the Designer screen, drag and drop a WebViewer component on to the design area.

Screenshot_2015-02-10-15-15-17

 

The WebViewer is not a full Internet browser – it is a component that displays the specified web page only. The WebViewer does not support standard browser features, such as saving web page content nor does it provide a history of the web pages visited.

The Blocks Code

Continue reading Displaying web pages in your Android apps

Part 2: Sending numeric data using App Inventor Bluetooth communications

Part 1 of this tutorial introduced Bluetooth communications and implemented a simple method of sending text data back and forth between two Android devices over the Bluetooth wireless link. If you are not familiar with using App Inventor’s Bluetooth component, start with Part 1.

In Part 2, a data packet concept is introduced to guide the communications between devices, and is used to send a combination of text and numeric data. This section introduces the concept of binary numbers so that you can understand why we would handle text and numbers in different ways.

This tutorial modifies the user interface of both the client and server programs introduced in Part 1. Then, blocks code is added to send text and numeric data. Numeric data is sent as binary data using special methods of the Bluetooth components.

Related:

Related:

Continue reading Part 2: Sending numeric data using App Inventor Bluetooth communications