Work Report on M.I.T APP INVENTOR Component Enhancements

Work Report – Ashik

List View Enhancements

The current ListView in the app inventor is a Simple ListView in which we can add texts, change background color, font color, and some other stuffs too..

Well, Lets see about the features that the New ListView (from hereon, THE LISTVIEW) can provide………..

THE LISTVIEW, now comes in Four different types,

  • Main Text only
  • Main Text and Sub Text
  • Image and Main Text
  • Image, Main Text and Sub Text

01020304

As you can see, when the component is dragged into the editor, it gives you an idea of how the ListView is going to be

05

The LISTVIEW contains the following Properties.

  • Set Background Color
  • Set Main Text Color
  • Set Sub Text Color
  • Extract Elements for Main Text
  • Extract Elements for Sub Text
  • Set Font Size for Main Text
  • Set Font Size for Sub Text
  • Height of the ListView
  • Width of the ListView
  • Set the Type of ListView
  • Select the Images for the ListView

 

 

 

 

 

 

 

 

There are Two new properties that are included in LISTVIEW. The ListViewTypeSelectorProperty and The PictureSelectorProperty.

The ListViewTypeSelectorProperty is just another case of ChoiceProperty. So that’s not a big deal 😛

But in order to give images to the LISTVIEW, we need to access multiple assets simultaneously. And there is no such property to deliver multiple assets.

06

The picture towards the right shows the new PictureSelectorProperty. I have uploaded four images using this property. For uploading the images, just click on the image boxes. You can also replace the images with the same process.

In short, this property stores the images in the asset folder. And each block is mapped to the corresponding LISTVIEW item so that you can put different images for listview items.

I have put some examples on how the LISTVIEW changes with their respective change of Properties.

This slideshow requires JavaScript.

The link to the files are given below:

ListView Component:  https://github.com/Ashik-U-A/appinventor-sources/blob/advancedListView/appinventor/components/src/com/google/appinventor/components/runtime/ListView2.java

ListView MockComponent: https://github.com/Ashik-U-A/appinventor-sources/blob/advancedListView/appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockListView2.java

ImageSelector Property: https://github.com/Ashik-U-A/appinventor-sources/blob/advancedListView/appinventor/appengine/src/com/google/appinventor/client/editor/youngandroid/properties/YoungAndroidListViewPictureSelectorPropertyEditor.java

The Link to the Commits are given Below:
https://github.com/Ashik-U-A/appinventor-sources/commits/advancedListView

 New Emulator for App Inventor!

Well, M.I.T App Inventor has marked its line way above the other App Developing Options that are used for Educational as well as Make-on-the-go culture development.

My Work does not just end with the enhancement of Components such as ListView. With the support of my Mentor Andrew McKinney, I did a work on integrating the New Google Android Emulator, with App Inventor.

Till now, App Inventor has been using the old emulator that lacked a number of new features and was not very pretty. 😛
Now, the New Emulator has been integrated with the App Inventor and it comes with the new Look of Smart Phone and has all the features that the Android Virtual Device provides.

The method of working has not been changed so as to maintain the system smooth.

The procedure is rather simple.

  • Start the aiStarter Script.
  • In the website (out App inventor Editor), go to Connect -> Emulator
  • The aiStarter tracks the request and in turn powers up the emulator by executing the run-emulator script.
  • After that it fires up the companion app and tracks the changes made in the online Editor and reflects it in the Emulator.
emul1

The aiStarter Program that shows the Requests and Emulator Initialization Sequences

Now that we have the new emulator, file handling and testing of apps have become a lot easier.

By the end of Summer, my Mentor and I, would be releasing it as the new aiStarter package.

The Link to the Emulator files are Given below:
https://www.dropbox.com/sh/x8r1piyarkpkku2/AADDhzbjFmPxvP3AWDelF5RAa?dl=0
(This link leads to my entire Project Directory for Emulator. I’ve given this link because this work included not only coding but also putting together the necessary files that makes the emulator work. So the arrangement that you see in the directory was made by me.)

The changed files include aiStarter.py and run-emulator that are inside the Commands-for-appinventor Folder.

I have changed the file arrangement to include new Android Flavors (new System Images) and skins so that the user can work on the type of OS and Specifications that he/she prefers. So now we can place the needed System Image or Skins and shoot up the Emulator and it works fine.

emul2

The New Google Emulator Integrated with the M.I.T App Inventor.

Well, This is not the end. Even after GSoC, we (Andrew and I) will be working on the polishing of the emulator and by the end of this summer, we will be releasing a new Package for the App Inventor.

The further works include a New Interactive UI through which the user can select the type of platform that he wants to work with. So now instead of just one Flavour, the user can select from a large variety that include versions from GingerBread to MarshMallow.

Now the new emulator works fine for Linux Systems. By the end of next month, we are planning to launch the same for Windows as well as Mac Systems.

Now, Another small Piece of Work in Background Services.

This work is done as a team. We (My GSoC associate Justus and I) have put our efforts in creating “Services” for the App Inventor that would help the user in creating Background Services which would be a huge step forward for App Inventor and for the users that use it.

The Link to the Details of that project is given Below:
https://ai2gsoc16.wordpress.com/app-inventor-services/

Advertisements