Titanium Studio Header navigation bar - javascript

Hello i was just wondering how i would go about making the following header with navigation buttons in Titanium Studio(javascript).
The other method i have been using is a tab menu with the bottom tabs visibility set to false.
So turns out i cant post images, so i will link to an older thread that uses titanium ALLOY.
How to create a header bar with buttons in Titanium JS?
Thanks for any help

As long as your Window is inside a TabGroup or NavigationWindow, you can easily add buttons to its navigation bar. First create each button object, then assign the buttons to the Window (not NavigationWindow or TabGroup) leftNavButton and rightNavButton properties, like so:
var groupsButton = Ti.UI.createButton({
title: "Groups"
});
var addButton = Ti.UI.createButton({
systemButton: Ti.UI.iPhone.SystemButton.ADD
});
var win = Ti.UI.createWindow({
title: "Contacts",
backgroundColor: "#ffffff",
leftNavButton: groupsButton,
rightNavButton: addButton
});
var navWin = Ti.UI.iOS.createNavigationWindow({
window: win
});
navWin.open();

Related

How to create new window without menu bar for onlick function (electronJS)

I tried this but this gives me a new window with menu bar. I removed main window menu bar using win.setMenu(null) in main.js file. but I couldn't find a way to do it in new window ("add items window")
please see the image below to see it clearly
onclick="window.open('addNew.html' ,'Add New Item', 'width=900 , height=400 , toolbar=no ,resizable=no')
You can intercept the new window creation and remove the menu the same way you remove it for your main window.
const { app } = require("electron");
app.on("browser-window-created", (e, win) => {
win.removeMenu();
});
I used 'Menu.setApplicationMenu(null)' insted of 'win.setMenu(null)'. this works for me. thank you.

Get Id of TitlePane programatically defined to show/hide

I am very new to Dojo and this is what I am trying to do. I have a titlepane which is programatically declared using the code below:
var pane = this._createTitlePane(config.widgets.title, config.widgets.position,
config.widgets.open);
_createTitlePane: function (title, position, open, optclass) {
var tp = new TitlePane({
title: title,
open: open
}).placeAt(this.sidebar, position);
domClass.add(tp.domNode, 'titlePaneBottomFix titlePaneRightFix');
if (optclass) {
domClass.add(tp.domNode, optclass);
}
tp.startup();
return tp;
},
Later I am trying to hide this title pane when a button is clicked using esri.hide. My question is how do I get a reference to this title pane? There's no Id when it is defined.
When I look in the chrome debugger, I see the below line highlights the widget
<div class="titlePaneBottomFix titlePaneRightFix dijitTitlePane" title="" role="group" id="dijit_TitlePane_1" widgetid="dijit_TitlePane_1">
If I try to do something like esri.hide(dojo.byId("dijit_TitlePane_1")), then it hides the widget. But can I refer to the title pane using this widget Id?
You may want to just give the title pane its own id in the function:
_createTitlePane: function (title, position, open, optclass, paneId) {
var tp = new TitlePane({
title: title,
id: paneId, // TitlePane id here
open: open
}).placeAt(this.sidebar, position);
domClass.add(tp.domNode, 'titlePaneBottomFix titlePaneRightFix');
if (optclass) {
domClass.add(tp.domNode, optclass);
}
tp.startup();
return tp;
}
Then you can refer to it with and hide it with:
esri.hide(dijit.byId("theIdYouGaveIt").domNode);
To understand the difference between dojo.byId and dijit.byId, this link may help.
Also, if you're creating this in your own custom widget, you can also make the title pane a local reference, ie: this.tp = new TitlePane({...}). Anywhere you need to access it from inside the widget, you can simply call "this.tp". Outside of the widget, you can access it using dot notataion: myWidget.tp.doSomething(). Better yet, if you create it declaratively in a template like this: <div data-dojo-type=dijit/TitlePane" data-dojo-attach-point="tp" ...></div>, when the widget is instantiated it will automatically have a handle to "this.tp" via the attach point.

Triggering a back button in webview

I'm using titanium studio to package an app we are currently working on, and one of the pages is a webview to a mobile version of our site. This all works and looks great, but when the user navigates to a new url, going backwards is impossible. I've tried several methods to set up a back button/ navigation group to solve this problem, but nothing seems to work. What would be the best way to either to load the next page into the nav group, or trigger a back button to appear upon a new page being loaded?
So far I have tried:
Creating a navigation group and firing an event upon opening a new
window to add it as a child.
Creating a button and removing/adding it depending on canGoBack()
Having a constant button exist that only fires if goBack() is
defined
var btnBack = Titanium.UI.createButton({
title : '< ',
top : 0,
left : 0,
height : '10%',
});
var btnFwd = Titanium.UI.createButton({
title : ' >',
top : 0,
right : 0,
height : '10%',
});
var webView = Titanium.UI.createWebView({
url : 'http://gooogle.com',
canGoBack : true,
canGoForward : true,
top : '10%',
height : '90%',
});
btnBack.addEventListener('click', function() {
webView.goBack();
});
btnFwd.addEventListener('click', function() {
webView.goForward();
});
var win1 = Titanium.UI.createWindow({
backgroundColor:'#fff',
});
win1.add(btnBack);
win1.add(btnFwd);
win1.add(webView);
win1.open();
Does this solve your issue? if this doesn't, please clarify what do you need to do??

Why i can't show new Ext.Window twice

I have a html with one div and two scripts with Ext Js 3.4.0
<script type="text/javascript" src="js/listaBancos.js"></script>
The file listaBancos.js show a Grid with toolbar button in the divListaBancos, the first time i click the button "Agregar" and i see the Window declared in altaBanco.js.
==============Part of the grid in listaBancos.js============
tbar:[{
text:'Agregar',
tooltip:'Agrega un banco',
iconCls:'add',
handler: agregaBanco
}]
function agregaBanco(){
var win =Ext.getCmp('myWin');
win.show();
}
==============Window declared in altaBanco.js================
var winAltaBanco = new Ext.Window({
id : 'myWin',
height : 250,
width : 400,
});
When i close the window then click the button again the windows doesn't showed.
Can you help me ???
The default close action of a windows is close, i.e., it destroys the component, hence it cannot be accessed using Ext.geCmp() again since it doesn't exist on the DOM anymore. To achieve what you want either set closeAction : hide or
var cmp = Ext.getCmp('myId');
if(!cmp)
{
cmp = new Ext.Window({
id : 'myId'
});
}
cmp.show();
Prefer hiding to recreating.
Make sure in window config close action is set to hide.
closeAction:'hide'
check this
There is no need to make any trick, simply remove your window id. In ExtJS component ids must be unique.

Update a jQuery script when user switches to a new tabbed element

I'm having a hard time describing exactly what the problem is.. but the link in question is: http://www.evolutionarycollective.com/events/
You'll notice that when you load the "Calendar" tab, the calendar doesn't show up. If you resize the window, or manipulate the page in some other way, then the calendar appears. The calendar loads fine when it's not within a tab. It's being called in the header with:
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery('#calendar').fullCalendar({
events: themeforce.events
});
});
</script>
EDIT:
I believe this is the section of the script library that handles the tabs and panes.. (I'm using this with a wordpress theme that calls the tabs via a shortcode)
// jQuery tool's tab creator is not shortcode friendly, transfer the titles to the correct tabs area
jQuery('.bfi_pane').each(function(i) {
var title = jQuery(this).attr('title');
jQuery(jQuery(this).siblings('.bfi_tabs,.bfi_tabs_slide,.bfi_tabs_fade')[0]).append('<div>'+title+'</div>');
});
// Custom slide effect for tabs. slide up then down
jQuery.tools.tabs.addEffect('slide-slide',function(i, done) {
this.getPanes().slideUp(400).eq(i).delay(400).slideDown(400, done);
});
// Custom slide effect for tabs. slide up and down simultaneously
jQuery.tools.tabs.addEffect("slide", function(i, done) {
this.getPanes().slideUp(400).eq(i).slideDown(400, done);
});
// IMPORTANT: SLIDEDOWN JQUERY FIX. we need to assign the correct heights
// so that the slidedown effect doesn't JUMP
jQuery(".bfi_accordion_pane").each(function(i) {
var heightTo = jQuery(this).height();
var paddingTop = parseInt(jQuery(this).css("padding-top").replace('px', ''));
var paddingBottom = parseInt(jQuery(this).css("padding-bottom").replace('px', ''));
var marginTop = parseInt(jQuery(this).css("margin-top").replace('px', ''));
var marginBottom = parseInt(jQuery(this).css("margin-bottom").replace('px', ''));
jQuery(this).css("height", heightTo + paddingTop + paddingBottom + marginTop + marginBottom);
});
// start jQuery tool tabs. we have to do this the long way so we can make
// initialIndex work properly
jQuery(".bfi_tabs_slide").each(function(i) {
var openTab = jQuery(this).attr('rel');
jQuery(this).tabs('> div.bfi_pane', {effect: 'slide-slide', initialIndex: parseInt(openTab, 10)});
});
jQuery(".bfi_tabs_fade").each(function(i) {
var openTab = jQuery(this).attr('rel');
jQuery(this).tabs('> div.bfi_pane', {effect: 'fade', initialIndex: parseInt(openTab, 10)});
});
Is there some way I can somehow refresh the script when that tab lis loaded.. or fire off another document.ready?
Thank you!
The probable explanation is that the full calendar can't figure out its height because when initially created that tab is hidden, which will make it have zero width and height.
Just make the call to .fullCalendar() in a tab switch event handler.
Alternatively use the "off-left" method of hiding tabs, as described in the last few paragraphs of http://jqueryui.com/demos/tabs/

Categories

Resources