I am developping an zotero plugin, and would like to draw a dialog. The width of dialog, groupbox, hbox, checkbox etc have been tried, minwidth, maxwidth have also been tried, but it doesn't work. I would like to get a line break at proper position of the labels.
Many thanks!
code:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/preferences.css"?>
<!DOCTYPE window SYSTEM "chrome://zoteroupdateifs/locale/options.dtd">
<!--给作者加粗加星-->
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
id="updateifs-test"
title="&author-process-win;"
width="200"
height="300"
style="padding: 10px;"
buttons="accept,cancel"
ondialogaccept=" window.close();"
ondialogcancel="window.close();">
<stringbundleset id="stringbundleset">
<stringbundle id="updateifs-options" src="chrome://zotero-updateifs/locale/options.properties"/>
</stringbundleset>
<groupbox width="200">
<caption label="&update-abbr;"/>
<separator class='thin'/>
<description style="width: 220px">&update-journal-abbr;</description>
<separator class='thin'/>
<hbox style="margin: 0" width="200">
<checkbox id="id-updateifs-add-update" label="&add-update;" />
</hbox>
<separator class='thin'/>
<hbox style="margin: 0" maxwidth="200">
<checkbox id="id-updateifs-en-abbr" minwidth ='200' label="&en_abbr;"/>
</hbox>
<separator class='thin'/>
<hbox style="margin: 0" maxwidth="200">
<checkbox id="id-updateifs-ch-abbr" minwidth ='200' label="&ch_abbr;" />
</hbox>
</groupbox>
<script src="options.js"/>
<script
type="application/x-javascript"
src="chrome://zoteroupdateifs/content/scripts/options.js"/>
<script src="chrome://zotero/content/include.js"/>
</dialog>
it is weird, now it works, when I set the width of checkbox by using width ='250' .
Related
I have this code
<template>
<Page>
<ActionBar title="Action Items">
<StackLayout orientation="horizontal">
<Image src="res://icon" width="40" height="40"
verticalAlignment="center" />
<Label text="NativeScript" fontSize="24"
verticalAlignment="center" />
</StackLayout>
<NavigationButton text="Go Back" android.systemIcon="ic_menu_back"
(tap)="onNavBtnTap()">
</NavigationButton>
<ActionItem (tap)="onShare()" ios.systemIcon="9"
ios.position="left" android.systemIcon="ic_menu_share"
android.position="actionBar">
</ActionItem>
<ActionItem (tap)="onDelete()" ios.systemIcon="16"
ios.position="right" text="delete" android.position="popup">
</ActionItem>
</ActionBar>
<ScrollView>
<StackLayout class="home-panel">
<!--Add your page content here-->
<Label textWrap="true" text="Play with NativeScript!"
class="h2 description-label">
{{first}}
</Label>
<Label textWrap="true"
text=" Write code in the editor or drag and drop components to build a NativeScript mobile application."
class="h2 description-label" />
<Label textWrap="true"
text="Scan the QR code with your mobile device and watch the changes sync live while you play with the code."
class="h2 description-label" />
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
export default {
data() {
return {
first: "Once"
};
}
};
</script>
<style scoped>
.home-panel {
vertical-align: center;
font-size: 20;
margin: 15;
}
.description-label {
margin-bottom: 15;
}
</style>
which produces
My question is how come the back button aligned itself left and the others right without explicitly coding left or right?
<NavigationButton text="Go Back" android.systemIcon="ic_menu_back"
(tap)="onNavBtnTap()">
</NavigationButton>
and the other buttons are aligning to the right
<ActionItem (tap)="onShare()" ios.systemIcon="9"
ios.position="left" android.systemIcon="ic_menu_share"
android.position="actionBar">
</ActionItem>
<ActionItem (tap)="onDelete()" ios.systemIcon="16"
ios.position="right" text="delete" android.position="popup">
</ActionItem>
<NavigationButton/> is by default on the left, as it's just calls into the native setNavigationIcon api:
https://developer.android.com/reference/android/widget/Toolbar#setNavigationIcon(android.graphics.drawable.Drawable)
While the other <ActionItem> elements are added with the Menu api:
https://developer.android.com/reference/android/widget/Toolbar#getMenu()
For your other question, you can do the following:
<Label :text="`${first} Play with NativeScript!`" textWrap="true" class="h2 description-label" />
:text makes it a binding, the then you pass in a regular JavaScript string literal.
An alternative would be:
:text="first + ' Play with NativeScript!'"
Both ways should work fine.
Such as the title suggests, i'm trying to bind the size of an Accordion dynamically to the size of the expanded TitledPane.
I tried to add an ChangeListener to the expandedPaneProperty of the accordion in the initialize method of the controller for the UI which contains the Accordion using following code:
private double prefHeight, prefWidth;
#Override
public void initialize(URL location, ResourceBundle resources) {
prefHeight = acc.getPrefHeight(); //double variables of controller
prefWidth = acc.getPrefWidth();
acc.expandedPaneProperty().addListener(new ChangeListener<Object>(){
#Override
public void changed(ObservableValue<? extends Object> observable, Object oldValue, Object newValue) {
TitledPane pane = acc.getExpandedPane();
if(pane != null){
acc.setPrefHeight(prefHeight + pane.getPrefHeight());
acc.setPrefWidth(prefWidth + pane.getPrefWidth());
}
}
});
}
The Problem is, that this code leads to a NullPointerException at line 3, which might indicate that the property might not be instatiated at this moment.
Update: Problem concerning NullPointerException was solved, i didn't initialized the Accordion properly.
The code is still not working, though.
The corresponding FXML:
<Accordion fx:id="acc" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.SettingsController">
<panes>
<TitledPane alignment="TOP_LEFT" animated="false" text="Alarm sound">
<tooltip>
<Tooltip text="Enables to choose an alarm sound." />
</tooltip>
<content>
<VBox alignment="TOP_CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" styleClass="box">
<children>
<HBox alignment="TOP_CENTER" styleClass="hbox">
<children>
<Button mnemonicParsing="false" text="Reset to default" />
<Button mnemonicParsing="false" onAction="#saveAndExitOnClick" text="Save and exit" />
</children>
</HBox>
<ListView maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" VBox.vgrow="ALWAYS" />
</children>
</VBox>
</content></TitledPane>
<TitledPane animated="false" text="Style">
<tooltip>
<Tooltip text="Enables to choose a style for the program." />
</tooltip>
<content>
<VBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" styleClass="box">
<children>
<HBox alignment="TOP_CENTER" styleClass="h-box">
<children>
<Button mnemonicParsing="false" text="Reset to default" />
<Button mnemonicParsing="false" onAction="#saveAndExitOnClick" text="Save and exit" />
</children>
</HBox>
<ListView maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" />
</children>
</VBox>
</content></TitledPane>
<TitledPane animated="false" text="Language">
<tooltip>
<Tooltip text="Enables to choose a style for the program." />
</tooltip>
<content>
<VBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" styleClass="box">
<children>
<HBox alignment="TOP_CENTER">
<children>
<Button mnemonicParsing="false" text="Reset to default" />
<Button mnemonicParsing="false" onAction="#saveAndExitOnClick" text="Save and exit" />
</children>
</HBox>
<ListView maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" />
</children>
</VBox>
</content>
</TitledPane>
<TitledPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" styleClass="box" text="Other settings">
<content>
<ToolBar maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" orientation="VERTICAL" styleClass="box">
<items>
<Button contentDisplay="CENTER" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Recenter Window" />
<Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Reset program to default settings" />
<Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Load custom alarm sound" />
<Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Apply custom style" />
</items>
</ToolBar>
</content>
</TitledPane>
<TitledPane maxHeight="1.7976931348623157E308" prefWidth="200.0" text="About">
<content>
<TextArea editable="false" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text="Timer Program, written by QBW.
Version:
Fonts:
Font Awesome, License:
Alarm sounds:
Acknowledgement:
·Hans-Peter Habelitz for "Programmieren lernen mit Java"
·Christian Ullenboom for "Java ist auch eine Insel" and "Java SE8 Standardbibliothek"
·Anton Epple for "JavaFX 8 - Grundlagen und fortgeschrittene Techniken"
·The stackoverflow.com community
· Creators of alarm sound files:
·
·
·
·
·
· Creators of Font awesome
" wrapText="true" />
</content>
<tooltip>
<Tooltip text="Contains information about the program, its creator and license information" />
</tooltip>
</TitledPane>
</panes>
</Accordion>
How is it possible to solve that problem?
I have the following code, where a button has four resizers. When I use the top left resizer for example, it button shrinks from the bottom right, as opposed to shrinking and moving so that the top left corner follows the cursor. I've looked in Mozilla's docs and on Google, and tried adding custom on mousedown event handlers to move the thing around - but to no avail. How do I make this behave correctly?
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript" src="chrome://ades/content/main.js"/>
<hbox>
<stack style="padding: 0;">
<button id="b" label="Resizable" style="margin: 0;"/>
<resizer dir="topleft" style="background: red; -moz-appearance: none;"
element="b" left="0" top="0" width="5" height="5" />
<resizer dir="topright" style="background: black; -moz-appearance: none;"
element="b" right="0" top="0" width="5" height="5"/>
<resizer dir="bottomleft" style="background: black; -moz-appearance: none;"
element="b" left="0" bottom="0" width="5" height="5"/>
<resizer dir="bottomright" style="background: black; -moz-appearance: none;"
element="b" right="0" bottom="0" width="5" height="5"/>
</stack>
</hbox>
</window>
I'm not sure how to achieve what you want but if you're resizing your button it will always reposition itself in the stack (which is at the beginning of the hbox), so it will always be at the beginning of the hbox. You might try with absolute positioning but I'm not sure if that'll work either.
I have the following xul file:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="main" title="MY TEST" width="640" height="480" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<listbox id="mainList">
<listitem label="Butter Pecan"/>
<listitem label="Chocolate Chip"/>
<listitem label="Raspberry Ripple"/>
<listitem label="Squash Swirl"/>
</listbox>
</window>
..and I would like this listbox to fill the screen (currently it is just on the top).
Any idea?
Use the flex attribute
<listbox id="mainList" flex="1">
I'm working on creating an XUL app right now and I'm stuck with a few problems at this point. My current file is here: http://projects.thecloudonline.net/gemxul/regrid.xul.
I want that second column to essentially "float: right" (like how CSS works on webpages). The red background shows me that part moved, but my content is stuck oriented left. How can I make the content go along with it?
Secondly, my overall goal is to get it so that the layout is essentially split in half. Setting maxwidth="50%" on the first column doesn't seem to do anything. Is that the correct approach, or am I way off there?
That's all for now!
This should work :
<grid style="border: #000000 solid 1px;">
<columns>
<column style="border-right: #666666 solid 1px;"/>
<column flex="1"/>
<column style="background-color:red;"/>
</columns>
<rows>
<row>
<vbox>
<label value="Launcher 1" id="l1_title"/>
<button label="button" id="l1_btn" />
<label value="This is a description for item 1." id="l1_desc"/>
</vbox>
<spacer/>
<vbox>
<label value="Launcher 2" id="l2_title"/>
<button label="button" id="l2_btn"/>
<label value="This is a description for item 2." id="l2_desc"/>
</vbox>
</row>
<row style="border-top: #666666 solid 1px;">
<vbox>
<label value="Launcher 3" id="l3_title"/>
<button label="button" id="l3_btn"/>
<label value="This is a description for item 3." id="l3_desc"/>
</vbox>
<spacer/>
<vbox>
<label value="Launcher 4" id="l4_title"/>
<button label="button" id="l4_btn"/>
<label value="This is a description for item 4." id="l4_desc"/>
</vbox>
</row>
</rows>
</grid>
There are several ways of doing this. Personally I wouldn't use grid for something like this. vbox and hbox in combination beats anything you would normally do in tables. But of course it depends entirely what your end goal is.