I'm new to node-webkit and have the tray created as such
var gui = require('nw.gui');
var tray = new gui.Tray({ icon: 'images/Appicon.png' });
tray.on('click', function() { console.log("what goes in here?")});
When the tray icon is clicked I want the window to be pulled up if it's minimized and open index.html.
Right now I get the log statement to print.
Try this
var gui = require('nw.gui');
var win = gui.Window.get();
var tray = new gui.Tray({
icon: 'images/Appicon.png'
});
tray.on('click', function() {
win.maximize();
});
Related
I am migrating a current project to 3.1.3 . I need a close button on the modal window so i had to use a NavigationWindow as suggested in the IOS7 migration guide. Here is what i have
btnSubscription.addEventListener('click', function(e) {
Ti.API.info('Subscription Button Clicked.');
openWindow("paymentsubscription.js", "Subscription");
});
function openWindow(url, title) {
var win = Ti.UI.createWindow({
url : url,
backgroundColor : 'white',
modal : true,
title : title
});
if (Titanium.Platform.osname !== "android") {
var winNav = Ti.UI.iOS.createNavigationWindow({
modal: true,
window: win
});
}
if (Titanium.Platform.osname !== "android") {
winNav.open();
}
else {
win.open();
}
}
Now on paymenttransaction.js i was previously doing this when i was using titanium 2.x
var mainWindow = Ti.UI.currentWindow;
var mainWinClose = Ti.UI.createButton({
style : Ti.UI.iPhone.SystemButtonStyle.DONE,
title : 'close'
});
if (Titanium.Platform.osname !== "android") {
mainWinClose.addEventListener('click', function() {"use strict";
mainWindow.close();
});
responseWindow.setRightNavButton(responseWinRightNavButton);
mainWindow.setRightNavButton(mainWinClose);
}
The problem i am facing is that i need to close winNav in the case of IOS and not win anymore. In paymenttransaction.js i was previously using
var mainWindow = Ti.UI.currentWindow;
But now i need to close the navigation window(winNav) and this does not hold good anymore. Is there anyway to do this? . Is there a Ti.UI.currentWindow equivalent for NavigationWindow ?
You aren't using the navigationWindow properly. You shouldn't be calling open() on a window when you use one.
You are looking for:
`winNav.openWindow(yourWindow)
Also when you are creating a new window, pass a pointer to your navigationWindow in the constructor, then you can close the window properly. Don't create a window like that use CommonJS's require() to return your window:
paymenttransaction.js:
function paymentTransactionWindow(navGroup, otherArgs) {
var mainWinClose = Ti.UI.createButton({
style : Ti.UI.iPhone.SystemButtonStyle.DONE,
title : 'close'
});
var win = Ti.UI.createWindow({
url : url,
backgroundColor : 'white',
modal : true,
title : title,
rightNavButton: mainWinClose
});
if (Titanium.Platform.osname !== "android") {
mainWinClose.addEventListener('click', function() {
navGroup.closeWindow(win);
});
return win;
}
module.exports = paymentTransactionWindow;
Then in your previousWindow:
PaymentTransactionWindow = require('/paymentTransactionWindow); //the filename minus .js
var paymentTransactionWindow = new PaymentTransactionWindow(winNav, null);
mainNav.openWindow(paymentTransactionWindow);
watch some of the videos on commonJS: http://www.appcelerator.com/blog/2011/08/forging-titanium-episode-1-commonjs-modules/
I have App.js
(function() {
Window = require('ui/tablet/ApplicationWindow');
}
new Window().open();
})();
From there ApplicationWindow.js is loaded.
In ApplicationWindow.js
function ApplicationWindow() {
//load component dependencies
var FirstView = require('ui/common/FirstView');
//create component instance
var self = Ti.UI.createWindow({
backgroundColor:'#ffffff'
});
var win2 = Titanium.UI.createWindow({
backgroundColor: 'red',
title: 'Red Window'
});
//construct UI
var firstView = new FirstView();
var nav = Titanium.UI.iPhone.createNavigationGroup({
window: win2
});
win2.add(firstView);
self.add(nav);
self.open();
//self.add(firstView);
if (Ti.Platform.osname === 'ipad') {
self.orientationModes = [Ti.UI.LANDSCAPE_LEFT] ;
};
return self;
}
//make constructor function the public component interface
module.exports = ApplicationWindow;
I get a view with 2 textfields and a button login in FirstView.js.The view has a navigation bar with title Red Window. I want to load Home.js on loginButton Click.
Here is the loginButtonClick Code :
loginButton.addEventListener ('click', function(e){
//navigate to Home.js
});
How can I do that.Can anyone please help me out.
Try the following method in your current file
loginButton.addEventListener('click', function(e){
var win = Ti.UI.createWindow({
backgroundColor : 'white',
url : 'home.js' //Path to your js file
});
win.open();
});
home.js
var myWin = Ti.UI.currentWindow;
//You can add your controls here and do your stuff.
// Note that never try to open myWin in this page since you've already opened this window
You can also try the following method
Method 2
//In your current page
loginbutton.addEventListener('click', function(e) {
var Home = require('/ui/common/Home');
var homePage = new Home();
homePage.open();
});
Your Home.js file
function Home() {
var self = Ti.UI.createWindow({
layout : 'vertical',
backgroundColor:'white'
});
//Do your stuff here
//Add other controls here
return self;
}
module.exports = Home;
Look at this answer, it's also same as your question
I am having trouble trying to add an Event Listener to my button. Here is what I have in my code.
var TabGroup = Titanium.UI.createTabGroup();
var Maps = Titanium.UI.createWindow({
backgroundImage:'/images/Background2.jpg'
});
var tab1 = Titanium.UI.createTab({
title: 'Maps',
icon: '/KS_nav_ui.png',
window: Maps
});
var scrollView = Titanium.UI.createScrollView({
contentWidth:'auto',
contentHeight:'auto',
top:0,
showVerticalScrollIndicator:false,
showHorizontalScrollIndicator:false
});
var view = Ti.UI.createView({
height:495,
width:300
});
var btnInnovations = Ti.UI.createButton({
height:75,
width:Titanium.UI.FILL,
backgroundImage:'/images/Innovations.jpg',
top:60
});
var btnOaks = Ti.UI.createButton({
height:75,
width:Titanium.UI.FILL,
backgroundImage:'/images/Oaks Campus.jpg',
top:145
});
var btnWHQ = Ti.UI.createButton({
height:75,
width:Titanium.UI.FILL,
backgroundImage:'/images/WHQ.jpg',
top:230
});
var btnRiverport = Ti.UI.createButton({
height:75,
width:Titanium.UI.FILL,
backgroundImage:'/images/Riverport.jpg',
top:315
});
var btnContinuous = Ti.UI.createButton({
height:75,
width:Titanium.UI.FILL,
backgroundImage:'/images/Continuous.jpg',
top:400
});
view.add(btnInnovations);
view.add(btnOaks);
view.add(btnWHQ);
view.add(btnRiverport);
view.add(btnContinuous);
scrollView.add(view);
Maps.add(scrollView);
TabGroup.addTab(tab1);
TabGroup.open();
btnInnovations.addEventListener('click', function(e){
var InnovationsFloors = Titanium.UI.createWindow({
title: 'Innovations Floors',
url:'InnovationsFloors.js'
});
InnovationsFloors.open({modal : true, backgroundImage:'images/Background1.jpg'});
The error I get in the emulator says cannot call method open of undefined and if I take out the Titanium.UI.currentTab.open(InnovationsFloors,{animation:true}); it won't even register the click...
First of all you cant have spaces in the name of your Window url field, rename your Innovations Floors.js file to InnovationsFloors.js.
Second part is that the attributes you are passing in to the open() command are not supported, it should be animated not animation, even so, you should not use this in this fashion, I refer you to the docs on this one.
Instead just do this:
Titanium.UI.currentTab.open(InnovationsFloors);
Or try this:
TabGroup.activeTab.open(InnovationsFloors);
If that doesn't work then it means you have not called open on your TabGroup so there is no current tab.
You could also always just try this and open a modal:
InnovationsFloors.open({modal : true});
if you want to open a window with a button try this works for me
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
//
// create base UI tab and root window
//
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 label1 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 1',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
var button = Titanium.UI.createButton({
title: 'Hello',
top: 10,
width: 100,
height: 50
});
win1.add(button)
win1.add(label1);
button.addEventListener('click', function(e){
var win = Titanium.UI.createWindow({
title:'New Window',
backgroundColor:'#fff'
});
win.open();
});
tabGroup.addTab(tab1);
// open tab group
tabGroup.open();
I have a Panel which acts as a desktop. When a button is clicked a window is opened up inside the panel. I set the following in the config:
var win = Ext.create('window', {
renderTo : currentPanel.getLayout().getTarget(),
constrain : true
});
win.show();
So my window is being open and constrained in the main panel. I want the panel to listen for when any window is open inside of it so I can monitor it. Are there any listener that will do this? I tried 'add' and 'added' but the window has to be added to the panel via:
panel.add(window);
But in my case I'm not adding it to the container, but I'm opening it and constraining it to my container using the renderTo.
What I would do is create a subclass of panel for your desktop and a subclass of window for your windows. Add a 'windowOpened' listener to your custom panel, and fire this event from your custom window's 'show' listener.
Something like this:
DesktopPanel.js
Ext.define('App.view.DesktopPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.desktoppanel',
initComponent: function() {
this.callParent();
this.addListener('windowOpened', function(newWindow){
//Do whatever it is you want to do here
});
}
});
DesktopWindow.js
Ext.define('App.view.DesktopWindow', {
extend: 'Ext.window.Window',
alias: 'widget.desktopwindow',
constrain: true,
initComponent: function() {
this.renderTo = this.ownerPanel.getLayout().getTarget();
this.callParent();
this.addListener('show', function(){
this.ownerPanel.fireEvent('windowOpened',this);
});
}
});
Then your code would be something like this:
var win = Ext.create('App.view.DesktopWindow', {
ownerPanel: MyDesktop, //an instance of 'DesktopPanel'
});
win.show();
I have a Dialog with a form inside. The following code is just an example of what I'm trying to do. When you close a dijit.Dialog, if you dont't destroy recursively his children, you just can't reopen it (with the same id).
If you don't want to destroy your widget you can do something like that :
var createDialog = function(){
try{
// try to show the hidden dialog
var dlg = dijit.byId('yourDialogId');
dlg.show();
} catch (err) {
// create the dialog
var btnClose = new dijit.form.Button({
label:'Close',
onClick: function(){
dialog.hide();
}
}, document.createElement("button"));
var dialog = new dijit.Dialog({
id:'yourDialogId',
title:'yourTitle',
content:btnClose
});
dialog.show();
}
}
I hope this can help but with this code the error thrown is :
exception in animation handler for: onEnd (_base/fx.js:153)
Type Error: Cannot call method 'callback' of undefined (_base/fx.js:154)
I have to say I'm a little lost with this one ! It is driving me crazy ^^
PS : sorry for my "French" English ^^
I'll introduce you to your new best friend: dojo.hitch()
This allows you to bind your onClick function to the context in which it was created. Chances are, when you push the button in your code, it is calling your .show() .hide() form the context of the global window. var dlg was bound to your createDialog function, so it's insides are not visible to the global window, so the global window sees this as undefined.
Here's an example of what I changed to your code:
var createDialog = function(){
// try to show the hidden dialog
var dlg = dijit.byId('yourDialogId');
dlg.show();
// create the dialog
var btnClose = new dijit.form.Button({
label:'Close',
onClick: function(){
dojo.hitch(this, dlg.hide());
}
}, document.createElement("button"));
dlg.domNode.appendChild(btnClose.domNode);
var btnShow = new dijit.form.Button({
label : 'Open',
onClick : function() {
dojo.hitch(this, dlg.show());
}
}, document.createElement("Button"));
dojo.body().appendChild(btnShow.domNode);
};
dojo.ready(function() {
createDialog();
});
Note the use of dojo.hitch() to bind any future calls or clicks of the various buttons to the context in which the dlg was created, forever granting the button's onclick method access to the inside of the createDialog function, where var dlg exists.
hi if i understand correctly, you didn't need to destroy dijit.Dialog every time. E.g.:
HTML: define simple button:
<button id="buttonTwo" dojotype="dijit.form.Button" onclick="showDialog();" type="button">
Show me!
</button>
Javascript:
// required 'namespaces'
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
// creating dialog
var secondDlg;
dojo.addOnLoad(function () {
// define dialog content
var content = new dijit.form.Button({
label: 'close',
onClick: function () {
dijit.byId('formDialog').hide();
}
});
// create the dialog:
secondDlg = new dijit.Dialog({
id: 'formDialog',
title: "Programatic Dialog Creation",
style: "width: 300px",
content: content
});
});
function showDialog() {
secondDlg.show();
}
See Example and reed about dijit.dialog