Category: Computer and IT

Past few days, I am authoring a Titanium mobile module, a word-like editor (WYSIWYG editor — What you see is what you get), that can be easily integrated into the mobile apps whenever you need it. In order to test the editor functionality, I tried to make a nearly complete document apps, that allows user to create, manage document, and then create the contents by using this word-like editor.

By hitting the ‘+‘ icon on the top right side, the options dialog is opened where you can create a file or folder that manage the document files.

Once you clicked ‘Create a File’, the following word-like editor will be shown. Woaw!

You can edit and formatting the text using ‘Bold‘ or ‘Italic’ icon, insert URL, images, and inserting a bullet list. More editor features will be added.

Aside from the editor feature, in order to make this document apps more useful, I’m also adding in value-added feature such as

1. Previewing the documents in HTML web page.
2. Export the document into PDF format, and then you can email to your friend.
3. Download the web contents from external URL into word editor.
4. Save the document to Dropbox shared folder.

In the future release, I would like to make more feature such as ‘Import from and Export to Office Word format’, in order to make more useful for my sister who is iPad user.

Document conversion in different formats is the most challenging part. I will try my best to make the feature natively worked on local mobile, however some of the conversion job still requiring a server side program.

I planned to publish the word editor module in the future in order to let the other developers to integrate this editor into their mobile apps.

Integrate this word editor into your apps is easy, here is a snippet of code to show how to do it.

// include the editor titanium library
Titanium.include('/source/lib/editor/editor_titanium.js');
// initialize the editor titanium library class
var ed = new editor_titanium();
// initialize the editor feature and getting an editor handler
var editor = ed.init_editor({
// setting width and height of the editor, set as auto it will try to fit the window
width : 'auto',
height : 'auto',

// this method will be called when editor.save() had been called
// content = the fetched document content string you can use
success : function(content) {
saveContentToDatabase(content);
}

,

load : function() {
var content = getContentFromDatabase();
editor.setContent(content);
}
);

// to include the editor into your Windows, or views
win.add(editor.editor);
// or
view.add(editor.editor);

// to save the document explicitly
editor.save(); // then success callback will be called

// to set document content explicitly
editor.setContent('hello this text will be set to document');

// to get document content explicitly
var content = editor.getContent();

It worked like a charm.

Conclusion

I explored a word like editor module that can be integrated into Titanium mobile apps. I planned to publish the module into Appcelerator Marketplace for other developers to integrate it into their apps. I had shown a snippet of code on how to use this editor.

Titanium Mobile now supporting Blackberry Platform for Beta Preview Release. It is meant that, now, you can use Titanium Mobile Javascript to write “cross-platform” apps targeted on three most popular mobile platform, iOS, Android and Blackberry using same codebase. Notice that I quoted “cross-platform” is because we should note that even we write same JavaScript code but it render natively (differently) on the differ platform, and even some of the API only limited to specific platform, and you also can code the custom module to extend the original platform feature.

Current limitation is that Blackberry development can only be taken place in Windows because due to the fact that the Blackberry simulator is an EXE and only executable in Windows. But Mac has a Bootcamp to load Windows so should not be a problem. (While iOS development only supports Mac, and Android development supports both Mac and Windows, stand at the middle.)

Have a getting started to setup Blackberry platform here and view the list of APIs available that supports Blackberry platform.

Good to hear that Titanium mobile try experimenting integration with Blackberry platform because it greatly reduces the development effort to develop apps targeting these three mobile platforms, and you, as a developer you can just use the web language that you very familiar with need not to learn the native Objective C or Java. I hope this Blackberry supports can be mature soon and I would like to test it out in coming days and to see if it is feasible to use it for my own apps or my works.

Facebook Graph Explorer provides useful tool helps developers to test it out the Graph API easily by issuing a REST-liked Request URL, HTTP Method (GET, POST, DELETE) to query or posting to the Facebook Objects.

Titanium mobile is a development platform to develop native mobile apps using JavaScript API.

Titanium mobile has delivered built-in Facebook APIs that greatly helps developers to integrate their mobile apps with Facebook. The Titanium Facebook API supports issuing an old REST API or a new Graph API to interact with Facebook Platform.

I tested out Facebook Graph Explorer and found that it is very helpful that guided me in a straight way to issue Titanium Facebook Graph API to query the Facebook Pages feeds, posting feeds and the posting feeds comments on behalf of user.

I had written a snippet of code in order to prove that it is worked.

Titanium Mobile JS Code:


var win = Ti.UI.currentWindow;
Titanium.Facebook.appid = "70518428114";
Titanium.Facebook.permissions = ['publish_stream', 'read_stream'];
Titanium.Facebook.requestWithGraphPath('70518428114/feed', {message : 'I love you my angels'}, 'POST', function(e) {
var result = e.result;
result = JSON.parse(result);
var newid = result.id;
Ti.Facebook.requestWithGraphPath(newid + '/comments', {message : 'I love you too darling'}, 'POST', function(ce) {
alert("Had made a Facebook comment");
});
});


The Titanium code above is trying to publish a feed on a page using Titanium Facebook Graph API, and then the result of new feed ID is returned which used for the next Graph API request to create a comment for that feed.

In the function Titanium.Facebook.requestWithGraphPath, we provide first parameter as the graph URL request, followed by the data to be passed by, and then to specify the HTTP method parameter (GET, POST, DELETE), and then followed by the callback parameter which JSON result will be returned. You can use these three HTTP method parameter to issue request to same graph URL request to perform different thing, such as to use GET to query out the list of data, to use POST to insert or update data, and to use DELETE to delete the data. It is REST-ful.

iPhone Simulator Print Screen showing the alert message:

Facebook Print Screen showing the Facebook feeds and comments had been posted by Titanium Facebook Graph API.

(Click the thumbnails to see full image preview)

Conclusion

Facebook Graph Explorer greatly helps developers to test it out the Facebook Graph API and Titanium mobile had delivered its simple-to-use Facebook API module that made integration of our mobile apps to Facebook Platform become very easy.