setTitle problems

I want to change the browser title on a deeplink event in the work section of my website. When you click on a thumbnail it loads a project.

I added Gaia.api.setTitle() to the onClick event for each thumbnail which works fine - however I want to use the setTitle() on the onDeepLink() event instead. Whenever I add the code to this method nothing happens?

onClick event

Code:

private function onClick(e:MouseEvent):void
{
ISound(Gaia.api.getPage("index").assets.projectSound).play();
Gaia.api.setTitle("my title goes here")

Gaia.api.goto("index/nav/work/" + e.currentTarget.name);
}

onDeepLink

Code:

override public function onDeeplink(e:GaiaSWFAddressEvent):void
{
Gaia.api.setTitle("my new title")
if(Gaia.api.getCurrentBranch().indexOf("work")  != -1)
{
// reset imageviewer for next time
projectPage_mc.imageViewer_mc.gotoAndStop("load");
// it is still on the WORK page
var link:String = e.deeplink.substr(1);
if(link.length > 0)
{
// show a project
if(projectPage_mc.visible)
{
// dont need to fade in
projectPage_mc.transitionIn(link);
}
else
{
// need to fade in
projectPage_mc.transitionIn(link, true);
}
// show pagination
if(projectPage_mc.paginator_mc.currentFrame == 1)
{
projectPage_mc.paginator_mc.gotoAndPlay("in");
}
}
else
{
// show the thumbnails
TweenLite.to(projectPage_mc, 0.3, {alpha:0, onComplete:function():void{projectPage_mc.visible = false}});
}
}
}

goto sets the title on the page.  You're saying setTitle() and then calling goto() afterwards, which means goto() is going to setTitle immediately after yours.

that what I thought at the beginning. Which is why I added the setTitle() call to the onDeepLink event handler instead. That way goto will have fired and then the event is dispatched and it's a deeplink it should update the title after the goto?

In actual fact I am getting the opposite behavior. SetTitle() is setting the browser title onClick but not onDeepLink?

I might try adding severing different setTitle() calls at various stages of the onDeeplink and then I can use them almost like traces to see when the title can actually be set from?

I fixed this in a prior release to Gaia and verified it worked in both AS3 and AS2.  I'll test it again.

[onDeeplink override in WorkPage.as]

I've been trying to solve this issue over the last couple of days. I am now at the current state:

on a deeplink event the page updates and now so does the browser title!! and when you click recent project and previous project to update the page the browser title is ALSO updated fine. I've also added a little debugging so you can check in the console in firebug if deeplink is firing through.

However when you use the browser buttons to go back and forth, the website still behaves appropriately but the browser title does not update. even through it should be exactly the same process. Check:

http://clients.lukesturgeon.co.uk/dev/#/work/

I also need to get the site to check the full URL at the beginning because at the moment I cannot directly deeplink to a project page.
onDeeplink override in WorkPage.as

Code:

override public function onDeeplink(e:GaiaSWFAddressEvent):void
{
if(Gaia.api.getCurrentBranch().indexOf("work")  != -1)
{
// reset imageviewer for next time
projectPage_mc.imageViewer_mc.gotoAndStop("load");
// it is still on the WORK page
var link:String = e.deeplink.substr(1);
if(link.length > 0)
{
// show a project
if(projectPage_mc.visible)
{
// dont need to fade in
projectPage_mc.transitionIn(link);
}
else
{
// need to fade in
projectPage_mc.transitionIn(link, true);
}
// show pagination
if(projectPage_mc.paginator_mc.currentFrame == 1)
{
projectPage_mc.paginator_mc.gotoAndPlay("in");
}
}
else
{
// show the thumbnails
TweenLite.to(projectPage_mc, 0.3, {alpha:0, onComplete:function():void{projectPage_mc.visible = false}});
}
}
}

if necessary the code calls a method in ProjectPage.as (this is not a Gaia page but I wanted to keep the same method names for consistancy.

transitionIn in ProjectPage.as just resets the page ready to load new content

Code:

public function transitionIn(deeplink:String, tween:Boolean = false):void
{
// clear old project
client_txt.text = "";
agency_txt.text = "";
role_txt.text = "";
project_txt.text = "";
project_txt.height = 10;
viewProject_mc.visible = false;
viewProject_mc.button_txt.text = "";

// get the relevant xml node
_projectXml = parent.assets.myXml.xml..project.(@name == deeplink);
if(tween)
{
visible = true;
alpha = 1;
TweenLite.from(blocker_btn, 0.3, {alpha:0, onComplete:transitionInComplete});
}
else
{
transitionInComplete();
}
}

Then it calls transitionInComplete in ProjectPage.as, it is this method that updates the browser title

Code:

private function transitionInComplete():void
{
// set the browser title
Gaia.api.setTitle("Luke Sturgeon / Work / " + _projectXml.title)

// start loading images
imageViewer_mc.push(_projectXml.images);


// animate in text
Typewriter.insert(client_txt, "Client / " + _projectXml.client);
Typewriter.insert(agency_txt, "Agency / " + _projectXml.agency);
Typewriter.insert(role_txt, "Role / " + _projectXml.role);
project_txt.autoSize = TextFieldAutoSize.LEFT;
Typewriter.insert(project_txt, _projectXml.text, {timer:6, onComplete:createLink});
}

In theory this should happen EVERY time the page update because the page is updating properly, but the browser buttons do not update the browser title as well?

Thank you for your diligent debugging here.  This is good info for me to go on.  So if it works when the navigation event comes from Gaia but doesn't when it comes from the browser, then that means that

1.  My previous fix is confirmed to be working.   

2. There might be an issue of timing or threading when the event comes from SWFAddress.  

Here is a possible solution for you until I have time to look further into this.  Create a timer that calls setTitle after say 100ms.

Code:

var timer:Timer;
timer = new Timer(100, 1);
timer.addEventListener(TimerEvent.TIMER, updateTitle);

function updateTitle(event:Event):void
{
    Gaia.api.setTitle(newTitle);
}

// and in your code, instead of calling Gaia.api.setTitle, you would say

newTitle = "Luke Sturgeon / Work / " + _projectXml.title;
timer.start();

Let me know if that works for you.  Feel free to play with the timer delay of 100ms and get it as low as you can before it stops working (maybe even 1ms would work if it's a threading issue and not a timing issue).

Thanks for that Steven.

it has done the trick and the title does change now - there is just a slight delay and flicker because it is being set back to the PAGE default and then back to my newTitle.

Just need to find out where it is being reset - perhaps we can override that?

I've knocked the time down to 50ms and seems to still do the trick. I'll try on a few machines/browser/OSs and check that it's still working. Got to be a way of setting it once and that being it.

Thanks for the quick fix though - appreciate it.

one thing I did notice...

now that we have a timer to wait 50ms before updating the browser title, it works when you click an interact with the page, it works when you use the browser buttons. But if you check the history states you are still only getting the default page title and not the deeplink. When you click the deeplink works but you can't tell which page it is from the history list.

The history list in the browser is unreliable. This is a known issue with SWFAddress.  I'm looking into this today.

Ok, Luke, I've had a chance to look into this now.  Apologies for not getting back with you sooner.  I've looked at your site.xml, as well.

I've discovered the source of the issue and I'm trying to solve it now.

Alright I've solved it.  I had to modify GaiaSWFAddress.as slightly.  Ends up there was an error in the logic for comparing the full branch and the value in SWFAddress.  Thanks for catching this.

The fix will be in the next version of Gaia.

You will be able to put the setTitle back in the onDeeplink method of your WorkPage class. 

Code:

override public function onDeeplink(event:GaiaSWFAddressEvent):void
{
if (event.vaildBranch.indexOf("/work") > -1) Gaia.api.setTitle("my new title");
}

Notice I'm testing to see if the validBranch has /work in it.  This is so if you leave the page you will not set the title because onDeeplink will receive an empty string if you navigate to a valid branch, or a value if you navigate to a deeper branch under a different valid branch, but you want to make sure you only capture onDeeplinks that belong to the /work branch.  I hope this makes sense.