Smartphones

Edit web pages from an Android phone with this app

Android Web Editor is a must-have application for web developers. Jack Wallen explains why and walks you through how to use the Android app.

If you need to test a snippet of PHP or edit a page on a client's website while you're on the go, you don't need to fire up your laptop if you have an Android mobile device -- you can just use the Android Web Editor application.

Lite and PRO versions of Android Web Editor

This great HTML and PHP editor comes in two editions: Android Web Editor Lite and Android Web Editor PRO. This is the feature set for Android Web Editor Lite, which is free:

  • Code highlighting
  • FTP server support
  • Work with files directly on your Android device
  • Line numbering
  • Hot tags-button
  • Quick preview of your work
  • Current line highlighting

These additional features come with Android Web Editor PRO, which will set you back $3.00 USD:

  • Run your code on the Web Edit server
  • PHP debugger
  • Encoding choice
  • AUTO encoding
  • Search by code
  • Undo/redo
  • Changes set of hot keys through the main screen siding

The Lite version will suffice for most Android device users, though I think the encoding and the PHP debugger alone is worth the cost of the PRO version.

Important notes about Android Web Editor

  • You will not use Android Web Editor to code full sites, unless perhaps you install it on an Android tablet such as a Motorola Xoom, accompanied with a Bluetooth keyboard.
  • If you are working with PHP or JavaScript, you should buy the Android Web Editor PRO version. Your Android phone doesn't have the ability to process PHP code, and the only way to do it is to get the PRO version, so PHP code can be uploaded to the Android Web Editor servers and run for testing.

Installing and using Android Web Editor

Follow these steps, and Android Web Editor will be on your phone in seconds:

  1. Open the Android Market from the Application Drawer.
  2. Search for "web edit" (no quotes).
  3. Tap the Install button.

The application is now in the Application Drawer. Open the Android Web Editor and get ready to edit. I will demonstrate how Android Web Editor is used with a short but sweet HTML file.

To start a new file, tap the Menu button and select New File from the Application menu (Figure A). Figure A

Some Menu entries are not accessible in the Lite version.

Once the new file is open and ready, it's time to start adding code. Android Web Editor has a tool that allows you to tap the tag you want to add and then add the text.

In order to create the start of the HTML file, let's say you need to add the standard:

<html>
<head>
<title>My Tiny Test</title>
</head>
To add the code, you can use the <> and </> buttons from the quick access bar (Figure B). Figure B

The test code is complete and ready to view.

Follow these steps to add the previous code:

  1. Tap <> in the quick access bar.
  2. The cursor will automatically be ready to type within the tag. Type "html" (no quotes).
  3. Tap the same line as just typed on after the ">" character.
  4. Tap the Return key.
  5. Tap the <> button again.
  6. Type "head" (no quotes).
  7. Tap the same line as just typed on after the ">" character.
  8. Tap the Return key.
  9. Tap the <> button again.
  10. Type "title" (no quotes).
  11. Tap after the ">" character in the title tag.
  12. Type the title of the HTML page, which in this example is "My Tiny Test" (no quotes).
  13. Tap the </> button to close the tag.
  14. Tap the same line as just typed on after the ">" character.
  15. Tap the </> button.
  16. Type "head" (no quotes) to close the head section.

It seems like a lot of steps, but it's much faster than you might think.

Now type the body of the page and then close out the <body> and the </html> tags. If you want to view the file, tap the Menu button and then tap Quick View. When the Quick Viewer opens, it will render the page you created (Figure C). (Note: Do not expect the Android Web Editor Quick Viewer to be able to display complex code or PHP.) Figure C

This is basic HTML.
The tags in the Quick Bar are not the only tags available; if you tap the up arrow in the Quick Bar, you can see the complete Tag Set that is available (Figure D). Most of the tags will cover the majority of your web coding needs. Figure D

Don't expect to add customized tags here because it is not allowed.

Uploading and downloading files from FTP

In the Android Web Editor PRO version, you can upload and download files from FTP, but in order to do so, you need to set up the FTP server. Follow these steps to set up the FTP server:

  1. Tap the Menu button.
  2. Tap the Settings button.
  3. In the new window (Figure E), configure your FTP server (Address, Login, Password).
  4. Tap the Save button.

Figure E

You need to scroll down a little to see the Save button.

Once it's configured, the option to save to and open from the FTP server will be available.

Summary

If you're looking for a mobile tool to help with your web development tasks, Android Web Editor is one of the finest apps I've used. If you work with PHP or JavaScript, the PRO version is definitely worth $3.00. The ability to upload and download code to a server and create on the go makes Android Web Editor a must-have for web developers.

About

Jack Wallen is an award-winning writer for TechRepublic and Linux.com. He’s an avid promoter of open source and the voice of The Android Expert. For more news about Jack Wallen, visit his website getjackd.net.

0 comments

Editor's Picks