JavaFX: Generating grid lines using group

This entry is part 51 of 55 in the series JavaFX

Using  group, we can create 2 separate set of lines making them to look like grids.

Here the grids are formed by 2 groups of horizontal and vertical lines.

package drawing;

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;

public class Drawing extends Application {

    @Override
    public void start(Stage stage) {

        Group group = new Group();

        // The background grid
        for (int i = 0; i < 400; i += 20) {
            Line hline = new Line(i, 0, i, 360);
            hline.setStroke(Color.LIGHTGRAY);
            Line vline = new Line(0, i, 400, i);
            vline.setStroke(Color.DARKBLUE);
            group.getChildren().addAll(hline, vline);
        }

        // Create the scene and the stage
        Scene scene = new Scene(group, 400, 360);
        stage.setScene(scene);
        stage.setTitle("Grid Lines");
        stage.show();
    }

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

}

gridlines

WPF: Grid

This entry is part 9 of 54 in the series Learn WPF

If you create a WPF application using Visual Studio, Visual Studio will first create a Grid control for us.

Grid, together with StackPanel are indeed commonly used.  Here in the cell, I have put some text inside the cell using TextBlock.

I have used margin to create some padding between the text and the cells.

Notice that we first create the columns and the rows using Grid.ColumnDefinitions and Grid.RowDefinitions and we put the TextBlock inside the cell specified by Grid.Row and Grid.Column.

It is possible to span the column using Grid.ColumnSpan.

<Window x:Class="Grid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True" Width="300" Height="350">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>

        <TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0" Margin="10,10">2005 Products Shipped</TextBlock>
        <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0" Margin="10,10">Quarter 1</TextBlock>
        <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1" Margin="10,10">Quarter 2</TextBlock>
        <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2" Margin="10,10">Quarter 3</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="0" Margin="10,10">50000</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="1" Margin="10,10">100000</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="2" Margin="10,10">150000</TextBlock>
        <TextBlock FontSize="16" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="3" Margin="10,10">Total Units: 300000</TextBlock>
    </Grid>
</Window>

grid

 

jQuery Mobile: One button or solo grid

This entry is part 41 of 73 in the series jQuery Mobile

For a single button to occupy the entire page, you can use a container with class ui-grid-solo.

Solo Grid
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Grid A</h1></div>
    <br>
    <div class='ui-grid-a'>
        <div class='ui-block-a'><a class='ui-shadow ui-btn ui-corner-all'>Previous</a></div>
        <div class='ui-block-b'><a class='ui-shadow ui-btn ui-corner-all'>Next</a></div>
    </div>
    <div class='ui-grid-solo'>
        <div class='ui-block-a'><input type='button' value='More'></div>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code Solo Grid Output

jQuery Mobile: 3-column Grid B

This entry is part 36 of 73 in the series jQuery Mobile

Grid B is for 3-column block.

3-Column Grid
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Grid B</h1></div>
    <br>
    <div class='ui-grid-b'>
            <div class='ui-block-a'><div class='ui-bar ui-bar-a' style='height:60px'>Block A</div></div>
            <div class='ui-block-b'><div class='ui-bar ui-bar-a' style='height:60px'>Block B</div></div>
            <div class='ui-block-c'><div class='ui-bar ui-bar-a' style='height:60px'>Block C</div></div>
    </div><!-- /grid-a -->

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

gridB

As you can see, just by using class=’ui-grid-b’, we have turned the page into a 3-column block system.

jQuery Mobile: Grid

This entry is part 35 of 73 in the series jQuery Mobile

The jQuery Mobile framework provides a simple way to build CSS-based columns that can also be responsive.

We look at a simple example below.

To build a two-column (50/50%) layout, start with a container with a class of ui-grid-a, and add two child containers inside it classed with ui-block-a for the first column and ui-block-b for the second.

2-Column Grid
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Grid A</h1></div>
    <div class='ui-grid-a'>
            <div class='ui-block-a'><div class='ui-bar ui-bar-a' style='height:60px'>Block A</div></div>
            <div class='ui-block-b'><div class='ui-bar ui-bar-a' style='height:60px'>Block B</div></div>
    </div><!-- /grid-a -->

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

gridA

This is the grid-a with a 2-column block.

In the next example, we will use grid-b which is for 3-column block.