PhoneJS back button not working - phonejs

I created a basic DevExpress PhoneJS v13.2.5 app using the slideout navigation type. I can switch between views nicely using the slideout menu (URL hash changes). However, the back button doesn't seem to work. I expect that when I hit the back button, I would be taken to the previous view based on the URL hash. However, I am instead taken to the previous page. So, for example, if my history is as follows:
www.google.com
localhost:4633
localhost:4633/#home
localhost:4633/#foo
localhost:4633/#bar
And I hit the back button (doesn't matter if I'm using Chrome, Android, etc), I would expect to be taken back to localhost:4633/#foo. However, I am taken back to www.google.com. Sometimes, before I am taken to the previous page, I briefly see the URL change to localhost:4633/#root.
Has this happened to anyone else? Am I missing something in my app configuration? From everything I've read in the documentation, it should "just work." Here is my app init:
"use strict";
var MyApp = window.MyApp = {};
$(function () {
MyApp.app = new DevExpress.framework.html.HtmlApplication({
namespace: MyApp,
navigationType: "slideout",
navigation: [
{
title: "Home",
action: "#home",
icon: "home"
},
{
title: "Foo",
action: "#foo",
icon: "info"
},
{
title: "Bar",
action: "#bar",
icon: "info"
}
]
});
MyApp.app.router.register(":view", { view: "home" });
MyApp.app.navigate();
});

The Back button is available in each view in a stack except for the root view. If you create a link with MyApp.app.navigate('Foo') in your Home view, click on that link and go to the "Foo" page, then you can back in the Home page by pressing back button. Please see:
Navigation History For further detailed informations.

Related

Make Firefox Addon tab feels like chrome://newtab

I'm working on some chrome/firefox extension and what I want to accomplish is as similar UX as possible between these two. I've already understood that while in chrome you can (through manifest.json) register to override chrome://newtab, in firefox it's not such an easy job. What I want to accomplish in firefox is that once user click on browser action button - it opens new tab with my local HTML page. This codes do just that:
var buttons = require('sdk/ui/button/action');
var tabs = require('sdk/tabs');
var wuntils = require('sdk/window/utils');
var handleClick = function (state) {
tabs.open({
"url": "./pages/index.html",
"isPinned": false
});
};
var button = buttons.ActionButton({
id: "mozilla-link",
label: "Visit Mozilla",
icon: {
"16": "./assets/logo.png",
"32": "./assets/logo.png",
"64": "./assets/logo.png"
},
onClick: handleClick
});
Problem with this approach is that once new tab is opened theres resource://.... URL in the address bar. I've noticed that some other extensions managed to remove it and keep address bar empty but if I try to change tab.url property it starts redirection loop...
Any ideas how to make it look like a new tab but keep address bar empty?
Thanks!

Firefox ToolBar Button When Click Changes DOM?

New to firefox development and trying my best to figure this out.
Say I want to call a function in tap_browser.js that will modify the DOM when the user clicks on the toolbar widget, how would I do this?
This is the code I have so far
require("toolbarwidget").ToolbarWidget({
toolbarID: "nav-bar", // <-- Place widget on Navigation bar
id: "tap-icon",
label: "Tap",
contentURL: data.url("favicon.png"),
contentScriptFile: [data.url("tap_browser.js")]
});
I'm currently using a library to create the toolbar widget here: https://github.com/Rob--W/toolbarwidget-jplib
I don't know too much SDK but I helped someone with something that does. Check this out:
var my_wid = widgets.Widget({
id: "my-widget",
label: "CLIIIICK",
content: "CLICK ME",
width: 100,
onClick: function()
{
require('sdk/window/utils').getMostRecentBrowserWindow().gBrowser.contentDocument.documentElement.innerHTML = 'hi';
}
});
what this does is it shows a panel with 0 width and height, you can put stuff in there, and when it shows it executes the onShow function to change the html of the current document. its not recommended to use innerHTML, addons arent accepted. Im just showing you a quick and dirty copy paste example. One that is different from the sdk doc page "Modifying the Page Hosted by a Tab"

Sencha Touch 2: tap on container doesn't work (tap on button works fine)

I have read the SO question: Controller for Buttons Sencha Touch 2 [Solved] to achieve tapping the button. It works!
Unfortunately, I need tapping on the container, not the button. Once I change xtype:'container', to xtype:'button', it taps fine and I see the console.log message so everything works fine. Once I change it back to xtype:'container', it stops working, there is no console.log message.
So, my question is: how to make tap event working for my xtype:'container'? Why does it work for buttons only? Am I missing something?
P.S. As far as I see there is no tap event for container. What's the solution then? Would making a button to have several strings of a text and a background be a solution?
OK, based on your answers, it is still unclear, how to make the button look like the container. The container is an image with two strings above. Here is my container:
{
xtype:'container',
cls:'home-img',
id: 'home-img',
layout : {
type : 'vbox',
align: 'middle'
},
items:[
{ xtype:'container',
html:'Your current rate is:'
},
{ xtype:'container',
tpl:'{rate}'
}
],
},
Once I replace xtype:'container', with xtype:'button', I'm having difficulties to show {rate} parameter and unable to make two strings.
I'm not a pro at sencha touch, but in this case i think you need a listener on the element.
this is what works for me:
Ext.define('RSSFramework.view.ListContainer', {
extend: 'Ext.Container',
config: {
layout: {
type: 'fit'
},
listeners:[
{
element: 'element',
event: 'tap',
fn: function() {
console.log('TAP!');
}
}
]
}
});
In Sencha, there is no tap event available for a container. A container basically works like something which can hold different inner components/elements. However, you can indeed workaround if you want a tap event to be placed on container. As you have mentioned, you can go ahead and create a button, set a background, and set some strings (But that's not what a button should be used for, though). Or you can just set HTML with the desired string and background, make it a div and set Onclick event on it.

when refreshed with new options, kendo popup window in iframe mode does not fetch the new url

EDIT: I have abandoned the conditional structure and just create the window fresh each time. That works. Still wondering whether refresh() works with urls though.
I have a conditional structure that resembles this one:
What is the proper way to load new content into a kendo window?
If the kendo window already exists, refresh() the window rather than create it anew.
The difference is, I'm using an iframe with url.
The problem: I set a different query string with setOptions before invoking refresh(), but the original url is being requested from the server again.
if (!kwindow) {
kwindow = $("#messagewindow").kendoWindow({
iframe: true,
width: "400px",
height: "600px",
title: "original title",
content: "foo.htm?id=1",
type: "GET"
}).data("kendoWindow");
}else {
kwindow.setOptions({
iframe: true,
type: "GET",
title: aDifferentTitle,
url : "foo.htm?id=2"
});
kwindow.refresh();
}
kwindow.open();
I know the the setOptions method is passing the options to the kendo window because the titlebar of the window correctly shows aDifferentTitle. However, looking at the network traffic monitor, the url requested from the server is foo.htm?id=1 but it should be foo.htm?id=2.
I cannot see what is wrong with my code and would be grateful if someone could point out the error to me.
The answer you were looking for was
kwindow.options.content.url = url;
Then the refresh icon / methods will work on the new url
To refresh from different URL you need to pass this through an option object to the refresh method (you do not need to use setOptions). Here is snippet from the documentation:
var windowObject = $("#window").data("kendoWindow");
windowObject.refresh("/feedbackForm");
windowObject.refresh({
url: "/feedbackForm"
});
I used the following and it seems to work in an MVC project:
window.setOptions({
title: "New Title"
});
window.refresh({
url: "/ControllerName/Action"
});
window.open();

Firefox Addon: Add some functions and object to the window object

I just started using the FireFox Builder to build a simple addon. I realised that I cannot get direct access to the window object.
What I want to do is to get the window object and pollute it with some classes and functions so I can call them from the page itself.
Below is the current code:
// This is an active module of the ritcoder Add-on
require("widget").Widget({
id: "widgetID1",
label: "My Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function(evt){
var tabs = require("tabs");
var activeTab = tabs.activeTab;
var notifications = require("notifications");
notifications.notify({
title: "Jabberwocky",
text: "'Twas brillig, and the slithy toves",
data: "did gyre and gimble in the wabe",
onClick: function (data) {
console.log(data);
// console.log(this.data) would produce the same result.
}
});
activeTab.window.a=20; //this fails
context.alert('yesx');
}
});
How do I do this? Inject some code into the active page so that it can be called.
regards,
You need to use tab.attach() to run a content script in the tab's context, and then use unsafeWindow to add properties the page's script can see. (You should also read the introduction to Content Scripts.)
The Addon SDK doesn't provide a direct access (without the content script) to the page from the add-on's code because it tries to be forward compatible with the plans to make web pages run in processes separate from the browser's and the add-on's process.

Resources