Output
I want to make file upload control on click of image.
file uploader should open on click of image.
<HBox class="assetImgBlock">
<VBox class="uploadAssets">
<Image width="7rem" class="hdrTitl" src="./images/WearableProtection.jpeg" press="fnOpenUploader"></Image>
Input value="Head"></Input>
</VBox>
<VBox class="uploadAssets">
<Image width="7rem" class="hdrTitl" src="./images/Ladders.jpeg"></Image>
<Input value="Body"></Input>
</VBox>
<VBox class="uploadAssets">
<Image width="7rem" class="hdrTitl" src="./images/bucketSecured.jpeg"></Image>
<Input value=""></Input>
</VBox>
</HBox>
You can create a fragment contains file uploader, and trigger it by clicking on image.
Related
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' .
I have a list of data and when it renders, it's rendering on top of each other. The data is a fairly long list of objects and I am using multiple fields. I made a playground example by reducing the data list size and only using field (display_name) and it's still happening.
It seems to happen in random spots of the list but I am unsure as to how to resolve or more importantly, why it's happening. I thought it may have had to do with my key not being unique but I made sure it was and it's still happening. I included a playground and added screenshots. Any ideas?
Playground
Screenshots
EDIT: (Adding Template)
<RadListView
for="(movie,index) in this.movies"
ref="listView"
#loaded="onListLoaded($event)"
#itemTap="onItemTap($event)"
itemHeight="50"
:key="index"
gridSpanCount=1
>
<v-template>
<FlexboxLayout class="item-row" :key='`flex` + index' flexDirection="row" width="100%" height="100%" justifyContent="space-between">
<Stacklayout orientation="horizontal">
<Image :key='`img-flag` + index' marginTop="-22" class="flag-image" marginBottom="-22" :src="movie.image" height="100%" />
<Label :key='`display-name` + index' :text="movie.display_name" />
</Stacklayout>
<Image :key='`heart-1` + index' #tap="handleToggleFavorite(movie)" width="20" :src="movie.favorite ? heartFilled : heartUnfilled" />
</FlexboxLayout>
</v-template>
</RadListView>
Looking at your mockup, I think you can achieve it with a simple GridLayout.
<v-template>
<GridLayout columns="auto,*,auto" class="list-group-item">
<Image col="0" :src="movie.image"
class="m-5 thumb img-circle">
</Image>
<Label col="1" :text="movie.display_name"></Label>
<Image col="2" src="path_to_icon" class="thumb">
</Image>
</GridLayout>
</v-template>
Im building a app that i have a tableview inside a tableview row.
i have a click event in the main tableview, that i wish to keep.
<Alloy>
<Collection src="orders" />
<Window onAndroidback="closeWindow" id="activeorderswindow" class="maincontainer_noactionbar">
<View class="topcontainer">
<ImageView class="topbackbutton" onClick="closeWindow"></ImageView>
<Label class="topheadinglabel">Aktive ordre</Label>
<ImageView class="topmenubutton" onClick="closeWindow"></ImageView>
</View>
<View class="maindatacontainer">
<TableView class="orderstable" id="activeorderstable" dataTransform="transformFunction" dataCollection="orders" dataFunction="updateUI" onDragEnd="refreshTable" >
<!-- Also can use Require -->
<TableViewRow class="activeordersrow" oid="{oid}" touchEnabled="true" >
<Label class="rowOid" text="{oid}"/>
<Label class="rowCust" text="{cust}"/>
<Label class="rowScode" text="{scode}"/>
<Label class="rowVehicle" text="{vehicle}"/>
<Label class="rowOrdertime" text="{ordertime}"/>
<ImageView class="imgOrdertime" image='/images/clock_green.png'/>
<ImageView class="imgDeadline" image='/images/clock_red.png'/>
<Label class="rowDeadline" text="{deadline}"/>
<View class="addresstablewrapper" backgroundColor="#000"/>
<TableView touchEnabled="false" scrollType="vertical" class="activeorders_addresses" data="{orders_addresses}" backgroundColor="yellow" />
</TableViewRow>
</TableView>
</View>
</Window>
The problem is that because i have another within the table with its own rows (without a click event) it seems like the click on the main does not fire.
Help appreciated :)
Thanks
Tom
Maybe the nested TableView should have touchEnabled="true" so the click bubbles up to the parent (tableviewrow).
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 was storing the full path of an image & retrieved it below, I want to know why does this image file path,doesn't display in imageview on xml?
file://localhost/Users/rhez/Library/Application%20Support/iPhone%20Simulator/6.1/Applications/76BDE731-037A-43F8-997B-DAFCA6E0D509/Documents/1372402304473-ea.jpg
<TableView dataCollection="photos">
<TableViewRow id="row" dataId="" model="{id}">
<View id="holderview">
<ImageView id="imageview" url="{path}"></ImageView>
</View>
</TableViewRow>
</TableView>
However as I view in the finder where the application project documents is located the image is stored in there.Is there something wrong on displaying/retrieving on my xml? Thanks for all your courage in helping.
Try setting the image property, not url, url is deprecated.
<TableView dataCollection="photos">
<TableViewRow id="row" dataId="" model="{id}">
<View id="holderview">
<ImageView id="imageview" image="{path}"></ImageView>
</View>
</TableViewRow>
</TableView>