Introduction

The demand for mobile computing will increase as sophisticated mobile platforms proliferate. The embedded Standard Widget Toolkit (eSWT) Mobile Extension is an Eclipse technology that can be used to develop native-looking Java applications for a variety of mobile phones.

Part 1 of this series, "Use simple widgets to quickly build mobile applications," provides an overview of mobile extension packages. It also covers the basic controls (CaptionedControl, ConstrainedText, DateEditor, ListBox,and ListView).

In this article, learn how to use:

• MobileShell to display a full-screen model application.
• SortedList to get a sorted list with filter to filter out useless information.
• HyperLink as a way to launch native applications according to set types.
• TextExtension as a means to set the input text's types.
• TaskTip to provide a hint to the user about the current status of the application.

Download the sample code snippets used in this article.

Back to top

MobileShell

Unlike a typical shell, MobileShell supports a special screen mode to use the whole device screen space, instead of the application space in the normal mode. MobileShell is particularly suitable for devices that require dynamic change of trims at runtime. Applications can call the setFullScreenMode(boolean) method to switch between normal and full-screen modes at runtime. This feature is often used in applications like media players and Web browsers, where the application can request a full-screen mode for better rendering of effects.

Note that MobileShell does not support status styles on Windows® Mobile.

If you create MobileShell with a command attached to it, it will become full-screen mode with a menu bar on the bottom of the screen after you setFullScreenMode(true). Listing 1 shows code sample that creates the MobileShell.

display = parent.getDisplay();
mobileshell = new MobileShell(display,SWT.RESIZE);
button= new Button(mobileshell, SWT.PUSH|SWT.BORDER);
button.setBounds(0, 0, 200, 200);
button.setText("FullScreen Mode");
			
button.addSelectionListener(new SelectionListener(){
	public void widgetSelected(SelectionEvent e) {
		if(!isFullScreen){
			mobileshell.setFullScreenMode(true);
			button.setText("Normal mode");
			isFullScreen = true;
		}else{
			mobileshell.setFullScreenMode(false);
			button.setText("FullScreen Mode");
			isFullScreen = false;
		}
				
	}
	public void widgetDefaultSelected(SelectionEvent e) {
	}});
		
mobileshell.open();

The code snippet above creates one MobileShell with a button to toggle between full-screen mode and normal mode. The result is shown below.

Back to top

SortedList

The SortedList class is for representing a selectable UI object that displays a sorted list of text items. The items may be displayed in ascending or descending order. If the FILTER style is specified during construction, an associated label is also displayed showing characters entered used to filter the list to show fewer items. The selection state of items filtered out of the list is cleared.

You can use this mode style to create a SortedList with a filter bar. FILTER will create a SortedList with a filter bar at the bottom. You can type in any character in this bar, and SortedList will show only the item that contains the character you input in the list.

Listing 2 shows a code sample for SortedList.

sortedList=new SortedList(shell,SWT.MULTI|SWT.V_SCROLL|SWT.BORDER,SortedList.FILTER);
sortedList.add("banana");
sortedList.add("123");
sortedList.add("12");
sortedList.add("happyhour");
sortedList.add("toobad");
sortedList.add("youknowwhat");
sortedList.add("yes");
sortedList.add("886222333");
sortedList.setBounds(0,0,240,320);

The code above creates one multi-selected SortedList with the FILTER style. When you're typing inside the filter field, the SortedList will only display the items containing the text that was entered. Figure 2 shows the result with some sample input text.

Back to top

HyperLink

Instances of the HyperLink class represent a selectable UI object that launches other applications when activated by the user. This class represents several types of hyperlinks associated with certain functions. Users can activate the associated program determined by the style.

A HyperLink instance accepts general characters as other controls do, but the appearance is implementation and locale-dependent. For example, a HyperLink object with the PHONE style might display as follows: (416) 123-4567. But the actual contents of the object visible to the application through the APIs, such as getText(), can be the string 4161234567.

You can use the following format styles to identify the type of HyperLink you create.

URL

Launches a platform-specific Web browser when activated.

EMAIL

Opens the platform-specific e-mail client when activated.

PHONE

Shows a platform-specific dialer interface when activated.

Listing 3 shows a code sample that creates different types of HyperLinks.

HyperLink email = new HyperLink(shell, SWT.NONE, HyperLink.EMAIL);
email.setText("silon6969@yahoo.com.tw");
email.setBounds(new Rectangle(0,0,200,30));
			
HyperLink dialer = new HyperLink(shell, SWT.BORDER | SWT.LEFT, HyperLink.PHONE);
dialer.setText("3581234567");
dialer.setBounds(new Rectangle(0,40,200,30));
	
HyperLink url = new HyperLink(shell, SWT.NONE | SWT.CENTER, HyperLink.URL);
url.setText("http://www.google.com");
url.setBounds(new Rectangle(0,80,200,30));

This code snippet creates three hyperlinks with three different types, as shown in Figure 3.

Users can click each link to launch the corresponding native program, as shown below.

Back to top

TextExtension

TextExtension contains methods for extending the functions of the text control. Functions are specific to non-full keyboard devices. Applications can request certain text input modes when a TextExtension control gets focused. The effective input mode takes into account two style aspects: One is based on the content semantics, and the other is based on the content character set.

The editing behavior and appearance of TextExtension are otherwise identical to the text control. Differences with TextExtension are to ease the possible switch of initial input modes, such as enabling/disabling predictive input; changing initial casing styles; and input modes of some languages. The initial input mode does not persist if changed by the user during editing. Whether the mode will be persisted during the application life cycle is implementation-dependent.

You can use the following modifier styles to identify input modes.

NON_PREDICTIVE

Hint for turning off possible predictive text input. By default, any predictive input facilities should be turned on if available.

LATIN_INPUT_ONLY

Forces only locale-specific input modes to be available. This is used in some situations when only Latin characters are allowed, such as the password text field.

You can use the following casing modifiers (exclusive) to identify different casing modes.

UPPERCASE

The capital letters of a typeface.

LOWERCASE

The small letters of a typeface, as opposed to the capital or uppercase letters.

TEXTCASE

The first word of a sentence is capitalized. Determination of where a sentence ends is implementation-dependent.

TITLECASE

Every word is capitalized.

The code sample in Listing 4 creates four types of TextExtension.

TextExtension te1 = new TextExtension(shell,SWT.BORDER,TextExtension.EMAILADDRESS);
te1.setInitialInputMode(TextExtension.UPPERCASE, "UCB_BASIC_LATIN");
te1.setBounds(new Rectangle(0,0,200,30));
		
TextExtension te2 = new TextExtension(shell,SWT.BORDER,TextExtension.URL);
te2.setInitialInputMode(TextExtension.LOWERCASE, "UCB_BASIC_LATIN");
te2.setBounds(new Rectangle(0,40,200,30));
		
TextExtension te3 = new TextExtension(shell,SWT.BORDER,TextExtension.NON_PREDICTIVE);
te3.setInitialInputMode(TextExtension.TEXTCASE, null);
te3.setBounds(new Rectangle(0,80,200,30));
		
TextExtension te4 = new TextExtension(shell,SWT.BORDER,TextExtension.LATIN_INPUT_ONLY);
te4.setInitialInputMode(TextExtension.TITLECASE, "IS_FULLWIDTH_LATIN");
te4.setBounds(new Rectangle(0,120,200,30));

Figure 5 shows the result of the code above.

In Figure 5, the first TextExtension shows an EMAILADDRESS type, and the initial input mode is UpperCase. If you do not specify the e-mail address in this field, the default value is test@ibm.com. The example shows input of one character "d" in the tail of this string, and you can see that it will show capital "D" in this field.

The second TextExtension shows a URL type, and the initial input mode is lowercase. It will automatically prefix with http:// in this field. The example shows input of one character "s" in the tail of this string, and it appears lowercase in this field.

The next TextExtension is a text field without predictive functions. Its input mode is TEXTCASE, which means that the first word in the sentence is capitalized. The example input was "i am sam [Enter key] and you are good," with the result "I am sam And you are good."

The fourth TextExtension shows a text field with Latin character input only. Its input mode is TITLECASE, which means that every word is capitalized. The example input was "i am sam and you are good," with the result "I Am Sam And You Are Good."

Back to top

TaskTip

The TaskTip class provides feedback to the user about the state of a long-running task. A TaskTip may contain text, an optional progress bar, or another object to illustrate current task state. Like a MessageBox, the look and feel of TaskTip is platform-dependent (there is no API-level access to the UI components inside a TaskTip). Unlike a MessageBox, the TaskTip is a non-focusable window and will not change the current window's activation or focus.

When constructed without a style constant, a TaskTip displays plain text to indicate task progress.

A TaskTip becomes visible by calling setVisible(true) and remains visible until the application calls setVisible(false). When a new TaskTip is created before hiding or disposing of a prior TaskTip, the newest becomes the top-most one and obscures prior TaskTips, if any.

TaskTip has two style variables.

SMOOTH

Displays a visual indicator of the portion of the progress that is still remaining.

INDETERMINATE

Displays a visual indicator that a long-running process is progressing.

Listing 5 shows a code sample that create two TaskTip styles.

TaskTip tasktip1 = new TaskTip(shell,SWT.SMOOTH);
tasktip1.setMaximum(100);
tasktip1.setMinimum(0);
tasktip1.setSelection(30);	
tasktip1.setVisible(true);
tasktip1.setText("This is a SMOOTH style");
		
try {
	Thread.sleep(2000);
} catch (InterruptedException e) {
	e.printStackTrace();
}
tasktip1.setVisible(false);

TaskTip tasktip2 = new TaskTip(shell,SWT.INDETERMINATE);
tasktip2.setVisible(true);
tasktip2.setText("The is a INDETERMINATE style");
            

The snippet above first creates the TaskTip in a SMOOTH style with selection 30. You will find that the progress bar is filled as 30 percent with a light-blue color since the max/min value is 100/0.

After two minutes, the first TaskTip becomes invisible, and the second TaskTip is created with the INDETERMINATE style. A rotating stick at the right indicates it's a long-running task, as shown in Figure 6.

Back to top

Conclusion

In this article, you learned about five more of the eSWT mobile controls you can use to enrich your mobile applications. You're well on your way to developing native-looking Java applications for a variety of mobile phones.

Part 3 explores more advanced and powerful mobile controls you can use in your eSWT applications.

Back to top

Download

Information about download methods

Resources

Learn

• "Explore Eclipse's embedded Rich Client Platform" is a general introduction to eRCP. Learn about the various components that make up eRCP and get some examples on how to use them in your applications.
  
  
• "Develop eRCP applications with Eclipse" is a guide for developing eRCP applications. Detailed steps guide you through setup, development style, deployment, and debugging of an eRCP application programming cycle.
  
  
• Visit eRCP to learn how this project extends the Eclipse Rich Client Platform (RCP) to embedded devices. eRCP is largely a set of components which are subsets of RCP components. It basically enables the same application model used on desktop machines to be used on devices.
  
  
• To listen to interesting interviews and discussions for software developers, check out developerWorks podcasts.
  
  
• Stay current with developerWorks' Technical events and webcasts.
  
  
• Follow developerWorks on Twitter.
  
  
• Check out upcoming conferences, trade shows, webcasts, and other Events around the world that are of interest to IBM open source developers.
  
  
• Visit the developerWorks Open source zone for extensive how-to information, tools, and project updates to help you develop with open source technologies and use them with IBM's products, as well as our most popular articles and tutorials.
  
  
• Watch and learn about IBM and open source technologies and product functions with the no-cost developerWorks On demand demos.
  
  

Get products and technologies

• Innovate your next open source development project with IBM trial software, available for download or on DVD.
  
  
• Download IBM product evaluation versions or explore the online trials in the IBM SOA Sandbox and get your hands on application development tools and middleware products from DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®.
  
  

Discuss

• Participate in developerWorks blogs and get involved in the developerWorks community.
  
  

About the authors

Uriel Liu is a software developer at the IBM China Software Development Lab and works in WED client technology. He is also a committer on the eRCP project.

Eric Hsu is a software developer at the IBM China Software Development Lab in Taipei. He works in Lotus Expediter client technology and Eclipse eRCP project development. He is a committer to the Eclipse eRCP project, as well.

Sam Lo is a software developer at the IBM China Software Development Lab and works in Lotus client technology. He loves to travel and play musical instruments and sports.

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• Introduction
• MobileShell
• SortedList
• HyperLink
• TextExtension
• TaskTip
• Conclusion
• Download
• Resources
• About the authors
• Comments

Next steps from IBM

Spring, JRuby, and Ajax development is easier with WebSphere Application Server - a smart Java 5 and J2EE Web services-based application server.

---

• Try: The no-charge WebSphere Application Server Community Edition is a pre-integrated, lightweight Java 5 application server built on Apache Tomcat and other best-of-breed open source software such as OpenEJB, Apache Axis, and Apache Derby.
• Article: The article leverage the Spring Framework and the WebSphere Application Server to improve your J2EE project productivity.
• Tutorial: See how the free WebSphere Application Server and XML can improve the efficiency of your JRuby on Rails and Ajax development.
• Buy: WebSphere Application Server - Express

My developerWorks community

Dig deeper into Open source on developerWorks

Rate a product. Write a review.

Write a review for Rational products today!

Special offers