Web Development - Odynia.org Blog

Thursday, September 4. 2008

Google releases Chrome

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

Posted by Robert Amos in Web Development at 03:18 | Comments (0)

Wednesday, July 23. 2008

iPhone + Safari + Gestures

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

Posted by Robert Amos in Apple / Mac / iPhone, Web Development at 08:54 | Comments (0)

Thursday, July 17. 2008

iTransit

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

Posted by Robert Amos in Apple / Mac / iPhone, iTransit, Web Development at 08:11 | Comments (5)

Friday, July 4. 2008

Melbourne Public Transport + Google Maps

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

Posted by Robert Amos in Web Development, Xnyo at 14:28 | Comments (0)

Tuesday, August 22. 2006

BUBBLES!

The future.. is Bubbles!

Weeeee

Yes, so I am excited, watch this space!

-bok

Posted by Robert Amos in Xnyo at 09:35 | Comments (0)

Wednesday, August 2. 2006

Playing with Grids

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>");

%>

Posted by Robert Amos in Microsoft CRM at 09:43 | Comments (0)

Thursday, July 27. 2006

Xnyo Development

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

Posted by Robert Amos in Xnyo at 06:54 | Comments (0)

Wednesday, July 19. 2006

Xnyo, Smarty, AJAX

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

Posted by Robert Amos in Xnyo at 07:02 | Comments (0)

Thursday, June 29. 2006

PHP Security

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

Posted by Robert Amos in PHP at 04:08 | Comments (0)

Showing / Hiding Fields For User Who Created Item

Ronald Lemmen has recently pulled out several stops in what was possible with CRM in his attempts to be able to show and hide fields based on the user logged in, and what roles they have.

I won't repeat his excellent work, but I will put forth an idea I had as to another possible use, one which I've had to implement here to keep up with Management's demands..

In this one, using Ronald's code to get the user id of the logged in user, we can compare it to the created by field. This of course requires that we have the created by field on the form somewhere. Then you can use the following code (the getUserId() function is from Ronald's blog) to check whether this is the user who created this object, and show/hide a section (or field or tab or whatever) based on that information.

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


function getUserId()

{

    try

    {

        var command = new RemoteCommand("SystemUser", "WhoAmI", "/MSCRMServices/");

        var oResult = command.Execute();



        if (oResult.Success)

        {

            return oResult.ReturnValue.UserId;

        }

    }

    catch(e)

    {

        alert("Error while retrieving userid.");

    }

    return null;

}





// test whether the logged in user is the person who created this object

if (getUserId() == crmForm.all.createdby.DataValue[0].id))

{

    // show something

    alert('They created this item!');

} else

{

    // something else

    alert('They did not create this item!');

}

It's a really simple idea. Can have some interesting uses, particularly if you combine it with the Security Role functions. This means you could make it so that only the person who created the item can change certain values, unless they're a high level manager.

Think about it

Happy Coding!

-bok

Posted by Robert Amos in Microsoft CRM at 03:50 | Comments (0)

Wednesday, June 21. 2006

"Colourising" Microsoft CRM Grids

Recently I came up with a nice idea: what if we could shade the rows in grids?

I thought through it, and realised it was possible. Of course its not possible to make it automatically colourise the grid, at least not without editing the aspx pages and that would go well beyond the realms of the supported customisations.

Before we go further, please remember that this is not a supported customisation either as it involves searching/editing the html output, which Microsoft is well within its right to change at any time.

The code that does this is split into two bits. You could go ahead and add the "colourise" code to the isv.config.xml file, but i really hate editing that all the time

So instead, I use our "javascript include" function to pull across another javascript file.

Like so:


<Button Title="Colourise" ToolTip="Colourise active grid view"
Icon="/_imgs/ico_16_salesprocess_stage.gif" JavaScript="if(window.colourify==null){var x=new
ActiveXObject('Msxml2.XMLHTTP');x.open('GET',
'http://crmextensions/scripts/colourify.js',false);x.send('');eval(x.responseText);var
s=x.responseText.split(/\n/);var r=/function\s*([a-z_]+)/ig;for(var i=0;i&lt;s.length;i++){var
m=r.exec(s[i]);if(m!=null)window[m[1]]=eval(m[1]);}window.colourify=true;}colourify_status();"
Client="Web" />

That loads up the following script.

scripts/colourify.js

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


/**

 * Colourify

 *

 * Alters the background colours of the active grid view.

**/

var colours = new Array

(

    "",

    "BAEAF0", "70D6D6", "8CD9FF", "CDEEF0",

    "E0FFFF", "67E6EC", "E6E8FA", "B0E0F0",

    "D1EEEE", "ADEAEA", "75A1D0", "BCD2EE",  

    "B9D3EE", "9AC0CD", "9FB6CD", "9BC4E2",

    "8FD8D8"

);

var highlight_colour = "E0A6C2";



/**

 * Colourise based on the status of the field

**/

function colourify_status ()

{



    /**

      * Locate the "type" of the grid. We use the blue title thing for that

    **/

    var t = top.frames[0].document;

    var type = t.getElementById('tdStageContextBar').innerText;



    /**

     * What type of grid are we colourising? We only support cases in this version.

    **/

    if (type == 'Cases')

    {

        var table = 'cases';               // the table name, for passing to the lookup script

        var col = 5;                        // the column position that our status is listed in

        var highlight = 'Not Started'; // status that we want to highlight to make it stand out

    } else

    {

        alert('We only support colourising Cases.');

        return;

    }



    // update the column to include the check box and icon

    col++;



    /**

     * Get our known case statuses. This page uses the Metadata Service to pull all the

     * possible status reasons out of the page. This ensures that the same statuses are

     * always the same colour.

    **/

    var x = new ActiveXObject("Msxml2.XMLHTTP");

    x.open('GET', 'http://crmextensions/lookup/statuses.aspx?table=' + table, false);

    x.send('');

    var s = x.responseXML.selectSingleNode('statuses');



    /**

     * Builds a "colourmatrix". That is, an array with Status => Colour

    **/

    var colourmatrix = new Array();

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

    {

        colourmatrix[s.childNodes[i].firstChild.text] = colours[s.childNodes[i].lastChild.text];

    }



    /**

     * Set the highlight colour

    **/

    if (colourmatrix[highlight] != null)

        colourmatrix[highlight] = highlight_colour;



    /**

     * Check to make sure that we're in the main CRM window. Abort if we can't find the grid

    **/

    if (top.frames[2].name != 'stage')

    {

        alert('Unable to colourise, not a standard layout.');

        return;

    }

    var d = top.frames[2].document;

    var grid = d.getElementById('gridBodyTable').lastChild;





    /**

     * Already colourised? Clicking again should turn it off, easiest way to restore the style

     * is to get the grid to refresh.

    **/

    if (grid.childNodes[0].colourised)

    {

        top.frames[2].window.crmGrid.Refresh();

        colourised = false;

        return;

    }



    /**

     * Loop through the grid rows and reset the background colour if its a known status.

     *

     * Also set the colourised flag on the row, a refreshed/clean grid won't have this set.

    **/

    var nextcolour;

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

    {

        nextcolour = colourmatrix[grid.childNodes[i].childNodes[col].firstChild.innerText]

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

        grid.childNodes[i].colourised = true;

    }

}

As you can see, it has limited application but can be useful for a "quick glance". Some shortcomings include not holding the colourised status through reloads, changing the grid page, resorting the grid, etc, as well as the loss of the blue "selected row", as you can see below this only comes up with a white font instead of black. This is also a basic prototype version. I'll extend it at some point in the future to be able to colourised based on owner, dates, or whatever columns are there

That's not a high priority for me at this point though, have a lot of "urgent" customisations to get done first.

I suppose I should show some screenshots of what this actually does..

Before

After

Enjoy!

-bok

PS. I've had several requests for the source to statuses.aspx. If you would like to see this leave a comment and I'll be happy to email it through, not going to post it here though as my C# is very basic - I've only been coding in it for 6 weeks

Update!


<%@ 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.To