Thursday, February 05, 2009

Dashcode Browser Back Button Issue

Wow. I just spent 2 days trying to hunt down a pain in the butt issue with Apple's Dashcode application. I'm creating a web app version of fx360.com for viewing on the iPhone and would like to make it as iPhone sexy as I can. I've been using the Dashcode application from XTools to create the basic framework of my 'browser' application.

All is good for the basics of the app. I've created multiple views and have used the standard list controls for usability consistancies. The struggles began when I was customizing the content for the app. I have a design here

concept
that shows a 15px space at the top of the white background for the content to be placed on. So, when I built this page in Dashcode, (without all of my graphics for background and such) I created a div that had a 15px margin on the top to create that space. Then I filled that div with my content... Simple right? Not so fast!!

The issue was that when I clicked on my nav

fx360_iphone_1

the first time, my detail page would show up fine. Like the screen shot here that shows a gap at the top of the page (not the full size for the gap but you get the idea):

fx360_iphone_3

But, if I continue to go back and forth between the detail screen and my selection list, my content page gets pushed down the viewport! If I kept going back and forth it eventually pushed it right out of view... wtf!

fx360_iphone_4

After much frustration and searching the blogosphere for some help with this issue, I finally figured it out by tracing the entire DOM of the HTML generated by Dashcode as it was running. It seems that either the StackLayout component or the Browser component is adding inline styles to the DIV's that represent the pages as a user clicks on the navigation list! I also noticed that this style incremented the 'top' style for the DIV by 15 pixels each time the HTML traced out... AH HA! So, now I needed to find where in the code this was occuring.

I found a section in the StackLayout.js file that points to this here:

fx360_iphone_5.dcproj (Running)

It is referencing a _topPosFromBody and curElement.offsetTop properties and adding them together on line 74. This is the closest thing I could find that had a 'top' sounding property in it. Unfortunately, the file in the project space within Dashcode is locked so a user can't edit it! Stupid.

So, for now, I've removed my margin from the top of my placement div so the 'offset' is zero. It functions as expected. The larger issue is the way that Apple has released this stuff. The tools seem to be nice and well organized, but there is no documentation on any of the components. No reference as to how their objects are put together. No list of methods, properties, and styles... nothing... anywhere. That's lame. All of Adobe's built in objects and components are fully documented and searchable. At the minimum, we should be able to find a reference to these packaged components to see how they are structured from a best practice point of view.

2 comments:

Anonymous said...

Great looking app, Erik!

Not that it helps at all, but I too struggle with Dashcode in many ways. The lack of documentation is one. Another is that something in the way I have put everything together causes Safari on both the iPhone and iPhone Simulator to become completely unresponsive. I have to reload in Safari on my iPhone or shutdown and restart Dashcode. There's no way to diagnose the problem and nothing in the documentation discusses such pitfalls. I have a feeling it is a memory issue, but without analysis tools, there's no way of knowing. Have you run into such issues?

I feel like I have taken Dashcode to the limit. I'm considering abandoning it. But seeing your app makes me at least aware that others are trying to implement serious apps in it. Maybe it's worth continuing to wrestle with it.

Erik Loehfelm said...

Thanks for the props!

I've pretty much abandoned the Dashcode tools and have jumped right into XCode and native iPhone application development. It's been tough but rewarding.

- e