core for app development

Makefile

@@ -1,14 +1,16 @@
 
 
 BUILDDIR = build/htdocs
-BLUE=\033[0;34m
+BLUE=\033[1;34m
 NC=\033[0m
 
 coffees= 	src/define.coffee\
-        	src/core/apis/api.coffee\
+        	src/core/api.coffee\
-        	src/core/apis/handlers/InBrowserHandler.coffee\
+			src/core/processes.coffee\
+        	src/core/handlers/InBrowserHandler.coffee\
         	src/core/gui/gui.coffee\
 			src/core/gui/BaseApplication.coffee\
+			src/core/gui/BaseEvent.coffee\
         	src/antos.coffee
 
 tags=	src/core/gui/tags/afx-button.js\
@@ -18,7 +20,9 @@ tags=	src/core/gui/tags/afx-button.js\
         src/core/gui/tags/afx-app-window.js\
         src/core/gui/tags/afx-vbox.js\
         src/core/gui/tags/afx-hbox.js\
-        src/core/gui/tags/afx-list-view.js
+        src/core/gui/tags/afx-list-view.js\
+		src/core/gui/tags/afx-tree-view.js \
+		src/core/gui/tags/afx-grid-view.js 
 
 antos_themes = 	src/core/gui/themes/antos/font-awesome.css\
         		src/core/gui/themes/antos/ubuntu-regular.css\
@@ -28,19 +32,23 @@ antos_themes = 	src/core/gui/themes/antos/font-awesome.css\
         		src/core/gui/themes/antos/afx-menu.css\
         		src/core/gui/themes/antos/afx-sys-panel.css\
         		src/core/gui/themes/antos/afx-dock.css\
+				src/core/gui/themes/antos/afx-list-view.css\
+				src/core/gui/themes/antos/afx-tree-view.css\
+				src/core/gui/themes/antos/afx-grid-view.css\
         		src/core/gui/themes/antos/afx-app-window.css 
 
 
-packages = NotePad
 
-main: build_coffee build_tag build_theme schemes libs packages_builds
+packages = NotePad Terminal ActivityMonitor
+
+main: clean build_coffee build_tag build_theme schemes libs build_packages
 	- cp src/index.html $(BUILDDIR)/
 
 #%.js: %.coffee
 #		coffee --compile $< 
 
 build_coffee:
-	- echo "$(BLUE)=======Building coffee files=======$(NC)"
+	@echo "$(BLUE)=======Building coffee files=======$(NC)"
 	- mkdir $(BUILDDIR)/scripts
 	- rm $(BUILDDIR)/scripts/antos.js
 	for f in $(coffees); do (cat "$${f}"; echo) >> $(BUILDDIR)/scripts/antos.coffee; done
@@ -49,36 +57,37 @@ build_coffee:
 
 
 libs:
-	- echo "$(BLUE)=======Copy lib files=======$(NC)
+	@echo "$(BLUE)=======Copy lib files=======$(NC)"
-	- cp -rf src/libs/* $(BUILDDIR)/scripts
+	cp -rf src/libs/* $(BUILDDIR)/scripts/
 
 schemes:
-	- echo "$(BLUE)=======Copy schemes files======= $(NC)"
+	@echo "$(BLUE)=======Copy schemes files======= $(NC)"
 	- mkdir -p $(BUILDDIR)/resources/schemes
-	- cp src/core/gui/schemes/* $(BUILDDIR)/resources/schemes
+	cp src/core/gui/schemes/* $(BUILDDIR)/resources/schemes/
 	
 build_tag:
-	- echo "=======$(BLUE)Building tag files=======$(NC)"
+	@echo "=======$(BLUE)Building tag files=======$(NC)"
 	-mkdir $(BUILDDIR)/resources 
 	-rm $(BUILDDIR)/resources/antos_tags.js
-	- for f in $(tags); do (cat "$${f}"; echo) >> $(BUILDDIR)/resources/antos_tags.js; done
+	for f in $(tags); do (cat "$${f}"; echo) >> $(BUILDDIR)/resources/antos_tags.js; done
 
 build_theme: antos_themes_build
 
 
 antos_themes_build:
-	- echo "=======$(BLUE)Building themes name: antos=======$(NC)"
+	@echo "=======$(BLUE)Building themes name: antos=======$(NC)"
+	-rm -rf $(BUILDDIR)/resources/themes/antos/*
 	-mkdir -p $(BUILDDIR)/resources/themes/antos
-	- for f in $(antos_themes); do (cat "$${f}"; echo) >> $(BUILDDIR)/resources/themes/antos/antos.css; done
+	for f in $(antos_themes); do (cat "$${f}"; echo) >> $(BUILDDIR)/resources/themes/antos/antos.css; done
 	-mkdir -p $(BUILDDIR)/resources/themes/antos/fonts
-	- cp -rf src/core/gui/themes/antos/fonts/* $(BUILDDIR)/resources/themes/antos/fonts
+	cp -rf src/core/gui/themes/antos/fonts/* $(BUILDDIR)/resources/themes/antos/fonts
-	- cp src/core/gui/themes/antos/wallpaper.jpg $(BUILDDIR)/resources/themes/antos/
+	cp src/core/gui/themes/antos/wallpaper.jpg $(BUILDDIR)/resources/themes/antos/
 
 
-packages_builds:
+build_packages:
 	- mkdir $(BUILDDIR)/packages
-	- for d in $(packages); do (cd src/packages/$$d; make);done
+	for d in $(packages); do (cd src/packages/$$d; make);done
-	- for d in $(packages); do ( test -d $(BUILDDIR)/packages/$$d || mkdir -p $(BUILDDIR)/packages/$$d && cp -rf src/packages/$$d/build/* $(BUILDDIR)/packages/$$d/);done
+	for d in $(packages); do ( test -d $(BUILDDIR)/packages/$$d || mkdir -p $(BUILDDIR)/packages/$$d && cp -rf src/packages/$$d/build/* $(BUILDDIR)/packages/$$d/);done
-	- for d in $(packages); do ( test -d src/packages/$$d/build && rm -r src/packages/$$d/build ); done
+	for d in $(packages); do ( test -d src/packages/$$d/build && rm -r src/packages/$$d/build ); done
 clean:
 	rm -rf $(BUILDDIR)/*

src/antos.coffee

@@ -1,6 +1,7 @@
 _GUI = self.OS.GUI 
 _API = self.OS.API 
 _APP = self.OS.APP
+_PM  = self.OS.PM
 this.onload = () ->
     console.log "Booting the os"
     self.OS.boot()

src/core/api.coffee

@@ -13,13 +13,12 @@ self.OS.API =
         _API.request 'config', (result) ->
             console.log  result
     
-    get:(p,c)=>
+    get:(p,c,f)->
         $.get p 
         .done (data) -> 
             c(data) 
         .fail ->
-            alert "cannot get data"
+            f()
-            c(null)
     resource: (resource,callback) ->
         path = "resources/#{resource}"
         _API.get path,callback

src/core/gui/BaseApplication.coffee

@@ -1,21 +1,88 @@
+self = this
+_PM = self.OS.PM
+_APP = self.OS.APP
 class BaseApplication  
     constructor: (@name) ->
         @observable = riot.observable()
+        @pid = 0
+        @_api = self.OS.API
     init: ->
-        #first load the scheme
+        me = @
+        # first register some base event to the app
+        @on "exit", ()-> me.quit()
+        @on "focus", () -> 
+            me.sysdock.set "selectedApp", me 
+            me.appmenu.pid = me.pid
+            me.appmenu.set "items", (me.baseMenu() || [])
+            me.appmenu.set "onmenuselect", (d)->
+                me.trigger("menuselect",d)
+        @on "hide", ()->
+            me.sysdock.set "selectedApp", null
+            me.appmenu.set "items",[]
+        @on "menuselect", (item) ->
+            switch item.data.dataid
+                when "#{me.name}-about" then alert "About " + me.pid + me.name
+                when  "#{me.name}-exit" then me.trigger "exit"
+        #now load the scheme
         path = "packages/#{@name}/scheme.html"
-        @scheme = _GUI.loadScheme path,@observable
+        _GUI.loadScheme path ,this
-        #if(!scheme) bug repporter go here
+
-        @event()
-    event: ->
-        #implement by subclasses
     on: (e,f) -> @observable.on e,f
+
     trigger:(e,d) -> @observable.trigger e,d
+    
+    show: () ->
+        @observable.trigger "focus"
+    
+    blur: () ->
+        @.appmenu.set "items",[] if @.appmenu and @.pid == @.appmenu.pid
+        @observable.trigger "blur"
+    
+    hide: () ->
+        @observable.trigger "hide"
+    
+    toggle:() ->
+        @observable.trigger "toggle"
+    
+    quit: () ->
+        evt = new _GUI.BaseEvent("exit")
+        @exit(evt)
+        if not evt.prevent
+            @.appmenu.set "items",[] if @.pid == @.appmenu.pid
+            _PM.kill(@)
+            ($ @scheme).remove()
+    
+    find: (id) -> ($ "[data-id='#{id}']",@scheme)[0]
+    
+    baseMenu:->
+        menu =
+            [{
+                text:_APP[@name].meta.name, 
+                child:[
+                    {text:"About", dataid:"#{@name}-about"},
+                    {text:"Exit", dataid:"#{@name}-exit"}
+                ]
+            }]
+        menu = menu.concat @menu() || []
+        menu
+            
+    main: ->
+        #main program
+        # implement by subclasses
+    menu: ->
+        # implement by subclasses
+        # to add menu to application
+        []
     open:->
         #implement by subclasses
     data:->
         #implement by subclasses
+        # to return app data
     update:->
         #implement by subclasses
-
+    exit: (e) ->
+        #implement by subclasses
+        # to handle the exit event
+        # use e.preventDefault() to
+        # discard the quit command
 this.OS.GUI.BaseApplication = BaseApplication       

src/core/gui/BaseEvent.coffee

@@ -0,0 +1,7 @@
+class BaseEvent 
+    constructor: (@name) ->
+        @prevent = false
+    preventDefault:()->
+        @prevent = true
+
+this.OS.GUI.BaseEvent = BaseEvent

src/core/gui/gui.coffee

@@ -1,82 +1,109 @@
 self.OS.GUI =
-    tagPath: "resources/tags/"
     init: () ->
         query = 
             path: 'VFS/get'
             data: "#{_GUI.tagPath}/tags.json"
         self.OS.API.request query, ()->
             
-    loadScheme: (path, obs) ->
+    loadScheme: (path,app) ->
-        _API.get path, (x) ->
+        _API.get path, 
+        (x) ->
             return null unless x
             scheme =  $.parseHTML x
             ($ "#desktop").append scheme
-            riot.mount ($ scheme), {observable:obs}
+            riot.mount ($ scheme), {observable:app.observable}
-            scheme
+            app.scheme = scheme[0]
+            app.show()
+            app.main()
+        , (f) ->
+            alert "cannot load scheme"
+
     loadTheme: (name) ->
         path = "resources/themes/#{name}/#{name}.css"
         $ "head link#ostheme"
             .attr "href", path
+
     launch: (app) ->
         if not _APP[app]
             # first load it
-            path = "packages/#{app}/main.js"
+            path = "packages/#{app}/"
-            $.getScript path
+            $.getScript path + "main.js"
                 .done (e,s) ->
+                    #load css file
+                    $.get "#{path}main.css", () ->
+                        $ '<link>', {rel:'stylesheet', type:'text/css', 'href':"#{path}main.css"}
+                            .appendTo 'head'
                     #launch
-                    _app = new _APP[app]
+                    if _APP[app]
-                    _app.init()
+                        # load app meta data
+                        _API.get "#{path}package.json",
+                            (data) ->
+                                _APP[app].meta = data 
+                                _PM.createProcess app, _APP[app]
                                 console.log "Fist time loading "+app
+                            ,(e,s)->
+                                alert "cannot read application, meta-data"   
                 .fail (e,s) ->
                     #BUG report here
                     console.log "bug report"
         else
             # now launch it
-            _app = new _APP[app]
+            if _APP[app]
-            _app.init()
+                _PM.createProcess app, _APP[app]
+    dock: (app,meta) ->
+        # dock an application to a dock
+        # create a data object
+        data = 
+            icon:null
+            iconclass:meta.iconclass||""
+            app:app
+            onbtclick:() ->
+                app.toggle()
+        data.icon = "packages/#{meta.app}/#{meta.icon}" if meta.icon
+        data.iconclass = "fa fa-cogs" if (not meta.icon) and (not meta.iconclass)
+        dock = $ "#sysdock"
+        dock.get(0).newapp data
+        app.sysdock = dock.get(0)
+        app.appmenu = ($ "[data-id = 'appmenu']","#syspanel")[0]
+        app.init()
+        #app.show() -- notwork, sice the scheme is not loaded yet
+
+    undock: (app) ->
+        ($ "#sysdock").get(0).removeapp app
+
     initDM: ->
         _API.resource "schemes/dm.html", (x) ->
             return null unless x
             scheme =  $.parseHTML x 
             ($ "#wrapper").append scheme
-            #riot.mount $ "#button", $ "#wrapper"
+            ($ "#desktop").on "click", (e)->
+                return if e.target isnt ($ "#desktop").get(0)
+                ($ "#sysdock").get(0).set "selectedApp",null
+            
             osmenu = {child:[
-                {text:"",icon:"fa fa-circle", child:[
+                {text:"",iconclass:"fa fa-eercast", child:[
                     {text:"About"},
-                    {text:"System Preferences", icon:"fa fa-commenting"},
+                    {text:"System Preferences", iconclass:"fa fa-commenting"},
-                    {text:"Applications",child:[{text:"Terminal"},{text:"Text edit"}]},
+                    {text:"Applications",child:[
+                            {text:"Terminal",type:"app"},
+                            {text:"NotePad",type:"app", icon:"packages/NotePad/icon.png"},
+                            {text:"ActivityMonitor",type:"app"}
+                        ]},
                     {text:"Logout"}
                     ]}
-                ],
+                ],onmenuselect: (item)-> 
-            onmenuselect: (item)-> 
+                    switch item.data.type
-                console.log item
+                        when "app" then _GUI.launch item.data.text
-                _GUI.launch "NotePad"
             }
-            appmenu = {child:[
+            appmenu = {child:[]}
-                {text:"Text edit", child:[
-                    {text:"About"},
-                    {text:"Preferences"},
-                    {text:"Exit"}
-                    ]},
-                {text:"File",child:[
-                    {text:"Open"},{text:"Save"}]}
-                ],
-            onmenuselect: (item)-> console.log item}
             systray = {child:[
                 {text:"Sun 22:57 6 August 2017"},
-                {text:"",icon:"fa fa-search"},
+                {text:"",iconclass:"fa fa-search"},
-                {text:"",icon:"fa fa-commenting"}
+                {text:"",iconclass:"fa fa-commenting"}
                 
-                ],
+                ],onmenuselect: (item)-> 
-            onmenuselect: (item)-> 
                     console.log item
             }
 
             riot.mount ($ "#syspanel", $ "#wrapper"),{osmenu:osmenu,appmenu:appmenu,systray:systray}
-
+            riot.mount ($ "#sysdock", $ "#wrapper"), {items:[]}
-            docks = {items:[
-                {icon:"fa fa-cogs"},
-                {icon:"fa fa-life-ring"},
-                {icon:"fa fa-cubes"}
-            ]}
-            riot.mount ($ "#sysdock", $ "#wrapper"), docks

src/core/gui/tags/afx-app-window.js

@@ -1,8 +1,8 @@
-<afx-app-window ref = "window">
+<afx-app-window ref = "window" >
-    <div  class = "afx-window-wrapper" >
+    <div   class = "afx-window-wrapper">
-        <ul class= "afx-window-top">
+        <ul class= "afx-window-top" >
-            <li class = "afx-window-close"></li>
+            <li class = "afx-window-close" onclick = {close}></li>
-             <li class = "afx-window-minimize"></li>
+             <li class = "afx-window-minimize" onclick = {minimize}></li>
              <li class = "afx-window-maximize" onclick={maximize}></li>
              <li  ref = "dragger" class = "afx-window-title">{ apptitle }</li>
         </ul>
@@ -25,6 +25,32 @@
         var height = opts.height || 300
         this.root.observable = opts.observable || riot.observable()
         if(!window._zidex) window._zidex = 10
+        this.shown = false
+        self.root.set = function(k,v)
+        {
+            if(k == "*")
+                for(var i in v)
+                    self[i] = v[i]
+            else
+                self[k] = v
+            self.update()
+        }
+        self.root.get = function(k)
+        {
+            return self[k]
+        }
+        self.root.update = function()
+        {
+            self.update()
+        }
+        minimize()
+        {
+            this.root.observable.trigger("hide")
+        }
+        close()
+        {
+            this.root.observable.trigger("exit")
+        }
         this.on('mount', function() {
             var left,top 
             left = 20 + Math.floor(Math.random() *  width)
@@ -37,8 +63,13 @@
                 .css("height", height + "px")
                 .css("z-index",window._zidex++)
             $(self.refs.window).on("mousedown", function(e){
-                window._zidex++
+                if(self.shown == false)
-                $(self.refs.window).css("z-index",window._zidex)
+                    self.root.observable.trigger("focus")
+            })
+            $(self.refs.window).click(function(e) {
+                //e.stopPropagation()
+                //e.windowactive = true
+                //self.root.observable.trigger("windowselect")
             })
             enable_dragging()
             if(isResize)
@@ -49,6 +80,34 @@
             $(self.refs.content).children().each(function(e){
                 this.observable = self.root.observable
             })
+
+            self.root.observable.on("focus",function(){
+                window._zidex++
+                $(self.refs.window)
+                    .show()
+                    .css("z-index",window._zidex)
+                    .removeClass("unactive")
+
+                self.shown = true
+            })
+            self.root.observable.on("blur", function(){
+                self.shown = false
+                $(self.refs.window)
+                    .addClass("unactive")
+                // add css to blur app :)
+            })
+            self.root.observable.on("hide", function()
+            {
+                $(self.refs.window).hide()
+                self.shown = false
+            })
+
+            self.root.observable.on("toggle", function(){
+                if(self.shown)
+                    self.root.observable.trigger("hide")
+                else 
+                    self.root.observable.trigger("focus")
+            })
         })
         var enable_dragging = function()
         {
@@ -112,7 +171,8 @@
                         .css("width", w +"px")
                         .css("height",h + "px")
                     isMaxi = false
-                    self.root.observable.trigger('resize',w,h)
+                    self.root.observable.trigger('resize',
+                        {id:$(self.root).attr("data-id"),w:w,h:h})
                 })
                 $(window).on("mouseup", function(e){
                     $(window).unbind("mousemove", null)
@@ -137,7 +197,8 @@
                     .css("width", w + "px")
                     .css("height", h + "px")
                     .css("top","0").css("left","0")
-                self.root.observable.trigger('resize',w,h)
+                self.root.observable.trigger('resize',
+                    {id:$(self.root).attr("data-id"),w:w,h:h})
                 isMaxi = true
             }
             else
@@ -147,7 +208,8 @@
                     .css("width",history.width)
                     .css("height",history.height)
                     .css("top",history.top).css("left",history.left)
-                self.root.observable.trigger('resize',history.width, history.height)
+                self.root.observable.trigger('resize',
+                    {id:$(self.root).attr("data-id"),w:history.width,h:history.height} )
             }
             
         }

src/core/gui/tags/afx-apps-dock.js

@@ -1,7 +1,60 @@
 <afx-apps-dock>
-    <afx-button each={ items } icon = {icon} text = {text}>
+    <afx-button class = {selected: parent.selectedApp && app.pid == parent.selectedApp.pid} each={ items } icon = {icon} text = {text} onbtclick = {onbtclick}>
     </afx-button>
     <script>
-        this.items = opts.items
+        this.items = opts.items || []
+        var self = this
+        self.selectedApp = null
+        self.root.set = function(k,v)
+        {
+            if(k == "*")
+                for(var i in v)
+                    self[i] = v[i]
+            else
+            {
+                self[k] = v
+                if(k == "selectedApp")
+                { 
+                    for(var i in self.items)
+                        self.items[i].app.blur()
+                    //v.show()
+                }
+            }
+            self.update()
+        }
+        self.root.newapp = function(i)
+        {
+            self.items.push(i)
+            self.selectedApp = i.app
+            self.update()
+            for(var i in self.items)
+                self.items[i].app.blur()
+        }
+    
+        self.root.removeapp = function(a)
+        {
+            var i = -1;
+            for(var k in self.items)
+                if(self.items[k].app.pid == a.pid)
+                {
+                    i = k; break;
+                }
+            if(i != -1)
+            {
+                delete self.items[i].app
+                self.items.splice(i,1)
+                
+                self.update()
+            }
+        }
+        self.root.get = function(k)
+        {
+            return self[k]
+        }
+        self.root.update = function()
+        {
+            self.update()
+        }
+        
     </script>
 </afx-apps-dock>

src/core/gui/tags/afx-button.js

@@ -1,20 +1,41 @@
 <afx-button>
     <button disabled={ enable == "false" } onclick="{ _onbtclick }"  > 
-        <i class = { icon } ></i> 
+        <i if={iconclass} class = {iconclass} ></i>
+        <i if={icon} class="icon-style" style = { "background: url("+icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
         { opts.text }
     </button>
     <script>
         this.enable = opts.enable
         this.icon = opts.icon
+        this.iconclass = opts.iconclass
         var self = this
+        
+        self.root.set = function(k,v)
+        {
+            if(k == "*")
+                for(var i in v)
+                    self[i] = v[i]
+            else
+                self[k] = v
+            self.update()
+        }
+        self.root.get = function(k)
+        {
+            return self[k]
+        }
+        self.root.update = function()
+        {
+            self.update()
+        }
         this._onbtclick = function(e)
         {
-            if(opts.onbtclick)
+            if(typeof opts.onbtclick == 'string')
-                eval(opts.onbtclick)
+                eval(opts.onbtclick())
+            else if(opts.onbtclick)
+                opts.onbtclick()
             if(self.root.observable)
             {
-                console.log("btclick")
+                self.root.observable.trigger("btclick",{id:$(self.root).attr("data-id"),data:self.root})
-                self.root.observable.trigger("btclick",this)
             }
         }
     </script>

src/core/gui/tags/afx-grid-view.js

@@ -0,0 +1,162 @@
+<afx-grid-view>
+    <afx-grid-row ref="gridhead" rootid = {rid} observable = {root.observable} header="true" class = {grid_row_header:header} if = {header} cols = {header}> </afx-grid-row>
+    <div ref = "scroller" style="width:100%; overflow:auto;">
+        <div ref = "container">
+            <afx-grid-row each={ child, i in rows } class = {selected: child.selected}  rootid = {parent.rid} observable = {parent.root.observable}  cols = {child}  onclick = {parent._select}></afx-grid-row>
+        </div>
+    </div>
+    <script>
+        this.rows= []
+        if(opts.data)
+        {
+            this.header = opts.data.header 
+            this.rows = opts.data.data
+        }
+        var self = this 
+        this.rid = $(self.root).attr("data-id")
+        self.selidx = -1
+        self.nrow = 0
+        self.root.set = function(k,v)
+        {
+            if(k == "selected")
+                self._select({item:self.rows[v], preventDefault:function(){}})
+            else if(k == "*")
+                for(var i in v)
+                    self[i] = v[i]
+            else
+                self[k] = v
+            self.update()
+        }
+        var calibrate_size = function()
+        {
+            if(self.header)
+            {
+                $(self.refs.scroller).css("height",
+                    $(self.root).height() - $(self.refs.gridhead.root).height()
+                + "px")
+            }
+            else
+                $(self.refs.scroller).css("height","100%")
+            
+        }
+        self.root.get = function(k)
+        {
+            if(k == "selected")
+                return (self.selidx == -1?null:self.rows[self.selidx])
+            return self[k]
+        }
+
+        if(opts.observable)
+            this.root.observable = opts.observable
+        else
+        {
+            this.root.observable = riot.observable()
+        }
+
+        this.on("mount", function(){
+            $(self.refs.container)
+                .css("display","flex")
+                .css("flex-direction","column")
+                .css("width","100%")
+            calibrate_size()
+
+            this.root.observable.on("resize",function(){
+                calibrate_size()
+                if(self.refs.gridhead)
+                    self.refs.gridhead.calibrate_size()
+            })
+        })
+        this.on("updated",function(){
+            if(self.selidx >= self.rows.length)
+                self.selidx = -1
+            if(self.nrow == self.rows.length) return
+            self.nrow = self.rows.length
+            calibrate_size()
+            if(self.refs.gridhead)
+                self.refs.gridhead.calibrate_size()
+        })
+        _select(event)
+        {
+            var data = {
+                    id:self.rid, 
+                    data:event.item}
+            if(opts.onlistselect)
+                opts.onlistselect(data)
+            console.log(data)
+            if(self.selidx != -1)
+                self.rows[self.selidx].selected =false
+            self.selidx = event.item.i
+            self.rows[self.selidx].selected = true
+            this.root.observable.trigger('gridselect',data)
+            event.preventUpdate = true
+           self.update()
+           event.preventDefault()
+        }
+    </script>
+</afx-grid-view>
+
+<afx-grid-row>
+    <div style = "flex-grow:1;" each = { child,i in cols } class = {string:typeof child.value == "string", number: typeof child.value == "number"} >
+        <i if={child.iconclass} class = {child.iconclass} ></i>
+        <i if={child.icon} class="icon-style" style = { "background: url("+child.icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
+        {child.value}
+    </div>
+    <script>
+        this.cols = opts.cols || []
+        var self = this
+        this.rid = opts.rootid
+        this.observable = opts.observable
+        this.header = opts.header||false
+        this.calibrate_size = function()
+        {
+            if(!self.cols || self.cols.length == 0 || !self.observable) return
+            var totalw = $(self.root).parent().width()
+            var ocw = 0
+            var nauto = 0
+            var dist = []
+            $.each(self.cols, function(i,e){
+                if(e.width)
+                {
+                    dist.push(e.width)
+                    ocw += e.width
+                }
+                else
+                {
+                    dist.push(-1)
+                    nauto++
+                }
+            })
+            if(nauto > 0)
+            {
+                var cellw = (totalw - ocw)/ nauto
+                $.each(dist,function(i,e){
+                    if(e == -1) dist[i] = cellw
+                })
+            }
+
+            self.observable.trigger("cellresize",{id:self.rid,data:dist})
+        }
+
+        self.observable.on("cellresize",function(d){
+            if(d.id && d.id == self.rid)
+            {
+                var i = 0
+                $(self.root)
+                    .children()
+                    .each(function(){
+                        $(this).css("width", d.data[i]+"px")
+                        i++
+                    })
+            }
+        })
+
+        this.on("mount", function(){
+            $(self.root)
+                .css("display","flex")
+                .css("flex-direction","row")
+                .css("width","100%")
+            if(self.header)
+                self.calibrate_size()
+        })
+    </script>
+</afx-grid-row>

src/core/gui/tags/afx-hbox.js

@@ -4,14 +4,30 @@
     </div>
     <script>
         var self = this
+        self.root.set = function(k,v)
+        {
+            if(k == "*")
+                for(var i in v)
+                    self[i] = v[i]
+            else
+                self[k] = v
+            self.update()
+        }
+        self.root.get = function(k)
+        {
+            return self[k]
+        }
+        self.root.update = function()
+        {
+            self.update()
+        }
         this.on('mount', function(){
             $(self.refs.container)
                 .css("display","flex")
                 .css("flex-direction","column")
                 .css("width","100%")
-                .css("background-color","red")
+                //.css("background-color","red")
-                .css("table-layout","fixed")
+                //.css("overflow", "hidden")
-                .css("overflow", "hidden")
 
             calibrate_size()
 
@@ -36,7 +52,7 @@
                     this.observable = self.root.observable
                     $(this)
                         .css("flex-grow","1")
-                        .css("border","1px solid black")
+                        //.css("border","1px solid black")
                     var dw = $(this).attr("data-height")
                     if(dw)
                     {

src/core/gui/tags/afx-list-view.js

@@ -1,28 +1,100 @@
-<afx-list-view>
+<afx-list-view class = {dropdown: opts.dropdown == "true"}>
-    <ul>
+    <div class = "list-container" ref = "container">
-        <li each={ items } class = {child != null ? "afx-sublist":""} onclick = {parent.onselect}>
+    <div if = {opts.dropdown == "true"} ref = "current" style = {opts.width?"min-width:" + opts.width + "px;":"min-width:150px;"}  onclick = {show_list}>
-            <afx-list-view if={child != null} child={child} observable = {parent.observable} ></afx-list-view>
+        {selectedText}
+    </div>
+    <ul  ref = "mlist">
+        <li each={ items } class={selected: selected}  onclick = {parent._select}>
+            <i if={iconclass} class = {iconclass} ></i>
+            <i if={icon} class="icon-style" style = { "background: url("+icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
+            { text }
         </li>
     </ul>
+    </div>
     <script>
         this.items = opts.child
-        if(opts.observable)
+        var self = this
-            this.observable = opts.observable
+        self.selidx = -1
-        else if(this.root.observable)
+        self.selectedText = ""
-            this.observable = this.root.observable
+        self.onlistselect = opts.onlistselect
-        else
+        self.root.set = function(k,v)
         {
-            this.observable = riot.observable()
+            if(k == "selected")
-            this.observable.on('listselect',function(data){
+                self._select({item:self.items[v], preventDefault:function(){}})
-                if(opts.listselect)
+            else if(k == "*")
-                    opts.listselect(data)
+                for(var i in v)
-            })
+                    self[i] = v[i]
+            else
+                self[k] = v
+            self.update()
+        }
+        self.root.update = function()
+        {
+            self.update()
+        }
+        self.root.get = function(k)
+        {
+            if(k == "selected")
+                return self.items[self.selidx]
+            return self[k]
         }
         
-        onselect(event)
+        if(opts.observable)
+            this.root.observable = opts.observable
+        else
         {
+            this.root.observable = riot.observable()
+        }
+        this.on("mount", function(){
+            if(opts.dropdown == "true")
+            {
+                $(document).click(function(event) { 
+                    if(!$(event.target).closest(self.refs.container).length) {
+                        $(self.refs.mlist).hide()
+                    }
+                })
+                //$(self.root).css("position","relative")
+                $(self.refs.container)
+                        .css("position","absolute")
+                        .css("display","inline-block")
                         
-           this.observable.trigger('listselect',event.item)
+                $(self.refs.mlist)
+                    .css("position","absolute")
+                    .css("display","none")
+                    .css("top","100%")
+                    .css("left","0")
+            }
+        })
+        show_list()
+        {
+            var desktoph = $("#desktop").height()
+            var off = $(self.root).offset().top + $(self.refs.mlist).height()
+            console.log(desktoph,off)
+            if( off > desktoph )
+                $(self.refs.mlist)
+                    .css("top","-" +  $(self.refs.mlist).outerHeight() + "px")
+            else 
+                $(self.refs.mlist).css("top","100%")
+            $(self.refs.mlist).show()
+        }
+        _select(event)
+        {
+            var data = {
+                    id:$(self.root).attr("data-id"), 
+                    data:event.item, 
+                    idx:self.items.indexOf(event.item)}
+            if(self.selidx != -1)
+                self.items[self.selidx].selected =false
+            self.selidx = data.idx
+            self.items[self.selidx].selected = true
+            if(opts.dropdown  == "true")
+            {
+                $(self.refs.mlist).hide()
+                self.selectedText = self.items[self.selidx].text
+            }
+            if(self.onlistselect)
+                self.onlistselect(data)
+            this.root.observable.trigger('listselect',data)
             event.preventDefault()
         }
     </script>

src/core/gui/tags/afx-menu.js

@@ -1,17 +1,42 @@
 <afx-menu>
     <ul>
         <li class="afx-corner-fix"></li>
-        <li each={ items } class = {child != null ? "afx-submenu":""}>
+        <li each={ items } class = {afx_submenu:child != null, fix_padding:icon}>
             <a href="#" onclick = {parent.onselect}>
-                <i class = {icon} ></i>{ text }
+                <i if={iconclass} class = {iconclass} ></i>
+                <i if={icon} class="icon-style" style = { "background: url("+icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
+                { text }
             </a>
             
-            <afx-menu if={child != null} child={child} observable = {parent.root.observable} ></afx-menu>
+            <afx-menu if={child != null} child={child} onmenuselect={onmenuselect} observable = {parent.root.observable} rootid = {parent.rid}></afx-menu>
         </li>
          <li class="afx-corner-fix"></li>
     </ul>
     <script>
         this.items = opts.child
+        if(opts.rootid)
+            this.rid = opts.rootid
+        else 
+            this.rid = $(this.root).attr("data-id")
+        var self = this
+        this.onmenuselect = opts.onmenuselect
+        self.root.set = function(k,v)
+        {
+            if(k == "*")
+                for(var i in v)
+                    self[i] = v[i]
+            else
+                self[k] = v
+            self.update()
+        }
+        self.root.get = function(k)
+        {
+            return self[k]
+        }
+        self.root.update = function()
+        {
+            self.update()
+        }
         if(opts.observable)
         {
             this.root.observable = opts.observable
@@ -20,17 +45,24 @@
         {
             this.root.observable = riot.observable()
             this.root.observable.on('menuselect',function(data){
-                if(opts.onmenuselect)
+                //console.log("From root",self.root)
+                if(self.onmenuselect)
                 {
-                    opts.onmenuselect(data)
+                    self.onmenuselect(data)
                 }
             })
         }
 
         
+
         onselect(event)
         {
-           this.root.observable.trigger('menuselect',event.item)
+            var data = {id:self.rid, data:event.item}
+           /*if(self.onmenuselect)
+            {
+                self.onmenuselect(data)
+            } else*/
+            this.root.observable.trigger('menuselect',data)
            event.preventDefault()
         }
 

src/core/gui/tags/afx-sys-panel.js

@@ -1,8 +1,8 @@
 <afx-sys-panel>
     <div>
-        <afx-menu ref = "aOsmenu" child={osmenu.child} onmenuselect = {osmenu.onmenuselect} class="afx-panel-os-menu"></afx-menu>
+        <afx-menu data-id = "os_menu" ref = "aOsmenu" child={osmenu.child} onmenuselect = {osmenu.onmenuselect} class="afx-panel-os-menu"></afx-menu>
-        <afx-menu ref = "aAppmenu" child={appmenu.child} onmenuselect = {appmenu.onmenuselect} class = "afx-panel-os-app"></afx-menu>
+        <afx-menu data-id = "appmenu" ref = "aAppmenu" child={appmenu.child} onmenuselect = {appmenu.onmenuselect} class = "afx-panel-os-app"></afx-menu>
-        <afx-menu ref = "aTray" child={systray.child} onmenuselect = {systray.onmenuselect} class = "afx-panel-os-stray"></afx-menu>
+        <afx-menu data-id = "sys_tray" ref = "aTray" child={systray.child} onmenuselect = {systray.onmenuselect} class = "afx-panel-os-stray"></afx-menu>
     </div>
     
     <script>
@@ -10,6 +10,24 @@
         this.appmenu = opts.appmenu
         this.systray = opts.systray
         var self = this
+        
+        self.root.set = function(k,v)
+        {
+            if(k == "*")
+                for(var i in v)
+                    self[i] = v[i]
+            else
+                self[k] = v
+            self.update()
+        }
+        self.root.get = function(k)
+        {
+            return self[k]
+        }
+        self.root.update = function()
+        {
+            self.update()
+        }
         this.on('mount', function() {
             //console.log(self.refs.aOsmenu.root)
             $(self.refs.aOsmenu.root).css("z-index",1000000)

src/core/gui/tags/afx-tree-view.js

@@ -0,0 +1,103 @@
+<afx-tree-view>
+
+  <div ref = namediv class={afx_tree_item_selected:treeroot.selectedItem && treeroot.selectedItem.path == path, afx_folder_item: isFolder(), afx_tree_item_odd: index%2 != 0  } click={select}>
+    <i if={ !isFolder() && iconclass} class = {iconclass} ></i>
+    <i if={!isFolder() && icon} class="icon-style" style = { "background: url("+icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
+
+    <span onclick={ toggle } if={ isFolder() } class={open ? 'afx-tree-view-folder-open' : 'afx-tree-view-folder-close'}></span>
+    { name }
+  </div>
+
+
+  <ul if={ isFolder() } show={ isFolder() && open }>
+    <li each={ child, i in nodes }>
+      <afx-tree-view data={child} indent={indent+1} observable = {parent.root.observable} path = {parent.path + ">" + i} treeroot= {parent.treeroot}></afx-tree-view>
+    </li>
+  </ul>
+
+    <script>
+        var self = this
+        if(opts.data)
+        {
+            self.name = opts.data.name
+            self.nodes = opts.data.nodes
+            self.icon = opts.data.icon   
+        }
+        self.indent = opts.indent || 1
+        self.open = true
+        var istoggle = false
+        if(opts.treeroot)
+        {
+            this.treeroot = opts.treeroot
+            this.treeroot.counter++
+        }
+        else
+        {
+            this.treeroot = self
+            this.treeroot.counter = 0
+        }
+        self.path = opts.path || 0
+        self.selected = false
+        self.selectedItem = null
+        self.index = this.treeroot.counter
+        self.root.set = function(k,v)
+        {
+            if(k == "*")
+                for(var i in v)
+                    self[i] = v[i]
+            else
+                self[k] = v
+            self.update()
+        }
+        self.root.update = function()
+        {
+            self.update()
+        }
+        self.root.get = function(k)
+        {
+            return self[k]
+        }
+
+        if(opts.observable)
+            this.root.observable = opts.observable
+        else
+        {
+            this.root.observable = riot.observable()
+        }
+        
+        this.on("mount", function(){
+            $(self.refs.namediv).css("padding-left", self.indent*15 + "px" )
+        })
+
+        isFolder() {
+            return self.nodes && self.nodes.length
+        }
+
+        toggle(e) {
+            self.open = !self.open
+            e.preventDefault()
+            istoggle = true
+        }
+
+        select(event)
+        {
+            if(istoggle)
+            {
+                istoggle = false 
+                return
+            }
+            var data = {
+                id:$(self.treeroot.root).attr("data-id"), 
+                data:event.item,
+                path:self.path
+            } 
+            if(opts.ontreeselect)
+                opts.ontreeselect(data)
+            self.treeroot.selectedItem = data
+           this.root.observable.trigger('treeselect',data)
+           event.preventUpdate = true
+           self.treeroot.update()
+           event.preventDefault()
+        }
+    </script>
+</afx-tree-view>

src/core/gui/tags/afx-vbox.js

@@ -4,6 +4,23 @@
     </div>
     <script>
         var self = this
+        self.root.set = function(k,v)
+        {
+            if(k == "*")
+                for(var i in v)
+                    self[i] = v[i]
+            else
+                self[k] = v
+            self.update()
+        }
+        self.root.get = function(k)
+        {
+            return self[k]
+        }
+        self.root.update = function()
+        {
+            self.update()
+        }
         this.on('mount', function(){
             $(self.refs.container)
                 .css("display","flex")

src/core/gui/themes/antos/afx-app-window.css

@@ -3,16 +3,15 @@ afx-app-window div.afx-window-wrapper{
     /*box-shadow: 1px 1px 1px #cbcbcb;*/
     box-shadow: 1px 1px 1px #9f9F9F;
     border-radius: 5px;
-    background-color:#e7e7e7;
+    background-color:#dfdfdf;
     padding:0;
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
 }
-afx-app-window{
+afx-app-window.unactive > div.afx-window-wrapper{
-    /*width: 600px;
+    background-color: #f6f6f6;
-    height: 400px;*/
 }
 
 afx-app-window ul.afx-window-top{

src/core/gui/themes/antos/afx-button.css

@@ -12,7 +12,12 @@ afx-button button{
 afx-button button[disabled]{
     color: #a6a6a6;
 }
-
+afx-button i.icon-style {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    float:left;
+}
 afx-button button:active {
     background-color: #2786F3;
     color: white;

src/core/gui/themes/antos/afx-dock.css

@@ -17,8 +17,20 @@ afx-apps-dock afx-button button{
     width: 32px;
     height: 32px;
     font-size: 19px;
+    margin-bottom: 3px;
+    padding:0px;
+    background-color: transparent;
+    border:0;
+}
+afx-apps-dock afx-button .icon-style{
+    width: 24px;
+    height: 24px;
     margin-bottom: 0px;
     border:0;
-    background-color: transparent;
+}
-    
+
+afx-apps-dock afx-button.selected > button {
+    background-color: #2786F3;
+    color: white;
+    border: 1px solid #dedede;
 }

src/core/gui/themes/antos/afx-grid-view.css

@@ -0,0 +1,33 @@
+afx-grid-view{
+    overflow: hidden;
+    padding:5px;
+}
+afx-grid-view afx-grid-row div{
+    padding:3px;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+afx-grid-view afx-grid-row:nth-child(even){
+    background-color: #f5F5F5;
+}
+
+afx-grid-view afx-grid-row.grid_row_header div{
+    border-right: 2px solid #e5e5e5;
+}
+
+afx-grid-view afx-grid-row i.icon-style {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    float:left;
+}
+afx-grid-view afx-grid-row.selected {
+    background-color: #116cd6;
+    color:white;
+}
+afx-grid-view afx-grid-row.grid_row_header {
+    font-weight: bold;
+    border: 1px solid #e5e5e5;
+     border-right:0;
+}

src/core/gui/themes/antos/afx-list-view.css

@@ -0,0 +1,104 @@
+afx-list-view{
+    overflow:auto;
+    padding: 5px;
+}
+/*
+afx-list-view div.list-container{
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+    position: relative;
+    background-color: red;
+}*/
+afx-list-view  ul{
+    margin:0;
+    padding: 0;
+}
+
+afx-list-view  li{
+    margin:0;
+    padding:0;
+    list-style: none;
+    padding: 5px;
+    padding-top:3px;
+    padding-bottom: 3px;
+    color: #414339;
+    background-color: white;
+}
+afx-list-view li:nth-child(odd){
+    background-color: #f5F5F5;
+}
+afx-list-view  i.icon-style {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    float:left;
+}
+
+afx-list-view   li > i {
+    margin-right: 3px;
+}
+afx-list-view   li.selected {
+    background-color: #116cd6;
+    color:white;
+}
+
+/*
+afx-list-view.dropdown div.list-container{
+    position: relative;
+    display: inline-block;
+}
+
+afx-list-view.dropdown div.list-container ul{
+    position:absolute;
+    top:100%;
+    left:0;
+    display: none;
+    border:1px solid red;
+}*/
+
+afx-list-view.dropdown {
+    padding:0;
+    margin: 0;
+}
+afx-list-view.dropdown div.list-container ul{
+    max-height: 150px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: white;
+}
+afx-list-view.dropdown div.list-container ul{
+    border:1px solid #a6a6a6;
+    box-shadow: 1px 1px 1px #9f9F9F;
+    border-radius: 3px;
+    padding:2px;
+    border-top-left-radius: 0px;
+}
+afx-list-view.dropdown div.list-container ul li{
+    display: inline-block;
+    width:100%;
+}
+
+afx-list-view.dropdown div.list-container div{
+    padding:3px;
+    border:1px solid #a6a6a6;
+    border-radius: 3px;
+    padding-right:15px;
+    background-color: white;
+    height: 17px;
+}
+afx-list-view.dropdown div.list-container div:before {
+    content: "\f107"; 
+    font-family: "FontAwesome";
+    font-size: 11px;
+    font-style: normal;
+    color: #414339;
+    position: absolute;
+    top:25%;
+    right: 5px;
+ }
+afx-list-view.dropdown div.list-container ul li:hover{
+    background-color: #dcdcdc;
+    color: #414339;
+}
+

src/core/gui/themes/antos/afx-menu.css

@@ -6,8 +6,6 @@ afx-menu {
 }
 afx-menu a{
     text-decoration: none;
-    width: 100%;
-    height: 100%;
     color: #414339;
     display: inline-block;
     width: 100%;
@@ -17,6 +15,14 @@ afx-menu ul{
     padding:0;
     margin: 0;
 }
+afx-menu i.icon-style {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    float:left;
+}
+
+
 afx-menu afx-menu ul {
     padding: 0;
     border:1px solid #a6a6a6;
@@ -35,6 +41,18 @@ afx-menu ul > li{
     padding-left: 5px;
     padding-right: 5px;
 }
+afx-menu ul > li.fix_padding{
+    padding-top:1px;
+    padding-bottom: 0;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+afx-menu afx-menu ul > li.fix_padding{
+    padding:3px;
+    padding-left: 5px;
+    padding-right: 5px;
+} 
 afx-menu  afx-menu {
     top:100%;
     left:0;
@@ -46,7 +64,7 @@ afx-menu  afx-menu i{
 }
 afx-menu  afx-menu li{
     float:none;
-    width: 150px;
+    min-width: 150px;
 }
 afx-menu  afx-menu afx-menu{
     top:-4px;
@@ -74,11 +92,11 @@ afx-menu li.afx-corner-fix:hover{
     background-color: transparent;
 }
 
-afx-menu afx-menu .afx-submenu:before {
+afx-menu afx-menu .afx_submenu:before {
     content: "\f054"; 
     font-family: "FontAwesome";
     font-size: 10px;
-    left:93%;
+    right:5px;
     color: #414339;
     position:absolute;
     top:25%;

src/core/gui/themes/antos/afx-sys-panel.css

@@ -1,4 +1,8 @@
 
+afx-sys-panel{
+    padding:0;
+    margin: 0;
+}
 afx-sys-panel div{
      width: 100%;
      height: 23px;
@@ -7,13 +11,18 @@ afx-sys-panel div{
      background-color: #e7e7e7;
      border-bottom: 1px solid #9c9C9C;
      box-shadow: 1px 1px 1px #9F9F9F;
+     position:absolute;
  }
-
+afx-sys-panel .afx-panel-os-menu{
+    padding:0;
+    margin: 0;
+    float:left;
+}
 afx-sys-panel .afx-panel-os-stray{
     float:right;
 }
 
 afx-sys-panel .afx-panel-os-stray  afx-menu afx-menu{
     top:-4px;
-    left: -100%;
+    right:0;
 }

src/core/gui/themes/antos/afx-tree-view.css

@@ -0,0 +1,59 @@
+afx-tree-view{
+    color: #414339;
+    padding:3px;
+    overflow: auto;
+}
+afx-tree-view afx-tree-view{
+    padding:0;
+    overflow: hidden;
+}
+afx-tree-view ul{
+    margin:0;
+    padding:0;
+}
+afx-tree-view li{
+    list-style: none;
+    margin:0;
+    padding: 0;
+}
+afx-tree-view div{
+    padding:3px;
+    background-color: white;
+}
+afx-tree-view i.icon-style {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    float:left;
+    margin-right: 3px;
+}
+afx-tree-view div.afx_tree_item_selected{
+    background-color: #116cd6;
+    color:white;
+}
+afx-tree-view div.afx_tree_item_selected:hover{
+    background-color: #116cd6;
+    color:white;
+}
+/*
+afx-tree-view div:hover{
+    background-color: #f5F5F5;
+    color: #414339;
+}*/
+afx-tree-view .afx_folder_item{
+    font-weight: bold;
+}
+afx-tree-view .afx-tree-view-folder-open:before{
+    content: "\f147"; 
+    font-family: "FontAwesome";
+    font-size: 13px;
+}
+afx-tree-view .afx-tree-view-folder-close:before{
+    content: "\f196"; 
+    font-family: "FontAwesome";
+    font-size: 13px;   
+}
+
+afx-tree-view .afx_tree_item_odd{
+    background-color: #f5F5F5;
+}

src/core/processes.coffee

@@ -0,0 +1,35 @@
+self.OS.PM =
+    pidalloc:0
+    processes: new Object
+    createProcess: (app,cls) ->
+        #if it is single ton
+        # and a process is existing
+        # just return it
+        if cls.singleton and _PM.processes[app] and _PM.processes[app].length == 1
+            _PM.processes[app][0].show()
+            return _PM.processes[app][0]
+        else
+            _PM.processes[app] = [] if not _PM.processes[app] 
+            obj = new cls
+            obj.birth = (new Date).getTime()
+            _PM.pidalloc++
+            obj.pid = _PM.pidalloc
+            _PM.processes[app].push obj
+            _GUI.dock obj,cls.meta
+    appByPid:(pid)->
+        app = undefined
+        find = (l) ->
+            return a for a in l when a.pid is pid
+        for k,v of _PM.processes
+            app = find v
+            break if app
+        app           
+        
+    kill: (app) ->
+        return if not _PM.processes[app.name]
+
+        i = _PM.processes[app.name].indexOf app
+        if i >= 0
+            _GUI.undock _PM.processes[app.name][i]
+            delete _PM.processes[app.name][i]
+            _PM.processes[app.name].splice i,1

src/define.coffee

@@ -4,11 +4,15 @@ self.OS or=
     API: new Object()
     GUI: new Object()
     APP: new Object()
-    register: (name,x)-> self.OS.APP[name] = x
+    PM: new Object()
+    register: (name,x)->
+        # load the metadata first
+        _APP[name] = x
+        
     boot: ->
         #first load the configuration
         #then load the theme
         _GUI = self.OS.GUI
         _GUI.loadTheme "antos"
         _GUI.initDM()
-        _GUI.loadScheme "resources/schemes/test.html",null 
+        #_GUI.loadScheme "resources/schemes/test.html",null 

src/index.html

@@ -10,6 +10,8 @@
         <script src="resources/antos_tags.js" type="riot/tag"></script>
         <script src="scripts/riot.compiler.min.js"> </script>
         <script src="scripts/ace/ace.js"></script>
+        <script src="scripts/ace/ext-language_tools.js"></script>
+        <script src="scripts/ace/ext-modelist.js"></script>
         <script src="scripts/antos.js"></script>
     </head>
     <body>

src/packages/ActivityMonitor/Makefile

@@ -0,0 +1,33 @@
+coffee_files = main.coffee
+
+jsfiles =
+
+cssfiles = main.css
+
+copyfiles = scheme.html package.json 
+
+
+BLUE=\033[1;34m
+NC=\033[0m
+
+main: title clean js css copy
+
+title:
+	@echo "$(BLUE)======= Package ActivityMonitor =======$(NC)"
+
+coffee:
+	- mkdir build
+	for f in $(coffee_files); do (coffee -cs < $$f >build/"$$f.js");done
+	for f in build/*.coffee.js; do (cat "$${f}"; echo) >> build/main.js; done
+	- rm build/*.coffee.js
+
+js: coffee
+	for f in $(jsfiles); do (cat "$${f}"; echo) >> build/main.js; done
+
+css:
+	for f in $(cssfiles); do (cat "$${f}"; echo) >> build/main.css; done
+
+copy:
+	cp -rf $(copyfiles) build/
+clean:
+	- rm -rf build/*

src/packages/ActivityMonitor/main.coffee

@@ -0,0 +1,56 @@
+_PM = this.OS.PM
+_APP = this.OS.APP
+class ActivityMonitor extends this.OS.GUI.BaseApplication
+    constructor: () ->
+        super "ActivityMonitor"
+    main: () ->
+        me = @
+        @scheme.set "apptitle", "Activity Monitor"
+        @grid = @find "mygrid"
+        @on "btclick", (e)->
+            return unless e.id == "btkill"
+            item = me.grid.get "selected"
+            return unless item
+            app = _PM.appByPid item[0].value
+            app.quit() if app
+
+        header = [{width:50,value:"Pid"},{value:"Name"},{width:100,value:"Alive (ms)"}]
+        @gdata = 
+            processes:{}
+            alive:[]
+        @grid.set "header",header
+        @monitor()
+    
+    monitor: () ->
+        me = @
+        #get all current running process
+        me.gdata.alive = []
+        now = (new Date).getTime()
+        $.each _PM.processes, (i,d)->
+            $.each d , (j,a)->
+                if me.gdata.processes[a.pid] #update it
+                    me.gdata.processes[a.pid][2].value = now - a.birth
+                else #add it
+                    me.gdata.processes[a.pid] = [
+                        {value:a.pid},
+                        {icon:_APP[a.name].meta.icon,iconclass:_APP[a.name].meta.iconclass,value:a.name},
+                        {value: now - a.birth}
+                    ]
+                me.gdata.alive.push a.pid
+        @refreshGrid()
+        @timer = setTimeout (()-> me.monitor()),500#one second
+    
+    refreshGrid: ()->
+        activeList = []
+        me = @
+        $.each @gdata.processes, (i,e) ->
+            if ($.inArray (Number i),me.gdata.alive) >= 0
+                activeList.push e
+            else 
+                me.gdata.processes[i] = undefined
+        @grid.set "rows",activeList
+    exit: (e) ->
+        clearTimeout @timer if @timer
+
+ActivityMonitor.singleton = true
+this.OS.register "ActivityMonitor",ActivityMonitor

src/packages/ActivityMonitor/main.css

@@ -0,0 +1,8 @@
+afx-app-window[data-id="am-window"] afx-button{
+    margin: 3px;
+}
+
+afx-app-window[data-id="am-window"] afx-grid-view{
+    padding-left:10px;
+    padding-right: 10px;
+}

src/packages/ActivityMonitor/package.json

@@ -0,0 +1,12 @@
+{
+    "app":"ActivityMonitor",
+    "name":"Activity monitor",
+    "description":"Processes monitor and manager",
+    "author":{
+        "name": "Xuan Sang LE",
+        "email": "xsang.le@gmail.com"
+    },
+    "category":"System",
+    "iconclass":"fa fa-heartbeat",
+    "mimes":["*"]
+}

src/packages/ActivityMonitor/scheme.html

@@ -0,0 +1,7 @@
+<afx-app-window data-id = "am-window" apptitle="" width="400" height="300">
+    <afx-vbox>
+    <afx-hbox>
+        <afx-grid-view data-id = "mygrid"></afx-grid-view>
+        <afx-button data-height="30" data-id = "btkill" text = "Kill process" iconclass="fa fa-times"></afx-button>
+    </afx-hbox>
+</afx-app-window>

src/packages/NotePad/Makefile

@@ -7,27 +7,27 @@ cssfiles = main.css
 copyfiles = scheme.html package.json
 
 
-BLUE=\033[0;34m
+BLUE=\033[1;34m
 NC=\033[0m
 
 main: title clean js css copy
 
 title:
-	- echo "$(BLUE)======= Package NotePad =======$(NC)"
+	@echo "$(BLUE)======= Package NotePad =======$(NC)"
 
 coffee:
 	- mkdir build
-	- for f in $(coffee_files); do (coffee -cs < $$f >build/"$$f.js");done
+	for f in $(coffee_files); do (coffee -cs < $$f >build/"$$f.js");done
-	- for f in build/*.coffee.js; do (cat "$${f}"; echo) >> build/main.js; done
+	for f in build/*.coffee.js; do (cat "$${f}"; echo) >> build/main.js; done
 	- rm build/*.coffee.js
 
 js: coffee
-	- for f in $(jsfiles); do (cat "$${f}"; echo) >> build/main.js; done
+	for f in $(jsfiles); do (cat "$${f}"; echo) >> build/main.js; done
 
 css:
-	- for f in $(cssfiles); do (cat "$${f}"; echo) >> build/main.css; done
+	for f in $(cssfiles); do (cat "$${f}"; echo) >> build/main.css; done
 
 copy:
-	- cp -rf $(copyfiles) build/
+	cp -rf $(copyfiles) build/
 clean:
 	- rm -rf build/*

src/packages/NotePad/main.coffee

@@ -1,10 +1,53 @@
 class NotePad extends this.OS.GUI.BaseApplication
     constructor: () ->
         super "NotePad"
-    event: () ->
+    main: () ->
-        console.log @scheme
+        me = @
-        @on "btclick", (e)->
+        @scheme.set "apptitle", "NotePad"
-            alert "Happy pola"
+        
-        @on "resize", (w,h)->
+        div = @find "datarea"
-            console.log "resize"
+        ace.require "ace/ext/language_tools"
+        @.editor = ace.edit div
+        @.editor.setTheme "ace/theme/monokai"
+        @.editor.getSession().setMode 'ace/mode/text'
+        @.editor.setOptions {
+            enableBasicAutocompletion: true,
+            enableSnippets: true,
+            enableLiveAutocompletion: true,
+            fontSize: "10pt"
+        }
+        @.editor.completers.push {getCompletions:(editor, session, pos, prefix, callback)->}
+        @.editor.getSession().setUseWrapMode true
+
+        list = @find "modelist"
+        @modes = ace.require "ace/ext/modelist"
+        ldata = []
+        ldata.push {text:m.name, mode:m.mode} for m in @modes.modes
+        list.set "items",ldata
+        list.set "onlistselect", (e)->
+            me.editor.session.setMode e.data.mode
+
+        stat = @find "editorstat"
+        #status
+        stup = (e)->
+            c = me.editor.session.selection.getCursor()
+            l = me.editor.session.getLength()
+            $(stat).html "Row #{c.row}, col #{c.column}, lines: #{l}"
+        stup(0)
+        @.editor.getSession().selection.on "changeCursor", (e)->
+            stup(e)
+
+        @on "resize", ()-> me.editor.resize()
+        @on "focus", ()->me.editor.focus()
+        
+    menu: ()->
+        menu = [{
+                text:"File", 
+                child:[
+                    {text:"Open", dataid:"#{@name}-Open"},
+                    {text:"Close", dataid:"#{@name}-Close"}
+                ]
+            }]
+        menu
+NotePad.singleton = false
 this.OS.register "NotePad",NotePad

src/packages/NotePad/main.css

@@ -1,3 +1,9 @@
-fut{
+
-    background-color: black
+afx-app-window[data-id="notepad"] afx-list-view[data-id="modelist"]{
+    margin:2px;
+}
+
+afx-app-window[data-id="notepad"] span[data-id="editorstat"]{
+    padding:5px;
+    display: inline-block;
 }

src/packages/NotePad/package.json

@@ -7,6 +7,6 @@
         "email": "xsang.le@gmail.com"
     },
     "category":"System",
-    "icon":"",
+    "iconclass":"fa fa-pencil-square-o",
     "mimes":["*"]
 }

src/packages/NotePad/scheme.html

@@ -1,16 +1,24 @@
-<afx-app-window apptitle="Preview" width="600" height="400">
+<afx-app-window apptitle="" width="600" height="400" data-id="notepad">
-    <afx-vbox>
-        
-        <afx-list-view data-width = "250"> </afx-list-view>
-
     <afx-hbox>
-            <afx-button data-height="50" onbtclick="alert('im clicked')" text="Read more" icon="fa fa-camera-retro fa-lg" id="button">
+        
+        <!--afx-list-view data-id = "flist" data-width = "150" > </afx-list-view>
+        <afx-hbox>
+            <afx-button data-height="50" text="Read more" iconclass="fa fa-camera-retro fa-lg" id="button">
             </afx-button>
-            <div style=" vertical-align: top; width:100%;height:100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+            <div>
+                big text here
+            </div>
+            <div data-height="100" style=" vertical-align: top; width:100%;height:100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                 magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
-            <div data-width="100">Test</div>
+            
-        </afx-hbox>
+        </afx-hbox-->
+        <div data-id="datarea"></div>
+        <afx-vbox data-height="30">
+            <div ><span data-id = "editorstat"></span></div>
+             <afx-list-view data-width="170" data-id = "modelist" dropdown = "true" width="150"></afx-list-view>
+             
         </afx-vbox>
+    </afx-hbox>
 </afx-app-window>

src/packages/Terminal/Makefile

@@ -0,0 +1,33 @@
+coffee_files = main.coffee
+
+jsfiles =
+
+cssfiles = main.css
+
+copyfiles = scheme.html package.json
+
+
+BLUE=\033[1;34m
+NC=\033[0m
+
+main: title clean js css copy
+
+title:
+	@echo "$(BLUE)======= Package Terminal =======$(NC)"
+
+coffee:
+	- mkdir build
+	for f in $(coffee_files); do (coffee -cs < $$f >build/"$$f.js");done
+	for f in build/*.coffee.js; do (cat "$${f}"; echo) >> build/main.js; done
+	- rm build/*.coffee.js
+
+js: coffee
+	for f in $(jsfiles); do (cat "$${f}"; echo) >> build/main.js; done
+
+css:
+	for f in $(cssfiles); do (cat "$${f}"; echo) >> build/main.css; done
+
+copy:
+	cp -rf $(copyfiles) build/
+clean:
+	- rm -rf build/*

src/packages/Terminal/main.coffee

@@ -0,0 +1,80 @@
+class Terminal extends this.OS.GUI.BaseApplication
+    constructor: () ->
+        super "Terminal"
+    main: () ->
+        self = @
+        @on "btclick", (e)->
+            alert "#{self.name}: Happy pola"
+        @on "resize", (w,h)->
+            console.log "#{self.name}: resize"
+        #@on "listselect", (i)->
+        #    console.log self.name, i
+        @on "treeselect", (i) ->
+            console.log self.name,i
+        @on "focus", ()->
+            console.log self.name, "is focused"
+        tree = @find "mytree"
+        
+        @scheme.set "apptitle", "Terminal"
+        tdata = {
+            name: 'My Tree',
+            nodes: [
+                { name: 'hello', icon:'packages/NotePad/icon.png'},
+                { name: 'wat' },
+                {
+                    name: 'child folder',
+                    nodes: [
+                        {
+                            name: 'child folder',
+                            nodes: [
+                                { name: 'hello' },
+                                { name: 'wat' }
+                            ]
+                        },
+                        { name: 'hello' },
+                        { name: 'wat' },
+                        {
+                            name: 'child folder',
+                            nodes: [
+                                { name: 'hello' },
+                                { name: 'wat' }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+        tree.set "*",tdata
+
+        list = @find "mylist"
+        ldata = [
+            {text:"some thing with avery long text"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"},
+            {text:"some thing"}
+        ]
+        list.set "items",ldata
+        list.set "onlistselect", (e)->
+            console.log e
+
+Terminal.singleton = false
+this.OS.register "Terminal",Terminal

src/packages/Terminal/package.json

@@ -0,0 +1,12 @@
+{
+    "app":"Terminal",
+    "name":"Unix terminal like",
+    "description":"Access Unix terminal from web",
+    "author":{
+        "name": "Xuan Sang LE",
+        "email": "xsang.le@gmail.com"
+    },
+    "category":"System",
+    "iconclass":"fa fa-terminal",
+    "mimes":["*"]
+}

src/packages/Terminal/scheme.html

@@ -1,16 +1,14 @@
 <afx-app-window apptitle="Preview" width="600" height="400">
     <afx-vbox>
-        
+        <afx-tree-view data-id="mytree"> </afx-tree-view>
-        <afx-list-view data-width = "250"> </afx-list-view>
-
         <afx-hbox>
-            <afx-button data-height="50" onbtclick="alert('im clicked')" text="Read more" icon="fa fa-camera-retro fa-lg" id="button">
+            <afx-button data-height="50" text="Read more" iconclass="fa fa-camera-retro fa-lg" id="button">
             </afx-button>
-            <div style=" vertical-align: top; width:100%;height:100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+            <afx-list-view data-id = "mylist" dropdown = "true" width="200"></afx-list-view>
+            <div data-height="100" style=" vertical-align: top; width:100%;height:100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                 magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
-            <div data-width="100">Test</div>
         </afx-hbox>
     </afx-vbox>
 </afx-app-window>