Oh by the way, did I mention that I hate Javascript?

Been a long while since I published here. Figured out how to create native-looking iPhone/iPad applications from HTML, CSS and JavaScript. Oh by the way, did I mention that I hate javascript? Messy, and disorganized; a hodge-podge of syntax and structure. I can go on and on, but I digress.


http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

I coupled the concepts found in the above article with the JQuery Mobile javascript library, and the results are pretty impressive. This MOBILE app allows you to search on GEDS on a nice clean interface that works on iOS and Android. The mobile app screen-scrapes the actual site to generate the results.

http://myGEDS.alexandredorion.kodingen.com/index.html

For posterity sake, I’ve included the code below. The PHP routines are your standard URL forwarders, supporting the underlying AJAX function. Only had to trim and translate a few characters.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">>
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-icon" href="mygedsicon.png" />
    <link rel="apple-touch-startup-image" href="splash2.png" />    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script>
    $(document).bind("mobileinit", function()
    {
        $.mobile.page.prototype.options.backBtnTheme = "b";
    });
    </script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <script>
    function getGEDS()
    {
        var SV = $('#SV').val();
        var SF = $('#SF').val();
        var ST = $('#ST').val();
        if (SV == "")
        {
            $("#alert_no_result").hide();
            $("#alert_missing").show();
            $.mobile.changePage( $("#alert"), {transition: "pop"} );
            return;
        }
        var build = "SV="+SV+"%26SF="+SF+"%26ST="+ST+"%26x=1%26y=1";
        while (build.search(" ") != -1) {build = build.replace(' ', '+');}
        while (build.search(",") != -1) {build = build.replace(',', '%2C');}
        var $results = $();
        $.get("./geds.php?"+ build +" #center", function(data)
        {
            $results = $(data);
            var titles = "";
            var heading = $results.find('#center h1').text();
            if (heading == "Search Results")
            {
                $("#alert_missing").hide();
                $('#alert_no_result').show();
                $.mobile.changePage( $("#alert"), {transition: "pop"} );
                return;           
            }
            titles += '<li data-role="list-divider">'+ heading +'</li>';
            if ($results.find('.option1').text() != "")
            {
                var link = $results.find('.rightAlign a:first').attr('href');
                link = link.replace("FE", 'RE');
                getDetails(link);
                return;
            }
            $results.find('#center div ul li a').each(function(index)
            {
                if (index % 3 == 0)
                {
                    var link = $(this).attr('href');
                    var info = $(this).attr('title');
                    info = info.replace('; ', '<br>');
                    titles += "<li><a href='#' onclick=getDetails('"+link+"') >";
                    titles += info + "</a></li>";
                }
            });
            $('#results').html(titles);
            $.mobile.changePage($("#list"), {transition: "fade"});
            $('#results').listview('refresh');
        });
    } 
    function getDetails (link)
    {
        var build = link;
        while (build.search(",") != -1) {build = build.replace(',', '%2C');}
        while (build.search(" ") != -1) {build = build.replace(' ', '%20');}
        $.get("./details.php?d="+ build, function(data)
        {
            var $results = $(data);
            var $links = $results.find('#center .option1 .text div ul');
			$results.find('#center .option1 .text div').remove();
			var info = '<li data-role="list-divider">'+$results.find('#center .option1 h1').text()+'</li>';
			info += '<li><p>'+$results.find('#center .option1 .text').html()+'</p></li>';
			var phone_pattern = /[0-9][0-9][0-9].[0-9][0-9][0-9].[0-9][0-9][0-9][0-9]/;
			var num = info.match(phone_pattern);
			var phoneLink = "<strong>"+ num + "</strong><br><br><a data-theme='b' data-role='button' href='tel:"+num+"'>Call Now</a>";
			info = info.replace(phone_pattern, phoneLink);
            info += '<li data-role="list-divider">Organizational Structure</li>';
			$links.find('li a').each(function()
			{
				info += '<li data-theme="e">'+$(this).text()+'</li>';
			});
            $('#user').html(info);
            $.mobile.changePage( $("#details"), {transition: "fade"} );
            $('#user').listview('refresh');
        });
    }
    </script>
</head>
<body>
<!-- ----------------------------------------------------------------------- -->
<div data-role="page" id="home">
    <div data-role="header" >
        <h1>myGEDS</h1>  
    </div>
    <div data-role="content" >
        <ul data-role="listview" data-inset="true" data-theme="c" data-divider-theme="a">
            <li data-role="list-divider"  >
                Search Criteria:
            </li>
            <li>
                <input type="search" name="SV" id="SV" value="" data-theme="d" />
                <select name="SF" id="SF">
                    <option >Surname, Given name</option>
                    <option >Surname</option>
                    <option >Given name</option>
                    <option >Telephone number</option>
                    <option >Title</option>
                    <option >Organization</option>
                    <option >Role</option>
                </select>
                <select id="ST" name="ST">
                    <option >begins with</option>
                    <option >contains</option>
                    <option >ends with</option>
                    <option >approximate</option>
                    <option >exact</option>
                </select>
            </li>
        </ul>
        <a href="#" onClick=getGEDS() data-role="button" data-theme="b">Search</a> <!--href="#" -->
    </div>
    <div data-role="footer" data-id="myfooter" data-position="fixed" >    	
        <div data-role="navbar">
            <ul>
                <li>
                    <a href="#info" data-icon="info" data-transition="slideup" >Info</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- ----------------------------------------------------------------------- -->
<div data-role="page" id="list" data-add-back-btn="true" data-position="fixed">
    <div data-role="header" >
		<h1>Listing</h1>
    </div>
    <div data-role="content" >
        <ul data-role="listview" data-inset="true" id="results" data-theme="c" data-divider-theme="a"> 
        </ul>
    </div>
</div>
<!-- ----------------------------------------------------------------------- -->
<div data-role="page" id="details" data-add-back-btn="true" data-position="fixed">
    <div data-role="header" >
        <h1>Details</h1>
    </div>
    <div data-role="content" >
        <ul data-role="listview" data-inset="true" id="user" data-theme="c" data-divider-theme="a" >
        </ul>
        <br>
    </div>
</div>
<!-- ----------------------------------------------------------------------- -->
<div data-role="dialog" id="info" >
    <div data-role="header" >
        <h1>Information</h1>
    </div>
    <div data-role="content" id="details" >
        <h3>MyGEDS v0.2</h3>
        <p>Unofficial and unsupported mobile GEDS Web Application developed for iPhone with JQuery Mobile 1.0 Final.<p>
        <p>Questions can be sent to:
        <a data-inline="true" href="mailto:alexandre.dorion@pwgsc.gc.ca?subject=myGEDS Comment">alexandre.dorion@pwgsc.gc.ca</a></p>
        <br>
        <a href="#home" data-direction="reverse" data-role="button" data-transition="slideup" data-theme="b">OK</a>
    </div>
</div>
<!-- ----------------------------------------------------------------------- -->
<div data-role="dialog" id="alert" data-add-back-btn="true" >
    <div data-role="header" >
        <h1>Alert</h1>
    </div>
    <div data-role="content" data-theme="e" >
        <div id="alert_missing" >
            <h3>Missing Search Value</h3>
            <p>Please revise and try again.</p><br>
            <a href="#home" data-direction="reverse" data-role="button" data-transition="pop" data-theme="b">OK</a>
        </div>
        <div id="alert_no_result" >
            <h3>No Search Results</h3>
            <p>Please revise and try again.</p><br>
            <a href="#home" data-direction="reverse" data-role="button" data-transition="pop" data-theme="b">OK</a>
        </div>
    </div>
</div>
<!-- ----------------------------------------------------------------------- -->
</body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s