Odynia.org Blog - Web Development

Google releases Chrome

nospam@example.com (Robert Amos) — Thu, 04 Sep 2008 03:18:09 +1000

So! Google has finally made its entry into the browser market, and its filled with lies!

Specifically:

Google's new browser software is designed to work "invisibly" and will run any application that runs on Apple's Safari web browser, company officials said.

and

"If you are webmaster, and your site works in Apple Safari then it will work very well in Google Chrome," Pichai said.

So then, fire up Chrome and point it at http://iphone.itransit.com.au/.

So, it seems that not all sites that work in Safari will work under Chrome. Its a fair assumption that most sites don't make heavy use of window.openDatabase (HTML 5 spec) but its still inaccurate to say that all sites that work in Safari will work under Chrome.

Wonder if thats just time/laziness on Google's part not to pull across a more recent version of WebKit or because they wrote their own JS engine (that should be outside the JS engine though..), or because its a competing feature against Google Gears?

Hopefully not the latter. It would be nice to see where Google takes Chrome though as the beta progresses.

Otherwise though, not bad

Update: Looks like they're using the "Safari 3.1" branch of Webkit for the beta, which does support window.openDatabase just fine. Seems to be a compile time option and they're choosing to disable it. More info/source over at http://dev.chromium.org/.

bok

iPhone + Safari + Gestures

nospam@example.com (Robert Amos) — Wed, 23 Jul 2008 08:54:22 +1000

Looking for iTransit? Check two posts down.

--

Been playing with touches in Safari, specifically trying to track certain gestures.

If you haven't read it, a good primer on touches/gestures in Mobile Safari can be found here. Its a great starting point.

So now that the its been established as to how to do Drag and Drop and rotating/scaling what about the other one finger gestures that apple employs?

Specifically, I'm trying to replicate the swipe left and right functionality of the photo browser (show previous/next photos), and I've been able to do so.

The trick here is to catch the initial touch event, and the ending touch event and work out where our finger has gone. A key thing to remember is that the touches are passed around and updated by reference, so your original copy of the touch will be updated with a new position.

What I've ended up with is a small class that watches the touchstart and touchend events on the document level, and when it detects a swipe it fires a gesture:swipe event.

How?

The following is the code that I used, you'll need Prototype to make this work.

Click on a comment to hide it. Click here to show all comments.


var GestureClass = Class.create

({

    // Fired when a new instance of this object is made

    initialize: function () {



        // listen for start/stop events

        document.observe('touchstart', this.start.bind(this));

        document.observe('touchend', this.end.bind(this));



        // touch storage

        this.gestures = [];

    },



    start: function (e) {

        // currently only support one finger on the viewport

        if (e.touches.length == 1) {

            var touch = e.touches[0];

            // store the touch for later

            this.gestures[touch.identifier] = Object.clone(touch);

            this.gestures[touch.identifier].date = new Date();

        }

    },

    end: function (e) {



        // still only one finger

        if (e.changedTouches.length == 1) {



            // get the most recent touch

            var end = e.changedTouches[0];

            end.date = new Date();



            // get the position that we started at

            var start = this.gestures[end.identifier];



            // and the duration of our swipe? number of milliseconds the gesture took

            var duration = end.date.getTime() - start.date.getTime();



            // calculate offsets

            var horizontalMovement = start.clientX - end.clientX;

            var verticalMovement = start.clientY - end.clientY;



            // big enoug to count as a swipe? and quick enough

            var viewport = document.viewport.getDimensions();

            if (Math.abs(horizontalMovement) >= (viewport.width/2) && duration <= 800) {



                // this object is passed to the new event under the 'memo' property

                var gesture = {

                    start: start,

                    end: end,

                    gesture: 'swipe',

                    direction: (horizontalMovement >= 0 ? 'left' : 'right')

                };



                // Fire the gesture, listen with document.observe('power:swipe', <function>);

                document.fire('gesture:swipe', gesture);

            }

        }

    },

});

var Gestures = new GestureClass();

Is that documented enough to make sense? Drop me a line in the comments if not and I'll see what I can do to explain better

You'll see this gesture used in the new version of iTransit, naturally - and there's more gestures to come!

Cheers,
-bok

iTransit

nospam@example.com (Robert Amos) — Thu, 17 Jul 2008 08:11:14 +1000

Hi all,

While I'm quietly working on a new version of iTransit (iui is a bit bloated...) you're invited to continue to check out the current version @ http://iphone.itransit.com.au/.

Presently it is for Melbourne only, other cities are on my medium-range radar.

Here's whats coming:

Smaller, sleeker, faster!
Favourites
Searching via station/stop name
Bus data
Traffic Information
VLine Train/Bus data
Swipe to view next/previous services
Other cities...
Investigate LocationService (GPS) integration

The current aim for iTransit is to be something that you can whip out on the go to find out info live - as such browsing timetables won't be a focus.

Comments, suggestions and other feedback is very valued. Feel free to leave a comment below or via the app.

Cheers,
bok

Melbourne Public Transport + Google Maps

nospam@example.com (Robert Amos) — Fri, 04 Jul 2008 14:28:35 +1000

While I'm detailing apps that I've played with but never published, there's the beginning of something larger with regards to Melbourne's Public Transport system.

For the moment, its just a google maps version of the network maps with some station/stop info, but you can check it out at http://transport.odynia.org/maps/.

I had planned on going the full stretch and making it the ultimate resource of its type, but my time doesn't seem to be my own lately!

bok

BUBBLES!

nospam@example.com (Robert Amos) — Tue, 22 Aug 2006 09:35:51 +1000

The future.. is Bubbles!

Weeeee

Yes, so I am excited, watch this space!

-bok

Playing with Grids

nospam@example.com (Robert Amos) — Wed, 02 Aug 2006 09:43:48 +1000

This seems to be the most popular subject available on this blog. Seems no one has tried playing with the Microsoft CRM grids as much as me, which is rather interesting

A while back I touched on how to "colourise" the grid rows, a reader comment got me thinking about how I could satisfy an internal request here. In our old system, they used a dummy entry to trigger a filter which changed the formatting to highlight it. IE they created a record of type "notice" and it would make it bold and bright purple! Couldn't miss it!

So they've asked whether it would be possible to implement something similar with CRM. As these screenshots show, it is!

Before

After

As you can see, a huge improvement, they should have no problems working out that there are no more repairs to be booked for those days

This uses the same colourising code as the previous post, with a few additions

Click on a comment to hide it. Click here to show all comments.


// if someone can work out why the computers here insist the week starts at Thursday what would be
good

var days = new Array ('Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday',
'Wednesday');

var months = new Array('', 'January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December');

var suffixes = new Array('', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'st',
'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'st', 'nd', 'rd',  'th', 'th', 'th', 'th',
'th', 'th', 'th', 'st', 'nd', 'rd',  'th', 'th', 'th', 'th', 'th', 'th', 'th');



    // OLD STUFF



    // ok so what we need to do, is go through each and er, change em?

    var nextcolour;

    var index;

    for (var i = 0; i < grid.childNodes.length; i++)

    {



        // NEW STUFF -->

        // for repairs

        if (table == 'repairs')

        {

            // pull out the entire row if the name happens to be the bookings one.

            if (grid.childNodes[i].childNodes[4].firstChild.firstChild.oid ==
'{9E05CB45-C407-DB11-ADB9-0003FF03C872}')

            {

                // get the date

                var bdate = new Date();

                var byear = grid.childNodes[i].childNodes[5].firstChild.innerText.substring(6,
10);

                var bmonth = grid.childNodes[i].childNodes[5].firstChild.innerText.substring(3,
5);

                var bday = grid.childNodes[i].childNodes[5].firstChild.innerText.substring(0, 2);

                bdate.setFullYear(byear, bmonth, bday);

            

                // take the entire row, and suck it out of existance - except for the one field
with our text!

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[10]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[9]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[8]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[7]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[6]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[5]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[3]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[2]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[1]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[0]);

                

                // expand our row

                grid.childNodes[i].childNodes[0].colSpan = 11;

                

                

                // remove the existing text

               
grid.childNodes[i].firstChild.firstChild.removeChild(grid.childNodes[i].firstChild.firstChild.firstChild);



                // build our new span

                grid.childNodes[i].firstChild.firstChild.innerHTML = 'No more repairs to be booked
in for ' + days[bdate.getDay()] + ', ' + bdate.getDate() + suffixes[bdate.getDate()] + ' ' +
months[bdate.getMonth()] + ' ' + bdate.getFullYear();

                grid.childNodes[i].firstChild.firstChild.style.textAlign = 'center';

                grid.childNodes[i].firstChild.firstChild.style.fontWeight = 'bold';

                grid.childNodes[i].colourised = true;

                continue;

            }

        }



        // <-- END NEW STUFF





        // OLD STUFF

        // for everything

        index = grid.childNodes[i].childNodes[col].firstChild.innerText;

        if (colourmatrix[index] != null)

        {

            nextcolour = colourmatrix[index];

            grid.childNodes[i].style.backgroundColor = '#' + nextcolour;

            grid.childNodes[i].colourised = true;

        }

    }

This will take the contents of a lookup field in the grid, check its GUID against the correct one, and if it is remove all TD's from the field except for the one containing the lookup, and then expand and modify it.

Now please remember, this is a VERY BASIC example. If you modify the view at all or the view contains different fields it won't work. This goes for all grid modifying via javascript. Its also very definitely NOT SUPPORTED by Microsoft. So don't ask them.

From Steve:

Hi, I'm thinking whether we can modify the grid view such as add .gif images in the column?

I need to do that because there's a user requirement which the customer wants me to show different gif images (like traffic lights) based on the status....

Do you have any idea?

Sure do Steve!

What you would do, is once you are in the loop checking each row, instead of replacing the background colour (or in addition to) you could add an image to a column, or replace the icon. To replace the icon you would be looking at something like:


grid.childNodes[i].childNodes[1].innerHTML = '<img src="http://server/your/img_here.gif" alt=""
/>';

This has been tested and seems to work

As always, I hope this helps someone!

-bok

Update!

I get several requests a week for the content of statuses.aspx, and given that I don't actively work with Microsoft CRM anymore I figure it might just be easier if I post the source here. Feel free to comment if you need help, keep in mind though that I'll probably be a bit rusty by now


<%@ Page Language="c#" Debug="true"%>

<%@ Import Namespace="crm" %>

<%@ Import Namespace="metadata" %>

<%

    MetadataService service = new MetadataService();

    service.Credentials =

System.Net.CredentialCache.DefaultCredentials;



    // table

    string table = "";

    switch (Request.QueryString["table"])

    {

        case "cases":

            table = EntityName.incident.ToString();

            break;

        default:

            Response.Write("<error>Invalid Table specified</error>");

            return;

    }



    // get the data!

    StatusAttributeMetadata statuscode = (StatusAttributeMetadata)

service.RetrieveAttributeMetadata(table, "statuscode");

    Response.ContentType = "text/xml";



    Response.Write("<statuses>");

    ArrayList list = new ArrayList();

    foreach (StatusOption option in statuscode.Options)

    {

         Response.Write("<status><text>" + option.Description + "</

text><integer>" + option.OptionValue.ToString() + "</integer></

status>");

    }

    Response.Write("</statuses>");

%>

Xnyo Development

nospam@example.com (Robert Amos) — Thu, 27 Jul 2006 06:54:58 +1000

Well its official...

There's 116 pages of the Xnyo source printed out in pretty syntax-colours on my desk with a plethora of scribbles, crosses-out, adjustments and notes on there. I've found ALOT of areas that I'm just not satisfied with and want to redo. So I dare say this will end up being a full re-write.

I'll try to make it as backwards compatible as possible, but one thing is for sure, this will be a forward looking rewrite, meaning that unfortunately it won't be PHP4 compatible. I want to start making use of exceptions and better OO practices. Things like autoloading will be incorporated into the plugin system. Exceptions for the errors, __get() and __set() for config options. I'll investigate extra things like PDO and the new filter extension that'll be in 5.2 (which functions remarkably similar to my filter stuff..) and see how they go. I'll keep this blog up to date with development notes as I go.

Should be interesting

-bok

Xnyo, Smarty, AJAX

nospam@example.com (Robert Amos) — Wed, 19 Jul 2006 07:02:47 +1000

Been playing recently with ideas on what I could make Xnyo's AJAX functionality look like. I've started to take a basic look at how other libraries are doing it, so this may evolve in the furture.

So far, I have this:

Click on a comment to hide it. Click here to show all comments.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title>Login</title>

</head>

<style type="text/css">

    #loginbox

    {

        position: absolute;

        top: 200px;

        left: 200px;

        border: 1px solid #000000;

        background-color: #8f9cdd;

        padding: 10px;

        text-align: right;

    }

</style>

<body>

<form name="login">

{effect action="shake" on="login_failure"}

<div id="loginbox">

    <div id="userdiv">Username: <input type="text" name="username" id="username" /></div>

    <div id="passdiv">Password: <input type="password" name="password" id="password" /></div>

    <div id="submitdiv"><button id="login" value="Login" onclick="{post target='xnyo.login'
ids='username,password'}" on_error="login_failure" /></div>

</div>

{/effect}

</form>

</body>

</html>

this is very very early stages yet, just me mainly pushing some ideas onto something more concrete than my brain.

The basic idea here, is that the {effect} function will create an event (or function?) called login_failure that will call the shake effect on the first element found inside it. The {post} function seen in the button element will then post to Pavid (the Xnyo XMLRPC backend) calling the $xnyo->login() method, passing the values of the username and password field. On an error it would trigger the login_failure event, causing the loginbox to shake.

Make sense? Please feel free to leave any comments.

-bok

PHP Security

nospam@example.com (Robert Amos) — Thu, 29 Jun 2006 04:08:47 +1000

It seems that once again people are trying to spread Fear Uncertainty and Doubt (FUD) about the security of PHP. The article http://www.owasp.org/index.php/PHP_Top_5 lists what they consider to be PHP security faults.

This is simply not true. None of the faults listed here are actually PHP-specific. The items they list could occur on any programming language if the programmer was sufficiently inexperienced. Further, any and all of the faults have been made harder to access by recent versions of PHP.

The article does make for a good read though, on some of the basic security practices you should undertake on any language, and would likely have been well received if not worded in such a manner that it could be perceived as an attack

Remember though, a programming language is only as secure as the person using it. Read up on your security practices and you'll be right. Pay attention to security announcements, most major open source projects have them in an easy to access place, and always keep your software uptodate with patches!

-bok