×
Namespaces

Variants
Actions
(Difference between revisions)

How to add an activity or progress indicator to an Alert

From Nokia Developer Wiki
Jump to: navigation, search
skalogir (Talk | contribs)
(Skalogir - - Overview)
skalogir (Talk | contribs)
(Skalogir -)
Line 40: Line 40:
 
</gallery>
 
</gallery>
  
== The User Interface ==
+
== Main Components==
Both TextFields are empty by default. The TextField at the top of the form becomes of type {{Icode|PHONENUMBER}} and can take up to 20 digits, while the TextField beneath it, becomes of type {{Icode|PLAIN}} and takes up to 160 characters, which is the character limit for an SMS transmission without splitting it up to more than one piece. In the constructor, we instantiate the MessageConnection object and bind it to port 6553. Also a {{Icode|TextMessage}} instance is created of type TEXT_MESSAGE, since this example will be used for sending a message containing characters in the form of a text. If the port cannot be opened, an error message will be appended to the form.
+
 
 +
There are three Commands in this code example, an OK command that launches the Alert and an Exit Command for calling the {{Icode|notifyDestroyed()}} method, are appended to the Form. A Cancel Command is added to the Alert. The running thread moves the progress indicator every one second in increments of 10. There is also an image that is being displayed inside the alert
 +
 
 +
{{note|In order for the image to be properly displayed with this code, you need to add an image file to the resource directory of your project and rename it to {{Icode|generic_phone.png}}}}
  
 
<code java>
 
<code java>
 +
Form mainForm;
 +
//OK and Exit are added to the Form
 +
Command exitCommand = new Command("Exit", Command.EXIT, 0);
 +
Command okCommand = new Command("OK", Command.OK, 0);
 +
//Cancel is added to the Alert
 +
Command cancelCommand = new Command("Cancel", Command.CANCEL, 0);
 +
//A 1 second per step thread
 +
Thread thread;
 +
Alert alert;
 +
//A random image for the alert
 +
Image img;
 +
//A bar indicator attached to the alert
 +
Gauge indicator;
  
        mainForm = new Form("SMS Example");
+
+
protected void startApp() throws MIDletStateChangeException {
        smsNumber = new TextField("Phone number", null, 20,
+
//The Form's components
            TextField.PHONENUMBER);
+
mainForm = new Form("Progress Alert");
        mainForm.append(smsNumber);
+
mainForm.append("Select OK to launch a 10-step process");
+
mainForm.addCommand(okCommand);
        smsText = new TextField("Text", null, 160, TextField.PLAIN);
+
mainForm.addCommand(exitCommand);
        mainForm.append(smsText);
+
mainForm.setCommandListener(this);
+
display = Display.getDisplay(this);
        sendCommand = new Command("Send", Command.OK, 0);
+
display.setCurrent(mainForm);
        mainForm.addCommand(sendCommand);
+
+
        exitCommand = new Command("Exit", Command.EXIT, 0);
+
        mainForm.addCommand(exitCommand);
+
+
        mainForm.setCommandListener(this);
+
       
+
        // Open the connection
+
   
+
        try{
+
        connection = (MessageConnection)Connector.open("sms://:6553");
+
        message = (TextMessage)connection.newMessage(MessageConnection.TEXT_MESSAGE);
+
        }
+
        catch (IOException ex) {
+
        mainForm.append("error:" + ex.getMessage() + "\n");
+
        }
+
 
</code>
 
</code>
  
 +
== Conditions for adding a Gauge as activity indicator within an Alert ==
 +
 +
Only under certain conditions, can a high-level Gauge be used within an Alert as activity indicator. The Gauge needs to satisfy the following conditions:
 +
 +
* it must be non-interactive;
 +
* it must not be owned by another container (Alert or Form);
 +
* it must not have any Commands;
 +
* it must not have an ItemCommandListener;
 +
* it must not have a label (that is, its label must be null;
 +
* its preferred width and height must both be unlocked; and
 +
* its layout value must be LAYOUT_DEFAULT.
 +
 +
This practically means that we need to instantiate the Gauge with {{Icode|null}} for the first argument that denotes the label and {{Icode|false}} for the second argument that denotes the boolean that determines whether the Gauge is interactive or not.
 +
 +
<cod java>
 +
        indicator = new Gauge(null, false, 100, 0);
 +
        alert.setTimeout(Alert.FOREVER);       
 +
        alert.setCommandListener(this); 
 +
        alert.setIndicator(indicator);
 +
</code>
 +
 +
As seen from the code above, the alert uses a {{Icode|CommandListener}} for canceling the activity. That requires that we set the Timeout to {{Icode|FOREVER}} so that the end user can only dismiss the alert by clicking on the Cancel button rather than by tapping anywhere on the screen.
 +
 
== Sending the text message==
 
== Sending the text message==
  

Revision as of 13:22, 24 July 2012

This code example demonstrates how to add an activity indicator to an Alert, that displays the progress for the completion of a process and dismisses itself, when the process is completed.

Contents

Overview

This code example uses two high-level LCDUI components, an Alert and a Gauge. The alert is manually launched by the end user, while the gauge is used as activity indicator inside the Alert. The activity indicator describes the progress for completing a 10-step task. The range of the indicator is between 0 and 100, in increments of 10.

Main Components

There are three Commands in this code example, an OK command that launches the Alert and an Exit Command for calling the notifyDestroyed() method, are appended to the Form. A Cancel Command is added to the Alert. The running thread moves the progress indicator every one second in increments of 10. There is also an image that is being displayed inside the alert

Note.pngNote: In order for the image to be properly displayed with this code, you need to add an image file to the resource directory of your project and rename it to generic_phone.png

	 Form mainForm;
//OK and Exit are added to the Form
Command exitCommand = new Command("Exit", Command.EXIT, 0);
Command okCommand = new Command("OK", Command.OK, 0);
//Cancel is added to the Alert
Command cancelCommand = new Command("Cancel", Command.CANCEL, 0);
//A 1 second per step thread
Thread thread;
Alert alert;
//A random image for the alert
Image img;
//A bar indicator attached to the alert
Gauge indicator;
 
 
protected void startApp() throws MIDletStateChangeException {
//The Form's components
mainForm = new Form("Progress Alert");
mainForm.append("Select OK to launch a 10-step process");
mainForm.addCommand(okCommand);
mainForm.addCommand(exitCommand);
mainForm.setCommandListener(this);
display = Display.getDisplay(this);
display.setCurrent(mainForm);

Conditions for adding a Gauge as activity indicator within an Alert

Only under certain conditions, can a high-level Gauge be used within an Alert as activity indicator. The Gauge needs to satisfy the following conditions:

  • it must be non-interactive;
  • it must not be owned by another container (Alert or Form);
  • it must not have any Commands;
  • it must not have an ItemCommandListener;
  • it must not have a label (that is, its label must be null;
  • its preferred width and height must both be unlocked; and
  • its layout value must be LAYOUT_DEFAULT.

This practically means that we need to instantiate the Gauge with null for the first argument that denotes the label and false for the second argument that denotes the boolean that determines whether the Gauge is interactive or not.

<cod java>

       indicator = new Gauge(null, false, 100, 0);
       alert.setTimeout(Alert.FOREVER);        
       alert.setCommandListener(this);  
       alert.setIndicator(indicator);

</code>

As seen from the code above, the alert uses a CommandListener for canceling the activity. That requires that we set the Timeout to FOREVER so that the end user can only dismiss the alert by clicking on the Cancel button rather than by tapping anywhere on the screen.

Sending the text message

The method handleSendCommand is called via the CommandListener when the user selects the Send action. The TextMessage instance is being given an address in the form sms:// [recipient number] : [port number]. The port number is hard coded in this example to 6553. A payload is added to the message by calling the setPayloadText method and passing as argument the content of the second TextField.

       private void handleSendCommand() {
 
//Set the destination address
String number = "sms://" + smsNumber.getString() + ":6553";
message.setAddress(number);
 
// Obtain the specified text and set it as the payload
String text = smsText.getString();
message.setPayloadText(text);
 
}

After a payload and an address is set to the message, the sending operation takes place inside a thread:

 
// Send the message on its own thread of execution
Thread smsThread = new Thread() {
public void run() {
try {
connection.send(message);
mainForm.append("Message sent!\n");
}
catch (InterruptedIOException ex) {
mainForm.append("Interrupted Exception!\n");
}
catch (IOException ex) {
mainForm.append("IOException!\n");
}
catch (IllegalArgumentException ex) {
mainForm.append("Illegal Argument!\n");
}
catch (SecurityException ex) {
mainForm.append("Security");
}
}
};
smsThread.start();

In order to send the message, as seen from above, we only need to call the send method from the connection instance and pass as argument the TextMessage instance that now contains both a recipient address and a payload.

See also

106 page views in the last 30 days.