[View]  [Edit]  [Lock]  [References]  [Attachments]  [History]  [Home]  [Changes]  [Search]  [Help] 

mobile[app] 04 - Mobile workspace

Description

The tool let you connect to a mobile/remote s8 server and send expressions to be evaluated by the server.
It is used to evaluate commands on mobile devices.

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'
NoteYou can open the tool opening this link in a new tab
(be patient can take some seconds to open the tool)

How we built this tool?

This tool is built from a draft specificacion of the UI.
The draft is used to implement the UI as an spec of Mobile framework.
The Mobile framework is loaded in the system (if not already present) and the UI is instantiated from the spec.

The server side code is already implemented, and has been tested (but... needs more testing in real world).
The server includes a chat system where users can communicate sending texts and/or evaluating S8 code remotelly.

Draft of the UI

Uploaded Image: draft1.jpg
On server side we do not need UI nor extended functionality.
The UI for client side (user) environments has three major stages:
  1. Connecting to a server
  2. Identification (as a chat user)
  3. Sending texts and chunks to other users to change multiple/remote systems.

Client side UI has 5 levels of cascading:
  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
  3. Tools page
  4. Workspace tool page
  5. Chat tool page

NoteThe list of tools will grow inteh future with more remote tools like browsers, system analyzers, debuggers, etc

Implementation


to load robot and mobile frameworks:
1- place the following js files from http://u8.smalltalking.net/profile/aleReimondo/Swiki/ and http://u8.smalltalking.net/profile/aleReimondo/Mobile/

then in image workspace:

'swiki.st.js' fileContents is not nil
Compiler new eval: 'swiki.st.js' fileContents

'Mobile.core.js' fileContents is not nil
Compiler new eval: 'Mobile.core.js' fileContents

'Mobile.st.js' fileContents is not nil
Compiler new eval: 'Mobile.st.js' fileContents

'Mobile.web.js' fileContents is not nil
Compiler new eval: 'Mobile.web.js' fileContents

'MobileDevice.st.js' fileContents is not nil
Compiler new eval: 'MobileDevice.st.js' fileContents"

"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"

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.