Titanium: WebView using Navigation Bar - webview

I'm using Titanium.
I am trying to show web page with navigation bar.
I want to put Back button at the top left position inside navigation bar which works as browser's back.
Below is my current code.
Could anybody help me with this??
Thanks in advance.
var w = Titanium.UI.createWindow({
backgroundColor:'#fff',
leftNavButtonLabel:'back',});
var navGroup = Ti.UI.iPhone.createNavigationGroup({
window:w
});
var backBtn = Titanium.UI.createButton({
title:'Back',
style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
var webView = Titanium.UI.createWebView({
url : 'http://gooogle.com',
canGoBack : true,
});
backBtn.addEventListener( 'click', function() {
webview.goBack();
});
w.add.setLeftNavButton(backBtn);
w.add(webView);
w.add(navGroup);
w.open();
w.navGroup.open();

Try, This... or
var main_win = Ti.UI.createWindow({
});
var w = Titanium.UI.createWindow({
backgroundColor:'#fff',
leftNavButtonLabel:'back',
});
var navGroup = Ti.UI.iPhone.createNavigationGroup({
window:w
});
var backBtn = Titanium.UI.createButton({
title:'Back',
style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
var webView = Titanium.UI.createWebView({
url : 'http://gooogle.com',
canGoBack : true,
});
backBtn.addEventListener( 'click', function() {
webview.goBack();// Goes back one entry in the web view's history list. to the previous page.
});
w.add.setLeftNavButton(backBtn);
w.add(webView);
main_win.add(navGroup);
main_win.open();
for Navigation new window
navGroup.open(Window name);
for Closing last open window;
navGroup.close(Window name);

Related

How to set the devTools window position in electron

I got this from the docs
app.on('ready', function(){
devtools = new BrowserWindow()
window = new BrowserWindow({width:800, height:600})
window.loadURL(path.join('file://', __dirname, 'static/index.html'))
window.webContents.setDevToolsWebContents(devtools.webContents)
window.webContents.openDevTools({mode: 'detach'})
})
It opens two windows, on is the dev tools. But it's exactly underneath the main window.
Is there a way to get them side by side (the screen is big enough)?
Once you've called setDevToolsWebContents then you can move the devtools window around just by calling devtools.setPosition(x, y).
Here is a example of moving the devtools next to the window by setting it's position whenever it's moved:
app.on('ready', function () {
var devtools = new BrowserWindow();
var window = new BrowserWindow({width: 800, height: 600});
window.loadURL('https://stackoverflow.com/questions/52178592/how-to-set-the-devtools-window-position-in-electron');
window.webContents.setDevToolsWebContents(devtools.webContents);
window.webContents.openDevTools({mode: 'detach'});
// Set the devtools position when the parent window has finished loading.
window.webContents.once('did-finish-load', function () {
var windowBounds = window.getBounds();
devtools.setPosition(windowBounds.x + windowBounds.width, windowBounds.y);
});
// Set the devtools position when the parent window is moved.
window.on('move', function () {
var windowBounds = window.getBounds();
devtools.setPosition(windowBounds.x + windowBounds.width, windowBounds.y);
});
});

Appcelerator Tabgroup change to drop-down

When in portrait tabgroup has a scrollbar to slide. but in landscape if length of all tabs over than width of screen. tabgroup is changing to drop-down
var win1 = Ti.UI.createWindow();
var win2 = Ti.UI.createWindow();
var win3 = Ti.UI.createWindow();
var win4 = Ti.UI.createWindow();
var win5 = Ti.UI.createWindow();
var win6 = Ti.UI.createWindow();
var tab1 = Ti.UI.createTab({
title : 'aaaaaaaaaaa',
window : win1
});
var tab2 = Ti.UI.createTab({
title : 'bbbbbbbbbbb',
window : win2
});
var tab3 = Ti.UI.createTab({
title : 'ccccccccccc',
window : win3
});
var tab4 = Ti.UI.createTab({
title : 'ddddddddddd',
window : win4
});
var tab5 = Ti.UI.createTab({
title : 'eeeeeeeeeee',
window : win5
});
var tab6 = Ti.UI.createTab({
title : 'fffffffffff',
window : win6
});
var tabgroup = Ti.UI.createTabGroup({
tabs : [tab1,tab2,tab3,tab4,tab5,tab6]
});
tabgroup.open();
how to stop changing
It's a default behavior of tab group. If you add more than five tabs, it will automatically add more tabs. You can't change this default behavior.
For more information, read this.

Updating UI of firefox addon using sdk

I am writing a simple firefox addon using addon-sdk-1.17 . I am having trouble updating the UI of my addon. If I do a cfx run, the addon looks normal, but if I do "cfx xpi" and load it into a profile that already has a previous version of the addon, well thats where I run into problems.
A simple example of this can be seen by an example mozilla has in their toolbar tutorial. It can be found at: https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_toolbar
If I package (cfx xpi) the following code (assuming the icons and html file exist), it works as expected:
var { ActionButton } = require('sdk/ui/button/action');
var { Toolbar } = require("sdk/ui/toolbar");
var { Frame } = require("sdk/ui/frame");
var previous = ActionButton({
id: "previous",
label: "previous",
icon: "./icons/previous.png"
});
var next = ActionButton({
id: "next",
label: "next",
icon: "./icons/next.png"
});
var play = ActionButton({
id: "play",
label: "play",
icon: "./icons/play.png"
});
var frame = new Frame({
url: "./frame-player.html"
});
var toolbar = Toolbar({
title: "Player",
items: [previous, next, play, frame]
});
But if i want to add an additional button to it and I decide to change the url of the frame, they don't update to the toolbar. For example, after loading the above addon into my profile, if I make the following changes to the main.js:
var { ActionButton } = require('sdk/ui/button/action');
var { Toolbar } = require("sdk/ui/toolbar");
var { Frame } = require("sdk/ui/frame");
var previous = ActionButton({
id: "previous",
label: "previous",
icon: "./icons/previous.png"
});
var next = ActionButton({
id: "next",
label: "next",
icon: "./icons/next.png"
});
var play = ActionButton({
id: "play",
label: "play",
icon: "./icons/play.png"
});
var mute = ActionButton({
id: "mute",
label: "mute",
icon: "./icons/mute.png"
});
var frame = new Frame({
url: "./new-frame-player.html"
});
var toolbar = Toolbar({
title: "Player",
items: [previous, next, play, mute, frame]
});
The toolbar will not have either (frame-player.html or new-frame-player.html) loaded on the toolbar, and the mute button will not be located on the toolbar either. Again, this works fine for "cfx run" or if I install the addon to a profile that doesn't have the previous version of the addon.
I assume there is something dumb I am doing or there is an easy solution, but I haven't seen documentation on this anywhere. Not sure if I just overlooked something or what.
The "problem" here is, that Firefox saves the location where buttons had been manually placed, even when the extension is uninstalled. You can reset this data by hitting "Restore Defaults" in the cutomization tab.
Alternatively you can force-move your frame using the CustomizableUI.jsm:
var CustomizableUI = require("resource:///modules/CustomizableUI.jsm");
CustomizableUI.addWidgetToArea(frame.id, "inner-" + toolbar.id);
Or if you want to move a button:
var CutomizableUI = require("resource://modules/CustomizableUI.jsm");
var { getNodeView } = require("sdk/view/core");
CustomizableUI.addWidgetToArea(getNodeView(button).id, "inner-" + toolbar.id);

Reusable Panel from hiddenDOMWindow

I have a CustomizableUI.jsm button i add to the toolbar. On click of this it opens a panel which has a chrome page loaded.
I want all windows to open this same panel. So my thought was to add the panel to Services.appShell.hiddenDOMWindow and then open it anchored to the the CustomizableUI.jsm button.
However I'm having trouble adding the panel to the hidddenDOMWindow.
This code works fine from scratchpad if you make the first line be var win = window. But if you make it be var win = Services.appShell.hiddenDOMWindow it has trouble appending the panel to the popupset. So weird.
Code here is the appShell hidden window code. If you make it var win= window it works fine:
var win = window; //Services.appShell.hiddenDOMWindow;
var panel = win.document.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul','panel');
var props = {
type: 'arrow',
style: 'width:300px;height:100px;'
}
for (var p in props) {
panel.setAttribute(p, props[p]);
}
var popupset = win.document.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul','popupset');
popupset.appendChild(panel);
win.document.documentElement.appendChild(popupset);
panel.addEventListener('popuphiding', function (e) {
e.preventDefault();
e.stopPropagation();
//panel.removeEventListener('popuphiding', arguments.callee, false); //if dont have this then cant do hidepopup after animation as hiding will be prevented
panel.addEventListener('transitionend', function () {
panel.hidePopup(); //just hide it, if want this then comment out line 19 also uncomment line 16
//panel.parentNode.removeChild(panel); //remove it from dom //if want this then comment out line 18
}, false);
panel.ownerDocument.getAnonymousNodes(panel)[0].setAttribute('style', 'transform:translate(0,-50px);opacity:0.9;transition: transform 0.2s ease-in, opacity 0.15s ease-in');
}, false);
panel.openPopup(window.document.documentElement, 'overlap', 100, 100);

Making a panel only available for certain URLs

Chrome has something called "Page Actions", and I'm roughly trying to replicate that functionality with the Firefox Addon SDK/Jetpack. There's probably a better approach than what I've tried so far, and I'm open to suggestions.
Using tabs, I'm able to listen for tab ready and activate events, and if the tab's URL matches, the addon widget should be enabled; if not, disabled. I've got to the point where I can change the icon when appropriate, but I'd like to disable the panel as well.
Strategy 1: Steal the click event and only show the panel if we're on the right page; otherwise, ignore. Problem is, according to the docs, manually showing the panel causes it not to be anchored, a bug that's not had much progress on it.
Strategy 2: Set the contentURL to null when disabling. Get an error whining about it not being an URL.
Strategy 3: Use a different HTML document for the disabled state. Setting panel.contentURL to another URL doesn't work after going to a different page?
Here's the code:
const widgets = require("widget");
const Panel = require("panel").Panel;
const tabs = require("tabs");
const data = require("self").data;
const prefs = require("simple-prefs").prefs;
var panel = Panel({
width: 480,
height: 640,
contentURL: data.url("panel.html"),
contentScriptFile: [data.url('jquery.min.js'), data.url('panel.js')],
onMessage: function (msg) { console.log(msg) }
});
var widget = widgets.Widget({
id: "icon",
label: "Export",
contentURL: data.url("icon.png"),
panel: panel
});
function enable() {
widget.contentURL = data.url('icon.png');
panel.contentURL = data.url("panel.html");
}
function disable() {
widget.contentURL = data.url('icon_disabled.png');
panel.contentURL = data.url("panel_disabled.html");
}
function on_change_tab(tab) {
console.log(tab.url);
if (/http:\/\/example.com\/.*/.exec(tab.url)) {
console.log('ENABLE');
enable();
} else {
console.log('DISABLE');
disable();
}
console.log(panel.contentURL);
}
tabs.on('ready', on_change_tab);
tabs.on('activate', on_change_tab);
Related, but should have the anchoring problem? How to reload a widget popup panel with firefox addon sdk?
In case you still haven't solved your issue (and for anyone else having a similar problem):
I had a similar issue and resolved it by using erikvold's ToolbarButton package. Once you've installed that and its dependencies, something like this in your main.js file should work.
var pan = require("panel").Panel({
width: 400,
height: 600,
contentURL: "http://stackoverflow.com"
//maybe some more options here
});
var button = require("toolbarbutton").ToolbarButton({
id: "myButton",
label: "My Button",
image: data.url("someicon.png"),
panel: pan //This binds the panel to this toolbarbutton
});
I hope you can find some way to adapt this to your project.
toolbarbutton.ToolbarButton({
id: "MyAddon",
label: "My Addon",
tooltiptext: "My Addon Tooltip",
image: data.url("logo.png"),
onCommand: function() {
var dictionary_panel = require("panel").Panel({
width:630,
height:600,
contentURL: data.url("HtmlPage.html"),
contentScriptWhen: 'ready',
contentScriptFile: [data.url("style.css"),data.url("jquery-1.7.1.js"),
data.url("javascriptquezz.js"),data.url("create.js")]
});
dictionary_panel.show();
}
});

Resources