Created a nice software using SpiderBasic ? Post you link here !
TA1
 
Posts: 1
Joined: Sat Oct 10, 2015 10:44 pm

Real web application project samples

by TA1 Sat Oct 10, 2015 10:49 pm

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!
Fred
Site Admin
 
Posts: 1011
Joined: Mon Feb 24, 2014 10:51 am

Re: Real web application project samples

by Fred Sun Oct 11, 2015 6:52 am

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
riaanp
 
Posts: 2
Joined: Sun Nov 08, 2015 6:13 pm

Re: Real web application project samples

by riaanp Sun Nov 08, 2015 6:47 pm

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.
Fred
Site Admin
 
Posts: 1011
Joined: Mon Feb 24, 2014 10:51 am

Re: Real web application project samples

by Fred Tue Nov 24, 2015 12:50 pm

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.
LME
 
Posts: 1
Joined: Thu Dec 03, 2015 8:12 pm

Re: Real web application project samples

by LME Thu Dec 03, 2015 10:08 pm

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
Fred
Site Admin
 
Posts: 1011
Joined: Mon Feb 24, 2014 10:51 am

Re: Real web application project samples

by Fred Fri Dec 04, 2015 12:13 pm

Glad you like it ! I will try to do some 'medium' sized project which show every piece working together.
Return to Showcase

Who is online

Users browsing this forum: No registered users and 1 guest