javafx || Online payment App Designing || Neatbeans || Scienebuilder





<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXDatePicker?>
<?import com.jfoenix.controls.JFXRadioButton?>
<?import com.jfoenix.controls.JFXTextField?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>

<HBox fx:id="root" alignment="TOP_RIGHT" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="650.0" prefWidth="1000.0" styleClass="root" stylesheets="@style.css" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1" fx:controller="onile.pyment.app.FXMLDocumentController">
   <children>
      <Pane prefHeight="642.0" prefWidth="654.0" style="-fx-background-color: #F7F7F7;">
         <children>
            <ImageView fitHeight="42.0" fitWidth="38.0" layoutX="38.0" layoutY="34.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../../../images/logoo.jpg" />
               </image>
            </ImageView>
            <Text fill="#c6a315" layoutX="85.0" layoutY="50.0" strokeType="OUTSIDE" strokeWidth="0.0" text="ONLINE &#10;PAYMENT" wrappingWidth="91.13671875">
               <font>
                  <Font name="System Bold" size="14.0" />
               </font>
            </Text>
            <Text fill="#c6a315" layoutX="38.0" layoutY="134.0" strokeType="OUTSIDE" strokeWidth="0.0" text="SHOPING CART" wrappingWidth="164.13671875">
               <font>
                  <Font name="System Bold" size="21.0" />
               </font>
            </Text>
            <Pane layoutX="27.0" layoutY="161.0" prefHeight="176.0" prefWidth="674.0">
               <children>
                  <ImageView fitHeight="78.0" fitWidth="99.0" layoutX="32.0" layoutY="41.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../../images/img_1.PNG" />
                     </image>
                  </ImageView>
                  <Text fill="#3b3b3b" layoutX="137.0" layoutY="63.0" strokeType="OUTSIDE" strokeWidth="0.0" text="GRILLED CHICKEN MUSHROM" wrappingWidth="246.13671875">
                     <font>
                        <Font name="System Bold" size="16.0" />
                     </font>
                  </Text>
                  <Text fill="#a4a4a6" layoutX="137.0" layoutY="86.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Served with 2 side dishes :rice,French&#10;fries.mashed potatoes,corn,sauteed vege-&#10;table, spinach, oven potatoes,croquette" wrappingWidth="246.13671875" />
                  <Pane layoutX="468.0" layoutY="25.0" prefHeight="127.0" prefWidth="69.0" styleClass="sty_1" stylesheets="@style.css">
                     <children>
                        <Text fill="#4a4747" layoutX="24.0" layoutY="70.0" strokeType="OUTSIDE" strokeWidth="0.0" text="04" wrappingWidth="25.13671875">
                           <font>
                              <Font name="System Bold" size="16.0" />
                           </font>
                        </Text>
                        <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="2.0" layoutY="2.0" prefHeight="48.0" prefWidth="69.0">
                           <graphic>
                              <ImageView fitHeight="30.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true">
                                 <image>
                                    <Image url="@../../../images/plus.PNG" />
                                 </image>
                              </ImageView>
                           </graphic>
                        </JFXButton>
                        <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="2.0" layoutY="77.0" prefHeight="48.0" prefWidth="69.0">
                           <graphic>
                              <ImageView fitHeight="21.0" fitWidth="33.0" pickOnBounds="true" preserveRatio="true">
                                 <image>
                                    <Image url="@../../../images/negative.PNG" />
                                 </image>
                              </ImageView>
                           </graphic>
                        </JFXButton>
                     </children>
                  </Pane>
                  <Text fill="#868080" layoutX="403.0" layoutY="94.0" strokeType="OUTSIDE" strokeWidth="0.0" text="\$ 15.2" wrappingWidth="46.13671875">
                     <font>
                        <Font name="System Bold" size="16.0" />
                     </font>
                  </Text>
                  <Pane layoutX="547.0" layoutY="25.0" prefHeight="127.0" prefWidth="69.0" styleClass="sty_1" stylesheets="@style.css">
                     <children>
                        <JFXButton contentDisplay="GRAPHIC_ONLY" layoutY="-2.0" onAction="#btn_close" prefHeight="127.0" prefWidth="69.0">
                           <graphic>
                              <ImageView fitHeight="38.0" fitWidth="30.0" pickOnBounds="true" preserveRatio="true">
                                 <image>
                                    <Image url="@../../../images/close.PNG" />
                                 </image>
                              </ImageView>
                           </graphic>
                        </JFXButton>
                     </children>
                  </Pane>
               </children>
            </Pane>
            <Pane layoutX="27.0" layoutY="384.0" prefHeight="176.0" prefWidth="674.0">
               <children>
                  <ImageView fitHeight="78.0" fitWidth="99.0" layoutX="32.0" layoutY="41.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../../images/img_2.PNG" />
                     </image>
                  </ImageView>
                  <Text fill="#3b3b3b" layoutX="137.0" layoutY="63.0" strokeType="OUTSIDE" strokeWidth="0.0" text="RIB-EXE AND SALMON STEAK" wrappingWidth="246.13671875">
                     <font>
                        <Font name="System Bold" size="16.0" />
                     </font>
                  </Text>
                  <Text fill="#a4a4a6" layoutX="137.0" layoutY="86.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Served with Mexican rice and one side dish" wrappingWidth="246.13671875" />
                  <Pane layoutX="468.0" layoutY="25.0" prefHeight="127.0" prefWidth="69.0" styleClass="sty_1" stylesheets="@style.css">
                     <children>
                        <Text fill="#4a4747" layoutX="24.0" layoutY="70.0" strokeType="OUTSIDE" strokeWidth="0.0" text="05" wrappingWidth="25.13671875">
                           <font>
                              <Font name="System Bold" size="16.0" />
                           </font>
                        </Text>
                        <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="2.0" layoutY="2.0" prefHeight="48.0" prefWidth="69.0">
                           <graphic>
                              <ImageView fitHeight="30.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true">
                                 <image>
                                    <Image url="@../../../images/plus.PNG" />
                                 </image>
                              </ImageView>
                           </graphic>
                        </JFXButton>
                        <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="2.0" layoutY="77.0" prefHeight="48.0" prefWidth="69.0">
                           <graphic>
                              <ImageView fitHeight="21.0" fitWidth="33.0" pickOnBounds="true" preserveRatio="true">
                                 <image>
                                    <Image url="@../../../images/negative.PNG" />
                                 </image>
                              </ImageView>
                           </graphic>
                        </JFXButton>
                     </children>
                  </Pane>
                  <Text fill="#868080" layoutX="403.0" layoutY="94.0" strokeType="OUTSIDE" strokeWidth="0.0" text="\$ 66.1" wrappingWidth="46.13671875">
                     <font>
                        <Font name="System Bold" size="16.0" />
                     </font>
                  </Text>
                  <Pane layoutX="547.0" layoutY="25.0" prefHeight="127.0" prefWidth="69.0" styleClass="sty_1" stylesheets="@style.css">
                     <children>
                        <JFXButton contentDisplay="GRAPHIC_ONLY" layoutY="-2.0" onAction="#btn_close" prefHeight="127.0" prefWidth="69.0">
                           <graphic>
                              <ImageView fitHeight="38.0" fitWidth="30.0" pickOnBounds="true" preserveRatio="true">
                                 <image>
                                    <Image url="@../../../images/close.PNG" />
                                 </image>
                              </ImageView>
                           </graphic>
                        </JFXButton>
                     </children>
                  </Pane>
               </children>
            </Pane>
            <Separator layoutX="56.0" layoutY="360.0" prefHeight="1.0" prefWidth="592.0" />
         </children>
      </Pane>
      <VBox prefHeight="642.0" prefWidth="334.0" style="-fx-background-color: #343434;">
         <children>
            <Pane prefHeight="651.0" prefWidth="334.0">
               <children>
                  <Text fill="#eeede9" layoutX="28.0" layoutY="104.0" strokeType="OUTSIDE" strokeWidth="0.0" text="PAYMENT" wrappingWidth="116.13671875">
                     <font>
                        <Font name="System Bold" size="21.0" />
                     </font>
                  </Text>
                  <JFXRadioButton layoutX="34.0" layoutY="135.0" prefHeight="17.0" prefWidth="164.0" text="Cash on Deilvery (COD)" textFill="WHITE" />
                  <JFXRadioButton layoutX="34.0" layoutY="163.0" prefHeight="17.0" prefWidth="164.0" text="Online Payment" textFill="WHITE" />
                  <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="38.0" layoutY="218.0" onAction="#BTN_PAYPAL" prefHeight="48.0" prefWidth="101.0" styleClass="btn" stylesheets="@style.css">
                     <graphic>
                        <ImageView fitHeight="31.0" fitWidth="61.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../../../images/paypal.PNG" />
                           </image>
                        </ImageView>
                     </graphic>
                  </JFXButton>
                  <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="143.0" layoutY="218.0" onAction="#BTN_VISA" prefHeight="48.0" prefWidth="101.0" style="-fx-background-color: white;" styleClass="btn" stylesheets="@style.css">
                     <graphic>
                        <ImageView fitHeight="31.0" fitWidth="61.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../../../images/visa.PNG" />
                           </image>
                        </ImageView>
                     </graphic>
                  </JFXButton>
                  <JFXTextField focusColor="#ecedee" layoutX="34.0" layoutY="309.0" prefHeight="48.0" prefWidth="246.0" promptText="Cardholder Name :" styleClass="txt_field" stylesheets="@style.css" unFocusColor="#fcf6f6">
                     <font>
                        <Font size="14.0" />
                     </font>
                  </JFXTextField>
                  <JFXTextField focusColor="#ecedee" layoutX="34.0" layoutY="364.0" prefHeight="48.0" prefWidth="246.0" promptText="Card Number :" styleClass="txt_field" stylesheets="@style.css" unFocusColor="#fcf6f6">
                     <font>
                        <Font size="14.0" />
                     </font>
                  </JFXTextField>
                  <JFXTextField focusColor="#ecedee" layoutX="226.0" layoutY="420.0" prefHeight="48.0" prefWidth="54.0" promptText="CVV" styleClass="txt_field" stylesheets="@style.css" unFocusColor="#fcf6f6">
                     <font>
                        <Font size="14.0" />
                     </font>
                  </JFXTextField>
                  <JFXDatePicker defaultColor="#e7eeed" layoutX="31.0" layoutY="421.0" prefHeight="48.0" prefWidth="171.0" styleClass="txt_field" />
                  <JFXButton contentDisplay="RIGHT" layoutX="152.0" layoutY="530.0" onAction="#BTN_CHECKOUT" prefHeight="48.0" prefWidth="156.0" style="-fx-background-color: #F0CA31;" styleClass="btn" stylesheets="@style.css" text="CHECK OUT">
                     <graphic>
                        <ImageView fitHeight="25.0" fitWidth="45.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../../../images/arrow.PNG" />
                           </image>
                        </ImageView>
                     </graphic>
                     <font>
                        <Font name="System Bold" size="15.0" />
                     </font>
                  </JFXButton>
               </children>
            </Pane>
         </children>
      </VBox>
   </children>
</HBox>

Comments

Post a Comment

Popular posts from this blog

JavaFX UI /UX Dashboard

Image
//FXML <?xml version="1.0" encoding="UTF-8"?> <?import com.jfoenix.controls.JFXButton?> <?import com.jfoenix.controls.JFXTextField?> <?import java.lang.String?> <?import javafx.scene.control.Label?> <?import javafx.scene.control.ProgressBar?> <?import javafx.scene.image.Image?> <?import javafx.scene.image.ImageView?> <?import javafx.scene.layout.AnchorPane?> <?import javafx.scene.layout.HBox?> <?import javafx.scene.layout.Pane?> <?import javafx.scene.layout.VBox?> <?import javafx.scene.text.Font?> <HBox fx:id="root" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="827.0" prefWidth="1320.0" styleClass="root" stylesheets="@style.css" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ui_...
Read more

JavaFX code for responsive layout

Image
  This code creates a responsive layout using a BorderPane as the root layout, with an HBox in the top region containing two buttons. The spacing between the buttons adjusts based on the width of the scene using a listener on the scene’s width property bu ttons adjusts based on the width of the scene using a listener on the scene’s width property import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.BorderPane; import javafx.scene.layout.HBox; import javafx.stage.Stage; public class ResponsiveLayoutExample extends Application { @Override public void start(Stage primaryStage) { // Create a border pane as the root layout BorderPane root = new BorderPane(); // Create an HBox for the top of the border pane HBox topBox = new HBox(); topBox.setPadding(new Insets(10, 10, 10, 10)); topBox.setSpacing(10); // Create two...
Read more