Channels ▼

Al Williams

Dr. Dobb's Bloggers

Building Android Apps with TouchDevelop

January 21, 2014

In April 2011, I wrote about using App Inventor to do point-and-click Android development (you can read part 1, 2, and 3 if you missed them). Inventor is now developed, by the way, by MIT.

I recently tried another tool that offers a different kind of point-and-click development that can target Android (as well as many other platforms, including modern web browsers). That tool, TouchDevelop, is from Microsoft Research and is an interesting hybrid between a GUI "point-and-click" development environment and traditional text-based development.

TouchDevelop scripts or programs don't even pretend to be general purpose. They assume you have a Wall (the screen on a phone or a web page) and many of the libraries center around things like web services or game creation.

You develop apps right in a web browser (including the one on a phone or tablet, if you like). You get a Windows 8-style tiled list of your scripts (and other available scripts) that you can run or edit. Once you edit, you see a mix of things. At the far left you'll find some basic navigation functions that let you stop editing, undo edits, as well as run or debug the current script.

The next panel over shows all your different resources, including your script, code, events, data (such as global variables), and resources (clip art, sounds, etc.). Clicking on anything here populates the rightmost panel with specific actions for that item. You can also find a plus button that creates or adds new things to your project (events, resources, libraries, etc.).

When you edit code, you'll find a mix of text and graphics that the editor uses to show information. For example, here's part of a script I wrote:

The arrows pointing right indicate a method call on an object. So the first one is calling the wall's set background method (and, yes, there are spaces in the names).

You can guess that the line that starts var pic:= creates a new variable. The little flower, however, indicates a resource. The next line starts with a funny box graphics that indicates a global variable.

Although you can type, you don't have to very often. When you click on a line, the editor will open a context-sensitive set of buttons that allow you to pick things that makes sense at that point in your code.

There are usually two pages of choices and a more button. Clicking the "more" button fills in the left side of the screen with a list of everything that you could do at that point.

It sounds complicated, but it isn't really. If you go to the website and do a few tutorials, you'll see it is actually quite easy as long as you don't need to do anything unanticipated by the system designers. If you really want to type (like I do), there are a few helpers that I didn't find mentioned anywhere. For example, pressing a period after an object name inserts the method call arrow for you.

The cross platform nature of this tool is amazing. However, I don't think it will be of much direct use to Android embedded developers. I don't think that would surprise the TouchDevelop creators, either. It looks like it is a casual programming language aimed at mobile devices and at that it seems pretty successful. It is easy to imagine using this to teach programming to young people, for example. It is harder to see doing commercial development with it in its current state.

Even if you don't think you need it, TouchDevelop is one of those things that is significantly different from what you normally use that you ought to look at it just to shake up your world view a little bit. I have to admit, I enjoy coding a little game or something while I'm on an airplane on my tablet (for example, my Lunar Lander game, which is a work in progress). I wouldn't be surprised to find more tools borrowing some of the ideas from systems like TouchDevelop in the future.

Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 


Dr. Dobb's TV