Has anyone created class blocks?

360 views
Skip to first unread message

Red Panda

unread,
Sep 28, 2020, 10:06:00 AM9/28/20
to Blockly

I'm planning to add classes to my Blockly instance and I was wondering if there are any attempts at this. Im planning to target Dart, but maybe other languages could make use of that too.
The code generation works very well, with a little help from the `Blockly.Dart.provideFunction_` function. I would like to mimic the appearance of the procedure blocks, because what I'm thinking of has the same functionality as them. They could even live in the same namespace to avoid name collisions. Blockly functions can start with a upper case letter, so that procedure calls could not be differentiated from class instantiations. Both can have variable inputs and fixed procedure calls.
If this approach hasn't been done already, I'm hoping to use as much code as possible from the procedure blocks.

-Red Panda Apps

PS: I found this discussion here, but nobody has shared their code

Coda Highland

unread,
Sep 28, 2020, 10:13:41 AM9/28/20
to blo...@googlegroups.com
I hadn't shared code because I don't recommend using my code as inspiration. It's kind of organically grown, not neatly architected, and most significantly... um... not finished. But if you really want to look, it's here: https://bitbucket.org/ahigerd/html52d/src/master/

The procedure blocks might be useful as example code but I would advise against trying to shoehorn it into the existing implementation.

I'd be happy to discuss possible approaches here on the list, and I'm sure other developers would as well. Someone on the Blockly team (I think Beka?) is also looking into compiling ideas in order to build a first-party object-oriented Blockly extension.

/s/ Adam

--
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/1b144e72-bbee-40c7-b6ec-f62cbd7f47fbn%40googlegroups.com.

Beka Westberg

unread,
Sep 28, 2020, 6:04:42 PM9/28/20
to blo...@googlegroups.com
Hi! I'm not working on object-oriented programming specifically but I am working on a connection checker plugin. Once its done it should be able to handle things lists, dictionaries, and generics, which generally come with object-oriented languages =) You can check out the design doc here.

Wrt object-oriented programming, Adam's repo is the only example I've seen of someone implementing that in Blockly. But if you're just interested in gathering design ideas it might be interesting to look at "Snap!" They do object oriented stuff using the concept of "cloning" from Scratch.

Oh and as for living in the same namespace as procedures, I think that would be tricky because all of the logic is based on procedures blocks having specific functions like getProcedureDef, which don't really make sense for an object-definition block. It would probably be easier to get them to live in the same namespace as variables using variable typing. But then of course all of your object variables have the same "type" which may or may not be a problem for Dart hehe.

Best of luck with your project!
--Beka




Red Panda

unread,
Sep 29, 2020, 6:11:54 AM9/29/20
to Blockly
Thanks for your suggestions, I will look into them when I have time. Just to be clear, I'm not searching for a complete object-oriented version. I only want to have class definition and class instantiation blocks.

-Red

Vadym Kozyak

unread,
Oct 1, 2020, 3:28:11 AM10/1/20
to Blockly
Hi. You could take a look at Codejig editor for inspiration. It is a kind of object-oriented and translates into Java (server-side) or JavaScript (client-side). Inheritance, interfaces, generics and so on are not supported. On the other hand it is possible to mix Blockly code with Java/JavaScript via 'native code' block (see screenshot) and use those things when needed. Maybe this approach would work for you.

Regards,
Vadym

Red Panda

unread,
Oct 6, 2020, 5:13:27 PM10/6/20
to Blockly
I've decided to stick with my suggestion of reusing parts of the procedure blocks. This might not be the cleanest solution, but the functionality has such a big overlap that I don't want to create too much redundancy. I already did some experiments and they do just what I want. I just used a trick where all procedures which return values are differentiated based on whether they start with an upper or lower case letter. The lower case ones are normal procedures and the upper case ones are class definitions. I will post the code here once I have the code cleaned up and working properly.

-Red

Coda Highland

unread,
Oct 7, 2020, 3:48:02 PM10/7/20
to blo...@googlegroups.com
I didn't say you shouldn't reuse any of it. I was saying it wouldn't be a good idea to try to force the implementation to work directly. By all means, I support the idea of copying out the parts that work. No reason to reinvent those parts!

Good luck with your approach!

/s/ Adam

Red Panda

unread,
Oct 10, 2020, 8:44:25 AM10/10/20
to Blockly
I've now a working version which does what I wanted it to. You can find it at https://gist.github.com/10MINT/2c90a732ca2bc54ece8c7affb1a9422f. I ended up combining a 'procedures_defnoreturn' block with a 'procedures_callreturn' block. Here are some notes on that:
  • both blocks share the same namespace, otherwise we wouldn't be able to differentiate the procedure 'do_something' from the class constructor with the same name
  • I ended up not implementing any name restrictions to stay consistent with blockly and because in Dart, while giving warnings, lower case first characters and underscores are allowed in class names
  • the user cannot define class functions, so you would have to provide functions manually that take an instance as the input
  • the statements you put in are executed in the constructor and the caller returns an instance of the class
  • you can pass input variables, but without a variable scope and Blockly's global variable system, there is not really a way to make use of that at the moment
TLDR; The block does not seem useful without a proper type system, but it does what I wanted it to do

-Red

Chris Warkentin

unread,
May 7, 2021, 2:32:48 PM5/7/21
to Blockly
Not exactly what you've been doing but in my case the code I'm generating is being inserted into a python class template. I co-opted the procedures code generation to basically prepend 'self' to all functions and add a 'self' argument to each function, effectively generating methods. I also added the notion of class variables which introduced a few complications but seem to work well enough.
Screenshot 2021-05-07 143155.png
I'm still struggling with the fact that blockly doesn't seem to have any notion of variable scope so everything just shows up everywhere. Gets messy.

cheers,

Chris


Reply all
Reply to author
Forward
0 new messages