[Baxterdown]

I am trying to use a Combobox to navigate between screens and I am lost. I am not a programmer and I don’t know Javascript. Can someone please explain the steps I need to follow to use a Combobox as a navigation tool?

Thanks

Jose

[support-michael]

@Baxterdown

> Can someone please explain the steps I need to follow to use a Combobox as a navigation tool?

Can you describe the level of navigation you want to achieve? Will it contain options for nav’ing to internal screens (.mobi ui screens) that user selects to nav to? Will it include external sites?

[Baxterdown]

Hi Wayne, thanks for your quick reply! It will contain both. Example:

Go to… (value 1 selected)
Index.mobi (value 2)
Page1.mobi (value 3)
Page2.mobi (value 4)
ExternalURL (value 5)

[support-michael]

@Baxterdown

Solution:

1) add combo with values of either screen ID for internal screen navigation or URLs for remote navigation

2) add an OnChange Run JavaScript action to the combo, example java script function processComboSelection()

3) implement processComboSelection() pseudo-code
– look up the selected combo option and its value, the screen ID or external URL
– if option is screen ID then
phoneui.gotoPage(screenId) //nav to internal screen
else
window.location = url; //nav to external site

Please note that navigation to an external URL can leave your webapp stranded if the webapp is launched from the homescreen and the remote site does not have an explicit “back” navigation action. This is due to the fact that apple’s mobile safari attempts to provide a semi-native look and feel and hides the nav buttons for webapps started from homescreen.

[Baxterdown]

Thanks for the information. I am not a programmer and have VERY LIMITED code knowledge. As best I could I came up with this:

I have two pages called Accredited Education (filename: accredited_education.mobi) and Resource Center (filename: resource_center.mobi)

I looked for the page IDs in the index.js file of the outputted HTML and after much searching I found them in there like this:

... catch(jj){}}},"accredited_education":{"id":"accredited_education","anchor_ ...

So I completed the ComboBox Manage Items dialog as follows:

LABEL — VALUE
Go to… — left this value empty
Accredited Education — accredited_education
Resource Center — resource_center

Using the information you provided I dropped the following code into the javascript dialog box:

<script type=”text/javascript”>
processComboSelection(Accredited Education).phoneui.gotoPage(accredited_education)
processComboSelection(Resource Center).phoneui.gotoPage(resource_center)
</script>

It’s not working. What am I doing wrong?

[support-michael]

@Baxterdown

I will post an example tomorrow (maybe sooner) that has a little bit of javascript code to nav to a new page or URL.

[support-michael]

@Baxterdown

I will post an example tomorrow (maybe sooner) that has a little bit of javascript code to nav to a new page or URL.

[Baxterdown]

Thanks!

[rossduck]

@support-wayne

I am attempting to achieve a very similar outcome as @Baxterdown.

I will post an example tomorrow (maybe sooner) that has a little bit of javascript code to nav to a new page or URL.

Wayne, have you made any inroads with regards to your example?

Thanks again and great product.

[Baxterdown]

When do you expect to release 1.5? What if the bug is not fixed then? I have a WHOLE APP that is relying on navigating through a ComboBox!

[support-michael]

@Baxterdown

It appears that the combo onchange event firing order has been resolved and will be part of the 1.5 release. I have been testing it today to verify its readiness. Props to Vadim in development for an intense week of hard development to get improvements to the combo and selectListMenu widgets and many other features into the upcoming 1.5 release.

[rossduck]

Excellent! Thanks guys and thanks Vadim 😉

[Baxterdown]

Thanks Wayne. Fantastic! Now, all we need is the trusty example so us newbies can learn how to do magic! 😀

[support-michael]

@Baxterdown

I developed this simple example demonstrating the use of a combobox widget containing a list of UI screens. When user selects a screen in the combo, the UI will nav to it. Run the main.mobi file contains the combo.

See attachment combo-screen-nav60.png

There is a subtle design pattern that I used to ensure that the code-generator can see all 3 of the screens (main, screen1 and screen2). The code-generator follows the GotoScreen actions to identify all of the screens that it needs to generate code for. In this example, the only reference from main screen to screen1 and screen2 is by the main screen’s combo. But that combo only contains the IDs of the screens which is insufficient info for the code generator to identify screen1 and screen2. So I created a hidden screen named screen-links. I then added a semi-invisible Link widget to main.mobi that uses a GotoScreen(screen-links.mobi). Then on screen-links.mobi I added link widgets to screens 1 & 2 with resepective GotoScreen() actions. Doing this ensures the code generator can follow from main.mobi to screen-links.mobi and finally to screen1.mobi and screen2.mobi.

See attachment combo-screen-nav.zip

Attachments:

You must be logged in to view attached files.

[Tom Niehoff]

Did this ever get fixed? I seem to be running into the same issue. Oddly enough, javascript functions that I callon page #2 (and reside in page2-custom) appear to be trying to find the javascript functions in page #1 (page1-custom).

So is that what MobiOne does when you specify your ‘Additional Project Files’… merge everything into page1 and page1-custom?

[Author]

Posts