Tableview scrollbar - tableview

I am having FXML file which has tableview, and that contains the dynamic rows and columns so when even more rows or columns are there it should show scrollbar.
If I decrease/increase the height/width scroll should come accordingly.
My fxml file is below:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.text.*?>
<?import javafx.geometry.*?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.collections.FXCollections ?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ScrollPane?>
<VBox minWidth="-Infinity" minHeight="550.0" stylesheets="#CLsMain.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<HBox minWidth="-Infinity" prefHeight="20.0">
<children>
<ImageView>
<image>
<Image url="#wellsFargoLogo.png" />
</image>
</ImageView>
<Label alignment="CENTER" prefHeight="45.0" prefWidth="810.0" minWidth="-Infinity" style="-fx-background-color: lightGray;" text="FX Continous Linked Settlement" textAlignment="JUSTIFY" wrapText="true">
<font>
<Font name="System Bold" size="16.0" />
</font>
</Label>
</children>
</HBox>
<HBox alignment="CENTER" minWidth="-Infinity" prefHeight="58.0">
<children>
<Label alignment="CENTER" prefHeight="58.0" prefWidth="55.0" text="Config" textAlignment="JUSTIFY" textOverrun="CENTER_ELLIPSIS" wrapText="true">
<font>
<Font name="System Bold" size="12.0" />
</font>
</Label>
<ComboBox prefHeight="26.0" prefWidth="110.0" promptText="Default Config" />
<Label alignment="CENTER" prefHeight="35.0" prefWidth="16.0" textAlignment="JUSTIFY" wrapText="true" />
<Label alignment="CENTER" prefHeight="58.0" prefWidth="80.0" text="Quick Links" textAlignment="JUSTIFY" textOverrun="CENTER_ELLIPSIS" wrapText="true">
<font>
<Font name="System Bold" size="12.0" />
</font>
</Label>
<ComboBox prefHeight="26.0" prefWidth="90.0" promptText="CLS GUI" />
<Label alignment="CENTER" prefHeight="58.0" prefWidth="17.0" textAlignment="JUSTIFY" textOverrun="CENTER_ELLIPSIS" wrapText="true" />
<Button defaultButton="true" mnemonicParsing="false" prefHeight="25.0" prefWidth="79.0" text="Resend" textAlignment="JUSTIFY" styleClass="red-gradient" />
</children>
</HBox>
<TabPane minWidth="-Infinity" tabClosingPolicy="UNAVAILABLE">
<tabs>
<Tab text="Trade Blotter">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="71.0" prefWidth="515.0" />
</content>
</Tab>
<Tab text="Payment">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="58.0" prefWidth="515.0" />
</content>
</Tab>
<Tab text="I/O Swap">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
</content>
</Tab>
<Tab text="Exception">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
</content>
</Tab>
<Tab text="Non-Repudiation">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
</content>
</Tab>
<Tab text="Maintenance">
<content>
<AnchorPane>
<children>
<VBox xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<HBox alignment="CENTER" minWidth="-Infinity" prefWidth="800.0">
<children>
<Label alignment="CENTER" prefHeight="70.0" prefWidth="100.0" text="Select table" textAlignment="JUSTIFY" textOverrun="CENTER_ELLIPSIS" wrapText="true">
<font><Font name="System Bold" size="12.0" /></font>
</Label>
<ComboBox fx:id="clsTableConfigComboBox" prefHeight="26.0" prefWidth="180.0" promptText="Select Table"></ComboBox>
</children>
</HBox>
<ToolBar>
<items>
<HBox alignment="CENTER_LEFT" prefHeight="31.0" minWidth="-Infinity">
<children>
<!-- <ImageView>
<image>
<Image url="#tabClosedLarge.png" />
</image>
</ImageView> -->
<Button defaultButton="true" mnemonicParsing="false" onAction="#onAddHandler" prefHeight="25.0" prefWidth="59.0" text=" Add " textAlignment="JUSTIFY" styleClass="red-gradient" />
<Label alignment="CENTER" prefHeight="35.0" prefWidth="16.0" textAlignment="JUSTIFY" wrapText="true" />
<!-- <ImageView fitHeight="24.0" fitWidth="24.0">
<image>
<Image url="#tabOpenLarge.png" />
</image>
</ImageView> -->
<Button fx:id="delBtn" defaultButton="true" mnemonicParsing="false" onAction="#onDeleteHandler" prefHeight="25.0" prefWidth="59.0" text="Delete" textAlignment="JUSTIFY" styleClass="red-gradient" />
<Label alignment="CENTER" prefHeight="35.0" prefWidth="16.0" textAlignment="JUSTIFY" wrapText="true" />
<!-- <ImageView fitHeight="24.0" fitWidth="24.0">
<image>
<Image url="#ClearAll.png" />
</image>
</ImageView> -->
<Button defaultButton="true" mnemonicParsing="false" onAction="#onClearHandler" prefHeight="25.0" prefWidth="79.0" text="Clear All" textAlignment="JUSTIFY" styleClass="red-gradient" />
<Label alignment="CENTER" prefHeight="35.0" prefWidth="16.0" textAlignment="JUSTIFY" wrapText="true" />
<!-- <ImageView fitHeight="30.0" fitWidth="27.0">
<image>
<Image url="#excel_logo.gif" />
</image>
</ImageView> -->
<Button defaultButton="true" mnemonicParsing="false" onAction="#onExportHandler" prefHeight="25.0" prefWidth="72.0" text="Download" textAlignment="JUSTIFY" styleClass="red-gradient" />
<Label alignment="CENTER" prefHeight="35.0" prefWidth="16.0" textAlignment="JUSTIFY" wrapText="true" />
<!-- <ImageView fitHeight="30.0" fitWidth="25.0">
<image>
<Image url="#printer-icon.gif" />
</image>
</ImageView> -->
<Button defaultButton="true" mnemonicParsing="false" onAction="#onPrintHandler" prefHeight="25.0" prefWidth="57.0" text="Print" textAlignment="JUSTIFY" styleClass="red-gradient" />
</children>
</HBox>
</items>
</ToolBar>
</children>
<children>
<ScrollPane prefHeight="340.0" prefWidth="850.0">
<TableView fx:id="tblViewer" styleClass="tableview" stylesheets="#ClsMain.css" />
</ScrollPane>
</children>
</VBox>
</children>
</AnchorPane>
</content>
</Tab>
</tabs>
</TabPane>
</children>
</VBox>
Can you help me with this isssue?
Kind Regards,

Related

How to manually set TitlePane height or make it adapt to its content

I would like to get a layout like this:
Multiple titled panes, each one with a different content.
The problem is that by default not all elements inside the titledPane are visible (ScreenShot1, the HBox with ChoiceBox, Label and Spinner aren't visible), and if I try to specify a prefHeight for the TitledPane (which is not recommended by the docs) a blank space remain when the titled pane is closed (ScreenShot2).
How can I make a titled pane adapt to its content or specify a preferredHeight without creating blank spaces on close?
Here is the code:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.Spinner?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<StackPane prefHeight="989.0" prefWidth="1240.0" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1">
<children>
<AnchorPane StackPane.alignment="TOP_LEFT">
<children>
<SplitPane dividerPositions="0.55" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<children>
<ScrollPane fitToWidth="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<content>
<VBox>
<children>
<TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 1">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<VBox prefHeight="200.0" prefWidth="100.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<TableView minHeight="200.0" prefHeight="171.0" prefWidth="297.0">
<columns>
<TableColumn prefWidth="87.0" text="C1" />
<TableColumn minWidth="0.0" prefWidth="63.0" text="C2" />
</columns>
</TableView>
<HBox prefHeight="100.0" prefWidth="200.0">
<children>
<ChoiceBox prefWidth="150.0" />
<Label text="some label" />
<Spinner />
</children>
</HBox>
</children>
</VBox>
</children>
</AnchorPane>
</content>
</TitledPane>
<TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 2">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<TableView layoutX="14.0" layoutY="14.0" prefHeight="171.0" prefWidth="297.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<columns>
<TableColumn prefWidth="87.0" text="C1" />
<TableColumn minWidth="0.0" prefWidth="63.0" text="C2" />
</columns>
</TableView>
</children>
</AnchorPane>
</content>
</TitledPane>
<TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 3">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<TableView layoutX="14.0" layoutY="14.0" prefHeight="171.0" prefWidth="297.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<columns>
<TableColumn prefWidth="87.0" text="C1" />
<TableColumn minWidth="0.0" prefWidth="63.0" text="C2" />
</columns>
</TableView>
</children>
</AnchorPane>
</content>
</TitledPane>
<TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 4">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="480.0">
<children>
<TableView layoutX="14.0" layoutY="14.0" prefHeight="171.0" prefWidth="297.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<columns>
<TableColumn prefWidth="87.0" text="C1" />
<TableColumn minWidth="0.0" prefWidth="63.0" text="C2" />
</columns>
</TableView>
</children>
</AnchorPane>
</content>
</TitledPane>
</children>
</VBox>
</content>
</ScrollPane>
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" />
</items>
</SplitPane>
</children>
<padding>
<Insets bottom="80.0" />
</padding>
</AnchorPane>
<VBox alignment="CENTER" maxHeight="80.0" style="-fx-background-color: grey;" StackPane.alignment="BOTTOM_CENTER">
<children>
<Button mnemonicParsing="false" text="FIXED BUTTON">
<font>
<Font size="24.0" />
</font>
</Button>
</children>
</VBox>
</children>
</StackPane>
I think you just need to put the VBox as the content node of the first TitledPane. In Scene Buider right mouse click on the AnchorPane and choose "Unwrap". The part of the FXML should look like this then:
<TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 1">
<content>
<VBox prefHeight="200.0" prefWidth="100.0"> <!-- VBox direct content node instead of AnchorPane -->
<children>
<TableView minHeight="200.0" prefHeight="171.0" prefWidth="297.0">
<columns>
<TableColumn prefWidth="87.0" text="C1" />
<TableColumn minWidth="0.0" prefWidth="63.0" text="C2" />
</columns>
</TableView>
<HBox prefHeight="100.0" prefWidth="200.0">
<children>
<ChoiceBox prefWidth="150.0" />
<Label text="some label" />
<Spinner />
</children>
</HBox>
</children>
</VBox>
</content>
</TitledPane>
I set everything thing to USE_COMPUTER_SIZE and then set the TableViews max-width to MAX_VALUE and max-height to 200. I hope this works for you!
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.Spinner?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<StackPane prefHeight="989.0" prefWidth="1240.0" xmlns="http://javafx.com/javafx/15.0.1" xmlns:fx="http://javafx.com/fxml/1">
<children>
<AnchorPane StackPane.alignment="TOP_LEFT">
<children>
<SplitPane dividerPositions="0.55" minWidth="-Infinity" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<items>
<AnchorPane>
<children>
<ScrollPane fitToWidth="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<content>
<VBox>
<children>
<TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 1">
<content>
<AnchorPane>
<children>
<VBox alignment="CENTER" spacing="2.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<TableView maxHeight="200.0" maxWidth="1.7976931348623157E308">
<columns>
<TableColumn maxWidth="1.7976931348623157E308" prefWidth="87.0" text="C1" />
<TableColumn maxWidth="1.7976931348623157E308" minWidth="0.0" prefWidth="63.0" text="C2" />
</columns>
</TableView>
<HBox alignment="CENTER_LEFT" spacing="2.0">
<children>
<ChoiceBox prefWidth="150.0" />
<Label text="some label" />
<Spinner />
</children>
<VBox.margin>
<Insets />
</VBox.margin>
</HBox>
</children>
</VBox>
</children>
</AnchorPane>
</content>
</TitledPane>
<TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 2">
<content>
<AnchorPane>
<children>
<TableView layoutX="14.0" layoutY="14.0" maxHeight="200.0" maxWidth="1.7976931348623157E308" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<columns>
<TableColumn prefWidth="87.0" text="C1" />
<TableColumn minWidth="0.0" prefWidth="63.0" text="C2" />
</columns>
</TableView>
</children>
</AnchorPane>
</content>
</TitledPane>
<TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 3">
<content>
<AnchorPane>
<children>
<TableView layoutX="14.0" layoutY="14.0" maxHeight="200.0" maxWidth="1.7976931348623157E308" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<columns>
<TableColumn prefWidth="87.0" text="C1" />
<TableColumn minWidth="0.0" prefWidth="63.0" text="C2" />
</columns>
</TableView>
</children>
</AnchorPane>
</content>
</TitledPane>
<TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 4">
<content>
<AnchorPane>
<children>
<TableView layoutX="14.0" layoutY="14.0" maxHeight="200.0" maxWidth="1.7976931348623157E308" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<columns>
<TableColumn prefWidth="87.0" text="C1" />
<TableColumn minWidth="0.0" prefWidth="63.0" text="C2" />
</columns>
</TableView>
</children>
</AnchorPane>
</content>
</TitledPane>
</children>
</VBox>
</content>
</ScrollPane>
</children>
</AnchorPane>
<AnchorPane />
</items>
</SplitPane>
</children>
<padding>
<Insets bottom="80.0" />
</padding>
</AnchorPane>
<VBox alignment="CENTER" maxHeight="80.0" style="-fx-background-color: grey;" StackPane.alignment="BOTTOM_CENTER">
<children>
<Button mnemonicParsing="false" text="FIXED BUTTON">
<font>
<Font size="24.0" />
</font>
</Button>
</children>
</VBox>
</children>
</StackPane>

Xamarin Shell Styling not applying to UWP

I'm writing a xamarin app that targets Android, iOS, and UWP.
We're using the shell stack for routing and have a bottom bar with some flyout items.
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:views="clr-namespace:CADLearning.App.Views"
xmlns:user="clr-namespace:CADLearning.App.Views.User"
xmlns:controls="clr-namespace:CADLearning.App.Controls"
xmlns:services="clr-namespace:CADLearning.App.Services"
BackgroundColor="{DynamicResource HeaderBackgroundColor}"
FlyoutBackgroundColor="{DynamicResource HeaderBackgroundColor}"
x:Name="this"
x:Class="CADLearning.App.AppShell">
<!--
Styles and Resources
-->
<Shell.Resources>
<ResourceDictionary>
<Color x:Key="NavigationPrimary">#2196F3</Color>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{DynamicResource BackgroundColor}" />
<Setter Property="Shell.ForegroundColor" Value="{DynamicResource ForegroundColor}" />
<Setter Property="Shell.TitleColor" Value="{DynamicResource ForegroundColor}" />
<Setter Property="Shell.DisabledColor" Value="{DynamicResource DisabledForegroundColor}" />
<Setter Property="Shell.UnselectedColor" Value="{DynamicResource UnselectedForegroundColor}" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{DynamicResource HeaderBackgroundColor}" />
<Setter Property="Shell.TabBarForegroundColor" Value="{DynamicResource OrangeColor}"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="{DynamicResource UnselectedForegroundColor}"/>
<Setter Property="Shell.TabBarTitleColor" Value="{DynamicResource OrangeColor}"/>
</Style>
<Style TargetType="Tab" BasedOn="{StaticResource BaseStyle}" />
<Style x:Key="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="FontSize" Value="16"/>
<Setter Property="TextColor" Value="{DynamicResource ForegroundColor}"/>
<Setter Property="VerticalOptions" Value="Center"/>
</Style>
</ResourceDictionary>
</Shell.Resources>
<Shell.FlyoutHeader>
<controls:FlyoutHeader />
</Shell.FlyoutHeader>
<Shell.ItemTemplate>
<DataTemplate>
<StackLayout Padding="5,15,5,0" Orientation="Horizontal">
<Image Source="{Binding FlyoutIcon}" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" Margin="0,0,5,0"/>
<Label Grid.Column="1" Text="{Binding Title}" Style="{DynamicResource FlyoutItemLabelStyle}" VerticalOptions="Center" />
</StackLayout>
</DataTemplate>
</Shell.ItemTemplate>
<Shell.MenuItemTemplate>
<DataTemplate>
<StackLayout Padding="5,15,5,0" Orientation="Horizontal">
<Image Source="{Binding FlyoutIcon}" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" Margin="0,0,5,0"/>
<Label Grid.Column="1" Text="{Binding Title}" Style="{DynamicResource FlyoutItemLabelStyle}" VerticalOptions="Center" />
</StackLayout>
</DataTemplate>
</Shell.MenuItemTemplate>
<!--Actual Items-->
<FlyoutItem Title="Home" Icon="home.png" Route="home">
<Tab Title="Dashboard" Icon="workflow.png" Route="dashboard">
<ShellContent ContentTemplate="{DataTemplate views:DashboardPage}"/>
</Tab>
<Tab Title="Roles & Goals" Icon="goal.png" Route="goals">
<ShellContent ContentTemplate="{DataTemplate views:GoalsPage}"/>
</Tab>
<Tab Title="Library" Icon="library.png" Route="library">
<ShellContent ContentTemplate="{DataTemplate views:LibraryPage}"/>
</Tab>
<Tab Title="Playlists" Icon="playlist.png" Route="playlists">
<ShellContent ContentTemplate="{DataTemplate views:PlaylistsPage}"/>
</Tab>
</FlyoutItem>
<FlyoutItem Title="Support" Icon="Q.png" Route="support">
<ShellContent ContentTemplate="{DataTemplate views:QPage}"/>
</FlyoutItem>
<FlyoutItem Title="Settings" Icon="settings.png" Route="user">
<Tab Title="Settings" Icon="settings.png" Route="settings">
<ShellContent ContentTemplate="{DataTemplate user:SettingsPage}"/>
</Tab>
<Tab Title="Transcript" Icon="transcript.png" Route="transcript">
<ShellContent ContentTemplate="{DataTemplate user:TranscriptPage}"/>
</Tab>
</FlyoutItem>
<MenuItem Text="Logout" Icon="login.png" x:Name="miLogout" Clicked="miLogout_Clicked"/>
</Shell>
on Android and iOS this works okay and the bottom tabbed items display.
However in UWP they don't display unless you hover over them
Could anyone point me in the right direction on getting this to work in UWP?

Crossdomain error with phonegap/cordova

I'm using Phonegap / Cordova to try a connection in the WP-API of wordpress.
"The 'Access-Control-Allow-Origin' header is present on the requested resource.
My ajax:
jQuery.ajax ({
url: 'linktoserver.com/wp-json/wp/v2/publication?_embed',
method: 'GET',
crossDomain: true,
error: function (xhr, status, error) {
},
success: function (result) {
renderMap (result)
}
});
My .htaccess:
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</ IfModule>
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase / server /
RewriteRule ^ index \ .php $ - [L]
RewriteCond% {REQUEST_FILENAME}! -f
RewriteCond% {REQUEST_FILENAME}! -d
RewriteRule. /server/index.php [L]
</ IfModule>
# END WordPress
I tested all browsers using a simulator, using my own cell phone for testing and in all cases the error continues.
EDIT 1:
My config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.e4g.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MyApp</name>
<description>
MyApp.
</description>
<author email="juliano.t#hotmail.com" href="juliano.t#hotmail.com">
MyApp Team
</author>
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
<preference name="Orientation" value="portrait" />
<preference name="DisallowOverScroll" value="true" />
<preference name="BackgroundColor" value="#1FB5FCFF" />
<icon gap:platform="ios" height="60" src="res/icons/ios/icon-60.png" width="60" />
<icon gap:platform="ios" height="120" src="res/icons/ios/icon-60-2x.png" width="120" />
<icon gap:platform="ios" height="180" src="res/icons/ios/icon-60-3x.png" width="180" />
<icon gap:platform="ios" height="76" src="res/icons/ios/icon-76.png" width="76" />
<icon gap:platform="ios" height="152" src="res/icons/ios/icon-76-2x.png" width="152" />
<icon gap:platform="ios" height="40" src="res/icons/ios/icon-40.png" width="40" />
<icon gap:platform="ios" height="80" src="res/icons/ios/icon-40-2x.png" width="80" />
<icon gap:platform="ios" height="57" src="res/icons/ios/icon-57.png" width="57" />
<icon gap:platform="ios" height="114" src="res/icons/ios/icon-57-2x.png" width="114" />
<icon gap:platform="ios" height="72" src="res/icons/ios/icon-72.png" width="72" />
<icon gap:platform="ios" height="144" src="res/icons/ios/icon-72-2x.png" width="144" />
<icon gap:platform="ios" height="29" src="res/icons/ios/icon-small.png" width="29" />
<icon gap:platform="ios" height="58" src="res/icons/ios/icon-small-2x.png" width="58" />
<icon gap:platform="ios" height="50" src="res/icons/ios/icon-50.png" width="50" />
<icon gap:platform="ios" height="100" src="res/icons/ios/icon-50-2x.png" width="100" />
<icon gap:platform="android" gap:qualifier="ldpi" src="res/icons/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="res/icons/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="res/icons/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="res/icons/android/icon-96-xhdpi.png" />
<icon gap:platform="android" gap:qualifier="xxhdpi" src="res/icons/android/icon-144-xxhdpi.png" />
<icon gap:platform="android" gap:qualifier="xxxhdpi" src="res/icons/android/icon-192-xxxhdpi.png" />
<splash src="splash.png" />
<splash gap:platform="ios" height="480" src="res/screens/ios/screen-iphone-portrait.png" width="320" />
<splash gap:platform="ios" height="960" src="res/screens/ios/screen-iphone-portrait-2x.png" width="640" />
<splash gap:platform="ios" height="1024" src="res/screens/ios/screen-ipad-portrait.png" width="768" />
<splash gap:platform="ios" height="2048" src="res/screens/ios/screen-ipad-portrait-2x.png" width="1536" />
<splash gap:platform="ios" height="768" src="res/screens/ios/screen-ipad-landscape.png" width="1024" />
<splash gap:platform="ios" height="1536" src="res/screens/ios/screen-ipad-landscape-2x.png" width="2048" />
<splash gap:platform="ios" height="1136" src="res/screens/ios/screen-iphone-568h-2x.png" width="640" />
<splash gap:platform="ios" height="1334" src="res/screens/ios/screen-iphone-portrait-667h.png" width="750" />
<splash gap:platform="ios" height="2208" src="res/screens/ios/screen-iphone-portrait-736h.png" width="1242" />
<splash gap:platform="ios" height="1242" src="res/screens/ios/screen-iphone-landscape-736h.png" width="2208" />
<splash gap:platform="android" gap:qualifier="land-hdpi" src="res/screens/android/screen-hdpi-landscape.png" />
<splash gap:platform="android" gap:qualifier="land-ldpi" src="res/screens/android/screen-ldpi-landscape.png" />
<splash gap:platform="android" gap:qualifier="land-mdpi" src="res/screens/android/screen-mdpi-landscape.png" />
<splash gap:platform="android" gap:qualifier="land-xhdpi" src="res/screens/android/screen-xhdpi-landscape.png" />
<splash gap:platform="android" gap:qualifier="port-hdpi" src="res/screens/android/screen-hdpi-portrait.png" />
<splash gap:platform="android" gap:qualifier="port-ldpi" src="res/screens/android/screen-ldpi-portrait.png" />
<splash gap:platform="android" gap:qualifier="port-mdpi" src="res/screens/android/screen-mdpi-portrait.png" />
<splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/screens/android/screen-xhdpi-portrait.png" />
<engine name="ios" spec="^4.4.0" />
<plugin name="cordova-plugin-camera" spec="^2.4.1">
<variable name="CAMERA_USAGE_DESCRIPTION" value=" " />
<variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value=" " />
</plugin>
<plugin name="cordova-plugin-transport-security" spec="^0.1.2" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
</widget>
You have to add a protocol to the ajax url (http:// or https://), if you don't provide one, then file:// will be used as Cordova/Phonegap apps load the app code from www folder using that protocol

how can i make flowpane scroll when resized

I want to show a scrollbar automatically when the window is resized to be able to see all the rectangles
Before resizing:
After resizing:
In the bottom, the rectangles disappear but they are still there.
so is there a way to combine the Flowpane with a Scrollpane ?
I'm using SceneBuilder and this is the fxml code:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.shape.Rectangle?>
<FlowPane alignment="TOP_CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
<children>
<Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="200.0" stroke="BLACK" strokeType="INSIDE" width="200.0" />
<Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="200.0" stroke="BLACK" strokeType="INSIDE" width="200.0" />
<Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="200.0" stroke="BLACK" strokeType="INSIDE" width="200.0" />
<Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="200.0" stroke="BLACK" strokeType="INSIDE" width="200.0" />
<Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="200.0" stroke="BLACK" strokeType="INSIDE" width="200.0" />
<Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="200.0" stroke="BLACK" strokeType="INSIDE" width="200.0" />
</children>
</FlowPane>
Yes there is: Simply use the FlowPane as content for the ScrollPane and use fitToWidth to make make the ScrollPane set the width of the content according to the available width...
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.shape.Rectangle?>
<!-- make ScrollPane resize the content width -->
<ScrollPane fitToWidth="true" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
<content>
<!-- do not put bounds on the FlowPane size -->
<FlowPane alignment="TOP_CENTER" maxHeight="-Infinity" maxWidth="Infinity" minHeight="-Infinity" prefWidth="600.0">
<children>
<Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="200.0" stroke="BLACK" strokeType="INSIDE" width="200.0" />
<Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="200.0" stroke="BLACK" strokeType="INSIDE" width="200.0" />
<Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="200.0" stroke="BLACK" strokeType="INSIDE" width="200.0" />
<Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="200.0" stroke="BLACK" strokeType="INSIDE" width="200.0" />
<Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="200.0" stroke="BLACK" strokeType="INSIDE" width="200.0" />
<Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="200.0" stroke="BLACK" strokeType="INSIDE" width="200.0" />
</children>
</FlowPane>
</content>
</ScrollPane>

How to add an icon to the Tab control in FXML?

I'm using javafx 2.0. I want to add an icon to the Tab in fxml:
example:
<TabPane>
<tabs>
<Tab text="abc" >
</Tab>
</tabs>
</TabPane>
I found a solution:
<Tab>
<graphic>
<ImageView>
<image>
<Image url="#image.png"/>
</image>
</ImageView>
</graphic>
<content>
...
</content>
</Tab>

Resources