I want to display an array of images in my sidebar. The images should be clickable. This is what I got so far in my ff-sidebar.xul file but nothing is shown:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type"text/css" ?>
<!DOCTYPE page SYSTEM "chrome://pos/locale/overlay.dtd">
<page id="posSidebar" title="&posSidebar.label;"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="ff-sidebar.js"/>
<script src="ff-sidebar.css"/>
<vbox flex="1">
<label value="&posSidebar.label;" />
<image id="image1"/>
</vbox>
</page>
and the code of the css file:
#image1
{
list-style-image: url("chrome://myextension/skin/images/1.png" width='135' height='130');
}
Why are you trying to load in your CSS file as a script? also the script declarations should be like this:
<script type="application/x-javascript" src="chrome://rehostimage/content/password_manager.js" />
As for the images showing up, have you tried
<image src="chrome://myextension/skin/images/1.png" />
?
Related
I am actually just learning flex, and i am getting confused with some parts. The problem is that the background image i have set in the skin works fine until i add more elements, it then just becomes a white background rather than laying the elements over the top.
I am starting to think im misunderstanding how this works. I don't understand why i need to have <s:Group id="contentGroup" /> for the image to show in the first place...this just seems like a redundant tag?
Here is the main code and the skin:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="800" height="523" maxWidth="800" maxHeight="523" initialize="httpService.send()" showStatusBar="false" backgroundColor="white" backgroundAlpha="1">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
public var returnData:ArrayCollection;
protected function httpService_handler(event:ResultEvent):void{
returnData = event.result.people.person;
}
]]>
</fx:Script>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
</fx:Style>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:HTTPService id="httpService" url="" result="httpService_handler(event)" />
</fx:Declarations>
<s:BorderContainer borderVisible="false" mouseDown="nativeWindow.startMove();" skinClass="MainStyle" width="800" height="523" id="container" >
<s:HGroup left="100" top="100" id="newsSlider" width="100" height="100">
<s:Label>
<s:text>Test</s:text>
</s:Label>
</s:HGroup>
</s:BorderContainer>
</s:WindowedApplication>
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.BorderContainer")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="disabled" />
<s:State name="normal" />
</s:states>
<!-- SkinParts
name=contentGroup, type=spark.components.Group, required=false
-->
<s:Group id="contentGroup" width="800" height="523">
<s:BitmapImage id="bg" source="#Embed('/School Catchup/libs/images/App-BG8.png')" scaleMode="stretch" left="0" top="0" right="0" bottom="0" width="800" height="523" />
</s:Group>
</s:Skin>
contentGroup is the only "skinPart" of the SkinnableContainer component, which is the base class for BorderContainer. It's not a required skinpart (the compiler would've thrown you an error otherwise in your previous version where you didn't have the skinpart in your skin).
What is a skinPart?
It's a contract between the host component and its skin. Essentially the host component is instructing the skin (through metadata) that it needs this and this and that element (skin part) in order to function correctly. Some of these elements are absolutely required for the component to function, some are optional.
What is the contentGroup skinpart?
It's the container element to which SkinnableContainer will add its nested elements. As an example:
<s:SkinnableContainer>
<s:Label text="hello"/>
</s:SkinnableContainer>
behind the scenes, the Label instance will be added to the contentGroup skinpart of SkinnableContainer's skin.
So how do I get my example to work?
As you can see from what I explained before, the contentGroup element is just a placeHolder in the skin. If you want to add "chrome" to your custom component, add it outside that Group:
<s:BitmapImage id="bg" source="#Embed('/School Catchup/libs/images/App-BG8.png')" scaleMode="stretch" left="0" top="0" right="0" bottom="0" width="800" height="523" />
<s:Group id="contentGroup" width="800" height="523"/>
This will display the image behind the contentGroup and your Labels will now be added to it without removing the BitmapImage that you declared in there.
This is just a short explanation of the skinning mechanism in the context of your needs. I suggest you do some research on this specific topic to really understand how it works.
When I try the below code (as is suggested here by Ryan Wu for question):
<?page title="Auto Generated index.zul"?>
<window title="Hello World 2!!" border="none" width="600px">
<include id="inc" src="/zk/wind.zul" mode="instant" />
<button label="do it" onClick="inc$wind.doModal()" />
</window>
After pressing the button I am getting this error:
inc$wind.doModal();'' : Attempt to resolve method: doModal() on undefined variable or class name
The file wind.zul looks as
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window id="wind" title="new page title" border="normal" visible="false" width="300px">
New Content Here!
</window>
</zk>
Can someone let me know what is wrong? Thanks...
According to http://books.zkoss.org/wiki/ZK%20Developer%27s%20Reference/UI%20Composing/ID%20Space
I need:
1. use 'Path'
2. add some ID for main window (f.i. id="w0")
and write in index.zul something similar ( file wind.zul not changed)
<?page title="Auto Generated index.zul"?>
<window id="w0" title="Hello World 2!!" border="none" width="600px">
<include id="inc" src="/zk/wind.zul" mode="instant" />
<button label="do it" onClick='Path.getComponent("/w0/inc/wind").doModal()' />
</window>
Thanks for me own :))
I'm trying to make a XUL overlay for Preferences for my extension. I have the following code as part of my overlay, but it is still not appearing under Firefox->Preferences:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<overlay id="tabularity-browser-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<prefwindow id="BrowserPreferences">
<prefpane id="tabularityPane" label="tabularityPane;"
onpaneload="populateSchedulesList()"
image="chrome://tabulationtwo/content/images/tab.png">
<preferences>
<preference id="perSession"
name="extensions.tabulation.defaultHomepage"
type="bool"/>
</preferences>
<radiogroup>
<radio preference="perSession" id="session" label="Open tabs once per session" accesskey="S" selected="true"/>
<radio preference="perSession" id="instance" label="Open tabs every tab instance" accesskey="I"/>
</radiogroup>
</prefpane>
</prefwindow>
Can anyone help me diagnose the problem or point me in the right direction? Thanks in advance.
Just posting this solution to show the image:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<overlay id="tabularity-browser-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<prefwindow id="BrowserPreferences">
<prefpane id="tabularityPane" label="tabularityPane;"
onpaneload="populateSchedulesList()"
image="chrome://tabulationtwo/content/images/tab.png">
<preferences>
<preference id="perSession"
name="extensions.tabulation.defaultHomepage"
type="bool"/>
</preferences>
<radiogroup>
<radio preference="perSession" id="session" label="Open tabs once per session" accesskey="S" selected="true"/>
<radio preference="perSession" id="instance" label="Open tabs every tab instance" accesskey="I"/>
</radiogroup>
</prefpane>
</prefwindow>
</overlay>
If you would like to know, how to handle please refer this link :
Menu bar overlay in Firefox
http://hublog.hubmed.org/archives/001606.html
Image:
I want to create an image in my statusbar, but why it can't appear?
And, how to add menu in status bar when I click right the mouse?
This is my script:
<?xml version="1.0"?>
<!--
# Fungsi dari file ini adalah mengatur tampilan dan perilaku addon.
# Membuat menu "search hadits" pada saat user klik kanan pada halaman browser atau
# pada saat user klik kanan pada kata di halaman browser.
-->
<overlay id="inline_trans"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!--
# Membuat Menu Klik kanan pada halaman firefox.
# Memanggil fungsi pada haditsSearch.js untuk mulai melakukan pencarian hadits.
-->
<popup id="contentAreaContextMenu">
<menuitem class="inlinetrans" id="inlineContext" oncommand= "hadits_mean.startFind(null);"
label="Cari Terjemahan"/>
</popup>
<!-- ======================================================== -->
<!--
<window id="main-window">
<popupset id="mainPopupSet"></popupset>
<vbox id="hadits_holder" />
</window>
-->
<!--
<spacer flex="1"/>
<progressmeter mode="determined" value="82"/>
-->
<statusbar id="status-bar">
<statusbarpanel id="status-bar-inlinetrans"
src="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="indonesia inline translator"
context="indonesia inline translator menu"
onclick="alert('okeh cuy')"
tooltiptext="inlinetrans versi 1.0"
/>
</statusbar>
</overlay>
You need an <image>. Something like:
<statusbar id="status-bar">
<statusbarpanel id="status-bar-inlinetrans">
<image src="chrome://inlinetrans/skin/imagesOn_kecil.png" />
</statusbarpanel>
</statusbar>
The other attributes can probably go on either the image or the statusbarpanel.
I'm working with XUL, and below is abasic slider/scale implementation:
<scale value="1" min="1" max="10" increment="1"/>
However I want a numbox next to it which displays the value selected in the slider, and maybe I didn't look hard enough in the XUL tutorial, but I couldn't find a feasible answer.
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<scale value="1" min="1" max="10" increment="1" id="a"/>
<textbox readonly="true" observes="a"/>
</window>