Introduction to ofxMobileKeyboard

· by · in ,
Introduction to ofxMobileKeyboard

Some months ago, we developed a multiplatform mobile application (for Android and iOS) where we nedded the user to be able to introduce text. Due to the amount of multimedia content and the multiplatform approach, the app was developed with Openframeworks.

Working with native elements such as the OS’s keyboard forced us to do variations in the code of both versions of the app. Looking for working with the “one code to rule them all” spirit which we like so much from OF, we though it’d be useful to encapsulate the discordant part of the code in an addon. We named this addon ofxMobileKeyboard and you can find it in github and in the addons repository, ofxaddons.com.

Together with the addon, we have added two simple examples with the implementation of its basic functions. We explain them in the following lines.

The addon is compatible with both the Android and the iOS version of Openframeworks. Once installed and added to our project, we can easily initialize and call the native keyboard in both platforms. Let’s begin by declaring an ofxMobileKeyboard object in our .h file:

ofxMobileKeyboard keyboard;

In iOs, in the setup() method of the .mm file, we’ll write:


keyboard.setup("Type text here", 0, 200, ofGetWidth(), 50);
keyboard.showKeyboard();

In Openframeworks Android, this call is slightly different as a result of the characteristics of the JNI -read more about JNI and Openframeworks in our older post-. Here, we’ll have to pass it as an argument through a parameter. Therefore, in the setup of our .cpp file we’ll do it through the following method:

keyboard.setup("ofxMobileKeyboardExampleAndroid", (ofGetWidth()/2)-(textBoxWidth/2), (ofGetHeight()/2)-(textBoxHeight/2), textBoxWidth, textBoxHeight, "Type text here");
keyboard.showKeyboard();

Beyond this, the addon offers a few straightforward functionalities with the methods showKeyboard(), hideKeyboard(), recieveKeyboard() – which wil return a string with the content of the input text- and isKeyboardActive() – which will return an affirmative or negative bool value according to the state of the keyboard-.

Following the example in the github, we can show or hide the keyboard interface by writing the following line in the touchDoubleTap() method.

if(keyboard.isKeyboardActive()==true){
keyboard.hideKeyboard();
}else if(keyboard.isKeyboardActive()==false){
keyboard.showKeyboard();
}

In order to recieve the text written via the keyboard interface, we should equal a string -keyBoardText- to the method recieveKeyboard() of the object.

if(keyboard.isKeyboardActive()==true){
keyboardText = keyboard.recieveKeyboard();
ofLog() << "Recieve Keyboard String: "<< keyboardText << endl;
}

Summing up, the objective of the addon is to keep the OF workflow which allows us to work with the same code for different platforms. As you have seen, we have basically encapsulated the different approaches to the keyboard interface existing in OF Android and iOS in order to make them easy to use.

We’d love to use this occasion to recommend a visit to the book which is being prepared by the OF community and that is really going to be an amazing tool for the OF community in the future.

Happy coding!

 

Tags: , ,