Page 1 of 1

Real web application project samples

Posted: Sat Oct 10, 2015 10:49 pm
by TA1
Please does anyone have real web application sample projects that I can load into SpiderBasic so as help understand the capability of the tool? For example, was http://www.SpiderBasic.com created with SpiderBasic?

Best regards!

Re: Real web application project samples

Posted: Sun Oct 11, 2015 6:52 am
by Fred
Hello,

The spiderbasic.com website is a regular website, but this is created with SpiderBasic;

http://www.spiderbasic.com/showcase/onlineviewer/

There is no secret in this code, so here it is if you want to take a closer look:

Code: Select all

;
; Quick and dirty OnlineViewer for SpiderBasic web site
;

Enumeration Window
  #MainWindow
  #AboutWindow
EndEnumeration

Enumeration Gadget
  #SourceTreeGadget
  #EditorContainerGadget
  #SplitterGadget
  
  ; About window gadgets
  #AboutCloseGadget
EndEnumeration

Enumeration Image
  #CutImage
  #CopyImage
  #PasteImage
  #LaunchImage
  #ArrowUpImage
  #ArrowDownImage
  #SpiderBasicImage
EndEnumeration

Enumeration MenuItem
  #MenuAbout
  #MenuLaunch
  #MenuCopy
  #MenuSelectAll
  #MenuPreviousExample
  #MenuNextExample
EndEnumeration

Enumeration XML
  #DemosXML
EndEnumeration


Global AceEditor, AceSelector

Procedure.i LoadAsynchronously(FileName.s, *OnLoadFunction, FileType.s)
  !return $.ajax({ url:v_filename, dataType:v_filetype, beforeSend:function(jqxhr, settings) { jqxhr.url = settings.url; } })
  !.done(function(data, status, jqxhr) { p_onloadfunction(data,status,jqxhr.url); })
  !.fail(function(jqxhr, status, errorThrown) { p_onloadfunction('',status,jqxhr.url,jqxhr.status,errorThrown); });
EndProcedure 

Procedure LoadScript(FileName.s, *OnLoadFunction) 
  ProcedureReturn LoadAsynchronously(FileName, *OnLoadFunction, "script")
EndProcedure  
   
 
Procedure MainWindowResize()
  Debug "resize !"
  Debug WindowWidth(#MainWindow)
  Debug WindowHeight(#MainWindow)
  ResizeGadget(#SplitterGadget, #PB_Ignore, #PB_Ignore, WindowWidth(#MainWindow), WindowHeight(#MainWindow)-54)
  
EndProcedure


Procedure GetSourceCodeEvent(Success, Result$, UserData)
  If Success
    !v_aceeditor.getSession().setValue(v_result$);
    !v_aceeditor.focus();
  Else
    Debug "HTTPRequest(): Error"
  EndIf
EndProcedure


Procedure UpdateEditorContent(Filename$)
  HTTPRequest(#PB_HTTP_Get, "examples/" + LCase(Filename$)+".sb", "", @GetSourceCodeEvent())
EndProcedure


Procedure UpdateUpDownArrowState()
  IsPreviousExampleDisabled = Bool(GetGadgetState(#SourceTreeGadget) = 0)
  IsNextExampleDisabled = Bool(GetGadgetState(#SourceTreeGadget) >= CountGadgetItems(#SourceTreeGadget)-1)
  
  ; Disable the toolbar
  DisableToolBarButton(0, #MenuPreviousExample, IsPreviousExampleDisabled)
  DisableToolBarButton(0, #MenuNextExample, IsNextExampleDisabled)
  
  ; And the menus
  DisableMenuItem(0, #MenuPreviousExample, IsPreviousExampleDisabled)
  DisableMenuItem(0, #MenuNextExample, IsNextExampleDisabled)
EndProcedure


Procedure SourceTreeEvent()
  If EventType() = #PB_EventType_Change
    UpdateEditorContent(GetGadgetText(#SourceTreeGadget))
    UpdateUpDownArrowState()
  EndIf
EndProcedure


Procedure OpenAboutWindow()
  OpenWindow(#AboutWindow, 0, 0, ImageWidth(#SpiderBasicImage), 190, "About...", #PB_Window_ScreenCentered)
  
  ImageGadget(#PB_Any, 0, 0, ImageWidth(#SpiderBasicImage), ImageHeight(#SpiderBasicImage), ImageID(#SpiderBasicImage))
  
  TextGadget(#PB_Any, 90, 90, 300, 50, "SpiderBasic online Viewer v1.0"+"<br>(c) 2015 Fantaisie Software") 
  
  ButtonGadget(#AboutCloseGadget, 140, 150, 100, 25, "Close")
      
EndProcedure    


Procedure MenuEvents()
  
  Select EventMenu()
    Case #MenuAbout
      OpenAboutWindow()
      
    Case #MenuPreviousExample
      If GetGadgetState(#SourceTreeGadget) > 0
        SetGadgetState(#SourceTreeGadget, GetGadgetState(#SourceTreeGadget)-1)
        UpdateEditorContent(GetGadgetText(#SourceTreeGadget))
        UpdateUpDownArrowState()
      EndIf
      
    Case #MenuNextExample
      If GetGadgetState(#SourceTreeGadget) < CountGadgetItems(#SourceTreeGadget)-1
        SetGadgetState(#SourceTreeGadget, GetGadgetState(#SourceTreeGadget)+1)
        UpdateEditorContent(GetGadgetText(#SourceTreeGadget))
        UpdateUpDownArrowState()
      EndIf
      
    Case #MenuSelectAll
      !v_aceeditor.selection.selectAll();
   
    Case #MenuLaunch
      Debug "Launch"
      CurrentExample$ = GetGadgetText(#SourceTreeGadget)
      Url$ = "examples/" + LCase(CurrentExample$) + ".html"
      !var win = window.open(v_url$, '_blank');
      !win.focus();
      
  EndSelect
  
EndProcedure


Procedure GadgetEvents()
  
  Select EventGadget()
    Case #AboutCloseGadget
      CloseWindow(#AboutWindow)
      
  EndSelect
  
EndProcedure



Procedure LoadACE(content.s, status.s, url.s, errorCode, error.s)
 
  If status<>"success"
    Debug "Loading: FAILED"
    Debug "File: "+url
    Debug "Error code: "+errorCode
    Select errorCode
      Case 401 : Debug "Error: Authentification Failed"
      Case 404 : Debug "Error: File Not Found"
      Case 500 : Debug "Error: Server Failed"
      Case 504 : Debug "Error: Server Timeout"
      Default : Debug "Error: "+error
    EndSelect
    Debug ""
    ProcedureReturn
  EndIf
 
  OpenWindow(#MainWindow, 10, 10, 200, 200, "Code viewer", #PB_Window_Background)
  
  CreateMenu(0, WindowID(#MainWindow))
    MenuTitle("File")
      MenuItem(#MenuPreviousExample, "Previous example")
      MenuItem(#MenuNextExample, "Next example")
      
    MenuTitle("Edit")
      MenuItem(#MenuSelectAll, "Select all")
      
    MenuTitle("Help")
      MenuItem(#MenuAbout, "About")
      
  CreateToolBar(0, WindowID(#MainWindow))
    ToolBarImageButton(#MenuPreviousExample, ImageID(#ArrowUpImage))    
    ToolBarImageButton(#MenuNextExample, ImageID(#ArrowDownImage))    
    ToolBarSeparator()    
    ToolBarImageButton(#MenuLaunch, ImageID(#LaunchImage))    
    
  TreeGadget(#SourceTreeGadget, 0, 0, 100, 100)
  
  ; Read the XML file and fill the tree gadget
  Demos = MainXMLNode(#DemosXML)
  If Demos
    Demo = ChildXMLNode(Demos)
    While Demo
      AddGadgetItem(#SourceTreeGadget, -1, GetXMLAttribute(Demo, "name"))
      
      Demo = NextXMLNode(Demo)
    Wend
  EndIf
  
    
  ContainerGadget(#EditorContainerGadget, 0, 0, 100, 100, #PB_Container_Flat)
    ContainerID = GadgetID(#EditorContainerGadget)
    !v_containerid.div.style.border = "1px solid silver";
    !v_aceeditor = ace.edit(v_containerid.div);
    ;!v_AceEditor.setTheme("ace/theme/chrome");
    !v_aceeditor.setTheme("ace/theme/eclipse");
    ;!v_AceEditor.setTheme("ace/theme/dawn");
    !v_aceeditor.getSession().setMode("ace/mode/spiderbasic");
    ;!v_AceEditor.getSession().setUseWorker(false);
    !v_aceeditor.setReadOnly(true);
    !v_aceeditor.focus();
  CloseGadgetList()
    
  SplitterGadget(#SplitterGadget, 0, -6, WindowWidth(#MainWindow), WindowHeight(#MainWindow)-54, #SourceTreeGadget, #EditorContainerGadget, #PB_Splitter_Vertical)
  SetGadgetState(#SplitterGadget, 150) ; Set the splitter bar at 150 px
  
  BindGadgetEvent(#SourceTreeGadget, @SourceTreeEvent())
  BindEvent(#PB_Event_SizeWindow, @MainWindowResize(), #MainWindow)
  
  BindEvent(#PB_Event_Gadget, @GadgetEvents())
  BindEvent(#PB_Event_Menu, @MenuEvents())
  
  SetGadgetState(#SourceTreeGadget, 0)
  
  ; GetGadgetText() doesn't work right after a SetGadgetState()...
  UpdateEditorContent(GetGadgetItemText(#SourceTreeGadget, 0))
  
  DisableToolBarButton(0, #MenuPreviousExample, #True)
  DisableMenuItem(0, #MenuPreviousExample, #True)
EndProcedure

#NbResources = 8

Procedure LoadResources()
  Static NbLoadedResources
  
  NbLoadedResources+1
  
  If NbLoadedResources = #NbResources
  
    ;LoadScript("//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js", @LoadACE())
    ;LoadScript("javascript/ace/ace.js", @LoadACE())
    LoadScript("http://www.spiderbasic.com/showcase/onlineviewer/ace/ace.js", @LoadACE())
    
  EndIf
  
EndProcedure

BindEvent(#PB_Event_Loading, @LoadResources())

LoadXML(#DemosXML, "examples/demos.xml")

LoadImage(#SpiderBasicImage, "icons/spiderbasic.png")
LoadImage(#CutImage, "icons/cut.png")
LoadImage(#CopyImage, "icons/copy.png")
LoadImage(#PasteImage, "icons/paste.png")
LoadImage(#LaunchImage, "icons/launch.png")
LoadImage(#ArrowUpImage, "icons/arrow_up.png")
LoadImage(#ArrowDownImage, "icons/arrow_down.png")
Also http://www.soccer-trainer.com/ is made with SpiderBasic, but the code is private

Re: Real web application project samples

Posted: Sun Nov 08, 2015 6:47 pm
by riaanp
I have to agree with TA1. I love the concept of SpiderBasic. But there is only snippets and no real full application demo's explaining how all those snippets interact. Learning curve is high for first time users. I bought the app thinking that it would have more demo's or more complete demo's.

Re: Real web application project samples

Posted: Tue Nov 24, 2015 12:50 pm
by Fred
I tend to agree, if you have some idea of small software to learn easily SB, I would be happy to give it a try and create them to put in the distribution.

Re: Real web application project samples

Posted: Thu Dec 03, 2015 10:08 pm
by LME
Fred, I came across Spiderbasic and saw immediately that it is exactly the tool I have been looking for. I am only an amateur/hobbyist who learned to program in Applesoft Basic (before your time) and would love to be able to create for the browser but am daunted by starting out to learn JS and how to manage graphics in html5. I "get it" much better in Spiderbasic, and the soccer trainer made me shout out loud as it is a perfect representation of the kind of thing I have been looking for, as the 2min video of my project at https://vimeo.com/147774230 obviously shows. I realize you invented Purebasic, and I have also looked at GLBasic, but I am sure Spiderbasic is the way forward for me. I thank you for creating it. Now I just have to learn how to use it. I'm 71 yrs old, retired, and a long, steep learning curve is probably beyond me.
I have studied the Spiderbasic examples, and have learned many things, but I am having a hard time piecing together the bigger picture. I see the management of loading assets and the timing of events is critical, and I would love to see some complete projects as a tutorial, explaining the way one goes about properly building a project without assuming the reader already understands the ins and outs of creating active web pages. I realize you probably have no time for such a basic review, and Spiderbasic may be for people who already understand such things. But a few examples with a full context (as opposed to the example routines which stand alone and are not part of anything else) would help a lot. If there is an external reference you would recommend for getting up to speed please point me to it. Thanks.
Les - http://www.leselkind.me

Re: Real web application project samples

Posted: Fri Dec 04, 2015 12:13 pm
by Fred
Glad you like it ! I will try to do some 'medium' sized project which show every piece working together.