mobile[app] 04 - Mobile workspace

Description

How to run this tool?

1. Start the Cmd8 server
   Note:The Cmd8 server is included as demostration of a node.js S8 server (See node framework files).
2. Open the U8 environment with media tools
3. Evaluate the following expression (showIt/doIt) in a workspace
   SwikiCodeRobot @> 'swiki:s8-media/81'

How we built this tool?

Draft of the UI

1. Connecting to a server
2. Identification (as a chat user)
3. Sending texts and chunks to other users to change multiple/remote systems.

1. ConnectTo page: Let the user enter the URL of the server to access
   Two fields are presented:
   1. Server URL with default contents of http://localhost:8080
   2. Nickname with default contents given by U8Configuration userName (if it exists in the systrem)
2. Targets page
   • Let the user define one or more targets to chat with
   • Presents
     • an entry with defaults to #all
     • a text help explaining that the field can state nicknames separated by comma; and if #all is used will broadcast to all clients (also the sender)
3. Tools page
   • Present a list of tools to interact with target(s)
   • The list (by now) will contain access to:
     1. Workspace tool >
     2. Chat tool >
4. Workspace tool page
   • Preset text to enter s8 commands to send to target(s)
   • Buttons for actions (doIt, showIt, eval, fileIn), that will send actions commands to targets when pressed
   • Upon reception of results from clients, the workspace selection is appended with result (and client's nickname if possible)
5. Chat tool page
   • Present a text edit (multiline)
   • Button to send text in edit box
   • upon reception of results the selection in text edit will be appended with text (and client's nickname if possible)

Implementation

"Ensure Mobile framework is loaded and verify we are running in a supported platform"
(SwikiCodeRobot @ #mobile) process: #s8-media tagged: #core.

"Ensure connectivity layer and Cmd8Client is loaded"
self require: #WebSocket.
self require: #Cmd8Client in: #( 'u8:aleReimondo/Node/Cmd8.st.js' ).

"Creating Cmd8Tool"
Smalltalk at: #WebSocket ifAbsent: [
  self alert: 'WebSockets required'.
  self abort
]!

Object
	subclass: #Cmd8Tool
	instanceVariableNames: ' targets outboundCmd answer '
	category: #Cmd8 !



 ! Cmd8Tool methodsFor: #accessing !
answer
	"Implementation note: receiver's anser could be a set of answers of many responding cmdClients"
	
	^answer! !

 ! Cmd8Tool methodsFor: #accessing !
outboundCmd
	" Answer receiver's outbound command"
	
	^outboundCmd ! !

 ! Cmd8Tool methodsFor: #accessing !
outboundCmd: aCommand
	" Set receiver's command"
	"Implementation note: aCommand is a chunk, text, an expression, a javascript"
	
	outboundCmd:= aCommand! !

 ! Cmd8Tool methodsFor: #accessing !
setTargets: aCollection
	" Set receiver targets"
	" Implementation Note: a collection of target Cmd8Clients"

	targets:= aCollection! !

 ! Cmd8Tool methodsFor: #accessing !
source
	" Implementation Note: the Cmd8Client initiating communication"

	^Cmd8Client current! !

 ! Cmd8Tool methodsFor: #accessing !
targets
	" Answer communication targets"
	" Implementation Note: a collection of target Cmd8Clients"

	targets isNil ifTrue: [targets:= Array new].
	^targets! !

"Compiling spec and open the UI"
| spec tab |
tab :=  (
     	(#tool -> 'server' ),
     	(#coordinator -> 
     		(
    			(#class -> #MobileEditor ),
      			(#configuration -> 
      				(
         				(#title -> 'Mobile workspace'),
         				(#navigationBar -> (
          					(#right ->
            					(#add -> [:coordinator | 
            						(coordinator @ #targets) done.
            						
            						coordinator applicationModel 
            							targets: (coordinator @ #targets ) text trimBlanks;
            							yourself.
            						coordinator thread next: (coordinator newTemplateAt: #ToolsMenu) ])
          					))
         				),
         				(#widgets -> (
           					
             				(#cmd8Label -> (
            					(#type -> #label ),
            					(#configuration -> (
               						(#order -> 1 ), 
               						(#height -> 40), 
               						"(#backgroundColor -> 'white'),"
               						(#text -> 'Cmd8')",
               						(#color -> 'blue')"
                				)) 
                			)),
                                (#targets -> (
            					(#type -> #textField ),
            					(#configuration -> (
               						(#order -> 2 ),
               						(#height -> 40),
               						(#defaultText -> ''),
               						(#width -> 300), 
                					(#background -> 'white'),
                					(#color -> 'black'),
                					(#keyboardType -> 'numberPad'),
                					(#border -> 'roundedRect'),
                					(#autocapitalizationType -> #none),
                					(#autocorrectionType -> #none),
                					(#spellCheckingType -> #none),
                					(#returnKeyType -> #done),
               						(#listeners -> (
                						(#done: -> [:coordinator :field | coordinator applicationModel targets: (coordinator @ #targets) text.  ])
                
     								)) 
     							))  
     						)),

                                (#separator -> (
            					(#type -> #line ),
            					(#configuration -> (
               						(#order -> 3 ),
               						(#height -> 10), 
                					(#background -> 'blue') 
                				  )) 
                			     )),
				           (#targetsLabel -> (
            					(#type -> #label ),
            					(#configuration -> (
               						(#order -> 4 ), 
               						(#height -> 40), 
               						"(#backgroundColor -> 'white'),"
               						(#text -> 'Targets')",
               						(#color -> 'blue')"
                				)) 
                			)),
         
         				
			(#listeners -> (
				(#built: -> [:coordinator | self print: coordinator applicationModel toString. 
											(coordinator @ #targets) text: (coordinator applicationModel targets). 
											])
    		)) 
    	)
      ) 
    )
	) 
    ).
spec := (
 (#threads -> ((1 -> tab)) ),
(#templates -> (
   (#ToolsMenu -> toolsMenuView),
   (#WorkspaceTool -> workspaceToolView),
   (#ChatTool -> chatToolView)
 )),
 (#listeners -> (#needsModel -> [ Cmd8Tool new  yourself. ])
  (#opened -> [:application | application current coordinator application model ensureConnectivity]
  )
) json.
MobileApplication open: spec.