Hello everyone, this is my first post and tutorial on BadaDev. Thanks to wit for letting me write for the community. I am a seasoned Java/Android programmer and got involved into Bada few months ago. However, I didn’t start intensive Bada exploration until few weeks back. This tutorial is pretty basic, nonetheless it shows a few key elements that are very important and will be used a lot if you get involved in Bada.
You will learn:

• How to create a basic reusable EditField listener.
• How to cast general control into a specific control (like EditField in this case).
• How to update the control’s attributes and state on the user interface.

To make a usable example you can integrate into a real-world projects later on we will make an EditField listener, that automatically formats the text inside the EditField in a pre-defined way each time the user inputs something. As a simple formatting example I will do lower- and upper-case transformation. So that when you enter “Hello World” it is automatically transformed into “HELLO WORLD” or “hello world”. I found that it was a very handy feature that I needed back in Android to make the user-inserted email addresses lower-case automatically while the user was typing. Once you get the idea, our listener’s formatter can be modified for your liking to format phone numbers, credit card numbers, serial numbers and so on.

Let’s get started:

1. New project

Create a new form-based project, which should already have a default form with a button on it. We will going to add an EditField to it. Just drag and drop the control somewhere on the form.

Bada EditField Add

Note the EditField ID you can see on the right (the default is IDC_EDITFIELD1). We will need this in a minute. You can go on and customize the form, if you like, which is not essential for this tutorial.

2. New class: TextFormatter

Right-click on your project and go to New > Class. Name it TextFormatter and make sure you place the header “TextFormatter.h” in /inc folder and TExtFormatter.cpp in /src. Unlike with Java, in C++ you must define everything you use in your code before you use it. That is where the Header files come into play: They define every new object beforehand so the compiler can identify them once he stumbles on some in your code!

Open the TextFormatter.h and paste this:

#ifndef TEXTFORMATTER_H_
#define TEXTFORMATTER_H_

#include <FBase.h>
#include <FUi.h>
<pre>using namespace Osp::Base;
using namespace Osp::Ui;
using namespace Osp::Ui::Controls;</pre>
enum FORMAT_STYLE{
 FORMAT_UPPERCASE,
 FORMAT_LOWERCASE
};

class TextFormatter : public Osp::Ui::ITextEventListener {
 FORMAT_STYLE __style;
 void format(String& input);
public:
 TextFormatter(FORMAT_STYLE style);
 TextFormatter();
 void OnTextValueChangeCanceled(const Control& source){}
 void OnTextValueChanged(const Control& source);
};

#endif

First of all, we include Bada’s Base and Ui. Then, we create our own enumeration called FORMAT_STYLE beforehand, because we will be using it later on in the TextFormatter Class. FORMAT_STYLE will allow us to set up the TextFormatter in a very flexible way, so you can reuse it for different formatting styles later on.

The TextFormatter class inherits from Osp::Ui::ITextEventListener and has to define two Functions: OnTextValueChangeCanceled and OnTextValueChanged. These will allow us to hook into these events. Please, always make sure that the function definition is exactly the same as in the base (ITextEventListener) class, but without the “virtual” keyword. Otherwise, the compiler will complain on build that you are trying to instantiate an abstract class (because some virtual functions weren’t implemented). You can save yourself hours of headache… Anyway:

Notice the {}-brakets after OnTextValueChangeCanceled definition. It just means that the content of this function is empty, since we won’t be using it. But because this function is virtual in our base class (ITextEventListener) we have to define it. No problem, we just leave it empty. What we will be using is OnTextValueChanged, which will be fired each time the user has input something into our EditField control.

Apart of those, we define two constructors: TextFormatter() , and overloaded TextFormatter(FORMAT_STYLE style) which will allow us to define how the formatter shall work. We also have a private __style variable that is used to save the current format style, and the format function that does the actual formatting stuff.

Now that everything we need is defined, let’s move on to TextFormatter.cpp  and write the actual code!

#include "TextFormatter.h"

TextFormatter::TextFormatter() {
	__style = FORMAT_UPPERCASE;
}

TextFormatter::TextFormatter(FORMAT_STYLE style) {
	__style = style;
}

void
TextFormatter::OnTextValueChanged(const Control& source){
	EditField *control = (EditField*) &source;
	String input = control->GetText();
	format(input);
	control->SetText(input);
	control->RequestRedraw();
}

void
TextFormatter::format(String& input){
	switch(__style){
	case FORMAT_UPPERCASE:
		input.ToUpper();
		break;
	case FORMAT_LOWERCASE:
		input.ToLower();
		break;
	}
}

First of all, make sure to include the “TextFormatter.h” since we need those definitions before writing anything else (I know, Java-Developers, I feel your pain ). Next we include all the namespaces we will be using, so that we do not have to write them out each time in our code.

The two constructors are rather simple: the default one sets our style to upper-case, the other one lets you define the style you want to use (from our FORMAT_STYLE enumeration).

Next we need our code for OnTextValueChanged. The const Control& source is a reference (notice the &) to our EditField control (which is a child of Control class). In order to use the EditField functionality, we will need to cast the Control to EditField first (make sure you understand how pointers and polymorphism works, this is vital in C++ programming! A good crash course can be found here). See line 17: We create an EditField Pointer and assign it to the address of “source” control casted as an EditField Pointer.

After that, we get the user’s input through GetText, pass it to our format function, and update it afterwards with SetText (lines 18-20). Now, it is important to know that the user interface is not automatically updated once you change something on your control (unlike in Android OS, for example) . Hence, to see the change on the screen, you will need to call RequestRedraw. If you don’t, the previous text will stay until you click on the EditField (which will force the Bada OS to redraw it).

Our formatter itself (the format function) is VERY simple. It uses the String’s built-in functions to make it upper- or lower-case, depending on the __style you have chosen. You can improve and adapt this function to your needs.

Now, everything is ready to integrate our TextFormatter listener into the App.

3. Integrate TextFormatter

Open Form1.h and

#include "TextFormatter.h"

somewhere after all the other includes.

Now, we will define our TextFormatter as a private object in the Form1 class by adding

private:
	TextFormatter __watcher;

somewhere inside the Form1 class. Close Form1.h and open Form1.cpp. We are two lines away to make everything work:

__watcher = *(new TextFormatter(FORMAT_LOWERCASE));
	(static_cast<EditField *>(GetControl(L"IDC_EDITFIELD1") ))->AddTextEventListener(__watcher);

What we do here is (Line 1) create a new TextFormatter saying that we want everything that the user inputs to be lowercased (FORMAT_LOWERCASE). And (Line 2) we add our TextFormatter as a listener to the forms EditField object. I like to pack everything into one line. I guess you could write it as this as well to make it more readable:

__watcher = *(new TextFormatter(FORMAT_LOWERCASE));
EditField* edit = static_cast<EditField *>(GetControl(L"IDC_EDITFIELD1"));
edit->AddTextEventListener(__watcher);

What we do is we get a pointer to our control by using GetControl (and the EditField ID from out form!) and cast it to a EditField pointer.

Puh! Looks good. Now cross your fingers, build it and make it run, baby!
Try to input something into the EditField. Once you exit the editor, the text is automatically lower-cased!

The TextFormatter formatter is pretty simple, but you can further customize it. And since the class is totally separate from the App, you can reuse it in any other project where you need it.

HARRRR!

Related posts:

1. Bada Tutorial: Option Menu
2. Bada Tutorial: How to Download from Internet
3. Bada Tutorial: UI Lists (part 3) – Expandable List