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
});
Related
I'm developing a firefox for android addon. I want to have a Home.panel for it. In the home panel, I'd like to have two diferent views. Firstly I would have a list of bookmarks and secondly a Grid with some options. I HAVE A VERY GOOD REASON FOR DOING THIS WAY.
I have tried so far the following:
const {Cu} = require("chrome");
Cu.import("resource://gre/modules/Home.jsm");
Cu.import("resource://gre/modules/HomeProvider.jsm");
Cu.import("resource://gre/modules/Task.jsm");
const PANEL_ID = "aurora_suite_pannel#ats.com";
const BOOKMARKS_DATASET_ID = "as_bookmarks_dataset#ats.com";
const MAINMENU_DATASET_ID = "as_mainmenu_dataset#ats.com";
function syncData2() {
console.debug("Syncronizando ...");
var bookmarks = [
// An item
{
url: "http://example.com/",
title: "Example Web Site" ,
description: "This is an example of a bookmark",
image_url: "http://example.com/example.png"
}
];
var mainMenuItems = [
{
url: require("sdk/self").data.url("test.html"),
title: "Grid item",
description: "This is a Grid item",
image_url: "http://example.com/test.png"
}
];
Task.spawn(function() {
let bookmarksStorage = HomeProvider.getStorage(BOOKMARKS_DATASET_ID);
let mainMenuStorage = HomeProvider.getStorage(MAINMENU_DATASET_ID);
console.debug("Actual synching process. storage");
// New way to replace items in Firefox 31+
yield bookmarksStorage.save(bookmarks, { replace: true });
yield mainMenuStorage.save(mainMenuItems, { replace: true });
});
}
function optionsCallback() {
return {
title: "My Addon Panel",
views: [{
type: Home.panels.View.LIST,
dataset: BOOKMARKS_DATASET_ID,
// optional, only used if there's a filter applied after clicking on an item
backImageUrl: "myBackIcon.png",
// optional, defaults to BROWSER (can also specify INTENT to launch an intent)
itemType: Home.panels.Item.ARTICLE,
itemHandler: Home.panels.ItemHandler.BROWSER
}, {
type: Home.panels.View.GRID,
dataset: MAINMENU_DATASET_ID,
// optional, only used if there's a filter applied after clicking on an item
backImageUrl: "myBackIcon.png",
// optional, defaults to BROWSER (can also specify INTENT to launch an intent)
itemType: Home.panels.Item.IMAGE,
itemHandler: Home.panels.ItemHandler.BROWSER
}],
// optional, defaults to FRAME (only supported layout for v1)
layout: Home.panels.Layout.FRAME,
};
}
exports.load = function(){
console.debug("Loading addon Home Panel");
try{
Home.panels.uninstall(PANEL_ID);
Home.panels.unregister(PANEL_ID);
}catch(e){
console.error("Ocurrio un error al desintalar el panel" + e);
//console.exception(e);
}
Home.panels.register(PANEL_ID, optionsCallback);
Home.panels.install(PANEL_ID);
syncData2();
//HomeProvider.requestSync(PANEL_ID, syncData2); // this doesn't work either
Home.panels.update(PANEL_ID);
}
exports.unload = function(){
console.debug("Unloading Addon Panel");
Home.panels.uninstall(PANEL_ID);
Home.panels.unregister(PANEL_ID);
}
the exported load function gets called when addon is loaded.
Acording to https://developer.mozilla.org/en-US/Add-ons/Firefox_for_Android/API/Home.jsm/panels this is posible.
However, I can't make it work with two panels, only the first would load.
I haven't been able to find any information on this specific task so far. Thank you in advance.
The "TOP SITES" that comes with firefox does what I want. It shows a grid, then a list of choises.
Firefox for Android TOP SITES panel
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'm doing an application for Android and IOS. In this application, I have a window, and I add/remove different views with the content.
I want that the first view will be only in portrait mode, whereas the rest of the views can be in any orientation.
How can I do it?
With titanium SDK 3.1.2 it works more or less on IOS:
My window:
var appWindow = Titanium.UI.createWindow({
top : 0,
left : 0,
height : utils.getScreenHeight(),
width : utils.getScreenWidth(),
backgroundColor : "#393a3a",
//fullscreen : true,
orientationModes : [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT],
});
Then, when I want to load a view:
var openWindow = function(e) {
appWindow.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT];
if (e.win == 'Home') {
Titanium.UI.orientation = Titanium.UI.PORTRAIT;
appWindow.orientationModes = [Titanium.UI.PORTRAIT];
orientacion = 0;
activeView = Home.Constructor(appWindow);
} else if (e.win == 'configuracion') {
Titanium.UI.orientation = Titanium.UI.PORTRAIT;
orientacion = 0;
appWindow.orientationModes = [Titanium.UI.PORTRAIT];
activeView = Configuracion.Constructor(appWindow);
} else if (e.win == 'Circle') {
activeView = Circle.Constructor(appWindow);
}
appWindow.add(activeView);
};
Now, I want to use SDK 3.1.3 to support IOS 7, and it doesn't work, none of the views allow to rotate.
Do you know how I can do this?
Thank you very much
I did not have any luck with changing a windows orientationModes on runtime too. The docs say that the window property orientationModes as well as its method setOrientationModes have to be set before opening the window.
So switching from views to windows is not an option?
If you want a window to allow orientations different from those defined in tiapp.xml, you have to set orientationModes on every window individually:
// This window allows orientations defined in tiapp.xml
var appWin = Ti.UI.createWindow({
backgroundColor = '#FFF'
});
appWin.open();
// This window is portrait only
var win = Ti.UI.createWindow({
backgroundColor: '#FFF',
orientationModes: [Ti.UI.PORTRAIT]
});
win.open();
// If this window is opened it allows multiple orientations
var newWindow = Ti.UI.createWindow({
backgroundColor: '#FFF',
orientationModes: [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT]
});
newWindow.open()
This is tested with SDK 3.1.3.
Edit
To make this work on Android, you have to force a heavyweight window by either setting fullscreen: true or navBarHidden: true
You can create a custom AndroidManifest.xml and set screenOrientation attribute for the activities you want.-
android:screenOrientation="portrait"
More information here
With titanium SDK 3.1.2 I put the following code for:
Titanium.UI.orientation = Titanium.UI.PORTRAIT;
appWindow.orientationModes = [Titanium.UI.PORTRAIT];
and then, when you load other view, then put:
appWindow.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT];
I'm working with Titanium 3.1 and developing for Android 3.0 and greater.
My app has a view that when clicked asks you if you want to take a picture or select an image from gallery. When I choose to take a picture from the camera, the camera shows with no problem and I can take the picture, the problem is that after I take the picture and choose to use it, my app resume from the beginning, not returning to the previous state it was showing before choosing to take a picture.
When I checked logcat I saw this line:
I/TiRootActivity(24120): (main) [0,0] checkpoint, on root activity create, savedInstanceState: null
It seems the state of my app is not being saved, but I don't know why. I'll be honest, this is my first time working on an app that goes to the camera app, takes a picture and returns to the app. Previously I've worked with Intents in Titanium and I've been able to return to the correct state of my app after exiting the application that was opened with the Intent using the back button.
This is the code I use to open the camera:
var globalBabyPicture = Titanium.UI.createImageView({
image:imagesPath + "kinedu_0027_ic_camara.png",
width:75,
});
var photoOptionsViewFromCamera = Ti.UI.createView({
width:Ti.Platform.displayCaps.platformWidth,
height:44,
left:0,
top:1*44,
backgroundColor:"transparent"
});
var photoOptionsViewFromCameraLabel = Ti.UI.createLabel({
text:"from camera",
font:{fontSize:14, fontFamily:"Arial Rounded MT Bold"},
color:"#368cd6"
});
photoOptionsViewFromCamera.add(photoOptionsViewFromCameraLabel);
photoOptionsViewFromCamera.addEventListener("touchstart", function(e){
var animateTouchStart = Ti.UI.createAnimation({backgroundColor:"#AFD1DE", duration:150});
photoOptionsViewFromCamera.animate(animateTouchStart);
});
//********* this is the code that triggers the camera to take the picture
photoOptionsViewFromCamera.addEventListener("touchend", function(e){
var animateTouchEnd = Ti.UI.createAnimation({backgroundColor:"transparent", duration:150});
photoOptionsViewFromCamera.animate(animateTouchEnd);
animateTouchEnd.addEventListener("complete", function(e){
Ti.Media.showCamera({
success : function(event) {
var tmp = Ti.Filesystem.getFile(Ti.Filesystem.tempDirectory, ('baby_temp.png'));
tmp.write(event.media);
var blob = tmp.read();
Ti.App.fireEvent("changePicture");
},
cancel : function() {
},
error : function(error) {
var message;
if (error.code == Ti.Media.NO_CAMERA) {
message = 'Device does not have camera capabilities';
} else {
message = 'Unexpected error: ' + error.code;
}
Ti.UI.createAlertDialog({
title : 'Camera',
message : message
}).show();
},
saveToPhotoGallery : false,
allowEditing : true,
mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO]
});
});
});
Ti.App.addEventListener("changePicture", function(e){
var tmp = Ti.Filesystem.getFile(Ti.Filesystem.tempDirectory, ('baby_temp.png'));
var blob = tmp.read();
var animationChange = Ti.UI.createAnimation({opacity:0, duration:200});
babyImage.animate(animationChange);
var animationChangeCompleted = Ti.UI.createAnimation({opacity:1, duration:200});
animationChange.addEventListener("complete", function(e){
babyImage.setWidth(100);
var image = blob.imageAsThumbnail(150);
babyImage.setImage(image);
babyImage.animate(animationChangeCompleted);
});
});
I've checked and the success callback is never made, I think it's because the application resumes from the beginning, showing the application splash screen.
How can I ensure that after taking the picture, the application returns to the previous view without resuming the application from the beginning?
I think allowEditing should be allowImageEditing
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});