Re: [tw] Re: A few questions about macros/widgets/functions

[Matthew Lauber]

If your really looking to understand how the code works, my advice is to 
look at the sources tab in chrome's developer tools.  Press F12 in your 
browser window, and look at the sources tab, and you should find a bunch of 
.js files under the no-domain entry in the left hand side.  The standard 
widgets all start with $:/core/modules/widgets/*.  I'd take a look at 
those, and throw some breakpoints in so you can see when they get called 
and what data they get.

On Tuesday, March 13, 2018 at 3:08:23 PM UTC-4, Joe Armstrong wrote:
>
> Next question is where is the code for a widget?
>
> I think I understand (famous last words) macros - but not widgets.
>
> Where is the code for a simple widget?
>
> Which is the simplest widget??? 
>
> Cheers
>
> /Joe
>
>
>
> On Tue, Mar 13, 2018 at 10:16 AM, Steven Schneider  > wrote:
>
>> Great thread. Thanks, Joe. And thanks, Xavier.
>>
>> What I find most interesting about TiddlyWiki is that someone like Joe 
>> and someone like me can work with it. Joe has a clearly different approach 
>> to learning and understanding than I do. I never looked at the 
>> <> code, just used it for a while until it didn't do what I 
>> wanted, and poked around and discovered <$list>, and used the dox and 
>> examples on tiddlywiki.com to get it to work (sort of).
>>
>> FWIW: I may have a different need, since I am now frequently teaching 
>> TiddlyWiki, but this term I gave up teaching <> and moved 
>> students into using <$list filter=...> right away. Like Xavier, I agree 
>> that filters are key, and help folks understand the core aspects of 
>> Tiddlywiki. Most of my students are non-programmers, but many have html 
>> experience. 
>>
>> It is always interesting to have computer scientists in my class, as the 
>> way I have them approach TW is so different than how they are taught 
>> programming and languages in the CS department. About half-way into the 
>> semester, they begin to see that there is a language under TW, and that 
>> they can get to that language if they want to. I'm not sure that there are 
>> platforms other than TiddlyWiki that offer this possibility.
>>
>> Anyway, thanks Joe for starting off an interesting thread...
>>
>> //steve.
>>
>>
>> On Saturday, March 10, 2018 at 8:08:52 PM UTC-5, PMario wrote:
>>>
>>> On Saturday, March 10, 2018 at 7:25:48 PM UTC+1, Joe Armstrong wrote:

 ...

 2) widgets - what do they return? how are they evaluated?

>>>
>>> Widgets are the basic building blocks in TW. The whole UI is based on 
>>> widgets. 
>>>
>>> The TiddlyWiki UI starts with a transclusion of the PageTemplate 
>>> tiddler. 
>>> Which simply speaking is a "list all tiddlers that are tagged: 
>>> $:/tags/PageTemplate" + some navigation handling using the NavigatorWidget
>>>
>>> TW wikitext is parsed and transferred to widgets, which produce the 
>>> html-dom, that the browser can use. more about this later.
>>>
>>> 
>>>
>>> A simpler example:
>>>
>>> Macro definitions are converted to SetWidgets 
>>> and 
>>> macro calls are converted to a MacroCallWidgets
>>>
>>> eg: if you go to the *TW-prerelease edtion* you can see the pare-tree 
>>> and the widget-tree. The prerelease contains some development elements, 
>>> that are missing at tiddlywiki.com
>>>
>>>  - open: https://tiddlywiki.com/prerelease/
>>>  - create a new tiddler eg: test-macro
>>>  - enter: \define hello() hello world
>>>  - In the edit toolbar you see: 
>>>
>>>  - *select parse-tree* and you'll see: 
>>>
>>>
>>> [
>>> {
>>> "type": "set",
>>> "attributes": {
>>> "name": {
>>> "type": "string",
>>> "value": "hello"
>>> },
>>> "value": {
>>> "type": "string",
>>> "value": "hello world"
>>> }
>>> },
>>> "children": [],
>>> "params": []
>>> }
>>> ]
>>>  
>>>
>>> -* now add the macro call*  with: <>
>>>
>>> - you'll get: 
>>>
>>>
>>> [
>>> {
>>> "type": "set",
>>> "attributes": {
>>> "name": {
>>> "type": "string",
>>> "value": "hello"
>>> },
>>> "value": {
>>> "type": "string",
>>> "value": "hello world"
>>> }
>>> },
>>> "children": [
>>> {
>>> "type": "macrocall",
>>> "name": "hello",
>>> "params": [],
>>> "isBlock": true
>>> }
>>> ],
>>> "params": []
>>> }
>>> ]
>>>
>>>
>>> These internal structures are created by the TW parsers 
>>> .
>>>  
>>> They produce the parse-tree. 
>>>
>>> This parse-tree is used by the TW renderer to produce the HTML output, 
>>> that the browser can use. 
>>> Every widget has a widget.render() function. ... 
>>>
>>> The module render.js 

Re: [tw] Re: A few questions about macros/widgets/functions

['Mark S.' via TiddlyWiki]

Just go to the shadow tab of the advanced search. Look for the name of the 
widget minus the "widget" term. Like

button.js

I'm guessing that the TextWidget would be simplest because it does the 
least.

There's some documentation how-to on plugins at http://cjhunt.github.io/ 
though for me I found a bit too much was assumed to start.

Good luck!
-- Mark

On Tuesday, March 13, 2018 at 12:08:23 PM UTC-7, Joe Armstrong wrote:
>
> Next question is where is the code for a widget?
>
> I think I understand (famous last words) macros - but not widgets.
>
> Where is the code for a simple widget?
>
> Which is the simplest widget??? 
>
> Cheers
>
> /Joe
>
>
>
> On Tue, Mar 13, 2018 at 10:16 AM, Steven Schneider  > wrote:
>
>> Great thread. Thanks, Joe. And thanks, Xavier.
>>
>> What I find most interesting about TiddlyWiki is that someone like Joe 
>> and someone like me can work with it. Joe has a clearly different approach 
>> to learning and understanding than I do. I never looked at the 
>> <> code, just used it for a while until it didn't do what I 
>> wanted, and poked around and discovered <$list>, and used the dox and 
>> examples on tiddlywiki.com to get it to work (sort of).
>>
>> FWIW: I may have a different need, since I am now frequently teaching 
>> TiddlyWiki, but this term I gave up teaching <> and moved 
>> students into using <$list filter=...> right away. Like Xavier, I agree 
>> that filters are key, and help folks understand the core aspects of 
>> Tiddlywiki. Most of my students are non-programmers, but many have html 
>> experience. 
>>
>> It is always interesting to have computer scientists in my class, as the 
>> way I have them approach TW is so different than how they are taught 
>> programming and languages in the CS department. About half-way into the 
>> semester, they begin to see that there is a language under TW, and that 
>> they can get to that language if they want to. I'm not sure that there are 
>> platforms other than TiddlyWiki that offer this possibility.
>>
>> Anyway, thanks Joe for starting off an interesting thread...
>>
>> //steve.
>>
>>
>> On Saturday, March 10, 2018 at 8:08:52 PM UTC-5, PMario wrote:
>>>
>>> On Saturday, March 10, 2018 at 7:25:48 PM UTC+1, Joe Armstrong wrote:

 ...

 2) widgets - what do they return? how are they evaluated?

>>>
>>> Widgets are the basic building blocks in TW. The whole UI is based on 
>>> widgets. 
>>>
>>> The TiddlyWiki UI starts with a transclusion of the PageTemplate 
>>> tiddler. 
>>> Which simply speaking is a "list all tiddlers that are tagged: 
>>> $:/tags/PageTemplate" + some navigation handling using the NavigatorWidget
>>>
>>> TW wikitext is parsed and transferred to widgets, which produce the 
>>> html-dom, that the browser can use. more about this later.
>>>
>>> 
>>>
>>> A simpler example:
>>>
>>> Macro definitions are converted to SetWidgets 
>>> and 
>>> macro calls are converted to a MacroCallWidgets
>>>
>>> eg: if you go to the *TW-prerelease edtion* you can see the pare-tree 
>>> and the widget-tree. The prerelease contains some development elements, 
>>> that are missing at tiddlywiki.com
>>>
>>>  - open: https://tiddlywiki.com/prerelease/
>>>  - create a new tiddler eg: test-macro
>>>  - enter: \define hello() hello world
>>>  - In the edit toolbar you see: 
>>>
>>>  - *select parse-tree* and you'll see: 
>>>
>>>
>>> [
>>> {
>>> "type": "set",
>>> "attributes": {
>>> "name": {
>>> "type": "string",
>>> "value": "hello"
>>> },
>>> "value": {
>>> "type": "string",
>>> "value": "hello world"
>>> }
>>> },
>>> "children": [],
>>> "params": []
>>> }
>>> ]
>>>  
>>>
>>> -* now add the macro call*  with: <>
>>>
>>> - you'll get: 
>>>
>>>
>>> [
>>> {
>>> "type": "set",
>>> "attributes": {
>>> "name": {
>>> "type": "string",
>>> "value": "hello"
>>> },
>>> "value": {
>>> "type": "string",
>>> "value": "hello world"
>>> }
>>> },
>>> "children": [
>>> {
>>> "type": "macrocall",
>>> "name": "hello",
>>> "params": [],
>>> "isBlock": true
>>> }
>>> ],
>>> "params": []
>>> }
>>> ]
>>>
>>>
>>> These internal structures are created by the TW parsers 
>>> .
>>>  
>>> They produce the parse-tree. 
>>>
>>> This parse-tree is used by the TW renderer to produce the HTML output, 
>>> that the browser can use. 
>>> Every widget has a widget.render() function. ... 
>>>
>>> The module render.js 
>>> 
>>>  
>>> is a 

Re: [tw] Re: A few questions about macros/widgets/functions

[Joe Armstrong]

Next question is where is the code for a widget?

I think I understand (famous last words) macros - but not widgets.

Where is the code for a simple widget?

Which is the simplest widget???

Cheers

/Joe



On Tue, Mar 13, 2018 at 10:16 AM, Steven Schneider  wrote:

> Great thread. Thanks, Joe. And thanks, Xavier.
>
> What I find most interesting about TiddlyWiki is that someone like Joe and
> someone like me can work with it. Joe has a clearly different approach to
> learning and understanding than I do. I never looked at the <>
> code, just used it for a while until it didn't do what I wanted, and poked
> around and discovered <$list>, and used the dox and examples on
> tiddlywiki.com to get it to work (sort of).
>
> FWIW: I may have a different need, since I am now frequently teaching
> TiddlyWiki, but this term I gave up teaching <> and moved
> students into using <$list filter=...> right away. Like Xavier, I agree
> that filters are key, and help folks understand the core aspects of
> Tiddlywiki. Most of my students are non-programmers, but many have html
> experience.
>
> It is always interesting to have computer scientists in my class, as the
> way I have them approach TW is so different than how they are taught
> programming and languages in the CS department. About half-way into the
> semester, they begin to see that there is a language under TW, and that
> they can get to that language if they want to. I'm not sure that there are
> platforms other than TiddlyWiki that offer this possibility.
>
> Anyway, thanks Joe for starting off an interesting thread...
>
> //steve.
>
>
> On Saturday, March 10, 2018 at 8:08:52 PM UTC-5, PMario wrote:
>>
>> On Saturday, March 10, 2018 at 7:25:48 PM UTC+1, Joe Armstrong wrote:
>>>
>>> ...
>>>
>>> 2) widgets - what do they return? how are they evaluated?
>>>
>>
>> Widgets are the basic building blocks in TW. The whole UI is based on
>> widgets.
>>
>> The TiddlyWiki UI starts with a transclusion of the PageTemplate tiddler.
>> Which simply speaking is a "list all tiddlers that are tagged:
>> $:/tags/PageTemplate" + some navigation handling using the NavigatorWidget
>>
>> TW wikitext is parsed and transferred to widgets, which produce the
>> html-dom, that the browser can use. more about this later.
>>
>> 
>>
>> A simpler example:
>>
>> Macro definitions are converted to SetWidgets
>> and
>> macro calls are converted to a MacroCallWidgets
>>
>> eg: if you go to the *TW-prerelease edtion* you can see the pare-tree
>> and the widget-tree. The prerelease contains some development elements,
>> that are missing at tiddlywiki.com
>>
>>  - open: https://tiddlywiki.com/prerelease/
>>  - create a new tiddler eg: test-macro
>>  - enter: \define hello() hello world
>>  - In the edit toolbar you see:
>>
>>  - *select parse-tree* and you'll see:
>>
>>
>> [
>> {
>> "type": "set",
>> "attributes": {
>> "name": {
>> "type": "string",
>> "value": "hello"
>> },
>> "value": {
>> "type": "string",
>> "value": "hello world"
>> }
>> },
>> "children": [],
>> "params": []
>> }
>> ]
>>
>>
>> -* now add the macro call*  with: <>
>>
>> - you'll get:
>>
>>
>> [
>> {
>> "type": "set",
>> "attributes": {
>> "name": {
>> "type": "string",
>> "value": "hello"
>> },
>> "value": {
>> "type": "string",
>> "value": "hello world"
>> }
>> },
>> "children": [
>> {
>> "type": "macrocall",
>> "name": "hello",
>> "params": [],
>> "isBlock": true
>> }
>> ],
>> "params": []
>> }
>> ]
>>
>>
>> These internal structures are created by the TW parsers
>> .
>> They produce the parse-tree.
>>
>> This parse-tree is used by the TW renderer to produce the HTML output,
>> that the browser can use.
>> Every widget has a widget.render() function. ...
>>
>> The module render.js
>> 
>> is a startup module, that kicks off the whole parsing and rendering
>> process for eg: the PageTemplate
>> 
>> .
>>
>> A little bit earlier in the startup mechanism, the RootWidget is created
>> .
>> It holds a reference to the browser DOM document element, which allows all
>> widgets, to modify the DOM.
>>
>> hope that makes sense
>> have fun!
>> mario
>>
>>
>> --
> You received this message because