You are currently browsing the archives for the AJAX category

Configuring iOS HTTP Monitoring

When developing Web Applications for the Mobile Web Experience it is often useful to have a clear view into all HTTP requests and responses sent between the client and server. This is quite simple to accomplish when developing Web Applications for the Desktop as, the browser is running locally so any standard HTTP Monitor will suffice. And, while it is a normal part of a typical development workflow to run an application locally the majority of the time, testing on each target device is obviously an essential part of the process as well.

Luckily, with Charles, on iOS this is quite simple to accomplish.

Configuration

To configure Charles to proxy all requests from an iOS device, simply follow these basic steps:

  1. From your iOS Device, open Settings.
  2. Go to Wi-Fi, select your Network and select the Blue “arrow” icon.
  3. Scroll to HTTP Proxy and select the Manual Button.
  4. In the Server field, enter the IP address of your development machine.
  5. In the port field, enter port 8888 (the default port to which Charles binds).
  6. Leave Authentication set to Off.

And that’s all there is to it. Now, open Mobile Safari and go to your Web Application’s URL (or any page on the web for that matter). On your development machine, in Charles you will receive a prompt with the IP Address of your Mobile Device, click “Allow” and you are all set. When you are done working, make sure to turn off HTTP Proxy on your device.

Additional Note

While this article may be focused on Mobile Web Applications, these same configurations apply to all HTTP traffic from any application on your device that requires resources over the web.

December 16, 2011 AJAX / Browsers / Mobile / Mobile Web / Tablets
No comments

External Templates in jQote2

The jQote2 API Reference provides plenty of useful examples which are sure to help users get up and running quickly. I found it a bit unclear, though, as to how templates could be loaded externally as, in the reference examples, templates are defined within the containing page. For the sake of simplicity this approach certainly makes sense in the context of examples. However, in practice, templates would ideally be loaded externally.

While jQote2 provides a perfect API for templating, it does not provide a method specifically for loading external templates; this is likely due to the fact that loading external templates could easily be accomplished natively in jQuery. However, since this is a rather common development use case, having such a facility available would be quite useful.

After reviewing the comments I came across a nice example from aefxx (the author of jQote2) which demonstrated a typical approach to loading external templates which was simular to what I had been implementing myself.

And so, I wrote a simple jQuery Plug-in which provides a tested, reusable solution to loading external templates. After having leveraged the Plugin on quite a few different projects, I decided to open source it as others may find it useful as well.

You can grab the source and view the example over on the jQote2 Template Loader Github page.

December 12, 2011 AJAX / APIs / Design Patterns / HTML5 / JavaScript / jqote2 / jQuery / Test Driven Development
2 comments

DHTMLX Touch 1.0 Released

Last week, shortly after I blogged about the release of jQuery Mobile 1.0, I received an email informing me of the release of another Mobile Web Framework: DHTMLX Touch 1.0.

Being that I was unfamiliar with DHTMLX Touch (as I have been using jQuery Mobile almost exclusively), I was quite interested to learn more; and, having tried the Examples and reviewed the Documentation, I was rather impressed by DHTMLX Touch.

And so, if you haven’t already, check it out.

November 23, 2011 AJAX / Android / HTML5 / iPad / iPhone / JavaScript / Mobile / Mobile Web
No comments

Refreshing listviews in jQuery Mobile

When dynamically creating or updating a list in jQuery Mobile; either via AJAX or by other means, one must take care to explicitly invoke the target listview widget to “refresh” in order to instruct the framework to apply the augmented markup and styles to the corresponding elements of the underlying list.

For example, consider the following simplified example which creates an li element for each item in an Array:

var list = "",
    items = [{name: "Item A", url: "/#item-a"},
             {name: "Item B", url: "/#item-b"},
             {name: "Item C", url: "/#item-c"}];

$.each( items, function( i, item ) {
    list += ‘<li><a href="’ + item.url + ‘">’ + item.name +‘</a></li>’;
});
$("ul:jqmData(role=’listview’)").append( list );

While this will create the list items and add them to the target listview ul element, JQM will not auto enhance the newly added items unless instructed to do so. I imagine this is due to a necessary design decision as, constantly monitoring the DOM for changes would certainly incur a performance hit.

In order to correct this, we just need to invoke .listview("refresh"); after appending the new elements to the list. This will notify JQM to apply the expected enhancements. And so, the following example will result in the expected list enhancements being applied:

var list = "",
    items = [{name: "Item A", url: "/#item-a"},
             {name: "Item B", url: "/#item-b"},
             {name: "Item C", url: "/#item-c"}];

$.each( items, function( i, item ) {
    list += ‘<li><a href="’ + item.url + ‘">’ + item.name +‘</a></li>’;
});
$("ul:jqmData(role=’listview’)").append( list ).listview("refresh");

You can try an example which demonstrates both of the above implementations here.

November 18, 2011 AJAX / APIs / HTML5 / JavaScript / jQuery / jQuery Mobile
No comments

jQuery Mobile 1.0 Released

, the jQuery Mobile Team announced the official release of jQuery Mobile 1.0.

Having worked with jQuery Mobile since Alpha 1, in the time since, the framework has certainly evolved into a mature, premier platform on which Mobile Web Applications can be built.

On a personal note, as I am currently in the process of working towards the release of a multi form-factor Mobile Web Application built on jQuery Mobile, the 1.0 release couldn’t have come at a better time.

Be sure to check out the updated API Docs, especially the new Data Attributes section.

jQuery Mobile 1.0 represents a significant milestone in the Mobile Web Space. I am certainly excited to see what is on the roadmap next.

November 17, 2011 AJAX / Browsers / CSS3 / HTML5 / iPad / iPhone / JavaScript / jQuery / Mobile Web / News / Tablets
No comments

Test Driven Javascript with QUnit

For the past year I have been using jQuery Mobile for developing web based mobile applications leveraging HTML5, CSS3 and JavaScript. Like all UI implementations, meaningful test coverage is essential to ensuring requirements have been met and refactoring can be achieved with confidence. Building applications for the Mobile Web is no different in this respect. And so, a high quality Unit Testing framework is as essential to the success of Mobile Web Applications as it is to their Desktop counterparts.

Why QUnit?

While there are quite a few good JavaScript Unit Testing Frameworks available, Jasmine in particular, I have found QUnit to best suit my particular needs for implementing Test Driven Development in JavaScript based on it’s clean design and practical implementation.

A Simple, Powerful API

The power of QUnit lies in it’s simple and a rather unique approach to Test Driven Development in JavaScript. The QUnit API introduces a few slightly different test implementation concepts when compared to the more traditional xUnit style of TDD. In doing so, QUnit succeeds in simplifying some of the tedium of writing tests by leveraging the language features of JavaScript as opposed to strictly adhering to the more traditional xUnit conventions, the design of which is based on an fundamentally different language idiom – that is, Java.

For example, consider the follow which tests for a custom data namespace attribute in jQuery Mobile:

test("Test expected namespace override", function() {
    var expected = "someNamespace-";
    var actual   = $.mobile.ns;
    equal(actual, expected, "expecting namespace to have been set.");
});

Figure 1 (run) (source)

The above test may appear quite straightforward, yet it serves as a good example by illustrating how each test in QUnit is implemented by the QUnit test fixture. The first argument is simply a String which describes the test case. This is quite convenient in that the intent of a particular test case can be expressed more naturally in textual form as opposed to using a long, descriptive test method name. The Second argument contains the actual test implementation itself, which is defined as an anonymous function and passed as an argument to QUnit.test.

As you may have also noticed from the above example, there are some, perhaps subtle, differences between the QUnit style of testing and the traditional xUnit style. Specifically, whereas in xUnit assertions expected values are specified first and preceded by actuals, in QUnit actuals are specified first followed by expected values. This may feel a bit odd at first however, after a few tests it’s easy to get used to. Additionally, where an assertion message is specified before any arguments in xUnit, in QUnit assertion messages are specified after all arguments. With regard to test descriptions, this is a difference I prefer as, a test message is always optional so passing this value last make sense. While somewhat subtle differences, these are worth noting.

A Complete Example

As code can typically convey much more information than any lengthy article could ever hope to achieve, I have provided a simple, yet complete, example which demonstrates a basic qUnit test implementation. (run) (source).

September 19, 2011 Agile / AJAX / CSS3 / HTML5 / iPad / iPhone / JavaScript / jQuery / jQuery Mobile / Mobile / Mobile Web / Refactoring / Software Engineering / Tablets / Test Driven Development / User Experience Design
No comments

Web Timing Specification

The Web Timing Specification (draft) aims at providing a standard set of APIs which allow for true end-to-end instrumentation of page load times across browsers.

To quote the w3 spec: “This specification (Web Timing Specification) defines an interface for web applications to access timing information related to navigation and elements.” The API is based on the Navigation Timing and Resource Timing interfaces, respectively.

While I haven’t seen this specification mentioned as part of the HTML5 Family before, in many ways I would consider it to be a worthy candidate for membership as it provides a standards based API through which web applications can be tested for load efficiency. This is obviously something quite useful for any web application as, the ability to precisely measure page load times – and implement optimizations as needed – affords developers the opportunity to provide an improved user experience.

Historically, the ability to accurately measure page load times of web applications has been quite challenging for a number reasons. Just knowing when and where to begin is debatable and, determining the best means of doing so can be a challenge in of itself. Regardless of any current strategies being used, the result is never entirely accurate. With Web Timing developers need not be concerned with these specifics as the API provides the ability to truly measure page load times by encompassing the full scope of loading and parsing a page. This includes the time involved to request, receive and render an HTML document.

For more information, try out the examples in the current supported browsers; IE9, Chrome 6.

July 20, 2010 AJAX / Android / APIs / HTML5 / iPad / iPhone / JavaScript / Mobile
No comments

InsideRIA.com

InsideRIA.com

O’Reilly and Adobe have teamed up to create an invaluable online community for RIA developers. This new project will provide up-to-date information on the ever-changing state of design and development in the Rich Internet Applications (RIAs) space.

Rich Tretola will be championing the effort for InsideRIA as the Community Manager.

Show your support so we can make InsideRIA the number one place on the Internet for Rich Internet Application resources and information.

January 23, 2008 AJAX / News
No comments

AS3 JSONDecoding Class

I added a simple JSON decoding class to the ActionScript 3 source code page of my blog today. This is a useful base class which you can extend to use a JSON object as a data source.

The JSONDecoder class defines a simple set of methods for loading a JSON encoded object from a specific URI, decoding the result into an ArrayCollection of ActionScript Objects, and displaying any errors that may occur.

JSON (JavaScript Object Notation) objects are a lightweight data-interchange format which are very useful due to the fact that they are language independent. JSON objects are simple objects comprised of name / value pairs which are easy to use with any language such as C, C++, C#, Java, JavaScript, ActionScript etc.

August 26, 2006 AJAX / News
No comments

Apollo: FAQ

Adobe released the updated FAQ for Apollo last week. If you are not familiar with Apollo, it is a cross-operating system runtime being developed by Adobe. Apollo aplications can be developed using either the Flex framework, Flex Builder, Flash 9, or html and Javascript. It is a standalone runtime that dows not require a browser.

To learn more about this revolutionary runtime from Adobe read the FAQ: http://labs.adobe.com/

July 27, 2006 AJAX
No comments
← Older Entries