Creating a custom panel
37 views
Skip to first unread message
Sabarish VS
May 20, 2012, 10:41:35 PM5/20/12
to mozilla-la...@googlegroups.com
Hi guys,
I would like to know how to create a custom panel using the addon builder. I have created two check boxes to load from a html file into a panel. But i dont know hot get the state of the check boxes. This is what i have tried so far:
GET-TEXT.JS
self.port.on("show", function (arg) {
var textArea = document.getElementById('edit-box');
textArea.focus();
// When the user hits return, send a message to main.js.
// The message payload is the contents of the edit box.
textArea.onkeyup = function(event) {
if (event.keyCode == 13)
{
// Remove the newline.
text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
var textArea = document.getElementById('edit-box');
textArea.focus();
// When the user hits return, send a message to main.js.
// The message payload is the contents of the edit box.
textArea.onkeyup = function(event) {
if (event.keyCode == 13)
{
// Remove the newline.
text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
var c_value = "";
for (var i=0; i < document.orderform.music.length; i++)
{
if (document.orderform.music[i].checked)
{
c_value = c_value + document.orderform.music[i].value + "\n";
}
}
self.port.emit("text-entered", text+c_value);
textArea.value = '';
}
};
});
for (var i=0; i < document.orderform.music.length; i++)
{
if (document.orderform.music[i].checked)
{
c_value = c_value + document.orderform.music[i].value + "\n";
}
}
self.port.emit("text-entered", text+c_value);
textArea.value = '';
}
};
});
HTML
<form name="orderform">
<input type="checkbox" name="music" value="Bike" /> I have a bike<br/>
<input type="checkbox" name="music" value="Car" /> I have a car <br/>
</form>
<input type="checkbox" name="music" value="Bike" /> I have a bike<br/>
<input type="checkbox" name="music" value="Car" /> I have a car <br/>
</form>
MAIN.JS
var data = require("self").data;
// Create a panel whose content is defined in "text-entry.html".
// Attach a content script called "get-text.js".
var text_entry = require("panel").Panel({
width: 212,
height: 200,
contentURL: data.url("text-entry.html"),
contentScriptFile: data.url("get-text.js")
});
// Send the content script a message called "show" when
// the panel is shown.
text_entry.on("show", function() {
text_entry.port.emit("show");
});
// Listen for messages called "text-entered" coming from
// the content script. The message payload is the text the user
// entered.
// In this implementation we'll just log the text to the console.
text_entry.port.on("text-entered", function (text) {
console.log(text);
text_entry.hide();
});
// Create a widget, and attach the panel to it, so the panel is
// shown when the user clicks the widget.
require("widget").Widget({
label: "Text entry",
id: "text-entry",
contentURL: "http://www.mozilla.org/favicon.ico",
panel: text_entry
});
// Create a panel whose content is defined in "text-entry.html".
// Attach a content script called "get-text.js".
var text_entry = require("panel").Panel({
width: 212,
height: 200,
contentURL: data.url("text-entry.html"),
contentScriptFile: data.url("get-text.js")
});
// Send the content script a message called "show" when
// the panel is shown.
text_entry.on("show", function() {
text_entry.port.emit("show");
});
// Listen for messages called "text-entered" coming from
// the content script. The message payload is the text the user
// entered.
// In this implementation we'll just log the text to the console.
text_entry.port.on("text-entered", function (text) {
console.log(text);
text_entry.hide();
});
// Create a widget, and attach the panel to it, so the panel is
// shown when the user clicks the widget.
require("widget").Widget({
label: "Text entry",
id: "text-entry",
contentURL: "http://www.mozilla.org/favicon.ico",
panel: text_entry
});
Could someone please tell me where i am going wrong.
Wes Kocher
May 21, 2012, 12:01:32 AM5/21/12
to mozilla-la...@googlegroups.com
When I run that code, I get an error in get-text.js on line 3: "textArea is null".
Looking in your panel's HTML, I don't see any element with the id "edit-box". This stops the rest of the content script from running.
Looking in your panel's HTML, I don't see any element with the id "edit-box". This stops the rest of the content script from running.
--
You received this message because you are subscribed to the Google Groups "mozilla-labs-jetpack" group.
To post to this group, send email to mozilla-la...@googlegroups.com.
To unsubscribe from this group, send email to mozilla-labs-jet...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/mozilla-labs-jetpack?hl=en.
Sabarish VS
May 21, 2012, 10:28:06 PM5/21/12
to mozilla-la...@googlegroups.com
I cut down the code to pst only the relevant part. I forgot to delete the edit box in the get-text. Here is the full code:
GET-TEXT.JS
self.port.on("show", function (arg) {
var textArea = document.getElementById('edit-box');
textArea.focus();
// When the user hits return, send a message to main.js.
// The message payload is the contents of the edit box.
textArea.onkeyup = function(event) {
if (event.keyCode == 13)
{
// Remove the newline.
text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
var textArea = document.getElementById('edit-box');
textArea.focus();
// When the user hits return, send a message to main.js.
// The message payload is the contents of the edit box.
textArea.onkeyup = function(event) {
if (event.keyCode == 13)
{
// Remove the newline.
text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
var c_value = "";
for (var i=0; i < document.orderform.music.length; i++)
{
if (document.orderform.music[i].checked)
{
c_value = c_value + document.orderform.music[i].value + "\n";
}
}
self.port.emit("text-entered", text+c_value);
textArea.value = '';
for (var i=0; i < document.orderform.music.length; i++)
{
if (document.orderform.music[i].checked)
{
c_value = c_value + document.orderform.music[i].value + "\n";
}
}
self.port.emit("text-entered", text+c_value);
textArea.value = '';
}
};
});
};
});
TEXT-ENTRY.HTML
<html>
<head>
<style type="text/css" media="all">
textarea {
margin: 10px;
}
</style>
</head>
<body>
<textarea rows="10" cols="20" id="edit-box"></textarea>
<head>
<style type="text/css" media="all">
textarea {
margin: 10px;
}
</style>
</head>
<body>
<textarea rows="10" cols="20" id="edit-box"></textarea>
<form name="orderform">
<input type="checkbox" name="music" value="Bike" /> I have a bike<br/>
<input type="checkbox" name="music" value="Car" /> I have a car <br/>
</form>
</body>
</html>
</html>
Wes Kocher
May 21, 2012, 11:14:45 PM5/21/12
to mozilla-la...@googlegroups.com
I put a copy of your addon up on the addon builder website here: https://builder.addons.mozilla.org/addon/1053484/latest/
I was getting errors about document.orderform.music being undefined in get-text.js, so I made some changes to get-text.js:
self.port.on("show", function (arg) {
var textArea = document.getElementById('edit-box');
textArea.focus();
// When the user hits return, send a message to main.js.
// The message payload is the contents of the edit box.
textArea.onkeyup = function(event) {
if (event.keyCode == 13) {
// Remove the newline.
text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
var c_value = "";
for (var i=0; i < document.orderform.elements.music.length; i++) {
if (document.orderform.elements.music[i].checked) {
c_value = c_value + document.orderform.elements.music[i].value + "\n";
}
}
self.port.emit("text-entered", c_value + text);
textArea.value = '';
}
};
});
(Every time you had written document.orderform.music, I changed it to be document.orderform.elements.music.)
I was getting errors about document.orderform.music being undefined in get-text.js, so I made some changes to get-text.js:
self.port.on("show", function (arg) {
var textArea = document.getElementById('edit-box');
textArea.focus();
// When the user hits return, send a message to main.js.
// The message payload is the contents of the edit box.
textArea.onkeyup = function(event) {
if (event.keyCode == 13) {
// Remove the newline.
text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
var c_value = "";
if (document.orderform.elements.music[i].checked) {
c_value = c_value + document.orderform.elements.music[i].value + "\n";
}
}
self.port.emit("text-entered", c_value + text);
textArea.value = '';
}
};
});
(Every time you had written document.orderform.music, I changed it to be document.orderform.elements.music.)
--
Sabarish VS
May 22, 2012, 10:12:42 PM5/22/12
to mozilla-la...@googlegroups.com
Wow, That worked fine. How did you know to put document.orderform.elements. Because when i was using the offline addonsdk i saw no errors about document.orderform.music being not recognized. Also how do i go about posting a link to my addon like you did here-https://builder.addons.mozilla.org/addon/1053484/latest/. Sorry if this seems stupid. Just getting started. Thanks for the help.
Wes Kocher
May 22, 2012, 11:34:18 PM5/22/12
to mozilla-la...@googlegroups.com
Wow, That worked fine. How did you know to put document.orderform.elements. Because when i was using the offline addonsdk i saw no errors about document.orderform.music being not recognized. Also how do i go about posting a link to my addon like you did here-https://builder.addons.mozilla.org/addon/1053484/latest/. Sorry if this seems stupid. Just getting started. Thanks for the help.
I created an addon on the Addon Builder website ( http://builder.addons.mozilla.org ) and copied over your addon's code. Once it's up on Builder, you can take and share the link to it from the website.
When I installed the addon from the Builder website (using the "Test" button on the addon's page), my error console (Ctrl-Shift-J) showed the errors about document.orderform.music not being defined in the contentScript. (It should also show you that error if you're doing this offline, I think.)
When I saw the error about the form's music element not being defined, I looked up this page ( https://developer.mozilla.org/en/DOM/element.name ) which showed me the "elements" thing.
When I installed the addon from the Builder website (using the "Test" button on the addon's page), my error console (Ctrl-Shift-J) showed the errors about document.orderform.music not being defined in the contentScript. (It should also show you that error if you're doing this offline, I think.)
When I saw the error about the form's music element not being defined, I looked up this page ( https://developer.mozilla.org/en/DOM/element.name ) which showed me the "elements" thing.
Sabarish VS
May 23, 2012, 1:07:39 AM5/23/12
to mozilla-la...@googlegroups.com
Thanks a lot for the explanation. Is there any option i have to specify in cfx run beacuse i tried it once again and i get no error message in the add-on sdk.
Wes Kocher
May 23, 2012, 1:37:41 AM5/23/12
to mozilla-la...@googlegroups.com
Hrm, I don't see the errors on the cfx console either, but if you open Firefox's Error Console by hitting Ctrl-Shift-J, you can see the errors in there. I think it's because our code is being executed in a context that's more like the webpage than cfx code, so it isn't getting shown in all of the same places.
If you wrap your entire get-text.js file in a try{ } catch(e) { console.log(e); }, the error should end up where you can see it from cfx, though it might be better to just open the error console.
If you wrap your entire get-text.js file in a try{ } catch(e) { console.log(e); }, the error should end up where you can see it from cfx, though it might be better to just open the error console.
On Wed, May 23, 2012 at 12:07 AM, Sabarish VS <sabari...@gmail.com> wrote:
Thanks a lot for the explanation. Is there any option i have to specify in cfx run beacuse i tried it once again and i get no error message in the add-on sdk.
Sabarish VS
May 23, 2012, 9:47:04 PM5/23/12
to mozilla-la...@googlegroups.com
Okay. Thanks for the help. Guess i will use the error console from now onwards rather than relying on the output printed in the cmd.
Reply all
Reply to author
Forward
0 new messages