JavaFX: Setting up menu in a window

This entry is part 40 of 55 in the series JavaFX

In the old days when I first learned about Windows programming using Microsoft Foundation Class, the first thing that I learned was on creating menu items as I thought that was Windows programming.

Now, I realized that there is actually not much to creating menu items.  You create it once and you can use it for a whole lifetime of your application.

In the example below, I have used HBox to position the menu bar to be at the top of the window.  The menu bar will stretch across the window as I have set it with priority.ALWAYS.

package javafxapplication30;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Menu;
import javafx.scene.control.MenuBar;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.stage.Stage;

public class JavaFXApplication30 extends Application {

    @Override
    public void start(Stage stage) {

        stage.setTitle("JavaFX Program");

        HBox pane = new HBox();

        Scene scene = new Scene(pane, 400, 350);
        stage.setScene(scene);

        final Menu menu1 = new Menu("File");
        final Menu menu2 = new Menu("Options");
        final Menu menu3 = new Menu("Help");

        MenuBar menuBar = new MenuBar();
        menuBar.getMenus().addAll(menu1, menu2, menu3);

        HBox.setHgrow(menuBar, Priority.ALWAYS);  //So that the menuBar will take the whole HBox

        pane.getChildren().add(menuBar);

        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

menu

HTML5: Creating autocomplete using <datalist>

This entry is part 26 of 34 in the series HTML5

Datalist is quite similar to drop down select menu.  It is supported in major browsers except Safari.

It is used to provide a predefined list of options making the process of creating a list seems like an autocomplete form.
 
Codecrawl.com: Datalist
Users don’t necessarily have to choose from the predefined options; they can type their own answer if they wanted.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Datalist</title>
</head>
<body>
<label for='band_id'>What's your favourite rock band?</label>
<input list='bandlist' type='text' id='band_id' name='band' />
<datalist id='bandlist'>
    <option label='Oasis' value='Oasis' />
    <option label='Metallica' value='Metallica' />
    <option label='Poison' value='Poision' />
    <option label='Whitesnake' value='Whitesnake' />
</datalist>
</body>
</html>

In the above list, if you type wh in the input box, a prompt, whitesnake will be shown on the screen.

HTML Form: Menu list

This entry is part 10 of 10 in the series HTML Form

For situations where you have a long list of options, consider using menu or list.

A list can contain as many options as needed, yet it takes up very little space on the form.

To create a list, start with a two-sided <select> tag.  Within it, place each option in its own <option> tag.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>

</head>
<body>

<p>Where would you like to go next?</p>

<form method='post'>
    <select name='country'>
        <option value='england'>England</option>
        <option value='brazil'>Brazil</option>
        <option value='malaysia'>Malaysia</option>
    </select>

</form>

</body>
</html>

 

jQuery UI & Tabs: Vertical tabs

This entry is part 2 of 7 in the series jQuery UI Tabs

jQuery UI Tabs – Vertical Tabs functionality

Click tabs to swap between content that is divided into logical sections.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Tabs - Vertical Tabs functionality</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#tabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
            $('#tabs li').removeClass('ui-corner-top').addClass('ui-corner-left');
        });
    </script>
    <style>
        .ui-tabs-vertical {
            width: 55em;
        }

        .ui-tabs-vertical .ui-tabs-nav {
            padding: .2em .1em .2em .2em;
            float: left;
            width: 12em;
        }

        .ui-tabs-vertical .ui-tabs-nav li {
            clear: left;
            width: 100%;
            border-bottom-width: 1px !important;
            border-right-width: 0 !important;
            margin: 0 -1px .2em 0;
        }

        .ui-tabs-vertical .ui-tabs-nav li a {
            display: block;
        }

        .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
            padding-bottom: 0;
            padding-right: .1em;
            border-right-width: 1px;
            border-right-width: 1px;
        }

        .ui-tabs-vertical .ui-tabs-panel {
            padding: 1em;
            float: right;
            width: 40em;
        }
    </style>
</head>
<body>

<div id='tabs'>
    <ul>
        <li><a href='#tabs-1'>Pitbull</a></li>
        <li><a href='#tabs-2'>Sean Kingston</a></li>
        <li><a href='#tabs-3'>Taylor Swift</a></li>
    </ul>
    <div id='tabs-1'>
        <h2>Content heading 1</h2>

        <p>Pitbull is a Cuban–American recording artist and Latin Grammy winning rapper from Miami, Florida.</p>
    </div>
    <div id='tabs-2'>
        <h2>Content heading 2</h2>

        <p>Sean Kingston pursued a music career and debuted in 2007 with the album Sean Kingston.</p>
    </div>
    <div id='tabs-3'>
        <h2>Content heading 3</h2>

        <p>Taylor Swift, raised in Wyomissing, Pennsylvania. She moved to Nashville, Tennessee at the age of
            fourteen.</p>

        <p>She is known for her narrative songs about her personal experiences.</p>
    </div>
</div>

</body>
</html>
Try The Code

jQuery UI & Menu: Menu with icons

This entry is part 2 of 2 in the series jQuery UI Menu

jQuery UI Menu – Icons

A menu with the default configuration, showing how to use a menu with icons.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Menu - Icons</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#menu').menu();
        });
    </script>
    <style>
        .ui-menu {
            width: 150px;
        }
    </style>
</head>
<body>

<ul id='menu'>
    <li><a href='#'><span class='ui-icon ui-icon-disk'></span>Save</a></li>
    <li><a href='#'><span class='ui-icon ui-icon-zoomin'></span>Zoom In</a></li>
    <li><a href='#'><span class='ui-icon ui-icon-zoomout'></span>Zoom Out</a></li>
    <li class='ui-state-disabled'><a href='#'><span class='ui-icon ui-icon-print'></span>Print...</a></li>
    <li>
        <a href='#'>Playback</a>
        <ul>
            <li><a href='#'><span class='ui-icon ui-icon-seek-start'></span>Prev</a></li>
            <li><a href='#'><span class='ui-icon ui-icon-stop'></span>Stop</a></li>
            <li><a href='#'><span class='ui-icon ui-icon-play'></span>Play</a></li>
            <li><a href='#'><span class='ui-icon ui-icon-seek-end'></span>Next</a></li>
        </ul>
    </li>
</ul>

</body>
</html>
Try The Code