How do these connectors work?

[Josh]

Apologies for the possible duplicate question. I'm aware that there's lots of similar questions.

How do I programatically connect the blocks depicted in the diagram below? All of the blocks in the diagram are added to the workspace via `workspace.newBlock`.

Specifically, I'm having problem with input/output connections. I think I understand `next` and `previous` (the top and bottom notches/arrows in blocks) but I can't seem to get a block nested inside a statement input block. I've manually dragged the blocks by hand for the diagram but I'd like to do it with code instead.

Which connection type is connection 1?

Are connections 2 and 3 in the image the same type of connection? Which connection method do I use here? is it `Connection.previousConnection`?

Here are the workspace definitions for the blocks involved. I'm using `Blockly.defineBlocksWithJsonArray` to define them.

As you can see, none of them have types/checks or outputs. I'm at the clutching-at-straws stage so I've made all blocks 'connectable' with each other (at least, I've tried to).

Apologies for the lack of formatting:

```javascript

{

type: "block_field_contains",

message0: "field %1 contains text %2",

args0: [

{

type: "input_statement",

name: "synergy_field_identifier",

},

{

type: "input_value",

name: "TEXT",

}

],

previousStatement: null,

nextStatement: null,

colour: 230,

tooltip: "",

helpUrl: "",

output: null,

},

{

type: "with_name_block", // this block is nested inside the main 'C' block.

message0: "with name %1",

args0: [

{

type: "input_value",

name: "TEXT"

},

],

inputsInline: true,

previousStatement: null,

nextStatement: null,

colour: 230,

tooltip: "",

helpUrl: "",

output: null,

}

```

Both green 'blocks' are standard `TEXT` fields. I would like to keep the `with name` block a dummy input rather than a `text_input` block for flexibility.

Thank you in advance!

[Beka Westberg]

Hello!

Here is a picture with all of the different types of connections labeled:

It can also be helpful if you think about them in terms of "vertical" and "horizontal" connections. Vertical connections model statements in text-based programming languages. They include Previous, Next, and StatementInput connections. Horizontal connections model expressions in text-based programming languages. They include Output, and ValueInput connections.

It seems like you already found the APIs for programmatically connecting things, but just in case here are links to all of them: previousConnection, nextConnection, outputConnection, getInput().connection, connection.connect.

If you are only programmatically connecting things so that users have some starter blocks in the workspace, I also recommend deserializing from JSON, rather than connecting your blocks using those APIs (cuz it's easier and more declarative).

I hope that helps! If you have any further questions please reply =)

--Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/58cd9f0b-c62b-47a2-82dd-b4eab96f8c1an%40googlegroups.com.

[Josh]

Hi Beka

Thanks for the reply but i'm still a bit stuck on how I go about actually connecting the blocks.

Using your example diagram, we have a while/do block and a boolean (field?).

Lets say I want to join the boolean field to the while/do block. Obviously it would slot in the ValueInput 'connector'. How would that look programatically? I've read the Connector API reference page a lot but it didn't really help in terms of using `outputConnection` or `getInput()`.connection.

I'm doing it this way because I've built a parser for a custom language so a user could drag some blocks, generate some code and have that code (or other syntatically correct code) turn back into blocks again. As you can probably imagine, it's an absolute nightmare. I could always just store the serialised JSON on a server and use an XHR to fetch it and load it into the workspace but this problem is much more interesting :)

Cheers

Josh

[Beka Westberg]

Hello again =)

I think the important thing for your question is that every *input* has a name. For example, the controls_if block (the c-shaped one in my example) has a block definition that looks like this:

```

{
    'type': 'controls_if',
    'message0': 'if %1',
    'args0': [
      {
        'type': 'input_value',
        'name': 'IF0',       // This is the name of the value input
        'check': 'Boolean',
      },
    ],
    'message1': 'do %1',
    'args1': [
      {
        'type': 'input_statement',
        'name': 'DO0',    // This is the name of the statement input

      },
    ],
    'previousStatement': null,
    'nextStatement': null,

  },

```

So to get the value input of the block you can do `myIfBlock.getInput('IF0')`. To connect the boolean block to that input you would do `myIfBlock.getInput('IF0').connection.connect(myBooleanBlock.outputConnection)`.

> ...and have that code (or other syntatically correct code) turn back into blocks again.

Good luck friend haha.

I hope that helps! If you have any further questions please reply =)

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/83adecf6-b69b-434a-8257-46de14a1cc7bn%40googlegroups.com.