Content, Structure, and Interactions

[kylpo]

OR Paint, Layout, and Events (user generated and system generated)

Primitives made up of content, structure, and interaction components.

Content: text is content, img is content.

divs are not

Structure: divs

Interaction: button, input, link

[kylpo]

The Container widget lets you create a rectangular visual element. A container can be decorated with a BoxDecoration, such as a background, a border, or a shadow. A Container can also have margins, padding, and constraints applied to its size. In addition, a Container can be transformed in three dimensional space using a matrix.

Introduction to widgets - Flutter

[kylpo]

Had no idea that primitives like <input> were using shadow-dom before shadow-dom was a thing. <input type="range"> is just a wrapper of multiple divs in a shadow-root.

https://bitsofco.de/what-is-the-shadow-dom/

So, really, button, input, are maybe not the base level of primitives. They can be considered a composite component. Maybe a "primitive" composite component?

[kylpo]

On that thought, link really is just interactable text with state for if it has been visited or not.

[kylpo]

Layout. E.g. Column and Row widgets which make it easy for us to align other widgets vertically or horizontally to each other. Painting. E.g. Text and Image widgets allow us to display (‘paint’) some content onto the screen. Hit-Testing. E.g. the GestureDetector allows us to recognise different gestures such as tapping (for detecting the press of a button) and dragging (for swiping through a list).

The Layer Cake – Flutter Community – Medium

[kylpo]

Word for component container that lays things out

Template

• a gauge, pattern, or mold (such as a thin plate or board) used as a guide to the form of a piece being made
• something that establishes or serves as a pattern

Setting

• the place or type of surroundings where something is positioned or where an event takes place.

Structure -the arrangement of and relations between the parts or elements of something complex.

• construct or arrange according to a plan; give a pattern or organization to

Arrangement

• an act of arranging; state of being arranged.

Compositor

• a person who sets the type or text for printing

Composition

• the nature of something's ingredients or constituents; the way in which a whole or mixture is made up.

Configuration (configurator, configurational)

• an arrangement of elements in a particular form, figure, or combination
• relative arrangement of parts or elements: such as
• something (such as a figure, contour, pattern, or apparatus) that results from a particular arrangement of parts or components "This is a Configuration of AppBar, MainSection, Footer"

Choreography (choreographer)

• the sequence of steps and movements in dance or figure skating, especially in a ballet or other staged dance. Maybe this should be term for animation/motion?

[kylpo]

There are several kinds of events, including touch events, motion events, remote-control events, and press events.

UIResponder

[kylpo]

UIView: Drawing and animation

• Views draw content in their rectangular area using UIKit or Core Graphics.
• Some view properties can be animated to new values.

Layout and subview management

• Views may contain zero or more subviews.
• Views can adjust the size and position of their subviews.
• Use Auto Layout to define the rules for resizing and repositioning your views in response to changes in the view hierarchy.

Event handling

• A view is a subclass of UIResponder and can respond to touches and other types of events.
• Views can install gesture recognizers to handle common gestures.

UIView - UIKit | Apple Developer Documentation

[kylpo]

layout, bounds, constraints, collision/hit detection of a rectangle-based layout when it is a circle or triangle?

Hit testing of drawings. Chapter 18. Touches

SpriteKit has a lot of affordances that specifically make creating games easier, such as the particle systems, physics system, collision callbacks, scene editor, gameplay loop, GameplayKit integration, etc.

There are some things it doesn't do really well, such as text rendering or displaying web content or laying out tabular data, so the UIKit animation stuff might be good for that narrow category of games which don't fall far from the typical UIKit conventions - A Dark Room would be an example - but for most traditional 2D games, SpriteKit will probably be a better choice.

Keep in mind that you can mix and match. You can have the main menu as a standard UIKit screen, and then the main gameplay driven by a SpriteKit scene in a SpriteKit view. So depending on the structure of your app, you can perhaps take advantage of the strengths of both approaches. reddit: the front page of the internet

There is nothing you can do about that if you're going to use simple-minded collisions (e.g. the built-in UIKit Dynamics - it does only rectangular view collisions). If you want advanced shape collisions, either you must implement them yourself or you must use Sprites. ios - Triangle UIView - Swift - Stack Overflow

[kylpo]

Content objects as just containers of paint/pixels, lines, etc. 2d coordinate system. Bounded and described as a rectangle.

Triangle in UIKit:

context.beginPath()
        context.move(to: CGPoint(x: rect.minX + _margin, y: rect.maxY - _margin))
        context.addLine(to: CGPoint(x: rect.maxX - _margin, y: rect.maxY - _margin))
        context.addLine(to: CGPoint(x: (rect.maxX / 2.0), y: rect.minY + _margin))
        context.closePath()

        context.setFillColor(_color.cgColor)
        context.fillPath()

[kylpo]

• Elements -> (2d) Structure -> Positioning Structure (e.g. css shape)
• state
• user inputs/interactions
• motion, feedback

an image is paint (pixels), a line, a box, text is paint.

[kylpo]

"View" is just something in a box (rectangular coordinates) that can be interacted with. This is why you can onClick any web element.

smallest unit is a static pixel. But this isn't too helpful for a developer, so we instead are given lines, shapes, etc. Still only good for non-interactive content. So, we are given a higher abstraction: the View.

[kylpo]

Layout: question is what to do on overflow: wrap, scroll, cut off, zoom out, etc

[kylpo]

UIView takes care of many things including layout or handling touch events. It’s interesting to notice that it doesn’t directly take care of the drawing or animations, UIKit delegates that task to its brother: CoreAnimation.

CALayer Tutorial for iOS: Getting Started | raywenderlich.com

[kylpo]

Dominic Gannaway on Twitter: "It's way too early to say what we end up with. The experimental event API is a fork from the current "Plugin" based event system. The idea is that you use event components, like \<Press> to wrap parts of your UI that you want to provide events for.… https://t.co/XS0mvQYDBT"

Jared Palmer on Twitter: "React Flare looks🔥🔥🔥 “The idea is to extend React's event system to include high-level events that allow for consistent cross-device and cross-platform behavior.” —@necolas https://t.co/OYtER8xFfN" and [Umbrella] React Events · Issue #15257 · facebook/react related?

[kylpo]

Collection Describe the containment and grouping of things.

• array
• box
• component
• container
• element
• group
• module
• node
• pod
• kit
• receptacle
• separator
• wrapper

https://classnames.paulrobertlloyd.com/collection/