Button directing to a website

You must Login before you can answer or comment on any questions.

I am working on an app where I have custom buttons that I want to direct the user to a website. I have not found examples or navigation options for this and looking for the documentation on this.

My code is: 

var button = Ti.UI.createButton({
    backgroundImage:'button1.png',
    title: 'website 1',
    //font:{fontsize:40, fontFamily:'Helvetica Newe'},
    top: 3,
    width: 190,
    height:45
 
});
 
button.addEventListener('click', function(e)  {
 
                Go to website http://www.google.com (example site)
Where do I learn about a button that takes you to a website? Im not sure if I need to create a new window for this or the most efficient way Appcelerator handles this.

Thank you for any advice, suggestion, feedback, etc..

Regards, John

7 Answers

Accepted Answer

Hi John

This is the line of code you need 

Ti.Platform.openURL('http://www.google.com');
And this is the documentation for openURL that walks you through it.

— answered 10 months ago by Malcolm Hollingsworth
answer permalink
5 Comments

  • Hi John

    The reason the nav bar disappears is because the solution above opens the web page in the default web browser on the device - safari.

    Having read your follow-up I wonder if your question actually meant add a webview to the window.

    So here goes. 

    var webview = Ti.UI.createWebView({
  url:'http://www.google.com'
});
win.add(webview);
    This will add a webview to the current window using the url property. You can play with the dimensions like any other view using the top, bottom, left, right, width and height properties.

    IE 

    var webview = Ti.UI.createWebView({
  height: 200,
  top: 20,
  url:'http://www.google.com',
  width: 200
});
win.add(webview);
    Later on you can change the URL if you need using the 'setter' for example; 
    webview.setUrl('http://www.microsoft.com/');

    — commented 10 months ago by Malcolm Hollingsworth

  • Your probably right. I was more focused on it coming from a custom button versus a tab or something.

    Thank you, John

    — commented 10 months ago by John Bergman

  • Malcolm Im sorry...I hope this is not redundant, but the point with this question is that I have a custom button that is clicked and the event listener is set to click and that needs to take them to the website. Still use the variable strategy above? Right under the event listener? I almost have all my Q's for the day answered I promise.

    — commented 10 months ago by John Bergman

  • Show 2 more comments

This as well worked out great, but the navbar disappeared when the webView came up. Is there a way to keep that there so the user can go back to the menu after visiting this site? Malcolm if you are still here will the "choices" option work?

Thank you, John

Another way would be to create a webView in a window in your application. Then set the url of the webView to you desired URL.

It provides for a better user experience and the user will not need to figure out how to get back inside of your application

— answered 10 months ago by Aaron Saunders
answer permalink
5 Comments

  • Aaron, Thank you for this. I wonder if your answer and the other came in at the same time because your suggesting the same thing pretty much right?

    Thank you again, John

    — commented 10 months ago by John Bergman

  • Aaron can I ask you about this? Just down and dirty- Im new to Appcelerator, coming over from Xcode, and wonder what the code would look like with your suggestion using google.com as the site? I keep erroring out on Malcolms second suggestion and he has been helping me all day with different aspects of my app.

    Thank you tremendously, John

    — commented 10 months ago by John Bergman

  • my code would look like Malcolms.. what error are you getting

    — commented 10 months ago by Aaron Saunders

  • Show 2 more comments

I guess I dont quite have it down yet because I was trying to configure it to open in a new window and feel like I did exactly how you suggested based on your second suggestion but Navbar still disappears. Can you tell where Im missing something or have something that should not be there? 

var webview = Ti.UI.createWebView({
    height: 440,
    top: 0,
    width: 320
});
var button5 = Ti.UI.createButton({
    backgroundImage:'button1.png',
    title: 'LSP Website',
    //font:{fontsize:40, fontFamily:'Helvetica Newe'},
    top: 10,
    width: 220,
    height:70
 
});
 
button5.addEventListener('click', function(e)  {
    var win10 = Titanium.UI.createWindow({
        width: 320,
        height: 480,
        top: 0,
        left: 0,
        backgroundImage: 'images/background.png'
 
    });
webview.setUrl('http://www.google.com');    
 
win10.add(webview); 
 
win10.open();
This launched the page but the Navbar still disappeared. Striving for independence from the forums.

Any ideas?

Thank you, John

— answered 10 months ago by John Bergman
answer permalink
1 Comment

  • it is best to use comments to respond to issues and not answers... it makes it difficult to follow the thread.

    Not trying to be a jerk here, but have you gone through the free training, looked through the wiki or the kitchenSink?

    I ask because the problem you are running into is pretty basic and is covered in all of the reference items I mentioned above. I would also suggest that if you are needing to ask this many questions to work through a pretty basic task that you take the time to at least browse the documentation I have referenced above.

    Without understanding the architecture of you application it is difficult to provide additional guidance.

    You are loosing the navigation bar because you are opening a new window... windows have there own title bar...

    — commented 10 months ago by Aaron Saunders

OK so I re-wrote the code identical to yours and Im getting a "cant find variable at line 35, which is the win1.add(button); line. I have to use that because it is actually button 5 and just because I have so many windows I used 20 so as to not confuse it with anything else. Here it is: 

Ti.UI.setBackgroundColor('#000');
 
var button, win1 = Ti.UI.createWindow({
    title : 'Tab 1',
    backgroundColor : '#fff'
});
 
 
var button5 = Ti.UI.createButton({
    title : ' website 1',
    top : 3,
    width : 190,
    height : 45
 
});
 
button5.addEventListener('click', function(e)  {
    var wvwin20, webview = Ti.UI.createWebView({
        width: '100%',
        height: '100%',
        url : 'http://www.google.com/'
    });
 
    wvWin20 = Titanium.UI.createWindow({
        title: 'My School',
        backgroundColor : '#fff'
    });
    wvWin20.add(webview);
    wvWin20.open({
        modal : true
    });
 
});
 
win20.add(button5);
win20.open();
The one thing I find odd is your code shows "open" in blue and mine does not. Is that a clue to anything?

Thanks a bunch, John

Hey I just saw your comments and not offended at all. Yes, I have gone through the docs and videos and I know it seems like I have not. I have learned a ton from it but am coming straight out of Xcode and Objective C and I think Im just trying to learn too much too fast. I was explaining to Malcolm earlier that the CEO has put so much pressure on me to get this done that Im pulling all nighters the last few days and the brain is probably mush. Its not usually like this I promise. You wont see this behavior from me regularly because I hate having to ask questions but she put a deadline of Monday on me to solve a ton of issues so I have been in this chair for the majority of the last 4 days.

I appreciate your guidance and look forward to putting this problem app behind me and then sitting down and starting at the beginning of the documentation and going through it properly rather than just surfing around for fixes to another developers problems.

Im not looking for pity either....just added this because you asked. I will either have this app and its issues solved tonight or be done with it tomorrow. Thanks again!

Respectfully, John

Your Answer

Think you can help? Login to answer this question!