December » 2011 » Eric Feminella

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:

From your iOS Device, open Settings.
Go to Wi-Fi, select your Network and select the Blue “arrow” icon.
Scroll to HTTP Proxy and select the Manual Button.
In the Server field, enter the IP address of your development machine.
In the port field, enter port 8888 (the default port to which Charles binds).
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.

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 for 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.

Using the Plugin

Using the jQote2 Template Loader plugin is rather straight forward. Simply include jQuery, jQote2 and the jquery.jqote2.loader-min.js script on your page.

As a basic example, assume a file named example.tpl exists, which contains the following template definition:

<script type="text/html" id="articles_tpl">
    <![CDATA[
        <% var article, i, n;
           
           for ( i = 0, n = this.articles.length; i < n; i++ ) {
                 article = this.articles[i]; 
         %>
            <article>
                <header>
                    <h1><%= article.name %></h1>
                </header>
                <p><%= article.text %></p>
            </article>
        <% } %>
    ]]>
</script>

<![CDATA[

<% var article, i, n;

for ( i = 0, n = this.articles.length; i < n; i++ ) {

article = this.articles[i];

</header>

</article>

<% } %>

]]>

</script>

We can load the example.tpl template file described above via $.jqoteload as follows:

$.jqoteload( 'example.tpl', function( templates )
{
    // create some mock articles...
    var articles = [ { name: 'Article A', text: 'Articles A test...'},
                     { name: 'Article B', text: 'Articles B test...'},
                     { name: 'Article C', text: 'Articles C test...'} ];
    // Render the articles...
    $('#articles').jqoteapp( templates.articles_tpl, { 'articles': articles } );
});

$.jqoteload( 'example.tpl', function( templates )

{

// create some mock articles...

var articles = [ { name: 'Article A', text: 'Articles A test...'},

{ name: 'Article B', text: 'Articles B test...'},

{ name: 'Article C', text: 'Articles C test...'} ];

// Render the articles...

$('#articles').jqoteapp( templates.articles_tpl, { 'articles': articles } );

});

After example.tpl has been loaded, from another context we can access the compiled templates via their template element id. In this example "articles_tpl".

//... within some other context, access the same compiled template
var template = $.jqoteret( 'articles_tpl' );

//... within some other context, access the same compiled template

var template = $.jqoteret( 'articles_tpl' );

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 / jQuery / Template Engines

3 comments