Changing the layout in GWT

92 views
Skip to first unread message

Red Panda

unread,
Oct 2, 2018, 1:53:19 PM10/2/18
to App Inventor Open Source Development
I want to change the appearance of App Inventor, but unfortunately I am not familiar with GWT. If someone has the time to explain how to change it, it would be very helpful. Note: I am fluent in Java, HTML, CSS and JS and I played around with Blockly a bit. If you don't have time explaining any details, it would still be nice to answer some of my questions.
  • Where do I inject Blockly in the page?
  • Where are my instance's "settings", i.e. where can I change the version number, for example?
  • Where do I define that, for example, a new project button goes here and when I click it xyz happens?
  • Is appinventor/appengine/war/gwt.css the right css file?
I assume that all relevant files for the web page are in the folder "appinventor/appengine".

-Red Panda

Evan Patton

unread,
Oct 9, 2018, 1:55:04 PM10/9/18
to App Inventor Open Source Development
Hi Red Panda,

The answer is "it's complicated." Most of the UI is built up programmatically by constructing the various GWT panels, etc. The root is Ode.java, and things branch out from there. There are also some MVC-like tricks that are done so that only one object is kept around (e.g., SourceStructureExplorer and the like). To answer your immediate questions:

1) The BlocklyPanel class is a GWT panel that represents the Blockly workspace. There is a one-to-one correspondence with the YaBlocksEditor class.
2) Version numbers are all defined in YaVersion.java. You may also specify a version number for the appengine deployment in appenbuild/war/WEB-INF/appengine-web.xml
3) That will depend on what changes you want to make. As I mentioned previously, there are different classes that construct the different elements of the UI.
4) There are four CSS files you will need to look at. They are gwt.css, Ya.css, blockly.css, and ai2blockly.css.

If you have more questions, feel free to continue adding to this thread.

Regards,
Evan

Abhijith Dominic

unread,
Aug 16, 2019, 2:00:40 PM8/16/19
to App Inventor Open Source Development
Hi,
Is this Compatible with AppInventor GWT? https://gwtmaterialdesign.github.io/gwt-material-demo/
Reply all
Reply to author
Forward
0 new messages