From dc867ad9b4b9f9772fd6b9f96471630ea50f04aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phaneDucasse?= Date: Sun, 9 Apr 2023 12:09:27 +0200 Subject: [PATCH 1/3] Make sure BlTransformationAnimationTest is properly tagged. --- .../BlCompositeBackgroundTest.extension.st | 2 +- .../BlTransformationAnimationTest.class.st | 22 +++++++++++-------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/Bloc-Alexandrie-Tests/BlCompositeBackgroundTest.extension.st b/src/Bloc-Alexandrie-Tests/BlCompositeBackgroundTest.extension.st index eb51d520b..c45220cc4 100644 --- a/src/Bloc-Alexandrie-Tests/BlCompositeBackgroundTest.extension.st +++ b/src/Bloc-Alexandrie-Tests/BlCompositeBackgroundTest.extension.st @@ -8,7 +8,7 @@ BlCompositeBackgroundTest >> testAeApplyTo [ backgroundList := OrderedCollection with: (BlBackground paint: Color blue). background := BlCompositeBackground withAll: backgroundList. - blElement := (BlElement new) background: background. + blElement := BlElement new background: background. space root addChild: blElement. space aeAsForm. "check no errors" diff --git a/src/Bloc-Animation-Tests/BlTransformationAnimationTest.class.st b/src/Bloc-Animation-Tests/BlTransformationAnimationTest.class.st index fe5f9addd..ed8e824c5 100644 --- a/src/Bloc-Animation-Tests/BlTransformationAnimationTest.class.st +++ b/src/Bloc-Animation-Tests/BlTransformationAnimationTest.class.st @@ -28,28 +28,32 @@ BlTransformationAnimationTest >> containerElement [ { #category : #tests } BlTransformationAnimationTest >> containerWithOneElement [ + ^ self testContainerWithOneElement ] { #category : #tests } BlTransformationAnimationTest >> linearTranslationAnimation [ + ^ self testLinearTranslationAnimation ] { #category : #tests } BlTransformationAnimationTest >> linearTranslationAnimationWithDelayAndLoop [ + ^ self testLinearTranslationAnimationWithDelayAndLoop ] { #category : #tests } BlTransformationAnimationTest >> linearTranslationAnimationWithDurationAndEasing [ + ^ self testLinearTranslationAnimationWithDurationAndEasing ] { #category : #tests } BlTransformationAnimationTest >> testAnimationElement [ - + ^ BlElement new size: 50 @ 50; background: Color veryLightGray; @@ -58,7 +62,7 @@ BlTransformationAnimationTest >> testAnimationElement [ { #category : #tests } BlTransformationAnimationTest >> testContainerElement [ - + ^ BlElement new size: 350 @ 350; geometry: (BlRoundedRectangleGeometry cornerRadius: 5); @@ -67,7 +71,7 @@ BlTransformationAnimationTest >> testContainerElement [ { #category : #tests } BlTransformationAnimationTest >> testContainerWithOneElement [ - + | container element | container := self containerElement. element := self animationElement. @@ -78,7 +82,7 @@ BlTransformationAnimationTest >> testContainerWithOneElement [ { #category : #'smoke tests' } BlTransformationAnimationTest >> testElementWithLinearTranslationAnimation [ - + | container element animation | animation := self linearTranslationAnimation. element := self animationElement. @@ -91,7 +95,7 @@ BlTransformationAnimationTest >> testElementWithLinearTranslationAnimation [ { #category : #tests } BlTransformationAnimationTest >> testElementWithLinearTranslationAnimationWithDelayAndLoop [ - + | container animation | animation := self linearTranslationAnimationWithDelayAndLoop. container := self containerWithOneElement. @@ -101,7 +105,7 @@ BlTransformationAnimationTest >> testElementWithLinearTranslationAnimationWithDe { #category : #tests } BlTransformationAnimationTest >> testElementWithLinearTranslationAnimationWithDurationAndEasing [ - + | container animation | animation := self linearTranslationAnimationWithDurationAndEasing. container := self containerWithOneElement. @@ -111,7 +115,7 @@ BlTransformationAnimationTest >> testElementWithLinearTranslationAnimationWithDu { #category : #tests } BlTransformationAnimationTest >> testLinearTranslationAnimation [ - + | animation | animation := BlTransformAnimation new. animation transform @@ -127,7 +131,7 @@ BlTransformationAnimationTest >> testLinearTranslationAnimation [ { #category : #tests } BlTransformationAnimationTest >> testLinearTranslationAnimationWithDelayAndLoop [ - + | animation | animation := BlTransformAnimation new. animation transform @@ -146,7 +150,7 @@ BlTransformationAnimationTest >> testLinearTranslationAnimationWithDelayAndLoop { #category : #tests } BlTransformationAnimationTest >> testLinearTranslationAnimationWithDurationAndEasing [ - + | animation | animation := BlTransformAnimation new. animation transform From aa8480f5d997529f68fa0a29db4a33ed9de5dc63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phaneDucasse?= Date: Sun, 9 Apr 2023 20:02:04 +0200 Subject: [PATCH 2/3] - Adding comments - doLayout is raising a DNU assert:description: - BlExamplesTest -> BlExampleTest - Migrate document package element to example - Removed one old migrated class --- .../BlDevHalosEventListenerExamples.class.st | 2 +- ...entOnAddedToSceneGraphExplanation.class.st | 26 - .../BlGridLayoutUsageExamples.class.st | 412 ---------------- .../BlAnimationExamples.class.st | 2 +- .../BlAttributeRopeExamples.class.st | 2 +- .../BlCollectionRopeExamples.class.st | 2 +- .../BlConcatenationRopeExamples.class.st | 2 +- ...ConcatenationRopeIteratorExamples.class.st | 2 +- ...BlElementBoundsByScripterExamples.class.st | 2 +- .../BlElementBoundsExamplesMigrated.class.st | 8 - .../BlElementPropertyExample.class.st} | 124 ++--- .../BlErrorHandlingExamples.class.st | 2 +- .../BlEventDispatcherExamples.class.st | 2 +- src/Bloc-Examples/BlEventExamples.class.st | 2 +- .../BlEventProcessorExamples.class.st | 2 +- ...etryVisualAndLayoutBoundsExamples.class.st | 2 +- .../BlGridLayoutUsageExample.class.st | 453 ++++++++++++++++++ ...lHandlerAnnouncerRegistryExamples.class.st | 2 +- .../BlHandlerArrayRegistryExamples.class.st | 2 +- .../BlKeyCombinationExamples.class.st | 2 +- .../BlKeyboardKeyExamples.class.st | 2 +- .../BlMouseEventExamples.class.st | 2 +- ...OverOutAndEnterLeaveEventExample.class.st} | 97 ++-- .../BlMouseWheelEventExamples.class.st | 2 +- .../BlSharedEventDistributorExamples.class.st | 2 +- .../BlSpaceEventExamples.class.st | 2 +- src/Bloc-Examples/BlSubRopeExamples.class.st | 2 +- .../BlTaskAtQueueExamples.class.st | 2 +- src/Bloc-Examples/BlTaskExamples.class.st | 2 +- ...icallyInHorizontalLayoutsExamples.class.st | 2 +- .../BlFlowLayoutCompositionExamples.class.st | 2 +- .../BlGridLayoutExamples.class.st | 2 +- .../BlIgnoredLayoutExamples.class.st | 2 +- ...lWrapAroundChildrenLayoutExamples.class.st | 2 +- .../BlDevElementExamples.class.st | 2 +- .../BlDevScripterExamples.class.st | 2 +- .../BlRopedTextExamples.class.st | 2 +- .../BlSubTextExamples.class.st | 2 +- .../BlTextDecorationStyleExamples.class.st | 2 +- .../BlTextElementExamples.class.st | 2 +- .../BlTextElementMeasurementExamples.class.st | 2 +- ...lementMeasurementStrategyExamples.class.st | 2 +- .../BlTextIteratorExamples.class.st | 2 +- .../BlTextOperatorExamples.class.st | 2 +- .../BlTextParagraphExamples.class.st | 2 +- .../BlTextUnderlineAttributeExamples.class.st | 2 +- .../BlBoundsMatcherTest.class.st | 18 +- .../BlElementBoundsTest.class.st | 2 +- src/Bloc-UnitedTests/BlExampleTest.class.st | 35 ++ src/Bloc-UnitedTests/BlExamplesMock.class.st | 10 +- src/Bloc-UnitedTests/BlExamplesTest.class.st | 31 +- src/Bloc/BlElementProperty.class.st | 35 +- src/Bloc/BlSpace.class.st | 4 +- 53 files changed, 693 insertions(+), 642 deletions(-) delete mode 100644 src/Bloc-Docs/BlElementOnAddedToSceneGraphExplanation.class.st delete mode 100644 src/Bloc-Docs/BlGridLayoutUsageExamples.class.st delete mode 100644 src/Bloc-Examples/BlElementBoundsExamplesMigrated.class.st rename src/{Bloc-Docs/BlElementPropertyExplanation.class.st => Bloc-Examples/BlElementPropertyExample.class.st} (67%) create mode 100644 src/Bloc-Examples/BlGridLayoutUsageExample.class.st rename src/{Bloc-Docs/BlMouseOverOutAndEnterLeaveEventExplanation.class.st => Bloc-Examples/BlMouseOverOutAndEnterLeaveEventExample.class.st} (79%) create mode 100644 src/Bloc-UnitedTests/BlExampleTest.class.st diff --git a/src/Bloc-DevTool/BlDevHalosEventListenerExamples.class.st b/src/Bloc-DevTool/BlDevHalosEventListenerExamples.class.st index 8a27ea817..b2a4eb658 100644 --- a/src/Bloc-DevTool/BlDevHalosEventListenerExamples.class.st +++ b/src/Bloc-DevTool/BlDevHalosEventListenerExamples.class.st @@ -4,7 +4,7 @@ I exemplify {{gtClass:BlDevHalosEventListener}}. " Class { #name : #BlDevHalosEventListenerExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-DevTool-Examples' } diff --git a/src/Bloc-Docs/BlElementOnAddedToSceneGraphExplanation.class.st b/src/Bloc-Docs/BlElementOnAddedToSceneGraphExplanation.class.st deleted file mode 100644 index 6700b7571..000000000 --- a/src/Bloc-Docs/BlElementOnAddedToSceneGraphExplanation.class.st +++ /dev/null @@ -1,26 +0,0 @@ -" -# Understanding {{gtMethod:BlElement>>#onAddedToSceneGraph}} -As we know, {{gtClass:BlElement}} and {{gtClass:BlSpace}} play central roles in `Bloc`. When {{gtClass:BlElement}} is added to a {{gtClass:BlSpace}}, the space is referenced by the element with the help of {{gtClass:BlAttachedCachedSpaceReference}}, which denotes that the space is attached to the element. -## Scene graph -We define a `scene graph` is a combination of a tree of elements and a space which contains those elements. -## Attached element -An element is `attached` to the `scene graph` then and only then when that element or one of its parents is the root of a space. It is possible to test if an arbitrary element is attached to the scene graph by sending {{gtMethod:BlElement>>#isAttachedToSceneGraph}} message to that element. When an element is `attached to the scene graph`, {{gtMethod:BlElement>>#space}} returns a non-null instance of a {{gtClass:BlSpace}} to which that element is added. -## How to be notified when an element is attached to the scene graph? -There are two ways to be notified when an element is attached to the scene graph: an event {{gtClass:BlElementAddedToSceneGraphEvent}} and a hook (template) method {{gtMethod:BlElement>>#onAddedToSceneGraph}}. -Please note, that when overriding {{gtMethod:BlElement>>#onAddedToSceneGraph}} it is mandatory to delegate the hook method to the super class, otherwise the children would not be notified. -## When should I rely on the scene graph attachment hook? -There are very little cases when users should override {{gtMethod:BlElement>>#onAddedToSceneGraph}} or handle a corresponding event. This should only be used if the state or behavior of an element explicitly depends on the fact that it is a part of a `graph scene`. A good example of this would be subscribing to and unsubscribing from the {{gtClass:SystemAnnouncer}}. Another example is cache handling, when an element is attached to the scene graph, that element can potentially pre-load something from an external source and then release that cached resource then an element is removed from the scene graph. In addition to the mentioned examples, some elements may decide to add an event handler to the space when attached to the scene graph and then remove that event handler when an element is removed from the scene graph. -As you can see, the use-cases for the {{gtMethod:BlElement>>#onAddedToSceneGraph}} are parent independent and purely depent on the binary condition: attached or not attached to the scene graph. -## When to not rely on the scene graph attachment hook? -It is a mistake to rely on the `attached to the scene graph event` when the state of an element directly or indirectly depends on the state of its parents. Let's consider a font size and assume that the font size of a child depends on the font size of its parent. This situation may happen when the font size is defined in `em` units. -`1em` means that child should have the same font size as its parent, `0.5` means that the font size of a child is twice as small. -Everytime there is a change in the composition of the parents the font size should be recomputed. It should also be recomputed when the font size of any parent changes. What will happen when an element is transfered from one parent to the other within the same frame? It is very likely that the recomputation of the font size becomes inefficient and slow. A better solution would be to rely on {{gtClass:BlElementProperty}} which can be propagated to children ({{gtMethod:BlElementProperty>>#canPropagateToChildren}}). - -See {{gtClass:BlElementPropertyExplanation}} for more information about properties. - -" -Class { - #name : #BlElementOnAddedToSceneGraphExplanation, - #superclass : #Object, - #category : #'Bloc-Docs-Element' -} diff --git a/src/Bloc-Docs/BlGridLayoutUsageExamples.class.st b/src/Bloc-Docs/BlGridLayoutUsageExamples.class.st deleted file mode 100644 index 98f548b28..000000000 --- a/src/Bloc-Docs/BlGridLayoutUsageExamples.class.st +++ /dev/null @@ -1,412 +0,0 @@ -" -I contain examples of a grid layout - -I show how different resizing strategies work and how to build advanced layouts with the help of a grid - -" -Class { - #name : #BlGridLayoutUsageExamples, - #superclass : #Object, - #category : #'Bloc-Docs-Layout' -} - -{ #category : #examples } -BlGridLayoutUsageExamples >> exampleDistributed2x2Grid [ - - | e1 e2 e3 e4 el | - - e1 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]; - background: Color pink. - - e2 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]; - background: Color green. - - e3 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]; - background: Color red. - - e4 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]; - background: Color yellow. - - el := BlElement new - layout: (BlGridLayout new columnCount: 2); - size: 300@300; - relocate: 200 @ 100; - background: Color blue; - addChildren: { e1. e2. e3. e4 }; - yourself. - ^ el -] - -{ #category : #examples } -BlGridLayoutUsageExamples >> exampleDistributedWithSpan2x2Grid [ - - | e1 e2 e3 el | - - e1 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent. - c grid vertical span: 2 ]; - background: Color yellow. - - e2 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent. - c grid horizontal weight: 2 ]; - background: Color green. - - e3 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent. - c grid vertical weight: 0.5 ]; - background: Color red. - - el := BlElement new - layout: (BlGridLayout new columnCount: 2); - size: 300@300; - relocate: 200 @ 100; - background: Color blue; - addChildren: { e1. e2. e3 }; - yourself. - ^ el -] - -{ #category : #examples } -BlGridLayoutUsageExamples >> exampleDistributedWithWeight2x2Grid [ - - | e1 e2 e3 e4 el | - - e1 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent. - c grid horizontal weight: 2 ]; - background: Color pink. - - e2 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]; - background: Color green. - - e3 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]; - background: Color red. - - e4 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent. - c grid vertical weight: 2 ]; - background: Color yellow. - - el := BlElement new - layout: (BlGridLayout new columnCount: 2); - size: 300@300; - relocate: 200 @ 100; - background: Color blue; - addChildren: { e1. e2. e3. e4 }; - yourself. - ^ el -] - -{ #category : #examples } -BlGridLayoutUsageExamples >> exampleHorizontal2x1Grid [ - - | e1 e2 el | - - e1 := BlElement new - size: 150 asPoint; - background: Color red. - - e2 := BlElement new - size: 150 asPoint; - background: Color yellow. - - el := BlElement new - layout: BlGridLayout horizontal; - size: 400@400; - relocate: 200 @ 100; - background: Color blue; - addChildren: { e1. e2 }; - yourself. - ^ el -] - -{ #category : #examples } -BlGridLayoutUsageExamples >> exampleHorizontalSpacing2x1Grid [ - - | e1 e2 el | - - e1 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]; - background: Color red. - - e2 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]; - background: Color yellow. - - el := BlElement new - layout: (BlGridLayout horizontal cellSpacing: 20); - size: 400@200; - relocate: 200 @ 100; - background: Color blue; - addChildren: { e1. e2 }; - yourself. - ^ el -] - -{ #category : #examples } -BlGridLayoutUsageExamples >> exampleInCellAlignment2x2Grid [ - - | e1 e2 e3 el | - - e1 := BlElement new - constraintsDo: [ :c | - c horizontal exact: 100. - c vertical matchParent. - c grid vertical span: 2 ]; - background: Color yellow. - - e2 := BlElement new - constraintsDo: [ :c | - c horizontal exact: 100. - c vertical exact: 50. - c grid horizontal alignCenter ]; - background: Color green. - - e3 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical exact: 100. - c grid vertical alignBottom. - c grid horizontal weight: 2 ]; - background: Color red. - - el := BlElement new - layout: (BlGridLayout new columnCount: 2); - size: 300@300; - relocate: 200 @ 100; - background: Color blue; - addChildren: { e1. e2. e3 }; - yourself. - ^ el -] - -{ #category : #examples } -BlGridLayoutUsageExamples >> exampleNautilusGrid [ - - | e1 e2 e3 e4 e5 el | - - e1 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]; - background: Color white. - - e2 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]; - background: Color white. - - e3 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]; - background: Color white. - - e4 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]; - background: Color white. - - e5 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent. - c grid horizontal span: 4 ]; - background: Color white. - - el := BlElement new - layout: (BlGridLayout new columnCount: 4; cellSpacing: 10); - size: 300@300; - background: Color veryLightGray; - addChildren: { e1. e2. e3. e4. e5 }; - yourself. - ^ el -] - -{ #category : #examples } -BlGridLayoutUsageExamples >> exampleSimple2x2Grid [ - - | e1 e2 e3 e4 el | - - e1 := BlElement new - size: 150 asPoint; - background: Color pink. - - e2 := BlElement new - size: 150 asPoint; - background: Color green. - - e3 := BlElement new - size: 150 asPoint; - background: Color red. - - e4 := BlElement new - size: 150 asPoint; - background: Color yellow. - - el := BlElement new - layout: (BlGridLayout new columnCount: 2); - size: 400@400; - relocate: 200 @ 100; - background: Color blue; - addChildren: { e1. e2. e3. e4 }; - yourself. - ^ el -] - -{ #category : #examples } -BlGridLayoutUsageExamples >> exampleSpacing9x9Grid [ - - | children el dim | - - dim := 9. - - children := (1 to: (dim raisedTo: 2)) collect: [ :i | - BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent. - c grid ]; - background: Color random muchLighter; - yourself ]. - - el := BlElement new - layout: (BlGridLayout new columnCount: dim; rowCount: dim; yourself); - constraintsDo: [ :c | - c horizontal exact: 400. - c vertical exact: 400 ]; - relocate: 0 @ 0; - background: Color blue; - addChildren: children; - yourself. - ^ el -] - -{ #category : #examples } -BlGridLayoutUsageExamples >> exampleVertical1x2Grid [ - - | e1 e2 el | - - e1 := BlElement new - size: 150 asPoint; - background: Color red. - - e2 := BlElement new - size: 150 asPoint; - background: Color yellow. - - el := BlElement new - layout: BlGridLayout vertical; - size: 400@400; - relocate: 200 @ 100; - background: Color blue; - addChildren: { e1. e2 }; - yourself. - ^ el -] - -{ #category : #examples } -BlGridLayoutUsageExamples >> exampleVerticalSpacing1x2Grid [ - - | e1 e2 el | - - e1 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]; - background: Color red. - - e2 := BlElement new - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]; - background: Color yellow. - - el := BlElement new - layout: (BlGridLayout vertical cellSpacing: 20); - size: 200@400; - relocate: 200 @ 100; - background: Color blue; - addChildren: { e1. e2 }; - yourself. - ^ el -] - -{ #category : #examples } -BlGridLayoutUsageExamples >> verticalSpan [ - - | grid child1 child2 child3 | - - grid := BlElement new. - grid size: 500@400. - grid layout: (BlGridLayout horizontal cellSpacing: 10; columnCount: 2). - - child1 := BlElement new. - child1 background: (Color red alpha: 0.5). - child1 constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]. - - child2 := BlElement new. - child2 background: (Color blue alpha: 0.5). - child2 constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent. - c grid vertical span: 2 ]. - - child3 := BlElement new. - child3 background: (Color green alpha: 0.5). - child3 constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]. - - grid addChildren: { child1. child2. child3 }. - - grid forceLayout. - self assert: grid extent equals: 500@400. - self assert: child1 position equals: 10@10. - self assert: child1 extent equals: 235@185. - - self assert: child2 position equals: 255@10. - self assert: child2 extent equals: 235@380. - - self assert: child3 position equals: 10@205. - self assert: child3 extent equals: 235@185. - - ^ grid -] diff --git a/src/Bloc-Examples/BlAnimationExamples.class.st b/src/Bloc-Examples/BlAnimationExamples.class.st index f62d96a94..20f7aefaa 100644 --- a/src/Bloc-Examples/BlAnimationExamples.class.st +++ b/src/Bloc-Examples/BlAnimationExamples.class.st @@ -6,7 +6,7 @@ DOES NOT WORK " Class { #name : #BlAnimationExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #traits : 'TBlExample', #classTraits : 'TBlExample classTrait', #category : #'Bloc-Examples-Animation' diff --git a/src/Bloc-Examples/BlAttributeRopeExamples.class.st b/src/Bloc-Examples/BlAttributeRopeExamples.class.st index 189ec9d3f..99f02f97a 100644 --- a/src/Bloc-Examples/BlAttributeRopeExamples.class.st +++ b/src/Bloc-Examples/BlAttributeRopeExamples.class.st @@ -4,7 +4,7 @@ I contain examples of an attribute rope " Class { #name : #BlAttributeRopeExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-Rope' } diff --git a/src/Bloc-Examples/BlCollectionRopeExamples.class.st b/src/Bloc-Examples/BlCollectionRopeExamples.class.st index ef74dc715..60dd8c3ff 100644 --- a/src/Bloc-Examples/BlCollectionRopeExamples.class.st +++ b/src/Bloc-Examples/BlCollectionRopeExamples.class.st @@ -4,7 +4,7 @@ I contain examples of a collection rope " Class { #name : #BlCollectionRopeExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-Rope' } diff --git a/src/Bloc-Examples/BlConcatenationRopeExamples.class.st b/src/Bloc-Examples/BlConcatenationRopeExamples.class.st index 21e22b349..bad3981ed 100644 --- a/src/Bloc-Examples/BlConcatenationRopeExamples.class.st +++ b/src/Bloc-Examples/BlConcatenationRopeExamples.class.st @@ -4,7 +4,7 @@ I contain examples of a concatenation rope " Class { #name : #BlConcatenationRopeExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-Rope' } diff --git a/src/Bloc-Examples/BlConcatenationRopeIteratorExamples.class.st b/src/Bloc-Examples/BlConcatenationRopeIteratorExamples.class.st index b162e7039..762dca64e 100644 --- a/src/Bloc-Examples/BlConcatenationRopeIteratorExamples.class.st +++ b/src/Bloc-Examples/BlConcatenationRopeIteratorExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlConcatenationRopeIteratorExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-Rope' } diff --git a/src/Bloc-Examples/BlElementBoundsByScripterExamples.class.st b/src/Bloc-Examples/BlElementBoundsByScripterExamples.class.st index 777db5dc6..095fbb584 100644 --- a/src/Bloc-Examples/BlElementBoundsByScripterExamples.class.st +++ b/src/Bloc-Examples/BlElementBoundsByScripterExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlElementBoundsByScripterExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-Basic' } diff --git a/src/Bloc-Examples/BlElementBoundsExamplesMigrated.class.st b/src/Bloc-Examples/BlElementBoundsExamplesMigrated.class.st deleted file mode 100644 index 9ea6010a6..000000000 --- a/src/Bloc-Examples/BlElementBoundsExamplesMigrated.class.st +++ /dev/null @@ -1,8 +0,0 @@ -" -I contain examples of element bounds api -" -Class { - #name : #BlElementBoundsExamplesMigrated, - #superclass : #Object, - #category : #'Bloc-Examples-BasicMigrated' -} diff --git a/src/Bloc-Docs/BlElementPropertyExplanation.class.st b/src/Bloc-Examples/BlElementPropertyExample.class.st similarity index 67% rename from src/Bloc-Docs/BlElementPropertyExplanation.class.st rename to src/Bloc-Examples/BlElementPropertyExample.class.st index d5f7d4aee..f6ce1b8af 100644 --- a/src/Bloc-Docs/BlElementPropertyExplanation.class.st +++ b/src/Bloc-Examples/BlElementPropertyExample.class.st @@ -26,105 +26,107 @@ Click on the buttons to the left from the rectangular element to see what happen " Class { - #name : #BlElementPropertyExplanation, - #superclass : #Object, - #category : #'Bloc-Docs-Element' + #name : #BlElementPropertyExample, + #superclass : #BlExampleTest, + #category : #'Bloc-Examples-Documentation' } { #category : #properties } -BlElementPropertyExplanation >> backgroundProperty [ - +BlElementPropertyExample >> backgroundProperty [ + ^ BlElementBackgroundProperty new background: (Color gray alpha: 0.2) ] { #category : #properties } -BlElementPropertyExplanation >> borderProperty [ - +BlElementPropertyExample >> borderProperty [ - ^ BlElementBorderProperty new border: (BlBorder paint: Color veryLightGray width: 2) + + ^ BlElementBorderProperty new border: + (BlBorder paint: Color veryLightGray width: 2) ] { #category : #examples } -BlElementPropertyExplanation >> elementWithMultipleProperties [ - +BlElementPropertyExample >> elementWithMultipleProperties [ + + | anElement | - anElement := BlElement new. - anElement properties - addProperties: { + anElement properties addProperties: { self widthProperty. self heightProperty. self geometryProperty. self backgroundProperty. - self borderProperty - }. + self borderProperty }. ^ anElement ] { #category : #properties } -BlElementPropertyExplanation >> geometryProperty [ - +BlElementPropertyExample >> geometryProperty [ - ^ BlElementGeometryProperty new geometry: (BlRoundedRectangleGeometry cornerRadius: 4) + + ^ BlElementGeometryProperty new geometry: + (BlRoundedRectangleGeometry cornerRadius: 4) ] { #category : #properties } -BlElementPropertyExplanation >> heightProperty [ - +BlElementPropertyExample >> heightProperty [ + ^ BlElementLayoutVerticalResizerProperty new exact: 100 ] { #category : #examples } -BlElementPropertyExplanation >> propertyCleanUp [ - +BlElementPropertyExample >> propertyCleanUp [ + + | backgroundProperty | - backgroundProperty := self backgroundProperty. - + ^ BlElement new - layout: (BlLinearLayout horizontal cellSpacing: 10); - constraintsDo: [ :c | - c horizontal fitContent. - c vertical matchParent ]; - addChildren: { - BlElement new - layout: (BlLinearLayout vertical cellSpacing: 10); - constraintsDo: [ :c | - c horizontal fitContent. - c vertical matchParent ]; - addChildren: { - BlTextElement new - text: 'Add background property' asRopedText; - border: (BlBorder paint: Color veryLightGray width: 1); - padding: (BlInsets all: 5); - labelMeasurement; - geometry: (BlRoundedRectangleGeometry cornerRadius: 4); - when: BlClickEvent do: [ :anEvent | (anEvent currentTarget parent parent childWithId: #targetElement) properties - addProperty: backgroundProperty ]. - - BlTextElement new - text: 'Remove background property' asRopedText; - border: (BlBorder paint: Color veryLightGray width: 1); - padding: (BlInsets all: 5); - labelMeasurement; - geometry: (BlRoundedRectangleGeometry cornerRadius: 4); - when: BlClickEvent do: [ :anEvent | (anEvent currentTarget parent parent childWithId: #targetElement) properties - removeProperty: backgroundProperty ] - - }. - - BlElement new - id: #targetElement; - size: 200@100; - border: (BlBorder paint: Color veryLightGray width: 2) } + layout: (BlLinearLayout horizontal cellSpacing: 10); + constraintsDo: [ :c | + c horizontal fitContent. + c vertical matchParent ]; + addChildren: { + (BlElement new + layout: (BlLinearLayout vertical cellSpacing: 10); + constraintsDo: [ :c | + c horizontal fitContent. + c vertical matchParent ]; + addChildren: { + (BlTextElement new + text: 'Add background property' asRopedText; + border: (BlBorder paint: Color veryLightGray width: 1); + padding: (BlInsets all: 5); + labelMeasurement; + geometry: (BlRoundedRectangleGeometry cornerRadius: 4); + when: BlClickEvent do: [ :anEvent | + (anEvent currentTarget parent parent childWithId: + #targetElement) properties addProperty: + backgroundProperty ]). + + (BlTextElement new + text: 'Remove background property' asRopedText; + border: (BlBorder paint: Color veryLightGray width: 1); + padding: (BlInsets all: 5); + labelMeasurement; + geometry: (BlRoundedRectangleGeometry cornerRadius: 4); + when: BlClickEvent do: [ :anEvent | + (anEvent currentTarget parent parent childWithId: + #targetElement) properties removeProperty: + backgroundProperty ]) }). + + (BlElement new + id: #targetElement; + size: 200 @ 100; + border: (BlBorder paint: Color veryLightGray width: 2)) } ] { #category : #properties } -BlElementPropertyExplanation >> widthProperty [ - +BlElementPropertyExample >> widthProperty [ + ^ BlElementLayoutHorizontalResizerProperty new exact: 200 ] diff --git a/src/Bloc-Examples/BlErrorHandlingExamples.class.st b/src/Bloc-Examples/BlErrorHandlingExamples.class.st index 2e5f92265..145a7ae0e 100644 --- a/src/Bloc-Examples/BlErrorHandlingExamples.class.st +++ b/src/Bloc-Examples/BlErrorHandlingExamples.class.st @@ -3,7 +3,7 @@ I exemplify how Bloc handles errors in different parts of the BlElement such as " Class { #name : #BlErrorHandlingExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-Errors' } diff --git a/src/Bloc-Examples/BlEventDispatcherExamples.class.st b/src/Bloc-Examples/BlEventDispatcherExamples.class.st index c0853f4ed..67344b9ab 100644 --- a/src/Bloc-Examples/BlEventDispatcherExamples.class.st +++ b/src/Bloc-Examples/BlEventDispatcherExamples.class.st @@ -4,7 +4,7 @@ I am a collection of event dispatcher examples " Class { #name : #BlEventDispatcherExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-EventHandling' } diff --git a/src/Bloc-Examples/BlEventExamples.class.st b/src/Bloc-Examples/BlEventExamples.class.st index 7b72007ef..235a8b1d4 100644 --- a/src/Bloc-Examples/BlEventExamples.class.st +++ b/src/Bloc-Examples/BlEventExamples.class.st @@ -4,7 +4,7 @@ I contain examples various aspects of event dispatching and handling mechanism s " Class { #name : #BlEventExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-Event' } diff --git a/src/Bloc-Examples/BlEventProcessorExamples.class.st b/src/Bloc-Examples/BlEventProcessorExamples.class.st index ab33d3a2d..0ebf837a7 100644 --- a/src/Bloc-Examples/BlEventProcessorExamples.class.st +++ b/src/Bloc-Examples/BlEventProcessorExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlEventProcessorExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-Event' } diff --git a/src/Bloc-Examples/BlGeometryVisualAndLayoutBoundsExamples.class.st b/src/Bloc-Examples/BlGeometryVisualAndLayoutBoundsExamples.class.st index 06150d0ac..a5f1621f4 100644 --- a/src/Bloc-Examples/BlGeometryVisualAndLayoutBoundsExamples.class.st +++ b/src/Bloc-Examples/BlGeometryVisualAndLayoutBoundsExamples.class.st @@ -65,7 +65,7 @@ The debugging mode is also possible to activate in the GT-Inspector's menu, next " Class { #name : #BlGeometryVisualAndLayoutBoundsExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #traits : 'TBlExample', #classTraits : 'TBlExample classTrait', #category : #'Bloc-Examples-Basic' diff --git a/src/Bloc-Examples/BlGridLayoutUsageExample.class.st b/src/Bloc-Examples/BlGridLayoutUsageExample.class.st new file mode 100644 index 000000000..2461b4a5f --- /dev/null +++ b/src/Bloc-Examples/BlGridLayoutUsageExample.class.st @@ -0,0 +1,453 @@ +" +I contain examples of a grid layout + +I show how different resizing strategies work and how to build advanced layouts with the help of a grid + +" +Class { + #name : #BlGridLayoutUsageExample, + #superclass : #BlExampleTest, + #category : #'Bloc-Examples-Documentation' +} + +{ #category : #examples } +BlGridLayoutUsageExample >> exampleDistributed2x2Grid [ + + + | e1 e2 e3 e4 el | + e1 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]; + background: Color pink. + + e2 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]; + background: Color green. + + e3 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]; + background: Color red. + + e4 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]; + background: Color yellow. + + el := BlElement new + layout: (BlGridLayout new columnCount: 2); + size: 300 @ 300; + position: 200 @ 100; + background: Color blue; + addChildren: { + e1. + e2. + e3. + e4 }; + yourself. + ^ el +] + +{ #category : #examples } +BlGridLayoutUsageExample >> exampleDistributedWithSpan2x2Grid [ + + + | e1 e2 e3 el | + e1 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent. + c grid vertical span: 2 ]; + background: Color yellow. + + e2 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent. + c grid horizontal weight: 2 ]; + background: Color green. + + e3 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent. + c grid vertical weight: 0.5 ]; + background: Color red. + + el := BlElement new + layout: (BlGridLayout new columnCount: 2); + size: 300 @ 300; + position: 200 @ 100; + background: Color blue; + addChildren: { + e1. + e2. + e3 }; + yourself. + ^ el +] + +{ #category : #examples } +BlGridLayoutUsageExample >> exampleDistributedWithWeight2x2Grid [ + + + | e1 e2 e3 e4 el | + e1 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent. + c grid horizontal weight: 2 ]; + background: Color pink. + + e2 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]; + background: Color green. + + e3 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]; + background: Color red. + + e4 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent. + c grid vertical weight: 2 ]; + background: Color yellow. + + el := BlElement new + layout: (BlGridLayout new columnCount: 2); + size: 300 @ 300; + position: 200 @ 100; + background: Color blue; + addChildren: { + e1. + e2. + e3. + e4 }; + yourself. + ^ el +] + +{ #category : #examples } +BlGridLayoutUsageExample >> exampleHorizontal2x1Grid [ + + + | e1 e2 el | + e1 := BlElement new + size: 150 asPoint; + background: Color red. + + e2 := BlElement new + size: 150 asPoint; + background: Color yellow. + + el := BlElement new + layout: BlGridLayout horizontal; + size: 400 @ 400; + position: 200 @ 100; + background: Color blue; + addChildren: { + e1. + e2 }; + yourself. + ^ el +] + +{ #category : #examples } +BlGridLayoutUsageExample >> exampleHorizontalSpacing2x1Grid [ + + + | e1 e2 el | + e1 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]; + background: Color red. + + e2 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]; + background: Color yellow. + + el := BlElement new + layout: (BlGridLayout horizontal cellSpacing: 20); + size: 400 @ 200; + position: 200 @ 100; + background: Color blue; + addChildren: { + e1. + e2 }; + yourself. + ^ el +] + +{ #category : #examples } +BlGridLayoutUsageExample >> exampleInCellAlignment2x2Grid [ + + + | e1 e2 e3 el | + e1 := BlElement new + constraintsDo: [ :c | + c horizontal exact: 100. + c vertical matchParent. + c grid vertical span: 2 ]; + background: Color yellow. + + e2 := BlElement new + constraintsDo: [ :c | + c horizontal exact: 100. + c vertical exact: 50. + c grid horizontal alignCenter ]; + background: Color green. + + e3 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical exact: 100. + c grid vertical alignBottom. + c grid horizontal weight: 2 ]; + background: Color red. + + el := BlElement new + layout: (BlGridLayout new columnCount: 2); + size: 300 @ 300; + position: 200 @ 100; + background: Color blue; + addChildren: { + e1. + e2. + e3 }; + yourself. + ^ el +] + +{ #category : #examples } +BlGridLayoutUsageExample >> exampleNautilusGrid [ + + + | e1 e2 e3 e4 e5 el | + e1 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]; + background: Color white. + + e2 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]; + background: Color white. + + e3 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]; + background: Color white. + + e4 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]; + background: Color white. + + e5 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent. + c grid horizontal span: 4 ]; + background: Color white. + + el := BlElement new + layout: (BlGridLayout new + columnCount: 4; + cellSpacing: 10); + size: 300 @ 300; + background: Color veryLightGray; + addChildren: { + e1. + e2. + e3. + e4. + e5 }; + yourself. + ^ el +] + +{ #category : #examples } +BlGridLayoutUsageExample >> exampleSimple2x2Grid [ + + + | e1 e2 e3 e4 el | + e1 := BlElement new + size: 150 asPoint; + background: Color pink. + + e2 := BlElement new + size: 150 asPoint; + background: Color green. + + e3 := BlElement new + size: 150 asPoint; + background: Color red. + + e4 := BlElement new + size: 150 asPoint; + background: Color yellow. + + el := BlElement new + layout: (BlGridLayout new columnCount: 2); + size: 400 @ 400; + position: 200 @ 100; + background: Color blue; + addChildren: { + e1. + e2. + e3. + e4 }; + yourself. + ^ el +] + +{ #category : #examples } +BlGridLayoutUsageExample >> exampleSpacing9x9Grid [ + + + | children el dim | + dim := 9. + + children := (1 to: (dim raisedTo: 2)) collect: [ :i | + BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent. + c grid ]; + background: Color random muchLighter; + yourself ]. + + el := BlElement new + layout: (BlGridLayout new + columnCount: dim; + rowCount: dim; + yourself); + constraintsDo: [ :c | + c horizontal exact: 400. + c vertical exact: 400 ]; + position: 0 @ 0; + background: Color blue; + addChildren: children; + yourself. + ^ el +] + +{ #category : #examples } +BlGridLayoutUsageExample >> exampleVertical1x2Grid [ + + + | e1 e2 el | + e1 := BlElement new + size: 150 asPoint; + background: Color red. + + e2 := BlElement new + size: 150 asPoint; + background: Color yellow. + + el := BlElement new + layout: BlGridLayout vertical; + size: 400 @ 400; + position: 200 @ 100; + background: Color blue; + addChildren: { + e1. + e2 }; + yourself. + ^ el +] + +{ #category : #examples } +BlGridLayoutUsageExample >> exampleVerticalSpacing1x2Grid [ + + + | e1 e2 el | + e1 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]; + background: Color red. + + e2 := BlElement new + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]; + background: Color yellow. + + el := BlElement new + layout: (BlGridLayout vertical cellSpacing: 20); + size: 200 @ 400; + position: 200 @ 100; + background: Color blue; + addChildren: { + e1. + e2 }; + yourself. + ^ el +] + +{ #category : #examples } +BlGridLayoutUsageExample >> verticalSpan [ + + + | grid child1 child2 child3 | + grid := BlElement new. + grid size: 500 @ 400. + grid layout: (BlGridLayout horizontal + cellSpacing: 10; + columnCount: 2). + + child1 := BlElement new. + child1 background: (Color red alpha: 0.5). + child1 constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]. + + child2 := BlElement new. + child2 background: (Color blue alpha: 0.5). + child2 constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent. + c grid vertical span: 2 ]. + + child3 := BlElement new. + child3 background: (Color green alpha: 0.5). + child3 constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]. + + grid addChildren: { + child1. + child2. + child3 }. + + grid forceLayout. + self assert: grid extent equals: 500 @ 400. + self assert: child1 position equals: 10 @ 10. + self assert: child1 extent equals: 235 @ 185. + + self assert: child2 position equals: 255 @ 10. + self assert: child2 extent equals: 235 @ 380. + + self assert: child3 position equals: 10 @ 205. + self assert: child3 extent equals: 235 @ 185. + + ^ grid +] diff --git a/src/Bloc-Examples/BlHandlerAnnouncerRegistryExamples.class.st b/src/Bloc-Examples/BlHandlerAnnouncerRegistryExamples.class.st index 24eacad92..a7372817f 100644 --- a/src/Bloc-Examples/BlHandlerAnnouncerRegistryExamples.class.st +++ b/src/Bloc-Examples/BlHandlerAnnouncerRegistryExamples.class.st @@ -4,7 +4,7 @@ I contain examples of event handler registry with Announcer as its backend " Class { #name : #BlHandlerAnnouncerRegistryExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #traits : 'TBlHandlerRegistryExamples', #classTraits : 'TBlHandlerRegistryExamples classTrait', #category : #'Bloc-Examples-EventHandling' diff --git a/src/Bloc-Examples/BlHandlerArrayRegistryExamples.class.st b/src/Bloc-Examples/BlHandlerArrayRegistryExamples.class.st index db243933b..0e6da3265 100644 --- a/src/Bloc-Examples/BlHandlerArrayRegistryExamples.class.st +++ b/src/Bloc-Examples/BlHandlerArrayRegistryExamples.class.st @@ -4,7 +4,7 @@ I contain examples of event handler registry with Array as its backend " Class { #name : #BlHandlerArrayRegistryExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #traits : 'TBlHandlerRegistryExamples', #classTraits : 'TBlHandlerRegistryExamples classTrait', #category : #'Bloc-Examples-EventHandling' diff --git a/src/Bloc-Examples/BlKeyCombinationExamples.class.st b/src/Bloc-Examples/BlKeyCombinationExamples.class.st index 30897b0e7..3993139c6 100644 --- a/src/Bloc-Examples/BlKeyCombinationExamples.class.st +++ b/src/Bloc-Examples/BlKeyCombinationExamples.class.st @@ -4,7 +4,7 @@ I contain examples of how to use key combination " Class { #name : #BlKeyCombinationExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-KeyBinding' } diff --git a/src/Bloc-Examples/BlKeyboardKeyExamples.class.st b/src/Bloc-Examples/BlKeyboardKeyExamples.class.st index 6524a4e23..8ad218b4c 100644 --- a/src/Bloc-Examples/BlKeyboardKeyExamples.class.st +++ b/src/Bloc-Examples/BlKeyboardKeyExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlKeyboardKeyExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-KeyBinding' } diff --git a/src/Bloc-Examples/BlMouseEventExamples.class.st b/src/Bloc-Examples/BlMouseEventExamples.class.st index c797767de..cdf195d74 100644 --- a/src/Bloc-Examples/BlMouseEventExamples.class.st +++ b/src/Bloc-Examples/BlMouseEventExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlMouseEventExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-Event' } diff --git a/src/Bloc-Docs/BlMouseOverOutAndEnterLeaveEventExplanation.class.st b/src/Bloc-Examples/BlMouseOverOutAndEnterLeaveEventExample.class.st similarity index 79% rename from src/Bloc-Docs/BlMouseOverOutAndEnterLeaveEventExplanation.class.st rename to src/Bloc-Examples/BlMouseOverOutAndEnterLeaveEventExample.class.st index d93090e1f..c381b4281 100644 --- a/src/Bloc-Docs/BlMouseOverOutAndEnterLeaveEventExplanation.class.st +++ b/src/Bloc-Examples/BlMouseOverOutAndEnterLeaveEventExample.class.st @@ -28,14 +28,14 @@ In the example below, notice how parent container receives mouse out event when " Class { - #name : #BlMouseOverOutAndEnterLeaveEventExplanation, - #superclass : #Object, - #category : #'Bloc-Docs-Events' + #name : #BlMouseOverOutAndEnterLeaveEventExample, + #superclass : #BlExampleTest, + #category : #'Bloc-Examples-Documentation' } -{ #category : #'examples - events' } -BlMouseOverOutAndEnterLeaveEventExplanation >> basicMouseEnterAndLeave [ - +{ #category : #'test - events' } +BlMouseOverOutAndEnterLeaveEventExample >> basicMouseEnterAndLeave [ + | aContainer | aContainer := self elementWithoutChildren. @@ -51,9 +51,9 @@ BlMouseOverOutAndEnterLeaveEventExplanation >> basicMouseEnterAndLeave [ ^ aContainer ] -{ #category : #'examples - events' } -BlMouseOverOutAndEnterLeaveEventExplanation >> basicMouseOverAndOut [ - +{ #category : #'test - events' } +BlMouseOverOutAndEnterLeaveEventExample >> basicMouseOverAndOut [ + | aContainer | aContainer := self elementWithoutChildren. @@ -70,23 +70,23 @@ BlMouseOverOutAndEnterLeaveEventExplanation >> basicMouseOverAndOut [ ] { #category : #'examples - element' } -BlMouseOverOutAndEnterLeaveEventExplanation >> elementWithChildren [ - +BlMouseOverOutAndEnterLeaveEventExample >> elementWithChildren [ + + | aContainer aChildA aChildB | - aContainer := self elementWithoutChildren. - + aChildA := BlElement new - background: Color white; - effect: self shadow; - relocate: 30@50; - size: 100@100. - + background: Color white; + effect: self shadow; + position: 30 @ 50; + size: 100 @ 100. + aChildB := BlElement new - background: Color white; - effect: self shadow; - relocate: 170@50; - size: 100@100. + background: Color white; + effect: self shadow; + position: 170 @ 50; + size: 100 @ 100. aContainer addChild: aChildA as: #left. aContainer addChild: aChildB as: #right. @@ -95,29 +95,29 @@ BlMouseOverOutAndEnterLeaveEventExplanation >> elementWithChildren [ ] { #category : #'examples - element' } -BlMouseOverOutAndEnterLeaveEventExplanation >> elementWithoutChildren [ - +BlMouseOverOutAndEnterLeaveEventExample >> elementWithoutChildren [ + + | aContainer | - aContainer := BlElement new - background: Color white; - effect: self shadow; - relocate: 50@50; - size: 300@200. + background: Color white; + effect: self shadow; + position: 50 @ 50; + size: 300 @ 200. ^ aContainer ] { #category : #private } -BlMouseOverOutAndEnterLeaveEventExplanation >> markElement: anElement [ +BlMouseOverOutAndEnterLeaveEventExample >> markElement: anElement [ anElement background: Color veryVeryLightGray; border: (BlBorder paint: Color red width: 2) ] -{ #category : #'examples - events' } -BlMouseOverOutAndEnterLeaveEventExplanation >> mouseEnterAndLeaveConsumed [ - +{ #category : #'test - events' } +BlMouseOverOutAndEnterLeaveEventExample >> mouseEnterAndLeaveConsumed [ + | anElement aMouseEnterHandler aMouseLeaveHandler | aMouseEnterHandler := BlEventHandler @@ -143,9 +143,9 @@ BlMouseOverOutAndEnterLeaveEventExplanation >> mouseEnterAndLeaveConsumed [ ^ anElement ] -{ #category : #'examples - events' } -BlMouseOverOutAndEnterLeaveEventExplanation >> mouseEnterAndLeaveNotConsumed [ - +{ #category : #'test - events' } +BlMouseOverOutAndEnterLeaveEventExample >> mouseEnterAndLeaveNotConsumed [ + | anElement aMouseEnterHandler aMouseLeaveHandler | aMouseEnterHandler := BlEventHandler @@ -165,9 +165,9 @@ BlMouseOverOutAndEnterLeaveEventExplanation >> mouseEnterAndLeaveNotConsumed [ ^ anElement ] -{ #category : #'examples - events' } -BlMouseOverOutAndEnterLeaveEventExplanation >> mouseOverAndOutConsumed [ - +{ #category : #'test - events' } +BlMouseOverOutAndEnterLeaveEventExample >> mouseOverAndOutConsumed [ + | anElement aMouseOverHandler aMouseOutHandler | aMouseOverHandler := BlEventHandler @@ -193,9 +193,9 @@ BlMouseOverOutAndEnterLeaveEventExplanation >> mouseOverAndOutConsumed [ ^ anElement ] -{ #category : #'examples - events' } -BlMouseOverOutAndEnterLeaveEventExplanation >> mouseOverAndOutNotConsumed [ - +{ #category : #'test - events' } +BlMouseOverOutAndEnterLeaveEventExample >> mouseOverAndOutNotConsumed [ + | anElement aMouseOverHandler aMouseOutHandler | aMouseOverHandler := BlEventHandler @@ -219,9 +219,9 @@ BlMouseOverOutAndEnterLeaveEventExplanation >> mouseOverAndOutNotConsumed [ ^ anElement ] -{ #category : #'examples - events' } -BlMouseOverOutAndEnterLeaveEventExplanation >> quickComparison [ - +{ #category : #'test - events' } +BlMouseOverOutAndEnterLeaveEventExample >> quickComparison [ + | aContainer | aContainer := BlElement new @@ -244,16 +244,17 @@ BlMouseOverOutAndEnterLeaveEventExplanation >> quickComparison [ self mouseEnterAndLeaveConsumed margin: (BlInsets left: 20 right: 20). self mouseOverAndOutConsumed margin: (BlInsets left: 20 right: 20) }. - ^ aContainer asScalableElement + ^ aContainer ] { #category : #private } -BlMouseOverOutAndEnterLeaveEventExplanation >> shadow [ +BlMouseOverOutAndEnterLeaveEventExample >> shadow [ + ^ BlGaussianShadowEffect color: (Color black alpha: 0.5) width: 7 offset: 2@2 ] { #category : #private } -BlMouseOverOutAndEnterLeaveEventExplanation >> unmarkElement: anElement [ +BlMouseOverOutAndEnterLeaveEventExample >> unmarkElement: anElement [ anElement background: Color white; border: BlBorder empty diff --git a/src/Bloc-Examples/BlMouseWheelEventExamples.class.st b/src/Bloc-Examples/BlMouseWheelEventExamples.class.st index 42c3ea2cc..9afc446d6 100644 --- a/src/Bloc-Examples/BlMouseWheelEventExamples.class.st +++ b/src/Bloc-Examples/BlMouseWheelEventExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlMouseWheelEventExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-Event' } diff --git a/src/Bloc-Examples/BlSharedEventDistributorExamples.class.st b/src/Bloc-Examples/BlSharedEventDistributorExamples.class.st index 90c159d82..c176e1527 100644 --- a/src/Bloc-Examples/BlSharedEventDistributorExamples.class.st +++ b/src/Bloc-Examples/BlSharedEventDistributorExamples.class.st @@ -4,7 +4,7 @@ I exemplify {{gtClass:BlSharedEventDistributor}}. " Class { #name : #BlSharedEventDistributorExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-EventHandling' } diff --git a/src/Bloc-Examples/BlSpaceEventExamples.class.st b/src/Bloc-Examples/BlSpaceEventExamples.class.st index 2f58c85e4..f5c81d92b 100644 --- a/src/Bloc-Examples/BlSpaceEventExamples.class.st +++ b/src/Bloc-Examples/BlSpaceEventExamples.class.st @@ -4,7 +4,7 @@ I contain examples of space related events " Class { #name : #BlSpaceEventExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-Event' } diff --git a/src/Bloc-Examples/BlSubRopeExamples.class.st b/src/Bloc-Examples/BlSubRopeExamples.class.st index 12f7cbf9b..d34d981b1 100644 --- a/src/Bloc-Examples/BlSubRopeExamples.class.st +++ b/src/Bloc-Examples/BlSubRopeExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlSubRopeExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-Rope' } diff --git a/src/Bloc-Examples/BlTaskAtQueueExamples.class.st b/src/Bloc-Examples/BlTaskAtQueueExamples.class.st index de12b12d2..7dd5c49d7 100644 --- a/src/Bloc-Examples/BlTaskAtQueueExamples.class.st +++ b/src/Bloc-Examples/BlTaskAtQueueExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlTaskAtQueueExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #traits : 'TAssertable', #classTraits : 'TAssertable classTrait', #category : #'Bloc-Examples-Tasks' diff --git a/src/Bloc-Examples/BlTaskExamples.class.st b/src/Bloc-Examples/BlTaskExamples.class.st index 744e1e29e..4f5198a02 100644 --- a/src/Bloc-Examples/BlTaskExamples.class.st +++ b/src/Bloc-Examples/BlTaskExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlTaskExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Examples-Tasks' } diff --git a/src/Bloc-Layout-Examples/BlFitContentVerticallyInHorizontalLayoutsExamples.class.st b/src/Bloc-Layout-Examples/BlFitContentVerticallyInHorizontalLayoutsExamples.class.st index 06902d3f9..4cf1656f6 100644 --- a/src/Bloc-Layout-Examples/BlFitContentVerticallyInHorizontalLayoutsExamples.class.st +++ b/src/Bloc-Layout-Examples/BlFitContentVerticallyInHorizontalLayoutsExamples.class.st @@ -5,7 +5,7 @@ This is a very important use case for complex UIs that involve vertical lists " Class { #name : #BlFitContentVerticallyInHorizontalLayoutsExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Layout-Examples-Fit' } diff --git a/src/Bloc-Layout-Examples/BlFlowLayoutCompositionExamples.class.st b/src/Bloc-Layout-Examples/BlFlowLayoutCompositionExamples.class.st index 00effa619..3b96a2e8d 100644 --- a/src/Bloc-Layout-Examples/BlFlowLayoutCompositionExamples.class.st +++ b/src/Bloc-Layout-Examples/BlFlowLayoutCompositionExamples.class.st @@ -3,7 +3,7 @@ I contain examples of a flow layout " Class { #name : #BlFlowLayoutCompositionExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Layout-Examples-FlowMigrated' } diff --git a/src/Bloc-Layout-Examples/BlGridLayoutExamples.class.st b/src/Bloc-Layout-Examples/BlGridLayoutExamples.class.st index 93b909a6c..e1f5298f9 100644 --- a/src/Bloc-Layout-Examples/BlGridLayoutExamples.class.st +++ b/src/Bloc-Layout-Examples/BlGridLayoutExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlGridLayoutExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #traits : 'TBlLayoutExamplesSetup', #classTraits : 'TBlLayoutExamplesSetup classTrait', #category : #'Bloc-Layout-Examples-Grid' diff --git a/src/Bloc-Layout-Examples/BlIgnoredLayoutExamples.class.st b/src/Bloc-Layout-Examples/BlIgnoredLayoutExamples.class.st index 4a2b590d5..ec3d1d495 100644 --- a/src/Bloc-Layout-Examples/BlIgnoredLayoutExamples.class.st +++ b/src/Bloc-Layout-Examples/BlIgnoredLayoutExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlIgnoredLayoutExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Layout-Examples-Ignored' } diff --git a/src/Bloc-Layout-Examples/BlWrapAroundChildrenLayoutExamples.class.st b/src/Bloc-Layout-Examples/BlWrapAroundChildrenLayoutExamples.class.st index 65b565152..30955e5fe 100644 --- a/src/Bloc-Layout-Examples/BlWrapAroundChildrenLayoutExamples.class.st +++ b/src/Bloc-Layout-Examples/BlWrapAroundChildrenLayoutExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlWrapAroundChildrenLayoutExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Layout-Examples-Fit' } diff --git a/src/Bloc-Scripter/BlDevElementExamples.class.st b/src/Bloc-Scripter/BlDevElementExamples.class.st index 8c6627b1b..2828ab2c0 100644 --- a/src/Bloc-Scripter/BlDevElementExamples.class.st +++ b/src/Bloc-Scripter/BlDevElementExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlDevElementExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Scripter-Examples' } diff --git a/src/Bloc-Scripter/BlDevScripterExamples.class.st b/src/Bloc-Scripter/BlDevScripterExamples.class.st index 7f8ee184b..655aaac55 100644 --- a/src/Bloc-Scripter/BlDevScripterExamples.class.st +++ b/src/Bloc-Scripter/BlDevScripterExamples.class.st @@ -4,7 +4,7 @@ I exemplify {{gtClass:BlDevScripter}}. " Class { #name : #BlDevScripterExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #instVars : [ 'elementExamples' ], diff --git a/src/Bloc-Text-Examples/BlRopedTextExamples.class.st b/src/Bloc-Text-Examples/BlRopedTextExamples.class.st index 6d85913f0..67553f623 100644 --- a/src/Bloc-Text-Examples/BlRopedTextExamples.class.st +++ b/src/Bloc-Text-Examples/BlRopedTextExamples.class.st @@ -4,7 +4,7 @@ I contain examples of more complicated pieces of text to exemplify the rope stru " Class { #name : #BlRopedTextExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Text-Examples-Model' } diff --git a/src/Bloc-Text-Examples/BlSubTextExamples.class.st b/src/Bloc-Text-Examples/BlSubTextExamples.class.st index ba5ea2e32..679bd1161 100644 --- a/src/Bloc-Text-Examples/BlSubTextExamples.class.st +++ b/src/Bloc-Text-Examples/BlSubTextExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlSubTextExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Text-Examples-Model' } diff --git a/src/Bloc-Text-Examples/BlTextDecorationStyleExamples.class.st b/src/Bloc-Text-Examples/BlTextDecorationStyleExamples.class.st index f22f80fbb..af6ac547f 100644 --- a/src/Bloc-Text-Examples/BlTextDecorationStyleExamples.class.st +++ b/src/Bloc-Text-Examples/BlTextDecorationStyleExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlTextDecorationStyleExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Text-Examples-Model' } diff --git a/src/Bloc-Text-Examples/BlTextElementExamples.class.st b/src/Bloc-Text-Examples/BlTextElementExamples.class.st index 8c926d86c..d0b2fe6f6 100644 --- a/src/Bloc-Text-Examples/BlTextElementExamples.class.st +++ b/src/Bloc-Text-Examples/BlTextElementExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlTextElementExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Text-Examples-Elements' } diff --git a/src/Bloc-Text-Examples/BlTextElementMeasurementExamples.class.st b/src/Bloc-Text-Examples/BlTextElementMeasurementExamples.class.st index 365a7db56..787eeb3f3 100644 --- a/src/Bloc-Text-Examples/BlTextElementMeasurementExamples.class.st +++ b/src/Bloc-Text-Examples/BlTextElementMeasurementExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlTextElementMeasurementExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Text-Examples-Measurement' } diff --git a/src/Bloc-Text-Examples/BlTextElementMeasurementStrategyExamples.class.st b/src/Bloc-Text-Examples/BlTextElementMeasurementStrategyExamples.class.st index e64c3fba4..6cc99b67b 100644 --- a/src/Bloc-Text-Examples/BlTextElementMeasurementStrategyExamples.class.st +++ b/src/Bloc-Text-Examples/BlTextElementMeasurementStrategyExamples.class.st @@ -27,7 +27,7 @@ Now let's compare all text measurement strategies: " Class { #name : #BlTextElementMeasurementStrategyExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Text-Examples-Measurement' } diff --git a/src/Bloc-Text-Examples/BlTextIteratorExamples.class.st b/src/Bloc-Text-Examples/BlTextIteratorExamples.class.st index 74645f462..d35077eab 100644 --- a/src/Bloc-Text-Examples/BlTextIteratorExamples.class.st +++ b/src/Bloc-Text-Examples/BlTextIteratorExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlTextIteratorExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Text-Examples-Model' } diff --git a/src/Bloc-Text-Examples/BlTextOperatorExamples.class.st b/src/Bloc-Text-Examples/BlTextOperatorExamples.class.st index 1b9ce6040..2c4834a28 100644 --- a/src/Bloc-Text-Examples/BlTextOperatorExamples.class.st +++ b/src/Bloc-Text-Examples/BlTextOperatorExamples.class.st @@ -1,6 +1,6 @@ Class { #name : #BlTextOperatorExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Text-Examples-Model' } diff --git a/src/Bloc-Text-Examples/BlTextParagraphExamples.class.st b/src/Bloc-Text-Examples/BlTextParagraphExamples.class.st index 67f6dcdb8..f9371a5d7 100644 --- a/src/Bloc-Text-Examples/BlTextParagraphExamples.class.st +++ b/src/Bloc-Text-Examples/BlTextParagraphExamples.class.st @@ -4,7 +4,7 @@ I contain examples of a text paragraph " Class { #name : #BlTextParagraphExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Text-Examples-Measurement' } diff --git a/src/Bloc-Text-Examples/BlTextUnderlineAttributeExamples.class.st b/src/Bloc-Text-Examples/BlTextUnderlineAttributeExamples.class.st index baf125424..1ddf7f2d4 100644 --- a/src/Bloc-Text-Examples/BlTextUnderlineAttributeExamples.class.st +++ b/src/Bloc-Text-Examples/BlTextUnderlineAttributeExamples.class.st @@ -13,7 +13,7 @@ In addition to the simple API an underline attribute can be customized and then " Class { #name : #BlTextUnderlineAttributeExamples, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #category : #'Bloc-Text-Examples-Model' } diff --git a/src/Bloc-UnitedTests/BlBoundsMatcherTest.class.st b/src/Bloc-UnitedTests/BlBoundsMatcherTest.class.st index 955172c89..19f3e3821 100644 --- a/src/Bloc-UnitedTests/BlBoundsMatcherTest.class.st +++ b/src/Bloc-UnitedTests/BlBoundsMatcherTest.class.st @@ -10,7 +10,7 @@ Class { { #category : #tests } BlBoundsMatcherTest >> testChildStartEqualParentStartWhenEquals [ - + | aMatcher | aMatcher := BlBoundsMatcher new constraints: BlBoundsMatcherConstraints new addChildStartEqualParentStart. @@ -23,7 +23,7 @@ BlBoundsMatcherTest >> testChildStartEqualParentStartWhenEquals [ { #category : #tests } BlBoundsMatcherTest >> testChildStartEqualParentStartWhenGreater [ - + | aMatcher | aMatcher := BlBoundsMatcher new constraints: BlBoundsMatcherConstraints new addChildStartEqualParentStart. @@ -36,7 +36,7 @@ BlBoundsMatcherTest >> testChildStartEqualParentStartWhenGreater [ { #category : #tests } BlBoundsMatcherTest >> testChildStartEqualParentStartWhenLess [ - + | aMatcher | aMatcher := BlBoundsMatcher new constraints: BlBoundsMatcherConstraints new addChildStartEqualParentStart. @@ -49,7 +49,7 @@ BlBoundsMatcherTest >> testChildStartEqualParentStartWhenLess [ { #category : #tests } BlBoundsMatcherTest >> testChildStartGreaterThanParentStartWhenEquals [ - + | aMatcher | aMatcher := BlBoundsMatcher new constraints: BlBoundsMatcherConstraints new addChildStartGreaterThanParentStart. @@ -62,7 +62,7 @@ BlBoundsMatcherTest >> testChildStartGreaterThanParentStartWhenEquals [ { #category : #tests } BlBoundsMatcherTest >> testChildStartGreaterThanParentStartWhenGreater [ - + | aMatcher | aMatcher := BlBoundsMatcher new constraints: BlBoundsMatcherConstraints new addChildStartGreaterThanParentStart. @@ -75,7 +75,7 @@ BlBoundsMatcherTest >> testChildStartGreaterThanParentStartWhenGreater [ { #category : #tests } BlBoundsMatcherTest >> testChildStartGreaterThanParentStartWhenLess [ - + | aMatcher | aMatcher := BlBoundsMatcher new constraints: BlBoundsMatcherConstraints new addChildStartGreaterThanParentStart. @@ -88,7 +88,7 @@ BlBoundsMatcherTest >> testChildStartGreaterThanParentStartWhenLess [ { #category : #tests } BlBoundsMatcherTest >> testChildStartLessThanParentStartWhenEquals [ - + | aMatcher | aMatcher := BlBoundsMatcher new constraints: BlBoundsMatcherConstraints new addChildStartLessThanParentStart. @@ -101,7 +101,7 @@ BlBoundsMatcherTest >> testChildStartLessThanParentStartWhenEquals [ { #category : #tests } BlBoundsMatcherTest >> testChildStartLessThanParentStartWhenGreater [ - + | aMatcher | aMatcher := BlBoundsMatcher new constraints: BlBoundsMatcherConstraints new addChildStartLessThanParentStart. @@ -114,7 +114,7 @@ BlBoundsMatcherTest >> testChildStartLessThanParentStartWhenGreater [ { #category : #tests } BlBoundsMatcherTest >> testChildStartLessThanParentStartWhenLess [ - + | aMatcher | aMatcher := BlBoundsMatcher new constraints: BlBoundsMatcherConstraints new addChildStartLessThanParentStart. diff --git a/src/Bloc-UnitedTests/BlElementBoundsTest.class.st b/src/Bloc-UnitedTests/BlElementBoundsTest.class.st index 99ca412ae..ae8c88f7b 100644 --- a/src/Bloc-UnitedTests/BlElementBoundsTest.class.st +++ b/src/Bloc-UnitedTests/BlElementBoundsTest.class.st @@ -4,7 +4,7 @@ I have been automatically converted and probably manually tweaked from BlElement " Class { #name : #BlElementBoundsTest, - #superclass : #TestCase, + #superclass : #BlExampleTest, #category : #'Bloc-UnitedTests-Bounds' } diff --git a/src/Bloc-UnitedTests/BlExampleTest.class.st b/src/Bloc-UnitedTests/BlExampleTest.class.st new file mode 100644 index 000000000..615eb65b5 --- /dev/null +++ b/src/Bloc-UnitedTests/BlExampleTest.class.st @@ -0,0 +1,35 @@ +" +I'm a TestCase that adapts the GT-style examples as SUnit. + +These are the rules for test in subclasses: +- Any instance-side method with pragma is considered a test method. +- Additionally, if a method has a pragma, it's skipped. + +" +Class { + #name : #BlExampleTest, + #superclass : #TestCase, + #category : #'Bloc-UnitedTests-Examples' +} + +{ #category : #tests } +BlExampleTest class >> testSelectors [ + | pragmas | + pragmas := #(#sampleInstance #gtExample). + ^ self methods + select: [ :eachM | + (pragmas anySatisfy: [ :s | (eachM hasPragmaNamed: s)]) + and: [ eachM selector isUnary ] ] + thenCollect: [ :each | each selector ] +] + +{ #category : #private } +BlExampleTest >> performTest [ + + | testMethod | + testMethod := self class methodNamed: testSelector asSymbol. + (testMethod hasPragmaNamed: #noTest) + ifTrue: [ self skip ]. + + ^ super performTest +] diff --git a/src/Bloc-UnitedTests/BlExamplesMock.class.st b/src/Bloc-UnitedTests/BlExamplesMock.class.st index e5391a7e4..79df72a78 100644 --- a/src/Bloc-UnitedTests/BlExamplesMock.class.st +++ b/src/Bloc-UnitedTests/BlExamplesMock.class.st @@ -5,7 +5,7 @@ See my references. " Class { #name : #BlExamplesMock, - #superclass : #BlExamplesTest, + #superclass : #BlExampleTest, #instVars : [ 'enabled' ], @@ -20,27 +20,27 @@ BlExamplesMock >> enableRunning [ { #category : #examples } BlExamplesMock >> exampleError [ - + self error ] { #category : #examples } BlExamplesMock >> exampleFail [ - + self fail ] { #category : #examples } BlExamplesMock >> examplePass [ - + ] { #category : #examples } BlExamplesMock >> exampleSkip [ - + self error diff --git a/src/Bloc-UnitedTests/BlExamplesTest.class.st b/src/Bloc-UnitedTests/BlExamplesTest.class.st index 5df530fd8..b676a7100 100644 --- a/src/Bloc-UnitedTests/BlExamplesTest.class.st +++ b/src/Bloc-UnitedTests/BlExamplesTest.class.st @@ -1,35 +1,8 @@ " -I'm a TestCase that adapts the GT-style examples as SUnit. - -These are the rules for test in subclasses: -- Any instance-side method with pragma is considered a test method. -- Additionally, if a method has a pragma, it's skipped. - +Do not use this class we will remove it. " Class { #name : #BlExamplesTest, - #superclass : #TestCase, + #superclass : #BlExampleTest, #category : #'Bloc-UnitedTests-Examples' } - -{ #category : #tests } -BlExamplesTest class >> testSelectors [ - | pragmas | - pragmas := #(#sampleInstance #gtExample). - ^ self methods - select: [ :eachM | - (pragmas anySatisfy: [ :s | (eachM hasPragmaNamed: s)]) - and: [ eachM selector isUnary ] ] - thenCollect: [ :each | each selector ] -] - -{ #category : #private } -BlExamplesTest >> performTest [ - - | testMethod | - testMethod := self class methodNamed: testSelector asSymbol. - (testMethod hasPragmaNamed: #noTest) - ifTrue: [ self skip ]. - - ^ super performTest -] diff --git a/src/Bloc/BlElementProperty.class.st b/src/Bloc/BlElementProperty.class.st index c5212d115..ee21dbf84 100644 --- a/src/Bloc/BlElementProperty.class.st +++ b/src/Bloc/BlElementProperty.class.st @@ -1,6 +1,39 @@ " -# Element property +## Element property +When dealing with properties of a visual element we often find ourselves in a situation when some properties should be propagated to children or should be resolved in a local context (pt units), in a context of the direct parent (em units) or even in a global context of the whole scene graph (rem units). In some othercases, properties can be added, removed or changed multiple times per frame. Ideally, we would like to actually modify element's state at most once per frame. `BlElementProperty` helps us to do exactly that. + +### Understanding properties with status + +`BlElementProperty` is independent from a `BlElement`, which allows us to store properties separately or even share between multiple elements. While this being a useful property it does not facilitate the ability to track if a property is applied on a specific element. This is were `BlElementPropertyWithStatus` decorator comes into play. It wraps around element property and adds a status flag: applied, just added or to be removed. +The status flag is an elegant approach to the performance optimization problem. When switching element styles it is common that properties are removed and then added back (with the same or maybe a different value). +As an example let's consider the background of an element. Here is what roughly happens when the background is changed from black to white color: + +1. Convert Color to `BlBackground` +2. Perform a comparison of the current `BlElement>>#background` with the new one and do nothing if they are equal. +3. Change the background instance variable value to the new one and request an element to redraw. + +If for example the background is changed back from white to black within the same frame the element should perform the same 3 operations, so in total it would be 6 expensive step. Visually, however, nothing changed. By adding a status flag to the property we are able to minimize the amount of expensive modifications of the element's state. + +### Accessing element properties + +Each element knows a collection of properties currently applied on that element (BlElementCurrentProperties). They can be accessed by sending `BlElement>>#properties` to an element. +Consider the following element with a few properties that define its look: + +`BlElementPropertyExplanation>>#elementWithMultipleProperties` + +Sending `BlElement>>#properties` reveals what properties are currently applied: Check `BlElementPropertyExplanation>>#elementWithMultipleProperties` + +### Adding and removing properties +An instance of `BlElementProperty` can be added to any arbitrary element by sending `BlElementCurrentProperties>>#addProperty:` and removed by sending `BlElementCurrentProperties>>#removeProperty:` to the collection of properties previously obtained with the help of `BlElement>>#properties`. From here Bloc will take care of the rest. Please note, that adding and removing properties does not have an immediate effect, all modifications done to the properties are batched and performed as part of the `BlSpaceFramePropertiesPhase`. + +### Properties clean up after themselves + +Each property knows how to apply itself on an element (`BlElementProperty>>#applyOnElement:`) and how to clean up after itself (`BlElementProperty>>#cleanUpOnElement:`). Both methods are optional and users do not have to override them, however, it is preferable to provide both implementations when applicable. +As an example let's take a BlElementBackgroundProperty which implements both methods: +`BlElementPropertyExamples>>#backgroundProperty` +Click on the buttons to the left from the rectangular element to see what happens when the background property is added and then removed from an element: once executed `BlElementPropertyExplanation>>#propertyCleanUp`. + " Class { #name : #BlElementProperty, diff --git a/src/Bloc/BlSpace.class.st b/src/Bloc/BlSpace.class.st index acf67831b..c81ca4c64 100644 --- a/src/Bloc/BlSpace.class.st +++ b/src/Bloc/BlSpace.class.st @@ -764,10 +764,10 @@ BlSpace >> doComputePropertiesOf: aCollectionOfElements [ BlSpace >> doLayout [ | layoutCounter maxLayoutCount | - self + "self assert: [ self isLayoutRequested ] description: [ 'Root element must request layout in order to update it' ]. - + " [ layoutCounter := 0. maxLayoutCount := 100. From ab99de0673154464f423f431b922b90a0fde4329 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phaneDucasse?= Date: Sun, 9 Apr 2023 20:38:48 +0200 Subject: [PATCH 3/3] all docs now in microdown. --- doc/ElementAddedToSceneGraph.md | 26 ++++++++++++++++++++++++ doc/ElementProperties.md | 36 +++++++++++++++++++++++++++++++++ doc/MouseEvent.md | 27 +++++++++++++++++++++++++ 3 files changed, 89 insertions(+) create mode 100644 doc/ElementAddedToSceneGraph.md create mode 100644 doc/ElementProperties.md create mode 100644 doc/MouseEvent.md diff --git a/doc/ElementAddedToSceneGraph.md b/doc/ElementAddedToSceneGraph.md new file mode 100644 index 000000000..7c622e6ec --- /dev/null +++ b/doc/ElementAddedToSceneGraph.md @@ -0,0 +1,26 @@ +## Understanding `BlElement>>#onAddedToSceneGraph` + +As we know, `BlElement` and `BlSpace` play central roles in Bloc. When `BlElement` is added to a `BlSpace`, the space is referenced by the element with the help of `BlAttachedCachedSpaceReference`, which denotes that the space is attached to the element. + + +### Scene graph +We define a scene graph is a combination of a tree of elements and a space which contains those elements. + +#### Attached element +An element is attached to the scene graph then and only then when that element or one of its parents is the root of a space. It is possible to test if an arbitrary element is attached to the scene graph by sending `BlElement>>#isAttachedToSceneGraph` message to that element. When an element is attached to the scene graph, `BlElement>>#space` returns a non-null instance of a `BlSpace` to which that element is added. + +#### How to be notified when an element is attached to the scene graph? + +There are two ways to be notified when an element is attached to the scene graph: an event `BlElementAddedToSceneGraphEvent` and a hook (template) method `BlElement>>#onAddedToSceneGraph`. +Please note, that when overriding `BlElement>>#onAddedToSceneGraph` it is mandatory to delegate the hook method to the super class, otherwise the children would not be notified. + +#### When should I rely on the scene graph attachment hook? + +There are very little cases when users should override `BlElement>>#onAddedToSceneGraph` or handle a corresponding event. This should only be used if the state or behavior of an element explicitly depends on the fact that it is a part of a graph scene. A good example of this would be subscribing to and unsubscribing from the `SystemAnnouncer`. Another example is cache handling, when an element is attached to the scene graph, that element can potentially pre-load something from an external source and then release that cached resource then an element is removed from the scene graph. In addition to the mentioned examples, some elements may decide to add an event handler to the space when attached to the scene graph and then remove that event handler when an element is removed from the scene graph. +As you can see, the use-cases for the `BlElement>>#onAddedToSceneGraph` are parent independent and purely depent on the binary condition: attached or not attached to the scene graph. + +#### When to not rely on the scene graph attachment hook? + +It is a mistake to rely on the attached to the scene graph event when the state of an element directly or indirectly depends on the state of its parents. Let's consider a font size and assume that the font size of a child depends on the font size of its parent. This situation may happen when the font size is defined in em units. +1em means that child should have the same font size as its parent, 0.5 means that the font size of a child is twice as small. +Everytime there is a change in the composition of the parents the font size should be recomputed. It should also be recomputed when the font size of any parent changes. What will happen when an element is transfered from one parent to the other within the same frame? It is very likely that the recomputation of the font size becomes inefficient and slow. A better solution would be to rely on `BlElementProperty` which can be propagated to children BlElementProperty>>#canPropagateToChildren. diff --git a/doc/ElementProperties.md b/doc/ElementProperties.md new file mode 100644 index 000000000..5f410f09d --- /dev/null +++ b/doc/ElementProperties.md @@ -0,0 +1,36 @@ +## Element property + +When dealing with properties of a visual element we often find ourselves in a situation when some properties should be propagated to children or should be resolved in a local context (pt units), in a context of the direct parent (em units) or even in a global context of the whole scene graph (rem units). In some othercases, properties can be added, removed or changed multiple times per frame. Ideally, we would like to actually modify element's state at most once per frame. `BlElementProperty` helps us to do exactly that. + +### Understanding properties with status + +`BlElementProperty` is independent from a `BlElement`, which allows us to store properties separately or even share between multiple elements. While this being a useful property it does not facilitate the ability to track if a property is applied on a specific element. This is were `BlElementPropertyWithStatus` decorator comes into play. It wraps around element property and adds a status flag: applied, just added or to be removed. +The status flag is an elegant approach to the performance optimization problem. When switching element styles it is common that properties are removed and then added back (with the same or maybe a different value). +As an example let's consider the background of an element. Here is what roughly happens when the background is changed from black to white color: + +1. Convert Color to `BlBackground` +2. Perform a comparison of the current `BlElement>>#background` with the new one and do nothing if they are equal. +3. Change the background instance variable value to the new one and request an element to redraw. + +If for example the background is changed back from white to black within the same frame the element should perform the same 3 operations, so in total it would be 6 expensive step. Visually, however, nothing changed. By adding a status flag to the property we are able to minimize the amount of expensive modifications of the element's state. + +### Accessing element properties + +Each element knows a collection of properties currently applied on that element (BlElementCurrentProperties). They can be accessed by sending `BlElement>>#properties` to an element. +Consider the following element with a few properties that define its look: + +`BlElementPropertyExplanation>>#elementWithMultipleProperties` + +Sending `BlElement>>#properties` reveals what properties are currently applied: Check `BlElementPropertyExplanation>>#elementWithMultipleProperties` + +### Adding and removing properties +An instance of `BlElementProperty` can be added to any arbitrary element by sending `BlElementCurrentProperties>>#addProperty:` and removed by sending `BlElementCurrentProperties>>#removeProperty:` to the collection of properties previously obtained with the help of `BlElement>>#properties`. From here Bloc will take care of the rest. Please note, that adding and removing properties does not have an immediate effect, all modifications done to the properties are batched and performed as part of the `BlSpaceFramePropertiesPhase`. + +### Properties clean up after themselves + +Each property knows how to apply itself on an element (`BlElementProperty>>#applyOnElement:`) and how to clean up after itself (`BlElementProperty>>#cleanUpOnElement:`). Both methods are optional and users do not have to override them, however, it is preferable to provide both implementations when applicable. +As an example let's take a BlElementBackgroundProperty which implements both methods: +`BlElementPropertyExamples>>#backgroundProperty` +Click on the buttons to the left from the rectangular element to see what happens when the background property is added and then removed from an element: once executed `BlElementPropertyExplanation>>#propertyCleanUp`. + + diff --git a/doc/MouseEvent.md b/doc/MouseEvent.md new file mode 100644 index 000000000..f793f82be --- /dev/null +++ b/doc/MouseEvent.md @@ -0,0 +1,27 @@ +## About Mouse Events + +### Mouse over/out and enter/leave events +Let us take a look at what happens when mouse moves between elements and what is the difference between two families of mouse events: enter/leave and over/out. + +Quick comparison: hover elements that you obtain when executing +`BlMouseOverOutAndEnterLeaveEventTest>>#quickComparison` + +#### `BlMouseEnterEvent` and `BlMouseLeaveEvent` + +If you are looking for the simplest way to detect when a user hovers an element with the mouse use a combination of `BlMouseEnterEvent` and `BlMouseLeaveEvent`. +They trigger when the mouse pointer enters/leaves the element. + +`BlMouseEnterEvent` and `BlMouseLeaveEvent` are sent directly (dispatched) to the element, ignoring any mouse transitions inside the element, therefore both mouse enter and leave events do not bubble. In the example below, notice how parent container does not receive mouse leave event when mouse transitions between children: +`BlMouseOverOutAndEnterLeaveEventTest>>#mouseEnterAndLeaveConsumed` + +#### `BlMouseOverEvent` and `BlMouseOutEvent` + +Similar to the mouse enter but a bit more advanced, `BlMouseOverEvent` occurs when a mouse pointer comes over an element, and `BlMouseOutEvent` – when it leaves: +Check `BlMouseOverOutAndEnterLeaveEventTest>>#basicMouseOverAndOut` + +An important feature of mouseout – it triggers, when the pointer moves from an element to its descendant, e.g. from `parent` to `child`. It also means that mouse over/out events bubble. + +In the example below, notice how parent container receives mouse out event when mouse transitions from it to deeper child elements: +`BlMouseOverOutAndEnterLeaveEventTest>>#mouseOverAndOutConsumed` + +