Greetings,
I'm trying to simply display a blank textfield (I know), but it's not working?
I must be making some simple error.
Here is my app.js:
Titanium.UI.setBackgroundColor('#FFF');
var win1=Titanium.UI.createWindow({
title:'Login',
backgroundColor:'#FFF'
});
var uname = Titanium.UI.createTextField({
color:'#336699',
height:35,
top:50,
width:250,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win1.add(uname);
Am I missing something? The above should work, right?
I'm using Android emulator on Ubuntu x86_64
When I use tabs the uname and label appear ok:
Titanium.UI.setBackgroundColor('#000');
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 1',
window:win1
});
var uname=Titanium.UI.createTextField({
color:'#336699',
height:35,
top:50,
width:250,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
var label1=Titanium.UI.createLabel({
color:'#999',
text:'hello',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
win1.add(uname);
win1.add(label1);
tabGroup.addTab(tab1);
tabGroup.open();
But how do I get rid of the tabs???
I've tried several versions of Android (1.6 API and 2.2 API)
Many thanks in advance,
Update: the solution is:
Add the following line:
win1.open({fullscreen:true});
is this on the end of you app.js
win1.open({fullscreen:true});
Related
I try to show YT video in my application (Appcelerator, Android). I found that the best way is to show embeded video in WebView, so I do it with such code:
var webView = Ti.UI.createWebView({
url: 'https://www.youtube.com/embed/LTRfmqc0KBg',
enableZoomControls: false,
scalesPageToFit: true,
scrollsToTop: false,
showScrollbars: false
});
but video does not load (I see only black screen - instead of webview's white). WebView works properly because it shows other pages.
Then you can try this
var Win = Titanium.UI.createWindow({
title : 'Video View Demo',
backgroundColor : '#fff'
});
var video_url = 'https://www.youtube.com/watch?v=bSiDLCf5u3s';
var movie = '<html><head></head><body style="margin:0"><embed id="yt" src="' + video_url + '" type="application/x-shockwave-flash" width="480" height="266"></embed></body></html>';
var webView = Ti.UI.createWebView({
top:0,
left:0,
width:480,
height:266,
url:video_url,
html:movie
});
Win.add(webView);
Win.open();
You can call the device default youtube app to open the url for the user. See the below code
var Win = Titanium.UI.createWindow({
title : 'Youtube Video View Demo',
backgroundColor : '#fff'
});
var button = Titanium.UI.createButton({
title: 'Hello',
top: 10,
width: 100,
height: 50
});
button.addEventListener('click',function(e)
{
Titanium.Platform.openURL('https://www.youtube.com/watch?v=bSiDLCf5u3s');
});
Win.add(button);
Win.open();
Thanks.
I found that embedded videos wouldn't work on Android, while doing fine on iOS.
However switching form using the webviews url property to load the video, to using the setHtml() function works. The way to do this is by using the Youtube iframe api.
var videoUrl = 'https://www.youtube.com/embed/' + videoId + '? autoplay=1&autohide=1&cc_load_policy=0&color=white&controls=0&fs=0&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0';
var playerWidth = $.youtubeWebView.width;
var playerHeight = $.youtubeWebView.height;
var html = '<iframe id="player" type="text/html" width="'+playerWidth+'" height="'+playerHeight+'" src="'+videoUrl+'" frameborder="0"></iframe>';
$.youtubeWebView.setHtml(html);
Heads up, iframes can be a pain, add this in the load event to get rid of the wierd white padding on the top & left side
this.evalJS('document.getElementsByTagName("body")[0].style.margin=0;');
Something like this:
$.youtubeWebView.addEventListener('load', function(){
this.evalJS('document.getElementsByTagName("body")[0].style.margin=0;');
var showYoutubeTimer = setTimeout(function() {
$.activityIndicator.hide();
$.youtubeWebView.opacity = 1;
clearTimeout(showYoutubeTimer);
}, 300);
});
I've been tasked with adding a map to my appcelerator project. I have tried the alloy way (since I'm using alloy in the project). That apparently doesn't work and its been suggested that I create the map in the controller. I have done that below and the call to the map is triggered by an onclick function attached to an icon on the primary window. This seems to work on iOS but causes the app to crash on Android (using a samsung note)
function openMap(){
alert(alertString);
//var map = Alloy.createController('map');
//$.map.show();
//add alert location here -- get the data from the push message that comes in
var payload = Ti.App.Properties.getString("latest_buddy_alert","empty");
if (payload != "empty"){
var messageDetails = parsePushMessage(payload);
}
opera = mapview.createAnnotation({
latitude: messageDetails['lat'], // 43.7000,
longitude: messageDetails['lng'], // 79.4000,
title: alert,
pincolor:Map.ANNOTATION_RED,
});
var winMap = Titanium.UI.createWindow({
title:'Buddy Location',
BackgroundColor:'#fff'
});
var mapview = Titanium.Map.createView({
mapType: Titanium.Map.STANDARD_TYPE,
region: {latitude:lat, longitude:lon, latitudeDelta:0.01, longitudeDelta:0.01},
animate:true,
regionFit:true,
userLocation:true
,annotations: [opera]
});
winMap.add(mapview);
winMap.open();
Titanium.Geolocation.getCurrentPosition(function(e) {
if (e.error) {
Ti.API.log('error: ' + JSON.stringify(e.error) );
return;
}
var region = {
latitude:e.coords.latitude,
longitude:e.coords.longitude,
animate:true,
latitudeDelta:0.04,
longitudeDelta:0.04
};
mapview.setLocation(region);
});
}
As mentioned above, this creates an error which crashes the app:
Location[1,1] undefined
uncaught syntaxerror: unexpected token u
source: undefined
This is totally unhelpful, since I don't use a token 'u' or variable 'u' anywhere in my code. I have used several variations on the code above, all giving the same error.
I have had some small success moving to a webview, which shows the map on apple, but not on android.
Any ideas?
I have the following code:
app.js:
Ti.include('logic/ui.js');
/* some code */
mainWindow.open();
ui.js:
var mainWindow = Ti.UI.createWindow({
title : 'Main Window',
backgroundColor:'transparent',
exitOnClose : true,
backgroundImage: 'view/i/bg.png',
});
var resultWebView = Titanium.UI.createWebView({
url : 'view/result.html',
backgroundColor: 'transparent'
});
mainWindow.add(resultWebView);
Problem: On devices with Android < 2.3.5, WebView does not load when the application is first loaded. But if you apply zoom, it works fine. Any ideas on how I can resolve this?
UPDATE:
If the url to the web document is internet url, then WebView always displayed without a problem.
var resultWebView = Titanium.UI.createWebView({
url : 'http://www.google.com',
backgroundColor: 'transparent'
});
On the click of my button, I want to navigate to another screen. How would I achieve this in Titanium?
var TrialButton = Titanium.UI.createButton({
color:'black',
backgroundColor:'#FFFFFF',
title:'Trial Mode',
top:55,
width:300,
height:50,
borderRadius:5,
font:{fontSize:18, fontFamily :'Helvetica', fontWeight:'bold'}
});
TrialButton.addEventListener('click', function() {
var newWindow = Titanium.UI.createWindow({
background : "#fff",
title : "Trial Demo",
url:"nextScreen.js"
});
newWindow.open();
});
TrialButton.addEventListener('click', function()
{
var newWindow = Ti.UI.createWindow({
background : "#000",
title : "Image View",
url:"nextScreen.js"
});
newWindow.open();
)};
should checkout examples here https://github.com/appcelerator/KitchenSink
here are some posts from my blog http://blog.clearlyinnovative.com/tagged/Appcelerator
If you're using Alloy, You can also navigate to another screen using the Alloy.createController method.
function sample(e) {
var nextScreen = Alloy.createController('nameOfNextScreen').getView();
nextScreen.open();
}
If you wish, you can also pass data to the next screen by passing it in as an argument eg,
var nextScreen = Alloy.createController('nameOfNextScreen', {sushi: "california roll" }).getView();
and retrieving the argument in the next screen with the following
var args = $.args;
var value = args.sushi;
TrialButton.addEventListener('click', function()
{
var newWindow = Ti.UI.createWindow({
background : "#000",
title : "Image View",
url:"nextScreen.js"
});
newWindow.open();
//close your current window of this page and also in your nextScreen.js page, the window must be set to current window
)};
Because its written wrong. Theres an error in code at the last line. The ")" has to follow after "}". Not opposite ast written here. So the closing tag is right like this: "});". Use following code instead:
TrialButton.addEventListener('click', function()
{
var newWindow = Ti.UI.createWindow({
background : "#000",
title : "Image View",
url:"nextScreen.js"
});
newWindow.open();
//close your current window of this page and also in your nextScreen.js page, the window must be set to current window
});
Greetings,
I'm trying to simply display an image using Appcelerator on Android.
I don't understand why it won't work.
Here is my code:
var back=Titanium.UI.createImageView({
url:'images/back.png'
});
win.add(back);
I've also tried putting the image inside a view:
var view = Titanium.UI.createView({
borderRadius:10,
backgroundColor:'red',
left:10,
right:10
});
var back=Titanium.UI.createImageView({
url:'images/back.png'
});
view.add(back);
win.add(view);
I'm totally stuck and am hoping someone can point me in the right direction here.
Many thanks in advance,
I got it working as follows:
var back_fn=Ti.Filesystem.getFile(Titanium.Filesystem.resourcesDirectory,'images/back.png');
var back=Titanium.UI.createImageView({
image:back_fn,
top:10,
right:10
});
win.add(back);
Thanks for all the responses guys,
try this
var back=Titanium.UI.createImageView({
url:'images/back.png',
height : 130,
width : 130
});