Page Navigation in iUI 0.40

[Scott Finkelstein]

I'm not sure if this question has been answered yet, but I'm looking
to create a main page in iUI which will exist as a single php page and
have each icon on this page link out to a seperately built page (also
built in iUI). Now assuming the user is running this in full-screen
mode on the iPhone, I set each icon to link to its respective page
with the link target set to "_self" however, this proceeds to launch
the page in a new browser window. Now I'm not looking to replicate the
transitions, but is it possible to have the new page load within the
same full-screen browser window, and in addition, have the new page
display a back button to the main page?

Thanks in advance!

- Scott

[Sean Gilligan]

Scott Finkelstein wrote:
> Now I'm not looking to replicate the
> transitions, but is it possible to have the new page load within the
> same full-screen browser window,

Yes. Use target="_webapp"
There's an example, here:
http://iui-js.appspot.com/test/link-types.html

> and in addition, have the new page
> display a back button to the main page?
>

That's a little trickier. You'll have to disable the JavaScript (by not
including iui.js, perhaps) and adjust the HTML and CSS so that back
button links to the previous page. Or something like that...

-- Sean

[StanRB]

Sounds like a good option! I guess we could also modify the javascript
a bit so that the first back button is always a present button that
links to the "previous" main page... Even if we have to do these back
buttons manually for the "sub-apps", I think it would be less work and
still worth it to break everything into separate pieces, Scott.

Cheers!

Stan

[Chris Collett]

Just thinking out loud here. I'm not a developer but would it be possible to create some sort of breadcrumb navigation plug-in? Perhaps using a single xml file and have it appear in a modal window or something? Just curious.

--

You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.
To post to this group, send email to iphone...@googlegroups.com.
To unsubscribe from this group, send email to iphonewebdev...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.

[Scott Finkelstein]

Thanks Sean. That target="_webapp" worked! I'll have to play around
with getting the back button to appear.

I'll have to take a look at those other link types.

Thanks again!

- Scott

On Nov 24, 12:28 am, Sean Gilligan <msgilli...@gmail.com> wrote:

[Maximilian Melcher]

Its possible - I saw a, in my eyes, good but static implementation. If your environment is very static its easy to implement - if its big you need to invest more time. 

I would implement it as a plugin - but my plate is rather full right now.

Cheers

Max  

[Scott Finkelstein]

Thank you all for the insights. For now, since most of the pages
linked from the homepage will be self-contained iUI-based sites, I'll
probably start out by adding a static "back" button on the main
section of each sub page.

- Scott

On Nov 24, 10:31 am, Maximilian Melcher

<melcher.maximil...@googlemail.com> wrote:
> Its possible - I saw a, in my eyes, good but static implementation. If your
> environment is very static its easy to implement - if its big you need to
> invest more time.
>
> I would implement it as a plugin - but my plate is rather full right now.
>
> Cheers
> Max
>

> Am 24.11.2009 um 15:34 schrieb Chris Collett <chris.j.coll...@gmail.com>:
>
> Just thinking out loud here. I'm not a developer but would it be possible to
> create some sort of breadcrumb navigation plug-in? Perhaps using a single
> xml file and have it appear in a modal window or something? Just curious.
>

> > iphonewebdev...@googlegroups.com<iphonewebdev%2Bunsubscribe@google groups.com>
> > .

[Sean Gilligan]

Maximilian Melcher wrote:
> I would implement it as a plugin - but my plate is rather full right now.

Plugin is the right approach. I'm willing to make changes to core to
make it pluggable.

-- Sean

[Scott Finkelstein]

I was actually intrigued by the second example on this page (Ajax
Link). I see that you are storing that ajax panel (minus the toolbar)
in a file called "fragPanel.frag" thus bringing that separate section
into the framework.

Originally, I was planning on separating each section of this site
into separate PHP pages and linking them from my main springboard
page, but it looks like this might have potential since I can possibly
store each section in a .frag file.

So assuming I need to run a javascript from within one of these .frag
files, I can't easily do this since it's not a full webpage and
doesn't have a <body> tag for me to check if the page is loaded. if I
were to have the javascript live on my main page, is there an event
listener I can call when the .frag file is brought in to the main
view? I tried both 'aftertransition' and 'load' with no success.

I hope I'm asking this clearly, let me know if you want me to clarify.

Thanks!

- Scott

On Nov 24, 12:28 am, Sean Gilligan <msgilli...@gmail.com> wrote:

[StanRB]

Would this approach cause any problems when the app is run on other
devices? Also, one of the points in having "separate apps" was the
ability to bookmark individual parts and start them - rather than
starting the main app every time. If I want to just open the Library
App portion - I'd be able to. If we do it the "frag-way" we will loose
this ability. Also, will this affect our ability to customize the sub-
apps when it comes to colors and all? I'd assume so - since we most
likely will not be able to change the top bar portion... Hm... Just
some thoughts. Otherwise it looks pretty good and I'd be interested to
see the answers to your questions :)...

Stan

[Sean Gilligan]

Scott Finkelstein wrote:
> I was actually intrigued by the second example on this page (Ajax
> Link). I see that you are storing that ajax panel (minus the toolbar)
> in a file called "fragPanel.frag" thus bringing that separate section
> into the framework.
>

.frag is just a convention that I use for serving incomplete HTML from
static files. They could be dynamically generated by PHP or any
server-side technology and can have any extension.

> So assuming I need to run a javascript from within one of these .frag
> files,

> is there an event
> listener I can call when the .frag file is brought in to the main
> view?

Yes. There are beforeInsert and afterInsert events that you can use.
There is an event logger sample that demonstrates how to use them:
http://code.google.com/p/iui/source/browse/web-app/iui/js/iui-event-log.js

There also have been several patches submitted for earlier versions of
iUI that have various mechanisms to run JavaScript that is loaded in a
fragment. I added the events to iui.js so that any of these mechanisms
could be used without the need to modify iui.js itself.

See:
http://code.google.com/p/iui/issues/detail?id=102
http://code.google.com/p/iui/issues/detail?id=128

> I tried both 'aftertransition' and 'load' with no success.
>

Hmm. You probably should have been able to get it work using "load" as
well (with the only issue being that your code might be called more than
once) What was the problem?

-- Sean

[Sean Gilligan]

StanRB wrote:
> Would this approach cause any problems when the app is run on other
> devices?

It seems to work well on other iPhone-class mobile devices, such as
Android and Pre.

> Also, one of the points in having "separate apps" was the
> ability to bookmark individual parts and start them - rather than
> starting the main app every time.

There has been some discussion of extending iui.js to allow loading
"frags" from bookmarks. My thoughts are that this should be an
extension, but that the core should be modified to allow this type of
extension.

> If I want to just open the Library
> App portion - I'd be able to. If we do it the "frag-way" we will loose
> this ability. Also, will this affect our ability to customize the sub-
> apps when it comes to colors and all?

I'm not sure what you mean by a "sub-app". (One of the things the
documentation project will help us with is establishing clear
terminology...)

If you look at http://iui-js.appspot.com I have set it up so that
whenever you launch a new "webapp", I use target="_blank". I don't
know if Apple or anyone else has written guidelines for this, but Apple
has defined the boundaries of a webapp by what types of links will
re-launch Safari. I think using the "springboard" view (which someone
is going to submit the code as a patch, right?) will make this more clear.

-- Sean

[Scott Finkelstein]

I think the problem was that I was attaching the event listener to the
main element in the fragment. so I that didn't work because I was
attaching it to an element that doesn't exist yet in the main page
code. On the main page it looked something like:

var myFragElement=document.getElementById('element');
myFrag.addEventListener('load', function(event) {
doSomethingWhenFragLoads()
});

- Scott

On Nov 25, 1:12 am, Sean Gilligan <msgilli...@gmail.com> wrote:
> Scott Finkelstein wrote:
> > I was actually intrigued by the second example on this page (Ajax
> > Link). I see that you are storing that ajax panel (minus the toolbar)
> > in a file called "fragPanel.frag" thus bringing that separate section
> > into the framework.
>
> .frag is just a convention that I use for serving incomplete HTML from
> static files.  They could be dynamically generated by PHP or any
> server-side technology and can have any extension.
>
> > So assuming I need to run a javascript from within one of these .frag
> > files,
> > is there an event
> > listener I can call when the .frag file is brought in to the main
> > view?
>
> Yes.  There are beforeInsert and afterInsert events that you can use.  

> There is an event logger sample that demonstrates how to use them:http://code.google.com/p/iui/source/browse/web-app/iui/js/iui-event-l...

>
> There also have been several patches submitted for earlier versions of
> iUI that have various mechanisms to run JavaScript that is loaded in a
> fragment.  I added the events to iui.js so that any of these mechanisms
> could be used without the need to modify iui.js itself.
>

> See:http://code.google.com/p/iui/issues/detail?id=102http://code.google.com/p/iui/issues/detail?id=128

[Sean Gilligan]

Scott Finkelstein wrote:
> I think the problem was that I was attaching the event listener to the
> main element in the fragment. so I that didn't work because I was
> attaching it to an element that doesn't exist yet in the main page
> code.

Yeah, if you look at iui-event-log.js -- you'll see that it uses
afterInsert() to register event logging on newly added nodes.

[Remi Grumeau]

Hi gangs,

I was playing around yesterday and i saw all transitions effects available in JQTouch (cube, warp, ...)
Is something is planned to add something like them in iUI ?
A friend of mine would told me his interest digging this topic ...

Remi

[Sean Gilligan]

Remi Grumeau wrote:
> I was playing around yesterday and i saw all transitions effects available in JQTouch (cube, warp, ...)
> Is something is planned to add something like them in iUI ?
>

iUI 0.50 release?

-- Sean

[Remi Grumeau]

And ... it's already planned ?
I tough that an official "stable release" of the 0.40 was first in the todo list, way before planning things for 0.50.
Cool ! Can't wait :)

Remi

[Sean Gilligan]

Remi Grumeau wrote:
>>> I was playing around yesterday and i saw all transitions effects available in JQTouch (cube, warp, ...)
>>> Is something is planned to add something like them in iUI ?
>>>
>>>
>> iUI 0.50 release?
>>
>> -- Sean
>>
>
> And ... it's already planned ?
>

Not really -- thus the question mark.

> I tough that an official "stable release" of the 0.40 was first in the todo list, way before planning things for 0.50.
> Cool ! Can't wait :)
>

0.40 is definitely first on the todo list. But you always need a list
of features for the next release (where else do you put the stuff you've
decided NOT to do in the current release?

-- Sean

[Remi Grumeau]

> Not really -- thus the question mark.

Ah ok ... eh eh :)
any recommendation to do so ?

>
>> I tough that an official "stable release" of the 0.40 was first in the todo list, way before planning things for 0.50.
>> Cool ! Can't wait :)
>>
>
> 0.40 is definitely first on the todo list. But you always need a list
> of features for the next release (where else do you put the stuff you've
> decided NOT to do in the current release?
>
> -- Sean

Sure ! It even helps to make deep structural choices when changing core code.

Remi

[Sean Gilligan]

Remi Grumeau wrote:
>> Not really -- thus the question mark.
>>
>
> Ah ok ... eh eh :)
> any recommendation to do so ?
>

I'm not sure I understand the question. Recommendation to do what?

-- Sean

[Remi Grumeau]

To help on iUI development by trying to implement them.

Remi

[Sean Gilligan]

Remi Grumeau wrote:
> Le 26 nov. 2009 � 00:04, Sean Gilligan a �crit :

>
>
>> I'm not sure I understand the question. Recommendation to do what?
>> -- Sean
>>
>

> To help on iUI development by trying to implement [libary of transition effects].
>

Absolutely!

I've thought about it a little. I've looked at the approach used by
jQTouch and the code looks very good to me. However the last time I
tried jQTouch on desktop Safari I saw lots of flicker during the
transitions. I know that flicker can be a problem on the iPhone as
well and I spent quite a bit of time tweaking the slide transition in
iUI 0.30 to work well on both iPhone and desktop Safari. There is
definitely a testing issue when you consider the different versions of
iPhone, Safari, etc.

With that in mind, it would obviously be nice if the slide transition
were not a separate case from the 'choose your effect here'
transitions/animations. One issue is that for some reason I found it
necessary to use window.innerWidth to set the translateX value for the
transition start. It would be nicer to use 100% as that could be done
entirely in CSS.

Obviously you're free to take the current source and do whatever
experiments you'd like and then submit a patch if you are successful.
If you do this, I strongly encourage you to use the Mercurial cloning
function now in Google Code to publish and track your work. You're
welcome to start a conversation about it on "iui-developers" as well. I
would like to focus on 0.40, but if you want to start pushing on this
now, I'll do my best to answer questions and kibitz. I'd really like to
see this feature and I'd obviously like to work with you to help you
produce a patch that I'd feel good about including with release 0.50 of
iUI. :D

-- Sean