Bits: Prototype UI Content

Test three 2-panel views, one fixed and two with splitter drag and panel click events.

Many of the code bits are being refactored. One consequence is that most of the "RemoteExecute" buttons do not link to matching code.

Content pages like this are designed to be inserted into a wrapper page's iframe. So, they don't have menus. Their wrappers are part of a thread, but they are not.

However, this prototype page is part of the "Prototype thread" and so we provide thread navigation links to be used when viewing this content unwrapped: Prev Next

If you see a top and bottom menu, this page is wrapped, so use those menu controls.

1.0 Test Panel Widgets

This page tests blocks of (mostly) two panels each, intended to display code, comentary, and output.

1.1 Fixed Width Panels

Fixed panel widths are fixed by width style for left panel.

/*------------------------------*/
  code here

text here and more and more and more and more and more and more and more and more and more

1.2 Splitter-bar panels with Noflow Text

Alter splitter-bar panel widths by dragging splitter bar or clicking in either panel to expand that panel's width. Default widths are set by setting width style on left panel.

This panel view is wrapped with a splitter-bar flex container. Its right panel is set to fill space not occupied by left panel. The left panel has white-space:pre style, the right is a simple div, with white-space:nowrap, so text overflows instead of wrappint.

The intent is to show code in the left panel and the right holds explanatory text.

/*------------------------------*/
  code here
  and here
  --

/*------------------------------*/
Some explanatory text here
and here
---
Note: This panel uses style white-space:nowrap
That means that most styles are enforced.

1.3 Splitter-bar panels with pre styling

The panel view below is wrapped with a flex container and the right panel is set to fill space not occupied by left panel. Both left and right panels have white-space:pre style.

Text color in the left panel uses syntax highlighting generated by the prism styling from prism.com. This is intended for code display.

The right panel is also pre styling with terminal colors, intended for output display.

/*------------------------------*/
  code here
  and here
  --

/*------------------------------*/
  output here
  and here
  ...
  Note: this panel uses style white-space:pre
  That means that almost all other styles are ignored

1.4 Floated Code Block

This panel is a single block of fixed width. An inner block, containing pre styled code, is floated to the left. Explanitory text wraps the floating block.

/*-- initialize language defined types --*/

let i = 42i8;         // data type specified

let b = true;         // data type inferred

let f:f32 = 3.14159;  // variable type specified  

let c:char = 'z';

let sl:&str = "a literal string";
let second = sl.chars().nth(1);

let st = "an owned string".to_string();
let fourth = st.chars().nth(3);

let arr:[i32; 3] = [1, 2, 3];
let first = arr[0];

let tp: (i32, f64, char) = (1, 2.5, 'a');
let second = tp.1;

let iref: &i8 = &i;

let aref: &[i32; 3] = &arr;

Type specifications like i8 and f64 can be applied to the variable name or to it's initializing data, as shown here.

Rust can usually infer appropriate types for data, but a code developer can explicitly define them. If the type annotations were removed in this example, Rust would infer i to be i32 and f to be f64.

The char type occupies 4 bytes of storage, large enough to hold any of the utf-8 characters.

The type &str is a reference to a fixed-size immutable literal string in stack memory. It may hold any of the utf-8 characters. It's size is the sum of the actual literal character sizes. For the literal string shown, all of the characters are 1 byte.

Arrays are fixed size sequences of values of the specified type. They are indexable and individual element values may be changed if the array has mutable type.

Tuples are sequences of values of heterogeneous types. Elements are accessed via position arguments, e.g., tp.1 accesses the second element, a float.

References like &arr are fixed pointers to the beginning of the variable's data storage.

1.5 Labeled Two Panel Block

Build and Run

Cargo.toml Contents

> cargo run
Compiling hello_world v0.1.0 (C:\github\JimFawcett\RustStory\Chap_1_Models\hello_world)
Finished `dev` profile [unoptimized + debuginfo] target(s) in 0.36s
Running `target\debug\hello_world.exe`
Hello, world!

[package]
name = "hello"
version = "0.1.0"
authors = ["James W. Fawcett "]
edition = "2018"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]

1.6 Labeled Two Panel Block with Splits

Build and Run

Cargo.toml Contents

> cargo run
Compiling hello_world v0.1.0 (C:\github\JimFawcett\RustStory\Chap_1_Models\hello_world)
Finished `dev` profile [unoptimized + debuginfo] target(s) in 0.36s
Running `target\debug\hello_world.exe`
Hello, world!

New Section


> cargo run

[package]
name = "hello"
version = "0.1.0"
authors = ["James W. Fawcett "]
edition = "2018"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]

Newer Section


Some improbable stuff here

1.7 One Panel Block

Cargo.toml

[package]
name = "demo"
version = "0.1.0"
authors = ["James W. Fawcett <jfawcett@twcny.rr.com>"]
edition = "2018"

[dependencies]
demo_lib = { path = "../demo_lib" }

1.8 Experimental Three Panel Block

This block style is not used in any of the code demos (yet).


// C++ code here ----------------------------------------


// C++ code here ----------------------------

Some text here and more here and more here and more here and more