Grio Blog

Going with the Flow: Tips and Tricks for Using the Adobe Flex TextFlow Component

We've been busily developing using Flex 4 (aka “Gumbo”) here at the Grio offices and are impressed with many of its new features. One of the more interesting but difficult to decipher features is the TextFlow component.

The TextFlow component is used to layout text in a highly controlled way. It uses an XML-based markup language, Text Layout Format (TLF), to define the content of the TextFlow. TLF uses some similar tags to HTML (<div>, <p>, <span>), but it is definitely not HTML.  This may trip you up a bit as you learn TLF; I recommend reading the Adobe Labs info before diving too deep into development (http://labs.adobe.com/technologies/textlayout/).

Adobe Labs also provides a nice text editor that can read and write TLF (http://labs.adobe.com/technologies/textlayout/demos/ ; a note of caution: the editor is somewhat out of date, so the TLF generated may not work perfectly with the latest text layout package).

One important thing to note is that The HTML to TLF conversion capabilities built into the Text Layout package are crap. They do not support much of anything, except paragraphs. Lists are not supported, and CSS is not either. For our last project, we basically built our own translator to generate TLF from HTML.

Which leads me to reveal my trick to render bulleted lists in TLF. The keys are: 1) The Unicode bullet character (\u2022); 2) A negative paragraph textIndent format attribute; and 3) The paragraphStartIndent attribute.

Here’s the format definition for each list item:

<format id='list_item' paragraphStartIndent='15' textIndent='-9' paragraphSpaceAfter='10'/>

Note that we have a negative textIndent and a positive paragraphStartIndent. This gives the desired list effect. You will need to adjust these numbers based on the size and face of the font you are using. 

And here’s the function that converts the HTML list to a TLF list:

private static function appendList(htmlListNode:XML, tlfXml:XML, isOrdered:Boolean):void {

//used for ordered lists

var count:int = 1;
var listEl : String = isOrdered ? "ol" : "ul";

 //get the li tags

for each (var child:XML in htmlListNode.*) {

var lineItemXml:XML;
var listItemContent:String = child.children().toXMLString();
// Ensure content for list item
if (listItemContent.length == 0) continue;  

listItemContent = listItemContent.toLowerCase();                        
listItemContent = listItemContent.replace("<strong>","<span fontWeight='bold'>");
listItemContent = listItemContent.replace("</strong>","</span>");

if (listItemContent.indexOf("<ul>") > -1) {

var preNestedListText:String = listItemContent.substring(0,listItemContent.indexOf(listEl));
var nestedList:String = listItemContent.substring(listItemContent.indexOf(listEl), listItemContent.length);
var nestedListXml:XML = new XML(nestedList);

if(preNestedListText.length > 0) {

if(isOrdered) {

tlfXml.appendChild(new XML("<p listitem='true' format='list_item'>" + count + ". " + listItemContent +"</p>"));

} else {

tlfXml.appendChild(new XML("<p listitem='true' format='list_item'>\u2022 " + listItemContent + "</p>"));

}

}                                              
appendList(nestedListXml, tlfXml, false);                   

} else {

if(isOrdered) {

tlfXml.appendChild(new XML("<p listitem='true' format='list_item'>" + count + ". " + listItemContent +"</p>"));

} else {

tlfXml.appendChild(new XML("<p listitem='true' format='list_item'>\u2022 " + listItemContent + "</p>"));

}
count++;

}

}    

}                          

In summary, TLF is a very powerful text formatting language, but it currently lacks good HTML conversion tools and simple tags for things such as lists. We hope Adobe provides support for these in the future, but until then we’ll just have to code around the problem.

Vook is Live Today

Grio developed the vook platform and Flex-based reader. Look for new vooks to come out on a regular basis.

Uploading Files from iPhone

We recently completed an iPhone application that allows user to, among other things, perform voice-recording and upload the recorded file to a server. For uploading, it uses HTTP multipart POST against an Apache webserver. This type of arrangement is a very common way of sending a file to a webserver. I am certain that similar implementations can be found in several different programming languages. Here is my Objective C implementation...I tried to focus on brevity and encapsulation.

The code:

/**

 * Upload a file to a webserver thru http post.

 * uid is the http request id

 * requestData is list of key/value pairs to be sent along with the file

 * url is the destination url

 * filePath is absolute file path of the file to be uploaded

 */

- (void)postUpload:(NSString *)url

  :(NSString *)uid

  :(NSDictionary *)requestData

  :(NSString *)filePath

{

NSURL *theURL = [NSURL URLWithString:url];

NSMutableURLRequest *theRequest = [NSMutableURLRequest requestWithURL:theURL 

     cachePolicy:NSURLRequestReloadIgnoringCacheData 

 timeoutInterval:20.0f];

[theRequest setHTTPMethod:@"POST"];

[theRequest setValue:uid forHTTPHeaderField:@"uid"];

// define post boundary...

NSString *boundary = [[NSProcessInfo processInfo] globallyUniqueString];

NSString *boundaryString = [NSString stringWithFormat:@"multipart/form-data; boundary=%@", boundary];

[theRequest addValue:boundaryString forHTTPHeaderField:@"Content-Type"];

// define boundary separator...

NSString *boundarySeparator = [NSString stringWithFormat:@"--%@\r\n", boundary];

//adding the body...

NSMutableData *postBody = [NSMutableData data];

// adding params...

for (id key in requestData) {

NSString *formDataName = [NSString stringWithFormat:@"Content-Disposition: form-data; name=\"%@\"\r\n\r\n", key];

NSString *formDataValue = [NSString stringWithFormat:@"%@\r\n", [requestData objectForKey:key]];

[postBody appendData:[boundarySeparator dataUsingEncoding:NSUTF8StringEncoding]];

[postBody appendData:[formDataName dataUsingEncoding:NSUTF8StringEncoding]];

[postBody appendData:[formDataValue dataUsingEncoding:NSUTF8StringEncoding]];

}

// if file is defined, upload it...

if (filePath) {

NSArray *split = [filePath componentsSeparatedByString:@"/"];

NSString *fileName = (NSString*)[split lastObject];

NSData *fileContent = [NSData dataWithContentsOfFile:filePath options:0 error:nil];

[postBody appendData:[boundarySeparator dataUsingEncoding:NSUTF8StringEncoding]];

[postBody appendData:[[NSString stringWithFormat:@"Content-Disposition: form-data; name=\"audioBody\"; filename=\"%@\"\r\n", fileName] dataUsingEncoding:NSUTF8StringEncoding]];

[postBody appendData:[@"Content-Type: application/octet-stream\r\n\r\n"

dataUsingEncoding:NSUTF8StringEncoding]];

[postBody appendData:fileContent];

}

[postBody appendData:[[NSString stringWithFormat:@"\r\n--%@--\r \n",boundary]

dataUsingEncoding:NSUTF8StringEncoding]];

[theRequest setHTTPBody:postBody];

NSURLResponse *theResponse = NULL;

NSError *theError = NULL;

NSData *reqResults = [NSURLConnection sendSynchronousRequest:theRequest

  returningResponse:&theResponse

  error:&theError];

if (!reqResults) {

NSLog(@"Connection error for URL: %@", [url description]);

UIAlertView *alert = [UIAlertView alloc];

[[alert initWithTitle:@"Error in connection"

  message:[theError localizedDescription]

delegate:self

cancelButtonTitle:nil

otherButtonTitles:@"Quit", nil] autorelease];

[alert show];

}

}

Here's an example of how you can use this method:

NSArray *keys = [NSArray arrayWithObjects:@"recipients", @"title", @"textBody", nil];

NSArray *objects = [NSArray arrayWithObjects:uids, inputSubject.text, inputMessage.text, nil];

NSDictionary* postData = [NSDictionary dictionaryWithObjects:objects forKeys:keys];

// post now...

[[WebService alloc] postUpload:URL_ENDPOINT_SEND_MESSAGE

  :appDelegate.uid

  :postData

  :[recorder recordFilePath]];

URL_ENDPOINT_SEND_MESSAGE is set to the URL that can receive a multipart POST. To test this out, I have quickly written the following PHP code. 

<?php

define('FILE_SAVE_DIRECTORY','/folder/to/save/uploaded/files/');

error_log("Requesting upload file....");

error_log(print_r($_SERVER, true));

error_log("\n\n");

error_log(print_r($_FILES, true));

if($_POST && isset($_FILES['file'])) {

error_log("  the file:...." . $_FILES['file']['name']);

$file = $_FILES['file'];

$dst = FILE_SAVE_DIRECTORY . basename($file['name']);

if (move_uploaded_file($file['tmp_name'], $dst)){

echo 'Upload Successfully: '.$dst;

}

else {

echo 'Error uploading the file.';

}

}

?>

Put this code in your php-enabled webserver. Then, set URL_ENDPOINT_SEND_MESSAGE to point to the script.

It's that simple. Now you're ready to use HTTP upload in your next iPhone project.

Grio Completes Flex App for Compiere, Inc.

Grio has recently completed a custom Adobe Flex application for Compiere, Inc. Compiere delivers the most widely used open source enterprise resource planning (ERP) and customer relationship management (CRM) solution with more than 1.8 million software downloads.

Grio was employed by Compiere to help create a new Flex-based module that will be delivered in Compiere's upcoming release.

Grio Inks a Vook Deal

Grio has been selected by Vook to develop an end-to-end technology that bring the worlds of video and books together on the Internet, through multiple applications, devices and platforms.

Feel My Pain: NSXMLParser Problems Upgrading to the iPhone 3.0 SDK

I set out a couple of weeks ago to port the Killer Deals application from the iPhone 2.2.1 SDK to 3.0. “No problem”, I thought; the application doesn’t veer far from the standard APIs and controls, and it is a relatively straightforward application, implementation-wise.

As I was making my updates (some minor method and property name changes here and there), I stumbled upon a show stopper: The NSXMLParser was no longer parsing my XML data. After scratching my head for a few hours, I finally figured out the problem.

It seems Apple has removed support for Windows-1252 character encoding in the latest iteration of the NSXMLParser. I used this encoding to prevent the appearance of those funny characters you occasionally see on a web page. Those funny characters are caused by a character-encoding mismatch between a text renderer and the document. Some Microsoft tools use the Windows-1252 character encoding for documents by default. Unfortunately, some of the Killer Deals data is only available in this encoding.

While the previous version would give a NSXMLParserUnknownEncodingError and continue to parse, the new version simply stops parsing after the error (although strangely, the parserDidStartDocument() method is still called after the error).

At this point, I was going to force the encoding to UTF-8 on the server, and put a hack in the code to convert the ‘invalid’ characters to the proper UTF-8 equivalents. That ended up in an invalid character error via the parser.

It seems Apple has degraded the parser and offers less tolerance for ‘unsupported’ formats. Does this have anything to do with bad blood between Apple and Microsoft? Hmmm…

Scrum is like 20th Century Politics (Part 2 of 3)

Part 1

Having toiled for years under the yoke of a brutal waterfallocracy, one bitter developer learns of management's decision to adopt scrum and sees...a revolution.

Born is the Marxist, leader and friend to the common bit farmer.

The revolutionary swoons at scrum's commitment to the "self-organizing team". He visualizes an enervated bourgeois middle management, an empowered development base that directs company affairs, and an opportunity to play video games at work.

Of course corporations are a little different than governments in that the workers cannot throw out their bosses and forcibly wrest control of the organization. However, under the guise of scrum doctrine, the proletariat can confuse and befuddle the established order in an organization to the point where they feebly hand him the reins of power.

How is this done?

Guerrilla warfare is waged through deception and surprise. The revolutionary arms himself and his comrades with all manner of scrum books and training documents. Prepped with a preponderance of process techniques, the team can then confront management's every proposal with a counter proposal of their own that is "more scrumlike according to so and so".

If management wants estimates in hours, the team will stubbornly insist on Fibonacci numbers. If one week sprint cycles are proposed, the team will produce evidence suggesting that three weeks have been used effectively elsewhere. Ultimately, the goal is to take advantage of management's unfamiliarity with scrum. If the stakeholders and upper management can be convinced that the team actually knows what they are talking about, the revolution has been a success. With luck, the team will be granted control to run the process. The people have won!

But as is the case with most revolutions, the new establishment must take steps to ensure that they do not lose the power that they were so recently awarded.

The process changes that the team originally dreamed up to wage their revolution are calcified into a rigid, inflexible doctrine. Non-conformity is met with oppression (sarcasm), and team members who question the power structure are sent to the Gulag (ignored). Productivity decreases as creativity is squelched, and the lack of actual work being done results in frequent kitchen raids and food lines, which in turn lead to shortages and empty shelves. Work days become cold, bleak, and hard. Members of the collective are encouraged to spy on their comrades and report deviances such as frequent trips to the bathroom. There is little laughter.

In the end, the developer population loses power so that a few can maintain it.

There is a balance between the top down and bottom up forms of control described in Part 1 and Part 2 of this series. This is called responsible elected representation, which we will visit this in Part 3.

Think Services Turns to Grio to Enhance its Flagship Products

Grio proudly announced the signing of its consulting agreement with Think Services, a division of United Business Media. As part of this collaboration, Grio will assist by designing and introducing an agile software development methodology that fits Think Services' needs. In addition, Grio will be a key player in helping to build the company's next generation of products.

Dealing with JSON on iPhone

You can easily use the JSON (JavaScript Object Notation) data format in client-server communications when writing an iPhone app. This blog is not suggesting that JSON is a more superior format for data exchange than its counterparts such as XML. In fact, we have many projects that don't use JSON. However, handling JSON is relatively straight forward in ObjectiveC.

Unfortunately, Apple iPhone SDK (as of this writing, the latest is iPhone 2.2.1) doesn't come with a built-in JSON parser. But I found out a good one called json-framework. It is both a generator and a parser. As a generator, json-framework can create JSON data from an NSDictionary. As a parser, you can pass to json-framework an NSString that consists of JSON data and it will return a NSDictionary that encapsulates the parsed data.

Next, I'm going to show you several examples. Before you proceed, download the library and make sure you add it to your SDK path list (see INSTALL file that comes with it). If setup properly, you should be able to start using the library by importing its header file:

#import "JSON/JSON.h"

Consider the following code:

NSDictionary *requestData = [NSDictionary dictionaryWithObjectsAndKeys:

 @"grio", @"username",

 @"hellogrio", @"password",

  nil];

This instantiates a new dictionary which we'll turn into a JSON string. To do so, you'll need to use a function called JSONRepresentation. This function is added as a category to NSObject. It means that as long as there's an import of JSON.h file, you can call the function on any NSObject object.

NSString* jsonString = [requestData JSONRepresentation];

And this is what you got when you print (NSLog(@"%@", jsonString);):

{"username":"grio","password":"hellogrio"}

Parsing is just as simple. Consider the following JSON data:

{

"menu": {

"id": "file",

"value": "File",

"popup": {

"menuitem": [

{

"value": "New",

"onclick": "CreateNewDoc()"

},

{

"value": "Open",

"onclick": "OpenDoc()"

},

{

"value": "Close",

"onclick": "CloseDoc()"

}

]

}

}

}

Assume that this is the data that you received from a web service called and is currently stored in an NSString called jsonResult. To parse it, you need to create SBJSON object and call one of its initialization method, objectWithString.

SBJSON *json = [[SBJSON new] autorelease];

NSError *jsonError;

NSDictionary *parsedJSON = [json objectWithString:jsonResult error:&jsonError];

If parsing fails for reasons such as invalid construct of JSON format, jsonError variable will be filled with the error info. If it is successful, parsedJSON will contain keys whose values are either an NSString or NSDictionary. Let's look at the inside of parsedJSON:

NSDictionary* menu = [parsedJSON objectForKey:@"menu"];

NSLog(@"Menu id: %@", [menu objectForKey:@"id"]);

NSLog(@"Menu value: %@", [menu objectForKey:@"value"]);

And here's the output:

Menu id: file

Menu value: File

Observe the JSON data again. popup is an NSDictionary which has an array of menuitem.

NSDictionary* popup = [menu objectForKey:@"popup"];

NSArray* menuItems = [popup objectForKey:@"menuitem"];

NSEnumerator *enumerator = [menuItems objectEnumerator];

NSDictionary* item;

while (item = (NSDictionary*)[enumerator nextObject]) {

NSLog(@"menuitem:value = %@", [item objectForKey:@"value"]);

}

And this is the output:

menuitem:value = New

menuitem:value = Open

menuitem:value = Close

It's that simple. Now you're ready to use JSON in your next iPhone project.

Broadcasting Information: How to use the iPhone Notification Center

There are times when building an iPhone application that you need to inform other parts of the program to do something, without regard to what or where those parts are. The NSNotificationCenter (aka “notification center”) is the way to go in these cases. Using notifications supports ‘loose coupling’, which is a good thing in software design.

A notification center object provides a mechanism for broadcasting information (“notifications”) within a task. An NSNotificationCenter object is basically a notification dispatch table. For those familiar with Windows programming, this pattern is similar to the Windows Message Loop architecture.

For example, one object may be performing a long-running operation (such as downloading a file) and needs to inform view controllers to change the view to indicate this busy state. While we could pass around a bunch of object references, it is much easier to post a notification and let the listening objects decide what to do.

First, we’ll register with a notification center to receive notifications. Here’s the call:

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(myMethod) name:@"DoSomething" object:senderICareAbout];

So what’s going on here? First, we get a reference to the default notification center for the current task (application). Then we add ourselves (the calling object) as an observer of the notification.

The selector specifies the method we want to call when this notification arrives. The selector method takes one argument, which is an NSNotification object. It contains information about the notification, such as the name and sender object.

The notification name is the ‘message’ we are listening for. This parameter can be nil if we want to receive all notifications.

Finally, the object parameter is used to limit incoming notifications to those from a particular object. This can also be nil if you don’t care where the notification came from.

Now that we have an object listening, we can send (“post”) a notification. Here’s the code to do that:

[[NSNotificationCenter defaultCenter] postNotificationName:@"DoSomething" object:self];

The parameters here are pretty straightforward. We post the name of the notification, and the sender object (self in this case). If we don’t care about the sender object, we can use:

[[NSNotificationCenter defaultCenter] postNotificationName:@"DoSomething"]

which will set the sender object to nil in the received NSNotification.

A notification center delivers notifications to observers synchronously. In other words, the postNotification: method does not return until all observers have received and processed the notification. If you want to send notifications asynchronously, you should use a notification queue (NSNotificationQueue). We’ll save that discussion for another day.

A note of caution: in multithreaded applications, notifications are delivered in the same thread that the notification was posted, which may not be the same thread in which an observer registered, so be careful. If you are threading a long process, you should send the notification in the main thread, not the thread created for the process.

Now you have the information you need to start broadcasting notifications to your hearts content. This will help keep your application code mean and clean.