Node-Webkit generator : chromium window engine

eddy · Post by **eddy** » Fri Jan 02, 2015 2:06 am

- node-webkit is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with node-webkit.
- it's a good cross-platform solution to create skinned window (win,mac,linux,web)

download: Node-Webkit engine ( Win / Linux / Mac )

docs:

package json specification: https://github.com/rogerwang/node-webki ... est-format
package json example: http://guoshuang.com/web/manifest-of-nodewebit/
platform specific command line: https://github.com/rogerwang/node-webki ... o-run-apps

Code: Select all

EnableExplicit
Macro POW2
   (#PB_Compiler_EnumerationValue - 1) << 1
EndMacro

CompilerIf Not Defined(PB_DEBUGGER_SendError, #PB_Function)
   CompilerIf #PB_Compiler_Debugger
      Import ""
         PB_DEBUGGER_SendError(Message.p-ascii)
         PB_DEBUGGER_SendWarning(Message.p-ascii)
      EndImport
   CompilerElse
      Macro PB_DEBUGGER_SendError(Message) : EndMacro
      Macro PB_DEBUGGER_SendWarning(Message) : EndMacro
   CompilerEndIf
   Macro SendDebuggerError(ErrorMessage) : PB_DEBUGGER_SendError(ErrorMessage) : EndMacro
   Macro SendDebuggerWarning(WarningMessage) : PB_DEBUGGER_SendWarning(WarningMessage) : EndMacro
CompilerEndIf

Structure NW_WINDOW
   id.i
   *json
EndStructure
Structure NW_PAGE
   id.i
   file$
   html$
   *file
EndStructure
Structure NW_APPLICATION
   *json
EndStructure
Structure NW_ENGINE
   engine$
   isInitialized.b
   app.NW_APPLICATION
   Map windows.NW_WINDOW()
   Map pages.NW_PAGE()
EndStructure
Global nw.NW_ENGINE
Enumeration
   #nw_Window_HasToolbar=1
   #nw_Window_CenteredPosition=POW2
   #nw_Window_MousePosition=POW2
   #nw_Window_Resizable=POW2
   #nw_Window_AlwaysOnTop=POW2
   #nw_Window_HideFrame=POW2
   #nw_Window_HideTaskbarButton=POW2
   #nw_Window_Invisible=POW2
   #nw_Window_Transparent=POW2
   #nw_Window_FullScreen=POW2
   #nw_Window_FullScreenKioskMode=POW2 ; Caution, this mode will lock your desktop.
   #nw_Window_Default=0
EndEnumeration

Procedure.i InitNodeWebkit(EnginePath$)
   With nw
      ClearStructure(@nw, NW_ENGINE)
      InitializeStructure(@nw, NW_ENGINE)
      If FileSize(EnginePath$)>0
         \engine$=EnginePath$
         \isInitialized=#True
         ProcedureReturn \isInitialized
      EndIf
      \isInitialized=#False
      SendDebuggerError("Node-webkit initialization has failed!")
   EndWith
EndProcedure

Procedure.i CreateAppPackage(Name$="node-webkit-demo", Description$="My Node Webkit Demo", Version$="1.0.0", Keywords$="node-webkit,demo")
   With nw
      If \isInitialized
         \app\json=CreateJSON(#PB_Any)
         If IsJSON(\app\json)
            Protected appJson=SetJSONObject(JSONValue(\app\json))
            SetJSONString(AddJSONMember(appJson, "name"), LCase(Name$))
            SetJSONString(AddJSONMember(appJson, "description"), Description$)
            SetJSONString(AddJSONMember(appJson, "version"), Version$)
            SetJSONString(AddJSONMember(appJson, "window"), "[MAIN_WINDOW_JSON]")
            If Keywords$
               Protected keywordsJson=SetJSONArray(AddJSONMember(appJson, "keywords"))
               Protected keyword$, keywordIndex
               For keywordIndex=1 To CountString(Keywords$, ",") + 1
                  keyword$=Trim(StringField(Keywords$, keywordIndex, ","))
                  SetJSONString(AddJSONElement(keywordsJson), keyword$)
               Next
            EndIf
            ProcedureReturn \app
         EndIf
      Else
         SendDebuggerError("Node-webkit engine is not initialized!")
      EndIf
   EndWith
EndProcedure

Procedure SetAppSingleInstance(SingleInstance=#True)
   With nw
      If IsJSON(\app\json)
         Protected appJson=JSONValue(\app\json)
         SetJSONBoolean(AddJSONMember(appJson, "single-instance"), SingleInstance)
      Else
         SendDebuggerError("Node-webkit app package is not configured!")
      EndIf
   EndWith
EndProcedure

Procedure SetAppContributors(Name$, Email$="", Web$="")
   With nw
      If IsJSON(\app\json)
         Protected appJson=JSONValue(\app\json)
         Protected contributorsJson=GetJSONMember(appJson, "contributors")
         If Not contributorsJson
            contributorsJson=SetJSONArray(AddJSONMember(appJson, "contributors"))
         EndIf
         
         Protected contributorJson=SetJSONObject(AddJSONElement(contributorsJson))
         SetJSONString(AddJSONMember(contributorJson, "name"), Name$)
         If Web$ : SetJSONString(AddJSONMember(contributorJson, "web"), Web$) : EndIf
         If Email$ : SetJSONString(AddJSONMember(contributorJson, "email"), Email$) : EndIf
      Else
         SendDebuggerError("Node-webkit app package is not configured!")
      EndIf
   EndWith
EndProcedure

Procedure SetAppMaintainers(Name$, Email$="", Web$="")
   With nw
      If IsJSON(\app\json)
         Protected appJson=JSONValue(\app\json)
         Protected maintainersJson=GetJSONMember(appJson, "maintainers")
         If Not maintainersJson
            maintainersJson=SetJSONArray(AddJSONMember(appJson, "maintainers"))
         EndIf
         
         Protected maintainerJson=SetJSONObject(AddJSONElement(maintainersJson))
         SetJSONString(AddJSONMember(maintainerJson, "name"), Name$)
         If Web$ : SetJSONString(AddJSONMember(maintainerJson, "web"), Web$) : EndIf
         If Email$ : SetJSONString(AddJSONMember(maintainerJson, "email"), Email$) : EndIf
      Else
         SendDebuggerError("Node-webkit app package is not configured!")
      EndIf
   EndWith
EndProcedure

Procedure.i CreatePage(File$="index.html", Content$="")
   With nw
      If IsJSON(\app\json)
         Static Id : Id + 1
         Protected *page.NW_PAGE=AddMapElement(\pages(), "" + Id)
         *page\id=Id
         *page\file$=File$
         If FindString(Content$, "</html>", 1, #PB_String_NoCase)
            *page\html$=Content$
         Else
            *page\html$="<!DOCTYPE html>" + 
                        "<html>" + 
                        "<head>" + 
                        "</head>" + 
                        "<body>" + 
                        Content$ + 
                        "</body>" + 
                        "</html>"
         EndIf
         *page\file=CreateFile(#PB_Any, File$)
         If IsFile(*page\file)
            WriteString(*page\file, *page\html$)
            
            ProcedureReturn *page
         EndIf
      Else
         SendDebuggerError("Node-webkit app package is not configured!")
      EndIf
   EndWith
EndProcedure

Procedure InsertPageContent(Page, Content$, TargetTag$="body")
   With nw
      Protected *page.NW_PAGE=Page
      If *page And IsFile(*page\file)
         Protected pos=FindString(\pages()\html$, "</" + TargetTag$ + ">", 1, #PB_String_NoCase)
         If pos
            ;replace file content
            *page\html$=InsertString(*page\html$, Content$, pos)
            FileSeek(*page\file, 0)
            TruncateFile(*page\file)
            WriteString(*page\file, *page\html$)
         EndIf
      Else
         SendDebuggerError("Node-webkit page '" + Page + "' is not valid!")
      EndIf
   EndWith
EndProcedure

Procedure InsertPageScript(Page, FileOrContent$, IsScriptFile=#True, TargetTag$="head")
   With nw
      Protected *page.NW_PAGE=Page
      If *page And IsFile(*page\file)
         Protected insert$
         If IsScriptFile
            insert$="<script src='" + FileOrContent$ + "'></script>"
         Else
            insert$="<script>" + FileOrContent$ + "</script>"
         EndIf         
         InsertPageContent(Page, insert$, TargetTag$)         
      Else
         SendDebuggerError("Node-webkit page '" + Page + "' is not valid!")
      EndIf
   EndWith   
EndProcedure

Procedure InsertPageStyle(Page, FileOrContent$, IsStyleFile=#True, TargetTag$="head")
   With nw
      Protected *page.NW_PAGE=Page
      If *page And IsFile(*page\file)
         Protected insert$
         If IsStyleFile
            insert$="<link rel='stylesheet' href='" + FileOrContent$ + "'/>"
         Else
            insert$="<style>" + FileOrContent$ + "</style>"
         EndIf         
         InsertPageContent(Page, insert$, TargetTag$)
      Else
         SendDebuggerError("Node-webkit page '" + Page + "' is not valid!")
      EndIf
   EndWith
EndProcedure

Procedure.i CreateWindow(x, y, Width, Height, Title$="", Flags=#nw_Window_Default, Page$="index.html", Icon$="default-icon.png")
   With nw
      If IsJSON(\app\json)
         Static Id : Id + 1
         Protected *win.NW_WINDOW=AddMapElement(\windows(), "" + Id)
         *win\id=Id
         *win\json=CreateJSON(#PB_Any)
         If IsJSON(*win\json)
            Protected winJson=SetJSONObject(JSONValue(*win\json))
            SetJSONString(AddJSONMember(winJson, "title"), Title$)
            SetJSONInteger(AddJSONMember(winJson, "width"), Width)
            SetJSONInteger(AddJSONMember(winJson, "height"), Height)
            SetJSONBoolean(AddJSONMember(winJson, "toolbar"), Bool(Flags & #nw_Window_HasToolbar))
            SetJSONBoolean(AddJSONMember(winJson, "resizable"), Bool(Flags & #nw_Window_Resizable))
            SetJSONBoolean(AddJSONMember(winJson, "show"), Bool(Not (Flags & #nw_Window_Invisible)))
            SetJSONBoolean(AddJSONMember(winJson, "frame"), Bool(Not (Flags & #nw_Window_HideFrame)))
            SetJSONBoolean(AddJSONMember(winJson, "show_in_taskbar"), Bool(Not (Flags & #nw_Window_HideTaskbarButton)))
            SetJSONBoolean(AddJSONMember(winJson, "always-on-top"), Bool(Flags & #nw_Window_AlwaysOnTop))
            SetJSONBoolean(AddJSONMember(winJson, "transparent"), Bool(Flags & #nw_Window_Transparent))
            SetJSONBoolean(AddJSONMember(winJson, "fullscreen"), Bool(Flags & #nw_Window_FullScreen))
            SetJSONBoolean(AddJSONMember(winJson, "kiosk"), Bool(Flags & #nw_Window_FullScreenKioskMode)) ; Caution, this mode will lock your desktop.
            
            Protected position$=""
            If Bool(Flags & #nw_Window_CenteredPosition) : position$="center" : EndIf
            If Bool(Flags & #nw_Window_MousePosition) : position$="mouse" : EndIf
            If position$
               SetJSONString(AddJSONMember(winJson, "position"), position$)
            Else
               SetJSONInteger(AddJSONMember(winJson, "x"), x)
               SetJSONInteger(AddJSONMember(winJson, "y"), y)
            EndIf
            If Icon$ : SetJSONString(AddJSONMember(winJson, "icon"), Icon$) : EndIf
            SetJSONString(AddJSONMember(winJson, "open-page-url"), Page$)
            
            ProcedureReturn *win
         EndIf
      Else
         SendDebuggerError("Node-webkit app package is not configured!")
      EndIf
   EndWith
EndProcedure

Procedure SetWindowBounds(Window, MinWidth=#PB_Ignore, MinHeight=#PB_Ignore, MaxWidth=#PB_Ignore, MaxHeight=#PB_Ignore)
   With nw
      Protected *win.NW_WINDOW=Window
      If *win And IsJSON(*win\json)
         Protected winJson=(JSONValue(*win\json))
         RemoveJSONMember(winJson, "min_width")
         RemoveJSONMember(winJson, "min_height")
         RemoveJSONMember(winJson, "max_width")
         RemoveJSONMember(winJson, "max_height")
         If MinWidth<>#PB_Ignore : SetJSONInteger(AddJSONMember(winJson, "min_width"), MinWidth) : EndIf
         If MinHeight<>#PB_Ignore : SetJSONInteger(AddJSONMember(winJson, "min_height"), MinHeight) : EndIf
         If MaxWidth<>#PB_Ignore : SetJSONInteger(AddJSONMember(winJson, "max_width"), MaxWidth) : EndIf
         If MaxHeight<>#PB_Ignore : SetJSONInteger(AddJSONMember(winJson, "max_height"), MaxHeight) : EndIf
      Else
         SendDebuggerError("Node-webkit window '" + Window + "' is not configured!")
      EndIf
   EndWith
EndProcedure

Procedure SetWindowIcon(Window, Icon$="default-icon.png")
   With nw
      Protected *win.NW_WINDOW=Window
      If *win And IsJSON(*win\json)
         Protected winJson=(JSONValue(*win\json))
         RemoveJSONMember(winJson, "icon")
         If Icon$ : SetJSONString(AddJSONMember(winJson, "icon"), Icon$) : EndIf
      Else
         SendDebuggerError("Node-webkit window '" + Window + "' is not configured!")
      EndIf
   EndWith
EndProcedure

Procedure SetWindowPage(Window, Page$="index.html")
   With nw
      Protected *win.NW_WINDOW=Window
      If *win And IsJSON(*win\json)
         Protected winJson=(JSONValue(*win\json))
         RemoveJSONMember(winJson, "open-page-url")
         If Page$ : SetJSONString(AddJSONMember(winJson, "open-page-url"), Page$) : EndIf
      Else
         SendDebuggerError("Node-webkit window '" + Window + "' is not configured!")
      EndIf
   EndWith
EndProcedure

Procedure.i BuildAppPackage(Run=#False, MainWindow=#PB_Default)
   With nw
      If MainWindow=#PB_Default And MapSize(\windows())>0
         ;use last created window as Principal Window
         MainWindow=\windows()
      EndIf
      Protected *win.NW_WINDOW=MainWindow
      If *win And IsJSON(*win\json) And IsJSON(\app\json)
         Protected winJson=(JSONValue(*win\json))
         Protected appJson=(JSONValue(\app\json))
         SetJSONString(AddJSONMember(appJson, "main"), GetJSONString(GetJSONMember(winJson, "open-page-url")))
         Protected winJson$=ComposeJSON(*win\json)
         Protected appJson$=ComposeJSON(\app\json)
         Protected packageJson$=ReplaceString(appJson$, #DQUOTE$ + "[MAIN_WINDOW_JSON]" + #DQUOTE$, winJson$)
         Protected packageJson=ParseJSON(#PB_Any, packageJson$)
         If SaveJSON(packageJson, "package.json", #PB_JSON_PrettyPrint)
            FreeJSON(packageJson)
            
            If Run
               RunProgram(nw\engine$, GetCurrentDirectory(), "")
            EndIf
            ProcedureReturn
         EndIf
      EndIf
      SendDebuggerError("Node-webkit app package building has failed! You must create and select the main window.")
   EndWith
EndProcedure

CompilerIf #PB_Compiler_IsMainFile
   DisableExplicit
   ; ********************
   ; EXAMPLE 1
   ; ********************
   
   ;create default icon (if not exists)
   UsePNGImageEncoder()
   If FileSize("default-icon.png")<0 And CreateImage(0, 32, 32, 32, RGB(60, 100, 255))
      SaveImage(0, "default-icon.png", #PB_ImagePlugin_PNG)
   EndIf
   
   ;specify location of node-webkit application
   If InitNodeWebkit("node-webkit-v0.11.5-win-x64\nw.exe")      
      ;create app
      If CreateAppPackage()         
         ;create window
         If CreateWindow(20, 20, 200, 150)            
            ;build application and show main window
            BuildAppPackage(#True)
         EndIf
      EndIf      
   EndIf
   Delay(100)
   
   ; ********************
   ; EXAMPLE 2
   ; ********************
   
   ;specify location of node-webkit application
   If InitNodeWebkit("node-webkit-v0.11.5-win-x64\nw.exe")
      
      ;create app
      If CreateAppPackage("hello-world", "Hello World App", "0.1", "node-webkit, tutorial, purebasic")
         SetAppSingleInstance(#True)
         SetAppContributors("Eddy R.")
         SetAppContributors("Bill M.", "bill@pb-interest.com")
         SetAppMaintainers("Eddy R.")
         SetAppMaintainers("John Doe", "john-doe@purebasic-community.com", "http://www.purebasic-community.com")
         
         ;create custom icon (if not exists)
         UsePNGImageEncoder()
         If FileSize("face_icon.png")<0 And CreateImage(0, 32, 32, 32, #PB_Image_Transparent)
            StartDrawing(ImageOutput(0))
            DrawingMode(#PB_2DDrawing_AlphaBlend | #PB_2DDrawing_Gradient)
            BackColor(RGBA(255, 0, 0, 255))
            GradientColor(0.8, RGBA(255, 0, 0, 255))
            FrontColor(RGBA(100, 0, 0, 255))
            LinearGradient(0, 0, 0, 32)
            RoundBox(0, 0, 32, 32, 6, 6)
            DrawingMode(#PB_2DDrawing_Gradient)
            ResetGradientColors()
            BackColor(RGB(255, 255, 255))
            FrontColor(RGB(131, 190, 255))
            CircularGradient(10, 10, 10)
            Circle(10, 10, 10)
            CircularGradient(25, 15, 5)
            Circle(25, 15, 5)
            DrawingMode(#PB_2DDrawing_Default)
            Circle(12, 12, 4, RGB(0, 0, 0))
            Circle(27, 17, 2, RGB(0, 0, 0))
            StopDrawing()
            SaveImage(0, "face_icon.png", #PB_ImagePlugin_PNG)
         EndIf
         
         ;create custom page
         If CreatePage("home_page.html", 
                       "<h1>Hello World ! </h1>" + 
                       "We are using node.js<script>document.write(process.version)</script>.")
         EndIf
         
         ;create window
         mainWin=CreateWindow(0, 0, 350, 300, "Main Window", #nw_Window_CenteredPosition | #nw_Window_Resizable | #nw_Window_AlwaysOnTop | #nw_Window_HideTaskbarButton)
         If mainWin
            SetWindowBounds(mainWin, 300, 200)
            SetWindowIcon(mainWin, "face_icon.png")
            SetWindowPage(mainWin, "home_page.html")
            
            ;build / run application then show home
            BuildAppPackage(#True, mainWin)            
         EndIf         
      EndIf
      
   EndIf
CompilerEndIf

eddy · Post by **eddy** » Fri Jan 02, 2015 4:45 pm

Here is an animated button example
- using css tricks from: http://www.instantshift.com/2012/07/12/ ... pure-css3/
- using css minifier: http://csscompressor.com/

Code: Select all

; ********************
   ; EXAMPLE 3 : fancy animated button + some window commands
   ; ********************
   
   ;specify location of node-webkit application
   If InitNodeWebkit("node-webkit-v0.11.5-win-x64\nw.exe")
      
      ;create app
      If CreateAppPackage("hello-world", "Hello World App", "0.1", "node-webkit, tutorial, purebasic")
         SetAppSingleInstance(#True)
         SetAppContributors("Eddy R.")
         SetAppContributors("Bill M.", "bill@pb-interest.com")
         SetAppMaintainers("Eddy R.")
         SetAppMaintainers("John Doe", "john-doe@purebasic-community.com", "http://www.purebasic-community.com")
         
         ;create custom icon (if not exists)
         UsePNGImageEncoder()
         If FileSize("face_icon.png")<0 And CreateImage(0, 32, 32, 32, #PB_Image_Transparent)
            StartDrawing(ImageOutput(0))
            DrawingMode(#PB_2DDrawing_AlphaBlend | #PB_2DDrawing_Gradient)
            BackColor(RGBA(255, 0, 0, 255))
            GradientColor(0.8, RGBA(255, 0, 0, 255))
            FrontColor(RGBA(100, 0, 0, 255))
            LinearGradient(0, 0, 0, 32)
            RoundBox(0, 0, 32, 32, 6, 6)
            DrawingMode(#PB_2DDrawing_Gradient)
            ResetGradientColors()
            BackColor(RGB(255, 255, 255))
            FrontColor(RGB(131, 190, 255))
            CircularGradient(10, 10, 10)
            Circle(10, 10, 10)
            CircularGradient(25, 15, 5)
            Circle(25, 15, 5)
            DrawingMode(#PB_2DDrawing_Default)
            Circle(12, 12, 4, RGB(0, 0, 0))
            Circle(27, 17, 2, RGB(0, 0, 0))
            StopDrawing()
            SaveImage(0, "face_icon.png", #PB_ImagePlugin_PNG)
         EndIf
         
         ;create custom page
         If CreatePage("home_page.html", 
                       "<h1>Hello World ! </h1>" + 
                       "<p>We are using node.js<script>document.write(process.version)</script>.</p>" + 
                       "<style>" + 
                       "   body { text-align:center } button { width:90% }" + 
                       "   button {font-family:Helvetica,Arial,sans-serif;font-size:18px;font-weight:700;color:#FFF;padding:10px 75px;margin:0 20px;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959,offx=1,offy=1);text-decoration:none}" + 
                       "   .shape-1 {border-radius:5px 50px 5px 50px;}" + 
                       "   .red {border:solid 1px #720000;background-color:#c72a2a;background:linear-gradient(top,#c72a2a 0%,#9e0e0e 100%);box-shadow:0 0 1px #FF3300,inset 0 0 1px #FFF}" + 
                       "   .red:hover {background-color:#b52f2f;background:linear-gradient(top,#b52f2f 0%,#910b0b 100%)}" + 
                       "   .red:active {background-color:#8f2222;background:linear-gradient(top,#8f2222 0%,#660808 100%)}" + 
                       "   .effect-4 {transition:border-radius 1s;}.effect-4:hover{border-radius:50px 5px 50px 5px;-webkit-border-radius:50px 5px 50px 5px;}" + 
                       "</style>" + 
                       "<script>" + 
                       "   var currentWin=require('nw.gui').Window.get();" + 
                       "</script>" + 
                       "<p><button class='shape-1 red effect-4' onclick='currentWin.close()'>Close</button></p>" + 
                       "<p><button class='shape-1 red effect-4' onclick='currentWin.enterFullscreen()'>Enter FullScreen</button></p>" + 
                       "<p><button class='shape-1 red effect-4' onclick='currentWin.leaveFullscreen()'>Leave FullScreen</button></p>" + 
                       "<p><button class='shape-1 red effect-4' onclick='currentWin.maximize()'>Maximize</button></p>" + 
                       "<p><button class='shape-1 red effect-4' onclick='currentWin.restore()'>Restore</button></p>")
         EndIf
         
         ;create window
         mainWin=CreateWindow(0, 0, 450, 430, "Main Window", #nw_Window_CenteredPosition | #nw_Window_AlwaysOnTop | #nw_Window_Resizable)
         If mainWin
            SetWindowIcon(mainWin, "face_icon.png")
            SetWindowPage(mainWin, "home_page.html")
            
            ;build / run application then show home
            BuildAppPackage(#True, mainWin)            
         EndIf         
      EndIf      
   EndIf

Post by **Kiffi** » Sat Jan 03, 2015 5:16 pm

Hello eddy,

thanks for sharing!

here's another example (Ace-Editor):

Code: Select all

;specify location of node-webkit application
If InitNodeWebkit("[PathToYourNW]\nw.exe")
  
  ;create app
  If CreateAppPackage("ace-editor", "Ace Editor", "0.1", "node-webkit, tutorial, purebasic")
    SetAppSingleInstance(#True)
    
    Html.s = "<!DOCTYPE html>" + #CRLF$ + 
             "<html lang='en'>" + #CRLF$ + 
             "<head>" + #CRLF$ + 
             "<title>ACE in Action</title>" + #CRLF$ + 
             "<style type='text/css' media='screen'>" + #CRLF$ + 
             "  #editor { " + #CRLF$ + 
             "    position: absolute;" + #CRLF$ + 
             "    top: 0;" + #CRLF$ + 
             "    right: 0;" + #CRLF$ + 
             "    bottom: 0;" + #CRLF$ + 
             "    left: 0;" + #CRLF$ + 
             "  }" + #CRLF$ + 
             "</style>" + #CRLF$ + 
             "</head>" + #CRLF$ + 
             "<body>" + #CRLF$ + 
             "" + #CRLF$ + 
             "<div id='editor'>" +
             "function foo(items) {" + #CRLF$ + 
             "  var x = 'All this is syntax highlighted';" + #CRLF$ + 
             "  return x;" + #CRLF$ + 
             "}" + #CRLF$ + 
             "" + #CRLF$ + 
             "function faultyFunction(items {" + #CRLF$ + 
             "  // this is a faulty function (missing parenthesis) " + #CRLF$ + 
             "  var bar = 42;" + #CRLF$ + 
             "}" + 
             "</div>" + #CRLF$ + 
             "" + #CRLF$ + 
             "<script src='https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js'></script>" + #CRLF$ + 
             "" + #CRLF$ + 
             "<script>" + #CRLF$ + 
             "  var editor = ace.edit('editor');" + #CRLF$ + 
             "  editor.setTheme('ace/theme/chrome');" + #CRLF$ + 
             "  editor.getSession().setMode('ace/mode/javascript');" + #CRLF$ + 
             "</script>" + #CRLF$ + 
             "" + #CRLF$ + 
             "</body>" + #CRLF$ + 
             "</html>"
    
    ;create custom page
    If CreatePage("home_page.html", Html)
      ;create window
      mainWin=CreateWindow(0, 0, 600, 400, "Ace Editor", #nw_Window_CenteredPosition | #nw_Window_Resizable | #nw_Window_AlwaysOnTop | #nw_Window_HideTaskbarButton)
      If mainWin
        SetWindowBounds(mainWin, 300, 200)
        SetWindowPage(mainWin, "home_page.html")
        ;build / run application then show home
        BuildAppPackage(#True, mainWin)
      EndIf
    EndIf
    
  EndIf
  
EndIf

fsw · Post by **fsw** » Sun Jan 04, 2015 6:41 am

Did not test this yet, but have a question:
How big is the footprint?

eddy · Post by **eddy** » Sun Jan 04, 2015 12:04 pm

fsw wrote:Did not test this yet, but have a question:
How big is the footprint?

37MB
It's the only cons point.

It's standalone engine (2D, 3D, AUDIO, HTML and some server commands)

Mistrel · Post by **Mistrel** » Sun Jan 04, 2015 11:15 pm

fsw wrote:How big is the footprint?

I would guess that it could be recompiled with certain flags to remove features you don't intend to use.

Does it work on XP?

eddy · Post by **eddy** » Mon Jan 05, 2015 12:09 am

Mistrel wrote:I would guess that it could be recompiled with certain flags to remove features you don't intend to use.
Does it work on XP?

It runs fine on XP.

But I didn't found any project about custom build distrib...

Post by **Fred** » Mon Jan 05, 2015 12:27 pm

Looks nice

eddy · Post by **eddy** » Sun Jan 11, 2015 5:43 pm

Code: Select all

CompilerIf #PB_Compiler_IsMainFile
   DisableExplicit
   
   ; ********************
   ; EXAMPLE 4
   ; ********************
   
   ;specify location of node-webkit application
   If InitNodeWebkit("node-webkit-v0.11.5-win-x64\nw.exe")
      ;create app
      If CreateAppPackage("drag-window", "Drag window demo", "0.1", "node-webkit, drag, drop, css")
         ;create default page
         defaultPage=CreatePage()
         If defaultPage
            InsertPageStyle(defaultPage, "body { " + 
                                         "   background-color:rgba(55,55,55,.5); margin:10;padding:10; " + 
                                         "}" + #LF$ + 
                                         "div { " + #LF$ + 
                                         "   -webkit-user-select: none;" + 
                                         "   color: white; font: 18px bold; font-family: Arial;" + 
                                         "   text-align:center;text-shadow: 2px 2px 1px #595959;" + 
                                         "   padding: 10px 30px; margin: 0 20px;" + 
                                         "   border: solid 1px #3b7200; border-radius: 5px;" + 
                                         "   background: -webkit-linear-gradient(top, #88c72a 0%, #709e0e 100%);" + 
                                         "   box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;" + 
                                         "}" + 
                                         "div:hover { " + 
                                         "   background: -webkit-linear-gradient(top, #7fb52f 0%, #67910b 100%);" + 
                                         "}" + 
                                         "body > div:first-child {" + 
                                         "   -webkit-app-region: drag;" + 
                                         "   background: -webkit-linear-gradient(top, #FFFFFF 0%, #777777 100%);" + 
                                         "}", #False)
            InsertPageContent(defaultPage, "<div>DRAG ME</div><br/>" + 
                                           "<div>CLOSE ME</div>")
            InsertPageScript(defaultPage, "document.querySelector('body > div:nth-child(3)').addEventListener('click', function() {" + 
                                          "require('nw.gui').Window.get().close();" + 
                                          "});", #False, "body")
         EndIf
         ;create window
         If CreateWindow(0, 0, 300, 170, "Drag Window", #nw_Window_CenteredPosition | #nw_Window_AlwaysOnTop | #nw_Window_HideFrame | #nw_Window_Transparent)
            ;build / run application
            BuildAppPackage(#True)
         EndIf
      EndIf
   EndIf
CompilerEndIf

PureBasic Forums - English

Node-Webkit generator : chromium window engine

Node-Webkit generator : chromium window engine

Re: Node-Webkit generator : chromium window engine

Re: Node-Webkit generator : chromium window engine

Re: Node-Webkit generator : chromium window engine

Re: Node-Webkit generator : chromium window engine

Re: Node-Webkit generator : chromium window engine

Re: Node-Webkit generator : chromium window engine

Re: Node-Webkit generator : chromium window engine

Re: Node-Webkit generator : chromium window engine