Code Bubbles

<?xml version="1.0" encoding="UTF-8"?>  <XholonWorkbook> <Notes><![CDATA[ Xholon ------ Title: Code Bubbles Description: Rethinking the User Interface Paradigm of Integrated Development Environments Url: http://www.andrewbragdon.com/codebubbles_site.asp InternalName: YoutubeId: Keywords: My Notes -------- I found Andrew Bragdon's interesting Code Bubbles site today. Code is viewed as "collections of lightweight, editable fragments called bubbles, which form concurrently visible working sets". The code fragments organize themselves into non-overlapping groupings. This could be a useful way to organize the editors on this page. Currently, the default Xholon Workbook has 11 editors, arranged sequentially on this page, which is all quite arbitrary. It should be possible to have any number of editors, and it would be nice if they would organize themselves in some logical way. Since a Xholon app does have a tree and network structure already, it would make sense to organize the bubbles in the same way. A bubble would just be an enlargement of a node in the tree. Code Bubbles use an algorithm to size and position themselves to take up a minimum of space, while still being convenient for developers to work with. Individual bubbles and collections of bubbles can be moved around on the screen. It's designed to work with large numbers of code fragments at the same time. The initial Java and Eclipse prototype can work with various types of text including code, notes, Javadocs, bugs, etc. However, the more recent work is being done with C# and VB on Microsoft Visual Studio. Xholon Workbook currently uses a single run-time overlay, which appears by clicking the Run button above. The Code Bubbles concept would suggest having many more overlays, both design-time and run-time. As an initial quick prototype, I can use the same code used in the run-time overlay. Xholon Workbook uses jQuery UI Dialog. :: http://jqueryui.com/demos/dialog/ A basic dialog overlay is created using the following code :: var myOverlay = $("div.AboutXholon").dialog({ position: ['center','top'], width: '400px', title: '<p>' + 'Testing' + '</p>', close: function(event, ui) {println('TODO restore styles of the original div');} }); How to run this code :: Click the Run button above. Copy the above code from the editor, and paste it into the textarea in the run-time overlay. Click the Submit button in the overlay. These overlays are not yet very much like the Code Bubbles that Andrew Bragdon describes. They don't self-organize into groups, and they don't change their size. Another project with somewhat similar ideas is the light-table IDE. The prototype uses multiple editors based on CodeMirror. It is currently raising funds at KickStarter :: http://chris-granger.com http://www.kickstarter.com/projects/ibdknox/light-table One difference between these two projects, and Xholon and Xholon Workbook, is that the IDE projects focus on code, while Xholon focuses on the structure of the app and only secondarily on the code. With Xholon, the "bubbles" are already organized into a structure that the code lives in. The Xholon two-step is :: (1) Build a structured world (2) Populate the world with behaviors ]]></Notes> <script implName="lang:python:inline:"><![CDATA[ print "Code Bubbles" ]]></script> <script implName="lang:javascript:inline:"><![CDATA[ print("\nCode Bubbles"); ]]></script> <_-.XholonClass>  <IdeSystem/> <CodeBubbles/> <Bubble> <DesignTimeBubble/>  <RunTimeBubble/>  </Bubble> </_-.XholonClass> <xholonClassDetails> </xholonClassDetails> <IdeSystem> <CodeBubbles> <Bubble multiplicity="10"/> </CodeBubbles> </IdeSystem> <Blockbehavior implName="lang:python:inline:"><![CDATA[ # This works if pasted in as a last child of Block. height.incVal(0.02) print("Python wants something to do. Height:" + str(height)) ]]></Blockbehavior> <Blockbehavior implName="lang:javascript:inline:"><![CDATA[ // This works if pasted in as a last child of Block. height.incVal(0.02); print("JavaScript wants something to do. Height:" + height + "\n"); ]]></Blockbehavior> <Bubblebehavior implName="lang:webEditionjs:inline:"><![CDATA[ print("\nI am bubble " + this.parent().attr("id")); ]]></Bubblebehavior> <Blockbehavior implName="lang:bsh:inline:"><![CDATA[ // This works if pasted in as a last child of Block. height.incVal(0.02); System.out.print("Java/Beanshell wants something to do. Height:" + height + "\n"); ]]></Blockbehavior> <Blockbehavior implName="lang:jruby:inline:"><![CDATA[ require 'java' # This works if pasted in as a last child of Block. $height.incVal(0.02) puts "Ruby wants something to do. Height: #{$height}" ]]></Blockbehavior> <Blockbehavior implName="lang:groovy:inline:"><![CDATA[ // This works if pasted in as a last child of Block. height.incVal(0.02); System.out.print("Groovy wants something to do. Height:" + height + "\n"); ]]></Blockbehavior> <SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml, <svg width="100" height="50" xmlns="http://www.w3.org/2000/svg"> <g> <title>Code Bubbles</title> <rect id="PhysicalSystem/Block" fill="#98FB98" height="50" width="50" x="25" y="0" rx="10"/> </g> </svg> ]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient> </XholonWorkbook>