Change page at XULRunner - firefox

At my current project we got a website which is shown of a microcontroller at a monitor. I found XULRunner for displaying the page. It is nice, so I can hide all user panels very easy.
The microcontroller got a controller application too. The controller application gets the url which should be displayed from a server. With firefox I can execute "firefox theUrl" and it opens the browser with that url. If the browser is already running, the page opens at the running firefox.
To get that behavior at XULRunner, my main.xul looks like this:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
id="display" windowtype="display" title="Display"
onload="init();" hidechrome="true" zlevel="6">
<script type="application/javascript" src="cmdline.js" />
<script><![CDATA[
function init() {
var cmdLine = window.arguments[0].QueryInterface(Components.interfaces.nsICommandLine);
var content = document.getElementById("content");
content.setAttribute("src", cmdLine.getArgument(0));
content.contentWindow.focus();
window.resizeTo(screen.width, screen.height);
}
]]></script>
<hbox flex="1">
<browser id="content" flex="1" disablehistory="false"
src="chrome://commandlineinit/content/default.html" />
</hbox>
</window>
My prefs.js got that content:
pref("toolkit.defaultChromeURI", "chrome://applicationname/content/main.xul");
pref("toolkit.defaultChromeFeatures", "dialog=no, chrome, centerscreen");
pref("toolkit.singletonWindowType", display
And the chrome.manifest:
content applicationname content/
So, now I can open with xulrunner application.ini http://www.myPage.de the page. But when I call it a second, it do nothing.
So I added the commandline handler from that tutorial: https://developer.mozilla.org/en-US/docs/Mozilla/Projects/XULRunner/CommandLine
At the method "observe" at chrome/content/cmdline.js I added
var cmdLine = window.arguments[0].QueryInterface(Components.interfaces.nsICommandLine);
var content = document.getElementById("content");
content.setAttribute("src", cmdLine.getArgument(0));
content.contentWindow.focus();
Now I have 2 problems. At that method, it can't find the element with ID content. So I can't change the url.
The other problem: It calls the observe method only at the first call. I think, the component components/clh.js isn't registert.
What did I wrong?

Related

How to add promotional labels on top of images in Magento 2 ?

How can I place a promotional label layer on top of images in Magento 2. The image I am including is from the out of the box Magento 2 theme and it has a text " New Luma Yoga Collection ...." and a button "Shop New Yoga" that was somehow placed on top of the image in the editor .
This is how it looks in the editor
There are various ways on how you can achieve this. One way is to add a HTML element directly into the WYSIWYG editor and mark it up with HTML. This is also how the Luma theme has done this. If you look at your editor, you see the content in small blue below the image. If you switch from WYSIWYG to HTML, you can see the HTML markup of this element:
<span class="content bg-white">
<span class="info">New Luma Yoga Collection</span>
<strong class="title">Get fit and look fab in new seasonal styles</strong>
<span class="action more button">Shop New Yoga</span>
</span>
You can simply use CSS to style this element.
However...
Although this is a very widely uses approach to do such a thing (and it's easy and fast to do so), it's not the most elegant solution. After all, it's not clear from the WYSIWYG-editor that the 'blue link' is actually a special element. If your client starts messing with it, he will break the layout and call you because 'you made the site, so it's your fault'. Trust me, I've been there...
A more elegant solution would be to use widgets. A widget is very simple to create in Magento 2. First you have to create a file called widget.xml in the etc-folder of your module, and put something like this in it:
<?xml version="1.0"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
<widget id="example_widget" class="Vendor\Module\Block\Widget\Example">
<label translate="true">Example widget</label>
<description translate="true">This is an example widget</description>
</widget>
</widgets>
Now you can create a Block in the Block-folder of your module:
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class Example extends Template implements BlockInterface
{
/**
* #return string
*/
public function _toHtml()
{
return '<p class="hello">Hello world!</p>';
}
}
Now if you click the widget-button in the WYSIWYG-editor, the widget will be there in the list of widgets to choose from:
Now, if you insert this widget in your WYSIWYG editor, you're sure about the HTML it will output (since that is handled with PHP), and your client cannot 'break it'.
In your scenario you most likely want to add parameters so you can make your widget reusable. This is very simple. Edit your widget.xml:
<widget id="example_widget" class="Vendor\Module\Block\Widget\Example">
<label translate="true">Example widget</label>
<description translate="true">This is an example widget</description>
<parameters>
<parameter name="name" xsi:type="text" visible="true" sort_order="0">
<label translate="true">Name</label>
<description translate="true">Please enter a name</description>
</parameter>
</parameters>
</widget>
And to use it in your Block Class:
public function _toHtml()
{
return '<p class="hello">Hello ' . $this->getName() . '</p>';
}
It's really that simple.
In your specific case I would suggest creating a widget with 4 parameters:
Header
Content
Button Text
Button Link

Why does dojo's xhr call to get JSP file content not process the onShow event in InternetExplorer as it does for Firefox and Chrome?

I'm trying to resolve a problem seen only with the IE browser but not Firefox or Chrome. I'm using the dojox.widget.Wizard along with the dojox.widget.WizardPane where each pane in the wizard gets added to the Wizard like so:
nextWizPane = new dojox.widget.WizardPane({
paneId: chosenPaneId,
passFunction: handleNext,
onShow: showingPane
}).placeAt(wizard, newPaneIndex);
loadPaneContents(nextWizPane);
where the loadPaneContents() function dynamically loads the contents for the new WizardPane by using the "dojo/request/xhr" module. The xhr's "then" function accepts the anonymous callback function which accepts the contents of a JSP file which is finally used to set the contents of the WizardPane like so:
xhr(contextPath+"/lib/wizardPanes/UrsPage_"+wizPane.paneId+".jsp",
{sync:true}).then(function(responseFromXhr) {
nextWizPane.set("content", responseFromXhr);
});
where the file that xhr is loading, e.g. UrsPage_1_1_1.jsp, defines the contents for the wizard pane. The contents of the UrsPage_1_1_1.jsp file starts out like:
<%#page session="true" contentType="text/html" pageEncoding="ISO-8859-1"%>
<%#taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<fmt:setBundle basename="/WEB-INF/config/resourcebundle"/>
<div wizardpageidline data-dojo-type="dijit/form/Form" id="1_1_1" encType="multipart/form-data" action="" method="" paneName="Contact Information">
<script type="dojo/on" data-dojo-event="show" data-dojo-args="e">
console.log("UP111 onShow form2");
alert("UP111 onShow form2");
require(
{ packages:[ { name:'lib', location:'/lib' } ] },
["lib/UrsController",
"dojo/on",
"dojo/dom",
"dojo/domReady!"
], function(ursController, dojoOn, dom){
dojoOn(dom.byId("mailingAddressSameAsPrincipal"), "change", function(){
console.log("UP111 changed SameAsMailingAddress this.checked="+this.checked);
alert("UP111 checked Same As box="+this.checked);
});
});
</script>
...<snipped dojo/dijit/HTML markup>
</div>
The log and alert calls above appear when this runs in Chrome and Firefox, but are completely ignored and unexecuted when run in IE8. What am I missing? The JSP file's markup that is snipped does contain dojo/dijit markup that is successfully parsed in both IE, Firefox and Chrome, so it's not like the whole file is being ignored by the dojo parser, just the onShow for the outer . Any help would be appreciated on how to debug this issue.
Thank you,
Gregor
I was faced with this same issue in IE11 and have narrowed it down to this: in an asynch block, it appears that IE has lost scope of the config.contextPath. You may have to get creative on how to gain this value and store it in your widget as a property that can be passed to your asynch call. Example:
var prefix = config.contextPath;
topic.publish("/widget/selected", row.id, prefix); //may need this.prefix depending upon where you gain/store the property and where used.
For my purpose, the code executed fine when IE debug panel or console was open, but failed when console was closed. Alert statements were the only thing that could aid in this matter. Basically, confirm the url you are building before executing the ajax

Selenium href blank New Window test

So, using Selenium, I want to test links on a page and see if they open a new window. They are NOT javascript links, just a basic href "target=_blank".
I want to make sure the newly opened window actually loaded a page.
I can do all the scripting to get the link clicked, but when i test for page Title, I get the page I'm testing on, not the new window that is on top.
How do I target that new window and check to see if THAT page loaded?
thanks
The following worked for me with a form with attribute target="_blank" that sends a POST request on a new window:
// Open the action in a new empty window
selenium.getEval("this.page().findElement(\"//form[#id='myForm']\").target='my_window'");
selenium.getEval("selenium.browserbot.getCurrentWindow().open('', 'my_window')");
//The contents load in the previously opened window
selenium.click("//form[#id='myForm']//input[#value='Submit']");
Thread.sleep(2000);
//Focus in the new window
selenium.selectWindow("my_window");
selenium.windowFocus();
/* .. Do something - i.e.: assertTrue(.........); */
//Close the window and back to the main one
selenium.close();
selenium.selectWindow(null);
selenium.windowFocus();
The html code would be similar to:
<form id="myForm" action="/myAction.do" target="_blank">
<input type="text" name="myText" value="some text"/>
<input type="submit" value="Save"/>
</form>
You've tagged the question RC so I assume it's not Selenium IDE.
You can use something like selenium.selectWindow or selenium.selectPopUp or selenium.windowFocus to target the new window.
A technique I find quite useful is to use Selenium IDE to capture the script and then select Options and then the programming format you require (Java, C# etc.) and then use that snippet as the basis of the RC test.
Based on the name randomization, I guess I can loop through the window names and pick th unknown one.
This works, but not tested fully...
public function testMyTestCase() {
$this->open("/");
$this->click("link=Sign in");
$this->waitForPageToLoad("30000");
$this->type("email", "xxx#gmail.com");
$this->type("password", "xxx");
$this->click("login");
$this->waitForPageToLoad("30000");
$this->click("link=Resources");
$this->waitForPageToLoad("30000");
$this->click("link=exact:http://100pages.org/");
$cc = $this->getAllWindowNames();
foreach($cc as $v ) {
if (strpos($v, "blank")) {
$this->selectWindow($v);
$this->waitForPageToLoad("30000");
$this->assertRegExp("/100/", $this->getTitle());
}
}
}

How update an image dynamically using data binding?

I have a main.mxml application that lays out my application, it contains a "browse and upload" button. And contains an image to view the users uploaded image like so:
<mx:Application
<mx:Script>
<![CDATA[
import model.myModel;
import control.myControl;
// Create data model
public var model:myModel = new myModel();
//[Bindable]
//private var scld_img:Bitmap;
// Create control
public var mycontrol:myControl = new myControl(mymodel);
</mx:Script>
<!-- Upload and view -->
<mx:Canvas id="upload" label="1: Upload Image">
<mx:VBox>
<mx:HBox>
<mx:Label text="Upload an image: "/>
<mx:Button id="btn"
label="Browse and preview..."
click="mycontrol.browseAndUpload();"
buttonMode="true"
useHandCursor="true"/>
</mx:HBox>
<mx:Image id="mximg_upld"
verticalCenter="0"
horizontalCenter="0"
source="mymodel.img_scld_bm"/>
</mx:VBox>
</mx:Canvas>
......
In my myModel class I have a img_scld_bm that the browseAndUpload() function draws into after scaling it.
My intent is that my mx:Image will display the image. As shown here I'm assigning the image source="mymodel.img_scld_bm", this ends up just showing a broken image icon.
I also tried data binding, where in my myModel class I have [Bindable] var img_scld_bm. And then tried setting my mx:Image source="{myModel.img_scld_bm}" .. that didn't seem to do anything either. All this compiles fine, no warnings. I think in this case, I'm not setting a trigger or propertyChange event to update the binding?
Can someone help me understand, or provide an example of how to correctly bind an mx:Image source to some bitmap??
From the code you've given, it looks like you need to do two things:
Wrap the source with curly brackets.
Set the property img_scld_bm in the model class. Bindings will only execute if you set the property; it looks like you may be drawing into the img_scld_bm that currently exists, but this won't cause the image to update.
Convert this:
<mx:Image id="mximg_upld" verticalCenter="0" horizontalCenter="0" source="mymodel.img_scld_bm"/>
To this:
<mx:Image id="mximg_upld" verticalCenter="0" horizontalCenter="0" source="{mymodel.img_scld_bm}"/>
Then any time you make changes to the img_scld_bm in the model, reset the image.source.
Does that work?

Firefox Extension, get a reference to the loaded document using browser.contentDocument

I want to write a simple firefox extension.
How can I get a reference to the loaded document object in a browser window? For example, how can I access the document in this html page loaded here on stackoverflow? According to the vague mozilla development center I can use browser.contentDocument, but it is not working for me.
<?xml version="1.0"?>
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript">
function change(){
//var doc = document.getElementsByTagName("browser")[0].contentDocument;
//var doc = document.browser.contentDocument;
var doc = browser.contentDocument;
var body = doc.getElementsByTagName("body")[0];
var text = doc.createTextNode("blah");
body.appendChild(text);
}
</script>
<statusbar id="status-bar">
<statusbarpanel id="my-panel" label="click me" onclick="change();" />
</statusbar>
</overlay>
I'm not sure where you read that the variable is browser.contentDocument, since it's listed in several spots to be content.document (but I'm linking to the FAQ).
Variable for accessing content of current displayed document: window.content.document

Resources