//This is a code skelleton for Android which is a wrapper for any WebApp
//it loads a specified  HTML,CSS, and JavaScrit and renders it on the WebView UI

// This is the HTML file of your WebApp
var HTML = 'HTMLui.html';
var webview = Titanium.UI.createWebView(
{
url: HTML
});

var window = Titanium.UI.createWindow(
{
title:'Win',
backgroundColor:'#000',
url: 'menu.js',
navBarHidden : false
});

window.add(webview);
window.open();

// This is the Code Skelleton for the Android Menu Button Event

var menu = Titanium.UI.Android.OptionMenu.createMenu();

// Search
var MenuItem1 = Titanium.UI.Android.OptionMenu.createMenuItem({
title : 'Search',
icon : 'Search.png'
});

// Bookmarks
var MenuItem2 = Titanium.UI.Android.OptionMenu.createMenuItem({
title : 'Bookmarks',
icon : 'Bookmark.png'
});

// Add Bookmark
var MenuItem3 = Titanium.UI.Android.OptionMenu.createMenuItem({
title : 'Add Bookmark',
icon : 'Plus.png'
});

// Exit
var MenuItem4 = Titanium.UI.Android.OptionMenu.createMenuItem({
title : 'Exit',
icon : 'Exit.png'
});


// First Menu Item  Listener
MenuItem1.addEventListener('click', function()
{
 webview.evalJS("ShowSearch();");
});

// First Menu Item  Listener
MenuItem2.addEventListener('click', function()
{

});

// First Menu Item  Listener
MenuItem4.addEventListener('click', function()
{

});

// First Menu Item  Listener
MenuItem4.addEventListener('click', function()
{

});

menu.add(MenuItem1);
menu.add(MenuItem2);
menu.add(MenuItem3);
menu.add(MenuItem4);

Titanium.UI.Android.OptionMenu.setMenu(menu);

3 Answers

• Accepted Answer

  ok, so you have 2 cases:

  1. titanium to html( webview)

  The 'websearch' it's an arbitrary name give to the event.You can use whatever you want as long as it makes sense to you.

  so fireEvent works like fire the 'websearch' event with this parameters( data )

  the data can be something like this {color:'red'}

  so your function inside the triggered event will do something like

  // previously defined search
  
  function search(color) {
  alert(color);
  //return all the objects that has the color specified as argument
  
  }
  
  Titanium.App.addEventListener('websearch', function( data ) {
  
  search( data.color );  // this will alert "red".
  
  
  })
  

  2. html( webview) to titanium

  In this case you will need to do it in reverse.
  Define the listener in the titanium side - let's say in app.js
  and trigger it from the html with fireEvent

  Hope makes more sense

• You need to add an eventlistener in the html and from titanium to trigger this event.
  So inside HTMLui.html you put a script that does:

  Titanium.App.addEventListener('websearch', function( data ) {
  
  //execute your search function using the data object if needed
  })
  

  and on the element you want to trigger this do so( let's say the_button):

  the_button.addEventListener('click', function() {
  Titanium.App.fireEvent('websearch', data)
  })
  

  data it's an object and allows you to pass info ( for example search parameters )
  Keep in mind that the html cannot be remote, or you need to trick the system to think it's local( using xhr )

  Let me know

• So, umm, ok, i'm a bit of a noob at passing data using JS and JSON type code. So let me see if i can understand this correctly.

  in the code you just gave me the part were it says 'websearch' is the name of the function in my HTML code (inside the webview), right?

  Also, i was wondering if you could give me an example of passing data to the 'data' object. It's a bit confusing to me.

  Finally, how could i reverse the process. … what i mean is… how could i pass information from the webview back into the app.js context?

  I'm keeping a notebook of all of these little things (using tiddlywiki) so as to make sense of everything as i use it. Along with clear and simple code examples.

  many thanks :)