Mobile Computing Articles

Testing Cordova Hybrid Apps in Worklight

Recently I worked on a project that introduced me to IBM® Worklight® mobile application platform. Among other things, I was pleasantly surprised at the price tag of the Developer Edition of this product: it is free. The Developer Edition comes with an Eclipse-based IDE called the Worklight Studio which offers support for authoring the client-side of your mobile web, hybrid and native apps as well as developing server-side components called adapters.

The Worklight Studio comes with a web application called the Mobile Browser Simulator that can help you with developing and testing your hybrid applications created using Apache Cordova framework. The Mobile Browser Simulator offers you a suite of visual controls for simulating a variety of native bridge APIs to such native device capabilities as accelerometer, camera, compass, file system, device info, contacts database, etc., without the need to run your apps directly on mobile devices or their emulators (which would require setting up specific run-time environments, such as ADT Eclipse plug-in for Android, Xcode for iPhone, etc.)

Here is a screen-shot of the Mobile Browser Simulator that shows Cordova APIs’ visual controls/widgets on the left with the expanded Battery widget that helps simulate different battery levels and the battery plugged-in event (fired when the battery is plugged in for charging and stays in this state until un-plugged).
Worklight 6.0 Mobile Browser Simulator Screen

So, if you are interested in this approach to testing Cordova hybrid apps, below are a few simple steps to follow that will help you get up and running in no time.

Note: For this blog posting, I used Worklight ver. 6.0 which comes with Cordova framework ver. 2.6.
Read the rest of this entry »

1 Comment

Mobile Requirements

http://www.youtube.com/watch?v=Ww09qgqlLYw

This video examines some special considerations necessary in the requirements capture process for mobile applications.

No Comments

5 Beginning Tips for iOS

So you want to develop an iOS app? What do you need to know? This blog provides you with five useful tips for getting started.

iOS is the name of the operating system that runs in iPhone, iPod Touch, Apple TV, and iPad devices.  The OS is based on Mac OS X.  Both are built on the Darwin kernel, which is a UNIX like system.  It was originally called "iPhone running Mac OS X".  The name changed to "iPhone OS" and finally to iOS.

Tip #1 – Buy a Mac

In order to develop iOS apps, you’ll need a Mac to do so1. Although there are some postings on the Internet that provide you with hacks for developing iOS applications on Windows, it’s advisable to purchase the real deal.

The most affordable Mac you can purchase is a Mac mini (starting at around $600). However, you may want to invest in a MacBook Pro (starting at about $1200), since it’s portable.

http://www.apple.com/mac/

Tip #2 – Download Xcode

The IDE that’s used for iOS development is called Xcode and is only available on the Mac.  It includes a code editor, a debugger, a user interface builder, a simulator, and performance tracing tools.  Xcode is also used for developing Mac OS applications.

To get a copy of Xcode, you’ll also need an Apple ID.  Download Xcode for free from the Mac App Store:

https://developer.apple.com/xcode/

Tip #3 – Learn Objective-C

Writing iOS applications requires that you learn a new language: Objective-C.  Objective-C is an object-oriented superset of ANSI C, developed by Brad Cox in 1980.  The syntax is very different from other object-oriented languages you may be used to, like C++ or Java.  For example, to define a method called setValues that accepts a String called n and an integer called id and returns nothing, you’d have to write the following code:

- (void) setValues: (char*) n id: (int) id {

name = n;

employeeId = id;

}

For a primer on Objective-C programming, see:

https://developer.apple.com/library/ios/#referencelibrary/GettingStarted/Learning_Objective-C_A_Primer/

Tip #4 – Join the iOS Developer Program

iOS apps can only be distributed to the general public on the Apple App Store. In order to test your apps on an actual device, or publish your apps to the App Store, you’ll need to be a member of the iOS Developer Program, which costs $99/year. This membership is good for your entire team. That is, it’s not a per developer membership.

https://developer.apple.com/programs/ios/

There is also an iOS Developer Enterprise Program, which costs $299/year.  The advantage of this program over the iOS Developer Program is that you can distribute proprietary apps in-house instead of on the Apple App Store.  That is, they can be hosted on an internal web server and distributed wirelessly through a link contained inside an email/SMS message.

https://developer.apple.com/programs/ios/enterprise/

For a comparison of the membership programs, including a free iOS Developer University program, see:

https://developer.apple.com/programs/start/ios/

Tip #5 – Take an iOS Programming Course (Like Ours)

To really learn iOS Development, you’re best off taking an intensive course on the subject.  We offer a 5 day class which teaches you how to develop apps that you can deploy to iPhones, iPod Touches, and iPads.  The first two days of the course is spent building a solid foundation in Objective-C and the remainder of the time is spent on iOS development.  Please check it out:

WA1920 Enterprise iPhone and iPad Programming

1Technically, there are several Windows-based, third party solutions for iOS development, including game engines (e.g., Unity, Marmalade SDK), HTML/JavaScript solutions for hybrid application development (e.g., Appcelerator Titanium, Genuitec MobiOne Studio), Flash development (i.e., Flash Professional CS6), and general iPhone/iPad app creators (e.g., Dragonfire SDK). Unlike Xcode, most of these tools cost money.

No Comments

Getting ‘Closure’

I have been a Java developer since 1995, before that I worked in C++. So my language background is primarily statically-typed and object oriented. In the last several years, I’ve been involved in a number of projects that use JavaScript. I’ve come to recognize that JavaScript is a very powerful language in its own right — but it is dramatically different from the languages that I am used to. One of the features of JavaScript that was a mystery to me is closure.

Closure has no direct equivalent in my native language Java so it took a great deal of reading and experimentation for me to come to grips with this concept. The simplest description I can give is this.

In a closure a variable declared in an outer function is visible to an inner function even if the inner function’s lifecycle is longer than that of the outer function.

Here is an example using the Apache Cordova (PhoneGap) API. The phone Cordova API allows you to package HTML5/CSS/JavaScript applications natively for a number of mobile platforms. It also provides a JavaScript API to wrap many of the native device features like the accelerometer. This example shows a closure.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
function startWatch() {

  var previousReading = { x: null, y: null, z: null };

  navigator.accelerometer.watchAcceleration(

    function (acceleration) {
      // use previousReading value here
    },
    onError,
    { frequency: 500 }
 );

}

In this example the startWatch() function declares a variable previousReading and sets its x, y and z members to null. The three values will be used to represent acceleration in meters per second squared. The function then calls navigator.accelerometer.watchAcceleration(), passing in an anonymous callback for success. The anonymous callback defined on line 7 in the source code will be called at a rate of once every 500ms and it will compare the current acceleration with previousReading then update previousReading with the current acceleration.

The code is relatively straightforward except for one important detail previousReading was declared in the scope of the outer function startWatch. But the anonymous inner function (on line 7) will be called repeatedly even after the outer function is out of scope! What happens here is that the inner function keeps a reference to any values in the outer scope that it will need when it is invoked.

For those of you who are Java programmers, don’t think you are immune from this discussion. Closures are on the proposed feature list for JDK 8.

1 Comment

Cordova!

This week Apache Cordova (formerly known as PhoneGap) graduated from the Apache incubator and is now a top level Apache project. Cordova got its start as PhoneGap at a company called Nitobi. Adobe acquired Nitobi in 2011 and donated PhoneGap to the Apache Software Foundation which placed in incubator status. Adobe continues to develop PhoneGap as a release of Cordova but indicates that it may acquire some proprietary features.

The Cordova API allows developers to take applications built in HTML5, CSS3 and JavaScript and deploy them natively on a number of mobile platforms. Cordova sits as an abstraction layer on top of the device OS so that by using a different version of Cordova, the same app can run on Blackberry, iOS, Android, Windows Mobile and a host of other mobile platforms. Cordova includes a rendering engine for HTML and CSS as well as a JavaScript runtime. So Cordova applications run ‘natively’ and do not require a web browser.

I first encountered Cordova while working on an Android application for a defense contractor. The application was map focused and allowed users to see where friendly forces (and others if known) were on the battlefield. The application was built natively in Android using Java (Dalvik). A number of potential customers expressed an interest in the application but wanted it on different platforms like iOS or on a desktop browser.We were struggling with the potential of having to rewrite the application for multiple platforms including some proprietary hardware/software used in our industry.

After attending FOSSGEO in Denver, I decided to try a web-based solution using HTML5, CSS3, JavaScript and Sencha’s extJS JavaScript library. At the time, I built the application targeted to the browser. In doing some research I stumbled upon PhoneGap in a matter of hours I was able to demonstrate our application running on Android, iOS and in a desktop browser. As a strategy we were considering porting PhoneGap ourselves to our proprietary platforms and using it as the framework upon which to build a variety of cross platform apps.

In addition to packaging the web functionality, Cordova exposes many native device features including sensors, the file system and contacts. Since Cordova runs as a native app on the device, Cordova-based apps have been accepted in Apple’s iTunes app store. Here is a sampling of Cordova/PhoneGap based apps currently in production:

  • Wikipedia — Wikipedia Mobile
  • Facebook — Mobile SDK
  • SalesForce.com — Mobile Development SDK
  • IBM — Worklight Platform for Mobile
  • Microsoft — Halo Waypoint

As a mobile developer I think Cordova (I still have trouble not calling it PhoneGap) is a credible cross platform solution that can help organizations manage the growing array of mobile platforms in use by their customers and employees.

No Comments

Platform Independent Mobile Development

One of the challenges facing every organization entering the mobile space is deciding which mobile platforms to support. The three major platforms today are: iOS, Android and Blackberry. If the organization provided the device (e.g. company issued Android phone) the problem is relatively simple. The organization simply standardizes on a single platform and single device.

The difficulty is that customer facing organizations must provide their products and services to consumers on the consumer’s preferred device. For many organizations that means parallel development on incompatible platforms. For iOS that means Objective C, for Android and Blackberry it’s Java. Even though Android and Blackberry are both in the Java family, their GUIs are completely different. To make things worse, the expected Q4 release of Windows 8 Mobile may make Microsoft a player in the mobile space again. Supporting Windows Mobile would necessitate creating a development team to work in C#, yet another incompatible language.

Even organizations that provide devices to employees will find themselves under pressure from the rank and file to allow a Bring Your Own Device (BYOD) policy.

An alternative to doing parallel development on multiple platforms is to consider platform independent application development. Today using a combination of HTML5 and JavaScript it is possible to create mobile applications that run natively on nearly every mobile device and do not require a browser! Of course HTML5 and JavaScript are normally thought of as Web technologies. Using an API from Apache called Cordova (formerly PhoneGap) developers can write HTML and JavaScript code that is packaged to run as a native application on all of the major mobile platforms. These technologies, combined with a powerful mobile JavaScript library like JQuery Mobile or Sencha Touch, make a compelling solution to simplify and standardize mobile development for a variety of platforms.

We at Web Age Solutions are hard at work in this area ourselves. Check out the outline for our new Sencha Touch based Platform Independent Mobile Development course. If you have any question please contact us and we would be happy to help!

2 Comments

Understanding Automatic Reference Counting (ARC)

ARC was introduced in XCode 4.2. Immediately, the technology became shrouded in an aura of mystery. Experts proclaimed that there is no mystery. The technology is completely deterministic. It may be deterministic, but, exactly how the system behaves under different situations is not very well documented. In this article, I will try to explain the basics through examples.

Consider the code:

@interface Address : NSObject {
    @public
    NSString *city;
}
@end

@implementation Address
- (Address*) init: (NSString*) c {
    city = c;

    return self;
}

- (void) dealloc {
    NSLog(@"Destroying address: %@", city);
}
@end

@interface Customer : NSObject {
    NSString *name;
    Address *addr;
}
@end

@implementation Customer
- (Customer*) init: (NSString*) n withAddress: (Address*) a {
    //Note 1: Automatically retain on assignment
    name = n;
    addr = a;

    return self;
}

- (void) dealloc {
    NSLog(@"Destroying: %@", name);
    //Note 2: All member variables are released automatically
}

@end

Customer* objectReturnTest() {
    NSString * n = [[NSString alloc] initWithString: @"Billy Bob"];
    Address * a = [[Address alloc] init: @"New York City"];       

    Customer *c = [[Customer alloc] init: n withAddress: a];

    //Note 3: ARC will put the returned object in autorelease pool.
    return c;
}

A couple of basic things to note here. As “Note 1”  says, when an object is assigned to a variable, a call to retain is made automatically. This increments the reference count. As “Note 2” says, when an object is destroyed, all member variable objects are released for you. You no longer have to do that from the dealloc method.

Finally, when a method returns a newly created object, ARC will put the returned object in an autorelease pool. This is stated in “Note 3”.

Now, let’s use the code.

int main (int argc, const char * argv[])
{
    NSString * n = [[NSString alloc] initWithString: @"Johnny Walker"];
    Address * a = [[Address alloc] init: @"Miami"];
    Customer *c = [[Customer alloc] init: n withAddress: a];

    NSLog(@"Before force release");
    c = nil; //Force a release
    NSLog(@"After force release");

    @autoreleasepool {

        Customer *c2 = objectReturnTest();

    }
    NSLog(@"After autorelease pool block.");

    return 0;
}

The log output from this code will be:

Before force release

Destroying: Johnny Walker

After force release

Destroying: Billy Bob

Destroying address: New York City

After autorelease pool block.

Destroying address: Miami

A couple of things to note here. See how force release works. We set a variable to nil. ARC immediately releases the reference count. This causes the Customer object “Johnny Walker” to get destroyed. But, the member Address object “Miami” doesn’t get destroyed. That is because the Address variable a still has a reference to that object. This Address object gets destroyed at the very end of the main method.

The object return test works as expected. Customer “Billy Bob” is put in auto release pool. At the end of the @autoreleasepool block, the pool is drained and the object is released.

Finally, we will now test for another common scenario. Objects may be created within a method that are not returned. Exactly when are they released and destroyed. The answer is, at the end of the method. Here is an example:

void temporaryObjectTest() {
    Address * a1 = [[Address alloc] init: @"Los Angeles"];
    Address * a2 = [[Address alloc] init: @"Seattle"];
}

We can call the method as follows:

NSLog(@"Before method call");
temporaryObjectTest();
NSLog(@"After method call");

The log output will be:

Before method call

Destroying address: Seattle

Destroying address: Los Angeles

After method call

These temporary objects are not put in autorelease pool. They are simply released at the end of the method. Only a new object returned from a method is autoreleased.

2 Comments

Orientation Change in Android

By default, when the device orientation changes, Android destroys the active activity and creates a new one. This lets you load a different layout for the new orientation. Unfortunately, this also means, you will need to reload any data from the server or database. Prior to Android 3.0 (Honeycomb), Android provided a way to pass data from the old activity to the new one through the onRetainNonConfigurationInstance()/getLastNonConfigurationInstance() methods. This approach has since been deprecated. The Fragment API provides a better option. The process is still fraught with danger, if your fragment does any advanced work like background tasks and progress dialog.

In this article, we will explore options to deal with orientation change. For majority of the application, the choices can be surprisingly simple.

Option 0 – Do Nothing

As I said, if you do nothing, the activity will be destroyed after an orientation change. A new one will be created. This option is only valid if the initialization process for the activity (from onCreate()) is trivial and very quick. If onCreate() is time consuming or you start asynchronous tasks from there, things can become very slow and buggy when orientation changes. In those situations, consider the following options.

Option 1 – Fix Orientation

Many activities work best in one orientation. Other orientations may be harmful to user experience. Sample scenarios are:

  • A movie player should use the landscape orientation. Portrait orientation is just too narrow.
  • An activity showing a list of customers work best in portrait mode. Landscape mode shows fewer customers.

In situations like these, you should fix the orientation of the activity. You do that by setting the screenOrientation attribute in the manifest file.

<activity
android:label="Customer List"
android:name="CustomerListActivity"
android:screenOrientation="portrait">

</activity>

Option 2 – Recycle the Activity

For majority of applications, simply resizing the views to fit into the new orientation is sufficient. The layout managers are pretty good at resizing views. All you need to do is find a way to not destroy the activity after an orientation change and simply have the views resized. This can be easily done by setting the configChanges attribute. For example:

<activity
android:label="Address Book"
android:name=".MainActivity"
android:configChanges="orientation|screenSize">

</activity>

Note: As of Android 3.0, you will need to add the screenSize flag. This wasn’t necessary prior to that.

This option is most preferred if you have a complicated initialization process for an activity or fragment within an activity. For example, they can run an asynchronous task and show a progress dialog when the orientation changes. Everything will continue to function normally and uninterrupted.

Option 3 – Retain Fragment

This option is appropriate when these conditions exist:

  1. The application must show an orientation specific layout. To do this, the old activity has to be destroyed. The new activity will load a different layout. And,
  2. The initialization process is time consuming or does asynchronous work and should not be redone for the new activity.

This is the most complex scenario. Very few applications will fall into this category. So, choose this option carefully and if you must.

Starting from Android 3.0, the correct approach to handle this problem is through fragment. Instead of managing the views and initializing them directly from the activity, do those things from a fragment. When orientation changes, the activity instance is destroyed, but, the fragment object can be recycled. This is a two step process:

  1. Flag the fragment object as retainable (recyclable). After that, when orientation changes, the fragment is detached from the old activity and attached to the new one. Note: The views managed by the fragment get destroyed and the fragment must reload the layout from onCreateView.
  2. Save all state data in the member variables of the fragment object. Since, the fragment object survives an orientation change, all state data survives with it. State data includes and data loaded from web service or database, AsyncTask and ListAdapter. This gives you a lot of flexibility. For example, an AsyncTask started by the fragment can continue after an orientation change.

Flag the fragment instance as retainable from onCreate() of the fragment class.

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setRetainInstance(true);
}

From the onCreate() view method, load a layout and recreate the view hierarchy as usual.

public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {

    super.onCreateView(inflater, container, savedInstanceState);
    View v = inflater.inflate(R.layout.addressbook, container);
    return v;
}

The onActivityCreated() is the complex one. It needs to load data only if it hasn’t been already loaded. It needs to populate the views in all cases. That’s because, the views are recreated after orientation change.

In the example below, the fragment uses a background task to load data. We start the task only if hasn’t been started yet. If the task has already finished, we simply populate the views.

public class CustomerListFragment extends Fragment {
CustomerListTask mTask;
ArrayList<Customer> mCustomerList;

public View onCreateView(…){…}

public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);

    if (mTask != null) {
        if (mTask.getStatus() == Status.FINISHED) {
        //Data is already loaded. Show it
        showCustomerList(mCustomerList);
    }

    //Task still running
    return;
    }

    //Start work in background
    mTask = new CustomerListTask();
    mTask.execute();
}

class CustomerListTask extends AsyncTask<Void, Void, ArrayList<Customer>> {

    protected ArrayList<Customer> doInBackground(Void... params) {
        mCustomerList = fetchCustomerList();
        return mCustomerList;
    }

    protected void onPostExecute(ArrayList<Customer> list) {
        showCustomerList(list);
    }
}

}

4 Comments

Mobile Ramblings

iOS 5 update is around the corner. It borrows quite a few ideas from Android and closes the capability gap with that platform. Specifically, the notification center. Competition is good.

Google may be working on many cool new things. But if the updates are forever late to get rolled out to average users, then, what is the point? When I write this, Android 3.1 is out. But, bulk of the devices are running either 2.2 or 2.1.

Chart

Should the device manufacturers customize Android look and feel? My vote will be – No. That just delays further upgrade. HTC’s Sense layer has been applauded by the customers. Not so for Motorola’s MOTOBLUR. If anyone has any cool idea for improving the look and feel, please drive it into Android, folks.

No Comments

Coding HTML5 Pages Using Eclipse

The Helios release of the Eclipse IDE for Java EE Developers provides support for HTML5 development. Specifically, it allows you to create HTML5 pages using a new template, provides code completion for HTML5 elements, provides a Properties editor for HTML5 attributes, and provides a WYSIWYG editor for visual development of HTML5 pages.

Creating an HTML5 Page

Before creating an HTML5 page, it’s recommended to set the character encoding type to UTF-8. It defaults to ISO-8859-1. To do so:

1.   Select Window->Preferences from the menu bar.

2.   Expand Web and select HTML Files.

3.   Select ISO 10646/Unicode(UTF-8) from the Encoding drop-down.

clip_image001

4.   Click OK.

Creating an HTML5 page is easy. Simply follow these steps:

1.   Select File->New->Other.

2.   Expand Web and select HTML File. Click Next.

3.   Enter a file name, select the parent folder and click Next.

clip_image002

4.   Select New HTML File (5) for the template and click Finish.

clip_image003

The file will open with the HTML Editor, which provides syntax highlighting (coloring). The tags are displayed in green, the attributes in purple, the attribute values in blue, and the element values in black.

clip_image005

Notice that the document contains the new DOCTYPE element which is used to specify “non-quirks mode” (a.k.a. “standards mode”). It also contains the simplified meta element which is used to specify the UTF-8 character encoding.

Using Code Completion

Using code completion is the same as always. Simply press Ctrl-Space and a list of valid HTML5 elements will be listed.

clip_image001[4]

The same thing applies to attributes. Stick your cursor inside the element’s start tag, press Ctrl-Space, and you’ll see a list of valid attributes:

clip_image003[4]

Using the WYSIWYG Editor

The Helios release of Eclipse also has a WYSIWYG editor for HTML development. It allows you to visually develop your web pages by dragging and dropping widgets from a palette onto your page. Unfortunately, the palette doesn’t include any HTML5 elements at present, but the Properties view was updated to include HTML5 attributes. To make use of the new editor, follow these steps:

1.   Close the HTML file if you already have it open using the HTML Editor.

2.   Right click on the file and choose Open With->Web Page Editor.

The Web Page Editor will open. This is a multi-tab editor. By default, the Design tab is displayed, which offers a split view for easier editing. The top half of the editor displays the visual view of the page and the bottom half of the editor displays the source code. Note that there’s also a Preview tab which displays what the page will look like when rendered by Eclipse’s internal browser.

clip_image005[4]

3.   If you added the canvas element in the last part, go ahead and delete it.

4.   In the right side of the editor, click the left arrow and the Palette will be displayed.

5.   Expand the HTML 4.0 folder to see the list of HTML 4.0 elements. Once again, there are no new HTML5 elements included yet.

clip_image007

6.   Scroll down inside the Palette and drag and drop the Text Field widget onto the page.

Notice that a form element is automatically added to the page. Also, notice that even though you added a text field to the page, the type attribute is not specified. It turns out that in HTML5 the type attribute defaults to “text” if not specified.

clip_image009

7.   Select the text field in the top half of the editor.

8.   Click on the Properties view and its Attributes tab.

9.   Click on the drop-down to the right of autofocus and select autofocus.

clip_image011

10.  Verify that the autofocus attribute is listed in the source code section of the editor. This sets the focus on this field when the form is rendered. Pre-HTML5, you had to do this with JavaScript code.

clip_image013

Note: The editor uses XHTML syntax by default. You don’t need to use XHTML syntax if you don’t want to in HTML5, since HTML is not XML.

11.  Back in the Properties view, scroll down and select required from the drop-down for the required attribute. This means the user has to input a value for this field. Otherwise, he won’t be able to submit the form. Just like with the autofocus attribute, you used to have to do this with JavaScript code.

clip_image015

12.  Likewise, scroll down and verify the type attribute is set to text.

clip_image017

13.  While you’re there, click the drop-down to the right of type. Notice that it reflects the new HTML5 input types, including color, date, datetime, datetime-local, and email.

clip_image019

14.  Your input element should now look as follows:

clip_image021

15.  Drag and drop a Button element on the page to the right of the text field.

16.  Change the value attribute to Submit in the Properties view.

clip_image023

17.  Save the file.

Great! You’ve visually developed an HTML5 page using the Web Page Editor. Note that even if choose not to use this editor and continue using the HTML Editor, the Properties view is still available from there.

Opening the Web Page in a Browser

By default, if you click the browser icon in the Eclipse toolbar, it will open the internal browser, which is based on IE. Unless you’re using Windows 7, the version of IE that’s used is IE7 or IE8, neither of which provide much HTML5 support. Don’t despair. You can change the Eclipse settings to open a different browser, such as Google Chrome 10, Opera 11, or Firefox 4, which provide much better support for HTML5. To do so:

1.   Select Window->Preferences from the menu bar.

2.   Expand General and click Web Browser.

3.   Click New.

4.   Type the name of the browser and specify its location using the Browse button.

clip_image025

5.   Click OK.

6.   Click the Use external web browser button.

7.   Check the box next to the new browser (e.g., Google Chrome).

clip_image027

8.   Click OK.

9.   Click the web browser icon in the toolbar.

clip_image029

The browser should open.

10.  Enter the URL for the page you created.

clip_image031 

Notice the cursor is blinking inside the text field, which means autofocus is working.

11.  Click the Submit button without entering a value in the text field.

clip_image033

Notice an error message is displayed, which means the required attribute is working.

12.  Now input a value and click Submit. This time the form should submit successfully. However, because we didn’t specify a form action, the original page will be displayed, since the form submits to itself.

Making the WYSIWYG Editor Your Default Editor

If you’d like, you can make the Web Page Editor your default editor for HTML files. To do so, follow these steps:

1.   Select Window->Preferences from the menu bar.

2.   Expand General->Editors and select File Associations.

3.   Select .html from the File types list box.

4.   Select the Web Page Editor option in the Associated editors list box.

5.   Click the Default button to the right of it.

6.   Verify the label (default) appears to the right of the Web Page Editor option.

clip_image035

7.   Click OK.

Summary

In this blog posting, we examined how to use Eclipse Helios to create an HTML5 page using the new HTML5 template. We saw that the code completion drop-down was updated to include HTML5 elements. We sampled the new Web Page Editor, which provides us with the ability to develop pages visually. Last but not least, we learned how to change the default web browser used by Eclipse to an HTML5 compliant one.

For more information on HTML5 development, check out our new HTML5 course:

WA1925 Enterprise Web Development using HTML5

30 Comments