It is very important to define which operating systems and on which browsers the application should be tested. Once you define the browsers on which the system should work, make sure you check all functionality on all browsers. If there is not enough time/budget, you can check the design and the main functionalities of the site with all browsers. Most of the cosmetic problems generally appear in Internet Explorer 6.0. We like to use IETester (http://www.my-debugbar.com/wiki/IETester/HomePage), the application supports all Internet Explorer versions.

For comparing the design of a site on different browsers, there is one tool named Adobe BrowserLab that works great. With it you can compare a web page in one browser next to a page in another browser or overlay the pages entirely. The tool supports the following browsers:

• Chrome 3.0 – Windows
• Firefox 2.0 – OS X
• Firefox 2.0 – windows
• Firefox 3.0 – OS X
• Firefox 3.0 – Windows
• Firefox 3.6 – OS X
• Firefox 3.6 – Windows
• Internet Explorer 6.0
• Internet Explorer 7.0
• Internet Explorer 8.0
• Safari 3.0 – OS. X
• Safari 4.0 – OS X

Make sure that your bug reports are easy to understand

The best testers have the most bug reports resolved. A good bug report is one that assists in resolving an issue. Ensure that your bug reports can easily be reproduced by making them as clear and concise as possible. Here are several steps that you can follow:

1. Reproducibility – inform the developers how often the bug appears

2. Severity – inform the developers of the scale of the bug.

3. Summary – summarize the bug with one sentence – as a title for your report. Be descriptive and concise.

4. Bug Description – this is the most important section.

Be sure to include:

• Location of bug in the software
• URL (if you are testing web pages)
• Testing browsers or environment
• Information about the bug – here you need to explain the input data you used and the sequence of steps you made to cause the bug. This point is quite important make sure that your instructions are clear and reproducible. Make sure that you use the same terminology as the developers.
• Screen shots with comments and explanations. Firefox has one wonderful Add-on “FireShot”, this Add-on can be found also for Internet Explorer.

These days, more and more people in the IT business work with clients or have coworkers that are not from their own country and who communicate in another language. No matter how well you learn to understand a language, there still can be misunderstandings that can lead to problems of all types. It helps to have a pre-planned method and agreed terminology to report bugs.

There must be bugs

Start to test with the idea that there should be bugs. There is not a system that does not have a few errors. This mindset will help you to be more focused on finding problems.

Test situations that should not be executed

Sometimes, due to a variety of reasons, users do not enter something as they are intended to, press buttons out of order, or otherwise misuse the software. It is important to try to account for these situations.
If you have a registration form to test, try doing things OTHER than fill out the form. It was built to accept data, so try not entering anything and pressing the button for registration, enter invalid data such as email that does not have the “@” symbol or very long zip code or name. Use boundary cases (inputs at or just beyond maximum and minimum limits) to attempt to receive errors. There are symbols that can break the database or break the request from the database if they are entered and saved in the system. Such examples are the percentage (%) symbol, inverted commas(“”), and two minuses (–) together.
If you have a combination of actions that need to be done one after another, change their sequence. Make sure that you have checked all situations that you can think of, according to the system you test.

Test real situations

The above tips should not turn the QA process into a highly critical and aggressive testing period. Do not test and report bugs for unrealistic situations. Make sure you have understood the specification for the application and do not tease the developers with unrealistic bugs.

Test like you are a regular user, a computer illiterate user.

Think about the users, question yourself. Is this system user friendly? Can you easily navigate the program? Is the text within the system clear and understandable? Are the error messages helpful? There are a lot of examples in your own personal life. Think about when you sit at home on your personal computer – which sites or programs do you prefer? Why? Which you do not like? Why? Usability is always the answer.

Keep written reports

Sometimes bugs are  shared verbally with the developers. This can work against you.  Make sure that you keep written documentation of all your discussions about issues or anything concerning a project.  The best practice is to have reports on every issue you find.  Sometimes when communicating bugs verbally, many testers complain that the developers take the credit for their work or that managers who calculate the productivity of a tester by the number of bugs he/she reports do not give full credit.

Work to become a Team

Communication with your team members is just as important as knowing good techniques for testing and is key for the successful achievement of a quality product. You need to be flexible. During your work you will meet junior developers that have never worked with testers or people who will disagree with your findings. Some developers just need to get used the fact that they have bugs in their programs. This is normal. You need to persuade them that a tester for a developer is not like a critic for an author. Help them understand that you are a team and you both want the same thing. Prove your statement with facts and knowledge of the system and specifications.

Gain new knowledge

Black box testing uses external descriptions of the software with no knowledge about the internal structure. If you want to become competitive and help further your career, you should take a peak at the source code and ask questions of the developers. For cosmetic issues, you can read and learn about HTML and CSS and report specific CSS styles/areas of a web page that need fixing. Some tools that can help are the Web Developer Toolbar and the Firefox Add-on, Firebug. Some knowledge about Databases also will be helpful, this way you can more clearly understand the processes in the system and the reasons why some bugs appear. With more knowledge of how the software works, you will speed up the developer’s work and make yourself more efficient in the process.

Approving a high quality product is a hard and complicated process. Learn from your mistakes and from the bugs you found. Keep good communication with your coworkers, defend your position in a positive manner, keep learning, and continue testing.

Google opened the source code under an Apache License and now the Android SDK allows developers to write managed code in the Java language, controlling the device via Google-developed Java libraries. The SDK includes a comprehensive set of development tools, such as a debugger, libraries, a handset emulator, documentation, sample code and tutorials.

Applications that run in the background are supported in Android in contrast to iPhone. All of these facts stimulate me to research this interesting technology. I decided to make an application running in the background and receiving the GPS location. The main goal was to inform the user not to write or read text messages while he or she is driving.

It is pretty easy to develop an Android application, especially if you are using Eclipse. You can download the latest version of the Android SDK from the official site. There are a lot of tutorials explaining how to install and use the SDK in Eclipse, if you are a beginner you can take a look at the developer’s guide.

Utilizing the GPS Module

As you may know smartphones have a gps module which provides the current location. This feature is used in many applications. To implement it you have to modify the AndroidManifest.xml, this is the main configuration file.

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

With these permissions you tell to the application that the GPS module will be used and the application is given access to it.

The Activity Class

There is one very important class in an application’s overall lifecycle – the Activity class. It takes care of creating a window for you in which you can place your UI. But this activity is not enough to create a background process. It should be used in conjunction with another object from the ContextWrapper to achieve the behavior of an application component that runs in the background and doesn’t interact with the user. This functionality is given up by the Service class. Both the activity and the service should be declared in the android manifest file.

My idea is to create a main activity class and in the onCreate() method call the service. But when something is started, there needs to be a way to stop it. The best place to stop the service is in the onDestroy() method of the main activity. These two methods are overridden because the main activity has to extend the Activity.java class. They look like:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    try {
        // setup and start MainService
        MainService.setMainActivity(this);
        Intent svc = new Intent(this, MainService.class);
        startService(svc);
    } catch (Exception e) {
    Log.e(">>>", "Problem creating the UI", e);
    }
}

@Override
protected void onDestroy() {
    super.onDestroy();
    // stop MainService
    Intent svc = new Intent(this, MainService.class);
    stopService(svc);
}

This is how the activity class looks. The service class will manipulate the GPS module data. It will get the location in a time interval, get the speed or calculate it if it is not available and finally if the speed is more than 10km/h it will inform the user not to use the phone’s features while driving in order to avoid accidents.

The Service Class

As the main activity extends Activity.java class, the service should extend the Service.java class. The service is started in the overridden method onCreate() of the class.

// service business logic
private void startService() {
    TimerTask timerTask = new TimerTask(){
        public void run() {
            getUpdateLocation();
        }
    };
    timer.scheduleAtFixedRate(timerTask,0,UPDATE_TIME_INTERVAL);
    Log.i(getClass().getSimpleName(), "Timer started!");
}

First a timer object is needed which will take care of calling the service. To schedule the timer you have to prepare a TimerTask instance, which calls your business logic. In the example it is called the getUpdateLocation() method, its functionality will be explained later in this post. The timer is scheduled with the timer task and the specified time interval passed as a constant.

Lets take a look at the getUpdateLocation() method. As the title says, the method gets the location from the LocationManager.java class. The locations are separated by providers, so they are filtered with a criteria. Some GPS providers send the speed of the device. But if the speed is not received, it can easily be calculated as a quotient of the distance between the current and previous location with the subtraction of the two times.

private void getUpdateLocation() {
    Log.i(getClass().getSimpleName(), "background task - start");
    // get the system location service
    locationManager = (LocationManager)
                               getSystemService(Context.LOCATION_SERVICE);
    // create criteria to filter the providers
    Criteria criteria = new Criteria();
    bestProvider = locationManager.getBestProvider(criteria, false);
    Location location = locationManager.getLastKnownLocation(bestProvider);

    date = new Date();
    if(currentLocation == null){
        currentLocation = locationManager.getLastKnownLocation(bestProvider);
        currentDate = new Date();
    }

    float speed = calculateSpeed(location);
    // speed > (10km/h = 2.78m/s)
    if(speed > SPEED_LEVEL){
        Looper.prepare();
        Context context = getApplicationContext();
        CharSequence text = MESSAGE;
        int duration = Toast.LENGTH_LONG;
        Toast toast = Toast.makeText(context, text, duration);
        toast.show();
        Looper.loop();
    }
    // set the currentLocation and currentDate with new values
    // for the next iteration
    currentLocation = location;
    currentDate = date;
    Log.i(getClass().getSimpleName(), "background task - end");
}

The user will be informed with a warning message, if the calculated speed is more than a specified value. This is the business logic, but there is one other thing to take care of – the timer. The timer is started in the onCreate() method of the service class. It will be stopped in the onDestroy() method of the service class. The cancel() method will then be called in order to cancel the timer and remove any scheduled tasks.

if (timer != null) {
    timer.cancel();
}

The completed application will run in the background and inform the user with a message that his or her speed is more than 2.78 meters per second.

Supported chart types include:

• X-Y charts (line, spline and scatter);
• Pie charts;
• Gantt charts;
• Bar charts (horizontal and vertical, stacked and independent);
• Single valued (thermometer, compass, speedometer).

I am going to explain how to use the chart library and how to create a bar chart with a custom color. To create a chart with JFreeChart library, first you have to make a Dataset object. The chart is generated from this data collection. Next you have to instate the class DefaultCategoryDataset, which is passed to the chart object. In the code below as a data source is used ArrayList, which may come from data base.

// load the data
double[] data = new double[jobTitles.size()];
for (int i = 0; i < jobTitles.size(); i++) {
     data[i] = jobTitles.get(i).getCount();
}
// create the data set
DefaultCategoryDataset dataset = new DefaultCategoryDataset();
for (int i = 0; i < data.length; i++) {
     dataset.setValue(data[i], "Profit1", jobTitles.get(i).getTitle());
}

The next step is to do an object from chart type. The library uses a class named JFreeChart to display the chart. This chart object is an instance, which comes from the method createBarChart of the static class ChartFactory. The method takes as a parameter the formed collection (dataset). There are many properties, which you can pass to the constructor, such as labels, orientation, etc. It is possible to change colors, size, scale and many other characteristics.

You have ready object now and the next step is to send the chart to the web page. For this purpose, the library includes a class named ChartUtilities that provides several methods for saving charts to files or writing them out to streams in JPEG or PNG format. The methods from this class can be used for creating JPEG images for static web pages. The goal, however, is not to save the chart in a hard drive; the goal is to pass the graphic to the application. To do that, you can use the servlet technology and display the dynamic data stream in the jsp pages.

Consequently the next step is to generate BufferedImage from your chart object and to transfer this stream through the session. You should also write the image in the http response writer.

// create the chart
final JFreeChart chart = ChartFactory.createBarChart("Allocation of Duties",
                 "Values", dataset, PlotOrientation.VERTICAL, true, true, true);
// set custom color
GradientPaint gradientpaint0 = new GradientPaint(0.0F, 0.0F,
                 new Color(209, 228, 246), 0.0F, 0.0F, new Color(82, 141, 201));
BarRenderer r = (BarRenderer)chart.getCategoryPlot().getRenderer();
r.setSeriesPaint(0, gradientpaint0);
ChartRenderingInfo info = null;
HttpSession session = request.getSession();
try {
     // create RenderingInfo object
     response.setContentType("text.html");
     info = new ChartRenderingInfo(new StandardEntityCollection());
     BufferedImage chartImage = chart.createBufferedImage(640, 400, info);
     session.setAttribute("chartImage", chartImage);
     PrintWriter writer = new PrintWriter(response.getWriter());
     ChartUtilities.writeImageMap(writer, "imageMap", info, false);
     writer.flush();
} catch (Exception e) {
     e.printStackTrace();
}

Finally you should write the servlet. This is a Java object, which dynamically answers requests and built response to the client. Each servlet has two main methods – doGet(HttpServletRequest request, HttpServletResponse response) and doPost(HttpServletRequest request, HttpServletResponse response). You need to get the chart stream from the session in the servlet. The image is set to an attribute named chartImage in the session. You have to get http session instance from the request and then to retrieve the previously set attribute.

// Process the HTTP Get request
public void mdoGet(HttpServletRequest request, HttpServletResponse response)
                                       throws ServletException, IOException {
    // get the chart from session
    HttpSession session = request.getSession();
    BufferedImage chartImage = (BufferedImage)session.getAttribute("chartImage");
   // set the content type so the browser can see this as a picture
    response.setContentType("image.png");
    // send the picture
    PngEncoder encoder = new PngEncoder(chartImage, false, 0, 9);
    response.getOutputStream().write(encoder.pngEncode());
}
// Process the HTTP Post request
public void doPost(HttpServletRequest request, HttpServletResponse response)
                                       throws ServletException, IOException {
    doGet(request, response);
}

The result is the graphic below:

JFreeChart is a library for displaying charts and managing their properties with a big palette of options. For more information go to the project official site.

<current_observation>
  <credit>Weather Underground NOAA Weather Station</credit>
  <credit_URL>http://wunderground.com/</credit_URL>
  <image>
    <url>http://icons.wunderground.com/graphics/wu2/logo_130x80.png</url>
    <title>Weather Underground</title>
    <link>http://wunderground.com/</link>
  </image>
  +<display_location></display_location>
  +<observation_location></observation_location>
  <station_id>KSFO</station_id>
  <observation_time>Last Updated on July 14, 9:56 AM PDT</observation_time>
  ...
  <local_time>July 14, 10:01 AM PDT</local_time>
  ...
  <local_epoch>1247590877</local_epoch>
  <weather>fog</weather>
  <temperature_string>52 F (11 C)</temperature_string>
  <temp_f>52</temp_f>
  <temp_c>11</temp_c>
  <relative_humidity>76%</relative_humidity>
  ...
  <icon>fog</icon>
  ...
</current_observation>

For processing this XML we decided to use DOM parser for the following reasons:

• To save the structure of data (more flexible usage for presentation and further processing)
• To ensure good maintainability and adaptability (external provider may change XML structure)
• The XML is not so large that it would not cause memory issues.

Figure 1 the DOM presents an XML document as a tree-structure

DOM Tree

The DOM presents an XML document as a tree-structure. The parser creates a tree object out of the document. The user accesses data by traversing the tree. The API allows for constructing, accessing and manipulating the structure and content of XML documents (Figure 2).

Figure 2 Using a DOM Tree.

For our implementation we use a very simple and effective parser - XMLTreeParser/XMLTreeNode. The implementation consists of two classes: XMLTreeParser and XMLTreeNode. It uses NSXMLParser to read the document and for every one <element> tag creates a XMLTreeNode object. That way, it creates the tree that contains nodes of type XMLTreeNode.

To create a parser, simply instantiate the XMLTreeParser class:

XMLTreeParser* parser = [[XMLTreeParser alloc] init];

After that start parsing – call the parse method and provide the XML data:

<strong>XMLTreeNode* root = [parser parse:xmlData];

Now you can traverse through the tree manually looking for things.

NSArray* items = [stuffindChildren:@"icon"];

Architecture of an XML application using DOM

The DOM model is easiest to understand. On Figure 3, a basic architecture of an XML application using DOM is presented:

Figure 3 Architecture of an XML application using DOM

So here’s what happens: A parser reads the XML file and builds a DOM document to match the XML file. From that point until a save is performed, all interaction between the application and XML hits the DOM document rather than the corresponding XML file. It’s interesting to note that almost all XML parsers use SAX. Before you build a DOM document you must detect events such as the start of an element (start tag encountered), end of an element (end tag encountered) and/or a new attribute (name followed by equal sign followed by quoted string encountered). DOM can be thought of as an extra abstraction to lessen the programmer’s workload, at the expense of memory usage.

Modifications are made directly to the DOM document. Elements can be added, deleted, renamed, and rearranged. Text nodes can be added, delete,d or changed. Elements can be moved either within the same level, or promoted or demoted to different levels.

Choose a design pattern for implementation

Choosing the appropriate pattern is a critical step. The Dynamic Document architectural pattern was used in our case. This pattern contains XML not typed by DTD or schema, but follows assessors for underlying program objects. It allows for unlimited extension by multiple, uncoordinated parties at the cost of lack of type-checking, and it’s simple to implement.

Figure 4 Map the XML document to object model.

The DOM API is used to read information from an XML document. There is an easier way of getting around using DOM for modifying and saving the XML data — creating an object model for the information in the document. You can create this object model by giving it a DOM object that holds all the XML document information. That is, the XML document should be mapped to an object model.

Figure 4 shows how to map the Current Observation XML document to a set of related classes (object model). The <current_observation> element is mapped to the CurrentObservation class; the <display_location> element is mapped to the DisplayLocation class. The <observation_location> element is mapped to the ObservationLocation class. Single elements (without sub elements or others attributes) are mapped to the parent element class properties.  Each class can be instantiated using a method or Factory implementation by providing a part of XML tree, with root – class element. In this the exampleinit method was used -(id)initWithData:(NSData *)data;.

Here is a partial code listing from CurrentObservation.h:

  @interface WUCurrWeather : NSObject {
   NSString *credit;
   ...
   Image *image;
   DisplayLocation *displayLocation;
   ...
   NSString *icon;
  ...
  }

  @property(nonatomic, retain) NSString *credit;
  @property(nonatomic, retain) Image *image;
  @property(nonatomic, retain) DisplayLocation *displayLocation;
  ...
  @property(nonatomic, retain) NSString *icon;
  ...

  - (id)initWithData:(NSData *)data;

  -(NSString *)description;
  @end;

@interface Image : NSObject {
NSString *url;
NSString *title;
NSString *link;
}
@property(nonatomic, retain) NSString *url;
@property(nonatomic, retain) NSString *title;
@property(nonatomic, retain) NSString *link;
- (id)initWidthData:(XMLTreeNode *)root;
- (NSString *) description;
@end

Now you can use your object model to manage data as you wish – save it in a database or show it in a GUI for example.

Example

Below is an example of a View Based iPhone Application that calls a Wunderground Data Feed Web Service to get current weather conditions. The update button repeats the call and refreshes the screen when new data arrives. The screenshots below visualize the application’s behavior:

In the provided source code you can find all these steps implemented.

• SAX (Simple API for XML) is a serial access parser API for XML. It provides a mechanism for reading data from an XML document. The quantity of memory that a SAX parser must use in order to function is typically much smaller than that of a DOM parser. Unlike DOM, there is no formal specification for SAX.
• The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. It represents a tree structure based API. The Dom parser implements the DOM API and it creates a DOM tree in memory for a XML document. Because DOM supports navigation in any direction (e.g., parent and previous sibling) and allows for arbitrary modifications, an implementation must at least buffer the document that has been read so far (or some parsed form of it).

Cocoa offers a “complete” XML parser with the NSXML family of classes.

• NSXMLParser is a SAX parser, meaning that it traverses the XML tree and informs a delegate of events as they happen. This is an event-driven parser, which calls methods on a delegate to handle “events” as it parses through the XML.
• NSXMLDocument provides tree parser functionality. An instance of NSXMLDocument represents an XML document as internalized into a logical tree structure. This tree-based parser is fairly sophisticated but it is not included in Cocoa-Touch.

In the spirit of small and simple, iPhone developers have the NSXMLParser class to use. Because NSXMLParser only generates messages for a delegate, and doesn’t store data about the XML tree, it requires less memory and is better for accessing small pieces of data or parsing large XML documents. The basic operation of the NSXMLParser class will not be covered here. This is well documented in the Apple Programming Guide.

For devices like iPhone where memory usage is critical, using tree parser is not recommended. I guess that is why Apple doesn’t provide NSXMLDocument on iPhone/iPod touch. However, the model of event parsing may not be acceptable by your code. NSXMLParser is probably adequate, but it is not going to handle all your XML parsing needs. The biggest problem with this type of streaming parser is that you lose the structure of your data; your call-backs do not provide any context or hierarchy. Because of the above mentioned or by some other reason like often changing XML format [1] you may need to use something like DOM model implementation.

Available Libraries (DOM model implementations) for iPhone

• XPath/XQuery – used to navigate through elements and attributes in an XML document.
• Libxml2 – XML C parser and toolkit developed for the Gnome project. At Cocoa with Love, very nice explanation and code sample to write wrapper for the libxml2 was posted. It has a title, “Using libxml2 for XML parsing and XPath queries in Cocoa”[2]
• KissXML,TouchXML – two tree XML parsers for iPhone.
• APXML – not a perfect implementation of the W3C XML 1.0 standard, but it’s close enough for a lot of usage.
• XMLTreeParser/XMLTreeNode -  Enhancing the standard NSXMLParser class

Which parser (DOM or SAX) should you use?

Well, if you’re going to need to parse very large XML documents, then you should probably consider NSXMLParser. What “very large” means depends a lot on the available memory you have to work with? The model of iPhone and the memory already in use by your app may prevent you from being able to use DOM model.

While DOM model usage may seem easier, NSXMLParser really excels in situations where you’re loading in many instances of the same kind of data, such as an address book or twitter feed. However, if memory is not an issue, I would recommend DOM model. It makes it easy to access the data you want and also allows you to manipulate the tree.

References

1. Arash Payan(Salman),APXML: NSXMLDocument ’substitute’ for iPhone/iPod Touch – Arash Payan,Sep 27th, 2009
2. jongampark, Tree XML parser for iPhone, 2009

Have you ever gotten the message The URL [your application url here] did not respond. even when everything seems to be working on your side?
One probable reason is that Facebook has a certain response timeout – approximately 12 seconds. If your page fails to respond in this time, Facebook will leave it and display an error message. I used a few simple tricks and managed to work around this issue. Try them out:

Make the Facebook application lighter:

• The basic idea is to make the page as light as possible on the first load. One way to achieve this is to leave the time consuming tasks like database interaction for later, updating the page with AJAX. (more info)

Speed up your Facebook app:

• You can use “Preload FQL”, that is to send your FQL requests along with the first call, thus making one less roundtrip to the server. (more info)
• Facebook provides a Batch API. With this API, you can combine multiple API calls and send them together as one call. (more info)
• You can do the same thing with multiple queries. Wrap, send, and receive them as one using Fql.multiquery. (more info)

AJAX calls have the same timeout issue (although the timeout here is approximately 13 seconds). Additionally all AJAX calls pass through the Facebook server which slows them down. The result is the following JavaScript error: “error”:1349011,”errorSummary”:”Failed to fetch app Ajax” .

I found a simple solution to avoid it: Use FBJS AJAX and a timer to abort the request when it reaches the time limit and send a new one.

Facebook API Response Time and Error Count

The Facebook API itself sometimes has latency issues causing your app pages to be fetched slower, increasing the risk of reaching the response timeout. Errors in request to their servers are also known to happen. You should always be informed about the Facebook Platform Status.

Syntax Limitations in FQL

The Facebook API allows you to make your own queries using a query language similar to SQL. There is a list of tables you can access (you can only view information; you are not allowed to update the information in any of these tables). You can easily make your own queries, but you should keep in mind that you cannot do a number of normal (for SQL) things such as join tables, use ‘distinct’, ‘limit’, ‘group by’, etc., or use “from” against more than one table. You can easily do these operations in the code, however. Combined with the use of the multiquery functionality, things should work almost as fast as if you were using pure SQL.

Facebook API Changes

As you may guess, the Facebook API still is in development, so you should keep yourself up to date with the constant changes in its platform. Some of these changes are potentially breaking, some features are being deprecated or changed, and some cool new things are being added. It is useful to read the Facebook Developer Roadmap to be informed for the specific changes that have been planned and when to expect them. Here are some of the upcoming ones:

• an open source, faster, slimmer, and more efficient JavaScript Library will be developed – I am personally looking forward to this. It will be of great help, as right now the FBJS is very limited.
• profile boxes, application info sections, and the Boxes tab will be removed – If you want to integrate into the user’s profile, you will be able to do that only with Application tabs.
• formatting on canvas pages will be changed to better highlight an application’s brand – For now, I myself am using fb:dashboard. It not only gives you clean app navigation, but also a great look by positioning the name and icon of your app nicely on every page.

Until recently, some of the API changes, even when prepared for them, had unexpected effects on some applications (in some cases, bugs appeared) and there was nothing we could do about it.
In late February, Facebook introduced a tool to help us prepare for the changes – the Migrations tool. When Facebook announces a new feature or fix, you can first do some testing before going to the Migrations tab in your application settings and choosing to enable it (it is disabled by default).

In conclusion, I can assure you that whatever problems you may stumble upon there is a huge community of developers willing to help you out. Just go to the Facebook Developers Forum. There is also lots of documentation and useful tips in the Facebook Developers Wiki. Have fun!

UIWebView load

Our work will start with a little change in calling load method of the UIWebView instance. Instead of loadRequest

[[webView graphWebView] loadRequest:requestObj];

we use the loadHTMLString method, providing an NSString object that contains HTML code of our page as a parameter:

[[webView graphWebView] loadHTMLString:htmlPageStr baseURL:baseURL];

To get this page to load resources and styles correctly, you have to set up the right URL:

Set baseURL property of UIWebView to refer your bundle’s resources directory

Initial loading screen with progress indicator

On the following reference^[2] you can find a short and clear revision of the problem of displaying local images in a UIWebView. To use relative paths or files in UIWebView, you have to load the HTML into the view with the correct baseURL parameter. The following example shows how to do this:

NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];

And then call load method of UIWebView provide above NSURL parameter:

[[webView graphWebView] loadHTMLString:pageStr baseURL:baseURL];

A short explanation: An NSBundle object represents a location in the file system that groups code and resources that can be used in a program. mainBundle method returns the NSBundleobject that corresponds to the directory where the current application executable is located. bundlePath instance method of NSBundle returns the full pathname of the receiver’s bundle directory. NSURL class is used to create an object which will hold the URL information. It provides a way to manipulate URLs and the resources they reference. loadHTMLString method of UIWebView has parameter baseURL that accept an NSURL object instead of a pathname as the file reference. Giving the above baseURL to UIWebView, you can refer to your bundle’s resources directory like this:

<img src="myimage.png">

Or from within CSS like this:

background-image: url(loading.gif)

It’s important to note that resources (images, CSS and JavaScript Files) inside your application bundle are at the root of the bundle, even if you place them in an separate group (folder) in your project.

Giving the correct URL to UIWebView will allow you to refer to local resources in your page, but it does not work in all cases. If you want to use JavaScipt, some additional settings have to be done.

Link a CSS and JavaScript files

Second loading screen with progress indicator

Now you can use generic HTML technique to add CSS and JavaScript to the web page and displaying in a UIWebView.

<link href="default.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="showhide.js"></script>

Do not forget to add your CSS and Javascript files to the xCode project (if you are using external files).

Some additional actions have to be taken before starting your application and using JavaScript functions.^[3]

XCode setup (*.js) javascript as some type of source code needs to be compiled in the application. We would like to include it as a resource so I’ve solved it by doing two things:

1. Select .js file and in the “Detail” view unselect the bullseye column indicating it is compiled code
2. In the “Groups & files” view expand the “Targets” tree and expand the application then go to “Copy Bundle Resources” and drag the *.js files into it.

The Apple dev forums has a posted solution. ^[4] You need to do two things – select the .js file in your project, and turn off the checkbox that indicates that it is compiled (the “bullseye” column). If you don’t do this, you’ll get a warning in your build log about being unable to compile the file (which should be your first warning – always try to figure out and and correct any and all warnings that appear in your build).

Set transparent background color for UIWebView

Final screen with graph representation.

In our example we need to figure out a transparent background for UIWebView. On the parent View Container we have additional controls (buttons, labels) and already defined background. The following code will set this:

[[webView graphWebView] setBackgroundColor:[UIColor clearColor]];</code>

[[webView graphWebView] setOpaque:NO];

Example

MentorMateDemoJS is a simple application example which uses the settings described above. It is a view-based application that shows a graphical representation of some data. Application behavior consists of a predefined call with formatted data to Vvidget Service^[5] for graph generation. The service returns an image that is loaded in UIWebView Design Resource. The update button is added to resend the graph request and update view.

The Problem: Graph image requires some time for loading.

Our Decision: Notify user of graph loading process by showing a progress bar during load time.

To achieve this, we use UIWebView with local resource of two JavaScript functions. One to show/hide notification messages and the other to visualize a progress bar during loading time. In the provided sources you can find all these steps implemented.

Sources of the example iPhone application

References

1. iPhone SDK Articles, UIWebView Tutorial, August 19, 2008
2. iPhone Development Blog, UIWebView – Loading External Images and CSS, February, 2009
3. StackOverflow, iPhone UIWebView local resources using Javascript and handling onorientationChange
4. Developer Forum, UIWebView and JavaScript, 2009
5. Vvidget, Vvidget Server™ Reference Manual , 2010

DECLARE @PageNumber INT
DECLARE @PageSize INT
SET @PageNumber = 2
SET @PageSize = 10
SELECT TOP (@PageSize) * FROM
(
SELECT
ROW_NUMBER() OVER (ORDER BY FieldA) As RowID,
FieldB,FieldC,
TotalRows=COUNT(*) OVER()
FROM TheTable
) TmpTable
WHERE TmpTable.RowID > ((@PageNumber-1)*@PageSize)

One significant advantage of this implementation approach is that there is no need for a second query that returns the total count of the paged data. The total record count is returned as a column in the result set. This minimizes the number of queries that are needed to return a paged result set. If not needed, the “TotalRows” column can be removed from the query.

SEVERE: Servlet.service() for servlet jsp threw exception
java.lang.OutOfMemoryError: Java heap space
at java.lang.StringCoding$StringDecoder.decode(StringCoding.java:133)
at java.lang.StringCoding.decode(StringCoding.java:173)
at java.lang.String.(String.java:444)
at org.postgresql.core.Encoding.decode(Encoding.java:193)
at org.postgresql.core.Encoding.decode(Encoding.java:205)
at org.postgresql.jdbc2.AbstractJdbc2ResultSet.getString(AbstractJdbc2ResultSet.java:1892)
at org.apache.tomcat.dbcp.dbcp.DelegatingResultSet.getString(DelegatingResultSet.java:175)

This was the first time when we had a log where there was a specific row number indicating the error. After looking at the code, we found that the row was in logic, where we assign a field from the database to a string variable. It was nothing unusual, so we decided to check the field in the database table. It was a “text” field in a PostgreSQL database that we access using JDBC driver. After a SELECT length(‘field’) command, we estimated that the biggest field data is about 1 MB! So, if we wanted to take the whole table that would be about 400 MB data fetched in a single click that invoked this method. After that we were able to finally reproduce the server crash, clicking several times on the button that invoked the method fetching this abnormally large amount of data. We had to revise the code so that we take only one field when needed. This solved the crashing issue.

The lesson is that we need to make sure we are not requesting too much data using the SQL statements. Even if we are getting a small amount of columns like in this case, we need to have in mind that one of them could contain a lot of information and make the system crash – especially with lots of concurrent users.

</span><code><script type="text/javascript" src="/app/theme/com/sun/webui/jsf/suntheme4_2-080320/javascript/bootstrap.js"></code><span style="font-family: Georgia,'Times New Roman','Bitstream Charter',Times,serif; font-size: 13px; line-height: 19px;">

Now if you change that line to:



</span><code><script type="text/javascript" src="https://www.yourserver.com:8443/ app/theme/com/sun/webui/jsf/suntheme4_2-080320/javascript/bootstrap.js"></code><span style="font-family: Georgia,'Times New Roman','Bitstream Charter',Times,serif; font-size: 13px; line-height: 19px;">

The site will now work under HTTPS without any security warnings. Obviously, this cannot be done straightforward because this piece of HTML code is generated by the Woodstock library. The solution we have implemented to resolve this problem is to change the code in the Woodstock library that generates the HTML header of the pages. The following solution is not the most elegant solution; it’s more of a simple workaround to solve this problem in production environment:

1. Open the Woodstock project web site, https://woodstock.dev.java.net/index.html, and go to “Build it Yourself.”
2. Follow the instructions on the “Build it Yourself” page to register and get a CVS access to download the framework source code. The CVS URL will be something like: :pserver:username@cvs.dev.java.net:/cvs. You don’t need NetBeans 5.5, as it is written in the compile instructions.
3. Open the CVS repository with NetBeans and check out the module “woodstock/webui” and branch “Release42″ as a new project.
4. Open the project and edit the “JavaScriptUtilities.java” file in package com.sun.webui.jsf.util in “src/runtime” folder.
5. In method “renderJavaScriptInclude”   change line 578 from:


   </span><code>String jsFile = getTheme().getPathToJSFile(file);</code><span style="font-family: Georgia,'Times New Roman','Bitstream Charter',Times,serif; font-size: 13px; line-height: 19px;">

   To:


   </span><code>String jsFile = "https://www.yourserver.com:8443" + getTheme().getPathToJSFile(file);</code><span style="font-family: Georgia,'Times New Roman','Bitstream Charter',Times,serif; font-size: 13px; line-height: 19px;">

6. Save the file and rebuild the project. During compile, you might notice a lot of warnings, etc – just ignore them.
7. Copy and overwrite the newly compiled webui-jsf.jar and webui-jsf-dt.jar from the Woodstock source code folder “woodstockwebuidist” to the NetBeans subfolder. “visualweb2modulesext”. Keep a copy of the original jar files (see below).
8. Rebuild your WAR file and deploy it on the HTTPS server.

There you go. You should now have your website working under IE with no security warnings. Note that the newly compiled .jar files will work only on the server URL you define in Step 5. They won’t work in localhost development environment, so you might want to change with original .jar files during development phase. Cheers.