A very brave guy from Microsoft’s Internet Explorer team in Redmond will be presenting the upcoming IE8 browser, followed by Robert O’Callahan from the Auckland Mozilla team that are working on the next version of Firefox. I’m impressed that Microsoft are doing this and I hope that the open source guys don’t give him too much trouble!

The agenda was set before anyone even knew about Google’s Chrome browser. 2008 is going to be the year of major browser releases and the implications for the web dev community are massive. I highly recommend making the effort to come along to this one.

This explains it best:

InfoConnect is an initiative to help ensure road users have access to timely and accurate road condition information.

InfoConnect is the destination for developers and companies wanting to access verified Highway Info data programmatically in order to fill a niche market by producing appropriate information channels for the travelling public.

Highway Info includes state highway road and traffic information, webcam coverage in Auckland, Wellington and Christchurch, planned road works, unplanned road closures and delays, maps, and holiday traffic information.

Essentially the goal is open up the data available within NZTA to third party developers and get them using it in a way that is going to help us all on the state highways around the country. This issue affect many New Zealanders and even something as simple as being able to check out which route to take home in rush hour is something that would be really helpful to many people. In winter, particularly in the Central North Island and South Island, this information is quite critical. Believe me I know, having driven through a blizzard just last month in Otago!

As part of the project, we have developed a couple of web apps for the iPhone to try and give other developers a taste of what is available and what they can do. We developed two applications:

iCam.markerstudio.com

This allows you to browse through the available traffic web cams and view them on your iPhone. These are static images, rather than streaming video, however, they will update automatically every 60 seconds. Handy if you are not sure which route to take to the airport or to go home. Thanks to Justin for helping me with this one and coming up with the way to do the image refresh within the limitations of the iPhone browser.

iTREIS.markerstudio.com

TREIS is the system where NZTA record all major road events that affect the national highways. This could include weather related issues such as snow causing a road to be closed, or scheduled events such as road works. They also issue general warnings for both the North and South Island.

As you will only be able to view these on an iPhone I have put together a movie that shows you how they work. If you do have an iPhone, please go to the above URL’s in Safari.

I’m interested in feedback, and am planning for us to build these into one integrated native iPhone application, which would be more powerful, as you could take advantage of the GPS capability. Please post your ideas and comments via this blog if you can? I am particularly interested to know if you think you would pay for this application?

If you are a developer, please check out InfoConnect and sign up so you can see what is on offer. Neither API is particularly complicated. I wrote the developer documentation, so if you have any questions or feedback on that, please let me know.

Technorati Tags: api, infoconnect, nzta, transit

One: FF3 is pretty bad ass.

Two: Some of your plug-ins are not going to work in FF3, especially if you use some obscure ones. And then there is the old web development mantra of “But does it work in <insert browser name + version here> ?”

MultiFirefox attempts to make the whole process easier, by managing multiple profiles easily and making switching between them simple.

MultiFirefox is only available for Mac at the moment and is on Donationware, but it looks like it could be very helpful to the web development crowd

Development Team Leader

This position requires a senior .NET developer with leadership skills and experience to lead a team in the implementation of web solutions for internal and external projects. Marker (www.markerstudio.com) is a leading independently owned New Zealand based full service digital agency, established in 2000. You will be developing projects for many well known companies in New Zealand, Australia and the UK, using the latest technologies available. There is a strong focus on Web 2.0 development with projects frequently integrating with third party API?’s including Google, Facebook, Flickr, and Salesforce.com.

We are seeking someone with the following skills:

• Passion for web application development
• Experience with ASP.NET/VB.Net/C#/SQL Server 2005
• AJAX.NET experience or equivalent such as JQuery or Prototype
• Understanding and project experience of working with content management systems
• Ability to analyze requirements to carry out database and system design
• Problem solving skills
• Great communication skills
• Ability to supervise a team
• 3 Years + commercial experience
• Self motivated, organized with time management skills

Senior .NET Web Developer

This position requires a senior .NET web developer to implement web solutions for internal and external projects. Marker (www.markerstudio.com) is a leading independently owned New Zealand based full service digital agency, established in 2000.You will be developing projects for many well known companies in New Zealand, Australia and the UK, using the latest technologies available. There is a strong focus on Web 2.0 development with projects frequently integrating with third party API?’s including Google, Facebook, Flickr, and Salesforce.com.

We are seeking someone with the following skills:

• Passion for web application development
• Experience with ASP.NET/VB.Net/C#/SQL Server 2005
• AJAX.NET experience or equivalent such as JQuery or Prototype
• Understanding and project experience of working with content management systems
• Ability to analyze requirements to carry out database and system design
• Problem solving skills
• Great communication skills
• Ability to work in a team environment
• 3 Years + commercial experience
• Self motivated, organized with time management skills

You will be working in a relaxed environment, which values your input and ideas. We are located in modern character offices just off Ponsonby Road in Auckland.

Apply direct and come in for a chat. If you have any questions about the role, please do not hesitate to call Jon Beattie, Managing Director, on 021 434 133.

careers@markerstudio.com

Some of the more noteable ones include the desktop version of Google Analytics Reporting Suite and the desktop version of Google Reader.

1. Using the rendermode attribute of the update panel control.

You can set different values to the rendermode attribute. Setting it to “ALWAYS” means that if you have any update panel on the page, anything that triggers an update in those other panels will all trigger an update in this panel as well, set the rendermode to “Conditional” means that this update panel is not updated by updates done to other update panels.
Using this method, if there are multiple update panels on the page, and you only want to update one panel not the other ones, then all update panels should be set with the render mode of “Conditional”. If in another situation, where there are only 2 update panels, and one will set off another one, then “Always” should be applied.

One good example would be that there is a modal form for adding a new record which is in one update panel, and in another update panel there is a search grid which displays all records, both has the value of always set in the rendermode. Once a new record is added, because always is set in the rendermode value, this will cause an refresh in the search grid update panel, which updates the grid with the new value. The code behind method can be applied for more than 2 update panels on the page, but only one update panel wants to be refreshed by another update panel’s update.

2. Update via an external button not in the update panel

Updates can be done via a button that is not placed in the panel it self, if the update panel needs to be updated via a button outside of the updatepanel for example, this can be done by adding a trigger like so.

<asp:LinkButton ID=”btnGoReceiver“ CssClass=”button green go” runat=”server” TabIndex=”6″><span>Gospan>asp:LinkButton>
<asp:UpdatePanel ID=”upReceiverDetails“ runat=”server” >
<ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID=”btnGoReceiver“ />
Triggers>
asp:UpdatePanel>

The above AsyncPostBackTrigger contains the id of an button outside of the update panel, when this particular button is clicked on, the update panel is refreshed without postback,hence the AsyncPostbackTrigger. You can also add a different tag of “PostBackTrigger” which will trigger an update to the update panel but causing a page refresh.

3.Update programmatically via code behind

An update can be done to the updatepanel via code, This can be done by referring to the update panel object and then calling the .Update function of the update panel object.

in aspx
..asp:updatepanel id=”up1 ..

in code behind
……
up1.update()
……

There are quite a few good situations where this can be used.

In one example, there is a grid display a list of vehicles, on the right side of the grid, we want to display the details of the vehicle when a person clicks an item in the grid, but we want to do this so the page does not refresh. The grid it self is placed in one update panel, on every row in the grid, a linkbutton with text of view details and command “view_details” is displayed. On the right hand side, the fields displaying the details are in a separate update panel. Because the linkbuttons are rendered dynamically, we can not add all linkbutton ids to the details update panel as triggers, and it would be too inefficient. So this is the perfect example to execute the update in the code behind. So in the row command function of the grid, when ever the view_details command is executed, the fields in the details panel are set with the vehicles values, and the details update panels update function is called. The update function basically tells the update panel to re-render the html.

Another situation is with the Masterpage structure in .Net, if you have one button in one content template wanting to update another update panel in another content template, this can not happen. The problem that is faced here is the control id in one content template is not recognised in another content template, so the only way to trigger this update is via code behind.

4. Update the update panel via javascript

You can trigger an update to the panel via some tricky javascript function call. First lets have a look how linkbutton works. If you had a linkbutton and looked at the generated html, on the onclick function you will notice a line of code simlar to this

<a id="ctl00_btnSubmit" class="textLeft" 

href="javascript:__doPostBack('ctl00$btnSubmit','')">Submit..

The href value is in fact just a javascript postback, so basically the postback of a link button is triggered via javascript. Understanding this concept, basically what it means is we could have a hidden button placed in the update panel that is not visible, and use the javascript line of __doPostBack(‘ct100$ButtonID’,”), this will be like clicking the button, and hence refreshing the update panel.

The situation on where this would be used is when there are interaction between a parent and child page. For example, the parent page contains a button of adding a new vehicle listing, clicking on the button opens a new page, once the new vehicle listing is added on the child page, the parent pages list grid is refreshed. Since the child page has no access to objects of the parent page in the code behind, we can not update the panel programmatic. To update the parent page, it can be done via javascript by creating a javascript function on the parent page, which executes the doPostBack of an hidden button in the update panel, on the child page, once the child page closes, a javascript call to the function on the parent page is called, this can be done by using the javascript parent.functionname.

Just recently, I have done a autocomplete using the toolkit’s autocomplete. What I wanted to do is using the autocomplete, search a receiver table, once a user selected a particular item in the autocomplete, the ReceiverID of the particular item is then somehow passed through to the code behind, and this ReceiverID is then used to display the receiver details in a panel below the autocomplete.

This was tricking as it involved both client side Javascript functions and code behind, but this was how I ended up doing it. First setup a normal ajax toolkit autocomplete, there is plenty of documentation out in the web world for this so I won’t go through in detail. In the webservice function where the data is retieved from the database, and added to a string array, the following will need to be used

Dim dr As System.Data.SqlClient.SqlDataReader
dr = dsReceverMgt.selectAllReceiverMnagement(prefixText)

While dr.Read
sQuickName = dr(“ReceiverQuickName”)
sCompany = dr(“ReceiverCompany”)
sLocationName = dr(“ReceiverAddressTown”)
Co = sQuickName & “,” & sCompany & “,” & dr(“ReceiverAddress1″) & “,” & sLocationName
If sQuickName.StartsWith(prefixText, StringComparison.OrdinalIgnoreCase) Or sCompany.StartsWith(prefixText, StringComparison.OrdinalIgnoreCase) Or sLocationName.StartsWith(prefixText, StringComparison.OrdinalIgnoreCase) Then
‘—add the member name to the list if the text starts with the variables—
listOfMembersStartsWith.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(Co, dr(“ReceiverPK”)))
Else
‘—add the member name to the list if the text contains the keyword but not as an prefix—
listOfMembersNotStartsWith.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(Co, dr(“ReceiverPK”)))
End If
End While

using this function AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem, the items is inserted with a value/text combination.

In the autocomplete declaration it self on the aspx code, this attribute need to be placed on the autocomplete OnClientItemSelected=”SetSelectedValue” , what this will trigger is on an selection in autocomplete, it will call a javascript function called SetSelectedValue, and here is the javascript declaration

function SetSelectedValue( source, eventArgs ) {
document.getElementById((‘ctl00_leftContent_SelectedReceiver’)).value=eventArgs.get_value();
}

What I have created on the page is a hidden input, so on fireing of the event by the autocomplete when an item is selected, it will set the hidden inputs value with the eventArgs.get_value(), which in my case is the primary key for the Receiver row

once this is done, the selected pk is available.

The receiver details is displayed once a person clicks on a Go button, so in my Go button’s onclick event function, I have the following code, which then goes and retrievs the receiver details

Protected Sub btnGoReceiver_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnGoReceiver.Click
DisplayReceiverDetails(SelectedReceiver.Value)
End Sub

This can be easily modified to retrieve the details on an autocomplete selection by adding a line to the SetSelectedValue function, which clicks the go button via javascript to trigger the action

So it will be interesting to see the effect IE8 has on our online development projects and compatibility issues and of course the sanity of our developers (and me!)…..maybe a bit too early to trust the mighty Microsoft on this one..time will tell.

This provides an option for animation on a web page beyond Flash or animated GIFs. This is good news for web designers because:

• PNG’s have a full alpha channel
  TRANSLATION: They can have a transparent background so you can overlay them on other elements in the page.
• PNG’s support a maximum of 16 million colours
  TRANSLATION: We can finally have photo quality animated images on a web page. GIF’s only support 256 colour which is too limited for most photos.
• PNG’s have better lossless compression
  TRANSLATION: The file size is smaller without reducing the quality of the image, which means the image will load faster.

The downside is that this is only going to be supported by Firefox 3, which means having to do a browser detect and deliver an animated GIF to other browser. My understanding though, is that the Animated PNG will just show the first frame if it is not a supported browser, which means you could allow for this in the design and the worse case scenario is the user only gets a static image.

If you are ready to get going you’ll need:

• The online APNG Assember
• The Firefox 3 Beta
• These useful resources

Google has recently launched another free API (Application Programming Interface) called Google Chart.

The following types of charts are available:

• Line chart
• Bar chart
• Pie chart
• Venn diagram
• Scatter plot

What makes Google Chart so notably is that it is very, very easy to implement. All you need to do is pass a URL to their servers and it will return you a PNG image.

Take a look at this sample 3D pie chart I have created:

In code this looks like just an HTML image tag, no web service calls, nothing tricky whatsoever:

<img src="

http://chart.apis.google.com/chart?

cht=p3
&chd=s:ZB
&chs=480x200
&chl=Yes|No
&chtt=Is Google Charts The Easiest Charting Solution?"
alt="Sample 3D Pie chart" />

Let’s break this down to explain the URL format in more detail:

<img src="

http://chart.apis.google.com/chart?

URL to the Google Chart server

cht=p3
Type of chart, in this case 3D Pie

&chd=s:ZB
Type of data. I've used Simple Encoding
where Z = 25 and B = 1 which is suitable for simple charts.
Text and Extended encoding are also available.


&chs=480x200
Size of the chart in pixels.
In this case 480 pixels wide by 200 pixels high

&chl=Yes|No
Labels separated by the pipe character |

&chtt=Is Google Charts The Easiest Charting Solution?
Optional chart title

"alt="Sample 3D Pie chart" />

This is a very simple example, but this does scale to quite complex charts with larger data sets, and you have the ability to customise the colours. It wouldn’t be that difficult to turn this into a server side .NET control that would allow you to just pass the variables to a function and let it render the correct URL for your requirements.

The ease of use and the fact that it is free must make this a viable option for all but the most complex charting and graphing requirements.