![]() ![]() In the example above, I'm using the UI to specify the JavaScript to be run, and to display the result. Var speadsheet As String = JSEngine1.ExecuteJavaScriptSync( TextArea1.Text )ĭim file As FolderItem = ( "sheetsjs-demo.xlsx" )įileStream = TextOutputStream.Create( file )įileStream.Write( DecodeBase64( speadsheet ) ) To save the resulting XLSX file to disk, in Xojo, you would do something like this: Here's an example of JavaScript that uses SheetJS to create a simple spreadsheet with a single workbook. To use SheetJS, in the Opening event for the instance of JSEngine, add: You can learn more about the Professional Edition here: (In the examples that follow, I'm using the Community Edition.) The "Community Edition" is an open source version, while the "Professional Edition" is a paid version that provides some additional functionality (as well as priority support). The JavaScript being run first uses functionality provided by Moment, and then by Lodash. Here's a short animation showing how the app works. TextArea2.Text = JSEngine1.ExecuteJavaScriptSync( TextArea1.Text ) The Pressed event for the button looks like this: In this example, I'm loading Moment (a popular library that can be used to parse, validate, manipulate, and display dates and times) and Lodash (which makes it easy to work with arrays, numbers, objects, and strings). The Opening event for the instance of JSEngine adds two libraries to the engine. Here's what the app's window looks like in the Xojo IDE.Ĭlick the image to view a larger version. The app that I developed can be found in the zip file. I position the JSEngine control so that it is offscreen (with a width and height of 50 pixels, and with a left position of -100). To test JSEngine, I created an app with a simple interface, consisting of an instance of the JSEngine class, two text areas (one used to enter adhoc JavaScript code, and the other to display the result), a button to execute the code (using the ExecuteJavaScriptSync method), and a button that resets the engine (refreshes the control and reloads any of the libraries). And most importantly, you can utilize the functionality of any remote libraries that you've loaded. At that point, you can use JSEngine's ExecuteJavaScriptSync method to run JavaScript code and get back the results. When an instance of the JSEngine class is opened, it automatically loads a simple HTML page that includes references to the remote libraries (via "script" tags in the document's head). ![]() The Libraries property is an array, so you can use it to load multiple libraries. (For example, the URL to the SheetJS library is: ) To load a JavaScript library, you add an element to the array, and do so in the Opening event handler for the class instance. ![]() Each element of the array represents a remote JavaScript library's URL. JSEngine has a "Libraries" property, which is an array of strings. To get started, I developed a subclass of the DesktopHTMLViewer control called "JSEngine." My goal with JSEngine was to make it easy to load JavaScript libraries. Here's a link to a zip file that contains two Xojo project files: The projects include the classes and code that I'm about to discuss. I'll also share two classes - JSEngine (a subclass of Xojo's DesktopHTMLViewer control that makes it easy to work with external JavaScript libraries) and ExcelEngine (a subclass of JSEngine that makes it easy to work with SheetJS). In this post, I'll show how you can use popular JavaScript libraries in Xojo desktop projects. That got me thinking: I could utilize SheetJS by using a Xojo DesktopHTMLViewer control and its ExecuteJavaScriptSync method. For those projects I used the popular SheetJS JavaScript library, and had a lot of success with it. In the past, I've developed Web applications that also needed to generate Excel files. I reached a point where I needed to export the price lists as Excel files. The app generates price lists using somewhat complex business logic. A few weeks ago, I used Xojo to develop a custom macOS / Windows desktop application for a client. ![]()
0 Comments
Leave a Reply. |