### Add 'Hello World' Example Menu Item
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/index.html
Adds a menu item to the examples submenu that opens the 'Hello World' example in a new window.
```javascript
examplesMenu.AddChild(new jsa.MenuEntry( {
id : '#EXAMPLE1',
content : 'Hello World',
onClickCallback : function() {
//open new window
window.open('Examples/HelloWorld.html', '_blank');
}
}));
```
--------------------------------
### Add 'All UI Elements' Example Menu Item
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/index.html
Adds a menu item to the examples submenu that opens the 'All UI Elements' example in a new window.
```javascript
examplesMenu.AddChild(new jsa.MenuEntry( {
id : '#EXAMPLE2',
content : 'All UI Elements',
onClickCallback : function() {
//open new window
window.open('Examples/AllUiElements.html', '_blank');
}
}));
```
--------------------------------
### Add Examples Menu Entry with Submenu
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/index.html
Adds a top-level menu entry that contains a popup submenu for examples. This demonstrates hierarchical menu creation.
```javascript
let examplesMenuEntry = new jsa.MenuEntry( {
id :'#Examples',
content : 'Examples',
hasPopup : true
});
app.menu.AddChild(examplesMenuEntry);
let examplesMenu = new jsa.Menu( {
isPopup : true,
popupDirection : 'bottom'
});
examplesMenuEntry.SetSubmenu(examplesMenu);
```
--------------------------------
### Label with Icons Example
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.min.html
Shows a label component with preceding and succeeding icons.
```html
```
--------------------------------
### Checkbox and Label Example
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.min.html
Demonstrates a standard checkbox and a disabled checkbox with associated labels and error indications.
```html
Error wrong click
Error wrong click
```
--------------------------------
### Dynamically Change View Name
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.html
This example demonstrates how to dynamically change the name of a view at regular intervals using a predefined array of strings. The name is truncated if it exceeds the available space.
```javascript
let dynViewNames = ['I am changing my name over time.', 'And some times my title is much to long. Much longer than it fits to the header and the title bar. If everything works well, it should be truncated.', 'After that, I change it back.']
let dynViewActive = 0;
let toggleViewName = function() {
if(dynViewActive>=dynViewNames.length) {
dynViewActive = 0;
}
viewB.SetName("View B: "+dynViewNames[dynViewActive]);
dynViewActive++;
}
window.setInterval(toggleViewName,3000);
```
--------------------------------
### Create Toolbar Button - Open MsgBox
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.min.html
Adds a toolbar button that displays a message box when clicked. This is a simple example of triggering a modal dialog from the toolbar.
```javascript
let tool2 = new jsa.Tool({
onClickCallback : function(event) {
app.AddChild(new jsa.MsgBox({ name: 'MsgBox', content: 'Tool2 activated' }));
},
hasTooltip: true,
tooltip: 'Open a MsgBox'
});
app.toolbar.AddChild(tool2);
```
--------------------------------
### Disabled Button Example
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.min.html
Illustrates a disabled submit button within a form group.
```html
```
--------------------------------
### Create a Basic jsApplication
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/README.md
This snippet demonstrates how to initialize a jsApplication and create a simple view with 'Hello World' content. The view is then added and activated.
```javascript
let myApp = new jsa.Application( {
name:'My First Application',
});
let myView = new jsa.View({
name:'Welcome',
content:'Hello World!'
});
myApp.viewManager.AddChild(myView);
myApp.viewManager.ActivateView(myView);
```
--------------------------------
### Add Welcome View to Application
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/index.html
Creates and adds a MarkdownView for the welcome screen, loading content from 'README.md'. This view is intended to display introductory information.
```javascript
let welcomeView = new MarkdownView({
name: 'Welcome',
hasHeader: true,
containerStyle: ['jsa-view-container','md-view-container'],
content: 'Loading...',
url: 'README.md'
});
app.viewManager.AddChild(welcomeView);
```
--------------------------------
### Create Help Menu
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.min.html
Constructs a 'Help' menu with options for 'About', 'Documentation', and 'Clear Settings'. The 'Clear Settings' option invokes the application's settings manager.
```javascript
let helpMenuEntry = new jsa.MenuEntry( {
id :'#Help',
content : 'Help',
hasPopup : true
});
app.menu.AddChild(helpMenuEntry);
let helpMenu = new jsa.Menu( {
isPopup : true,
popupDirection : 'bottom'
});
helpMenuEntry.SetSubmenu(helpMenu);
helpMenu.AddChild( new jsa.MenuEntry( {
id : '#HELP_ABOUT',
content : 'About',
onClickCallback : function() {
alert('About 1!')
}
}));
helpMenu.AddChild( new jsa.MenuEntry( {
id : '#HELP_DOC',
content : 'Documentation',
onClickCallback : function() {
alert('Documentation!')
}
}));
helpMenu.AddChild( new jsa.MenuEntry( {
id : '#HELP_SETTINGS_CLEAR',
content : 'Clear Settings',
onClickCallback : function() {
app.settingsManager.Clear();
}
}));
```
--------------------------------
### Create and Populate View Menu
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.min.html
Dynamically creates and populates a 'View' menu based on available views in the application. It also sets up an observer to update the menu when view changes occur.
```javascript
let viewMenuEntry = new jsa.MenuEntry( {
id :'#VIEW',
content : 'View',
startEnabled : false,
hasPopup : true
});
app.menu.AddChild(viewMenuEntry);
let viewMenu = new jsa.Menu( {
isPopup : true,
popupDirection : 'bottom'
});
viewMenuEntry.SetSubmenu(viewMenu);
let views = app.viewManager.GetChildren();
for(let i=0;i0) {
viewMenuEntry.Enable();
}
```
--------------------------------
### Initialize jsApplication
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/index.html
Creates a new jsApplication instance with a tab bar enabled. This is the main entry point for setting up the application.
```javascript
let app = new jsa.Application( {
name: 'jsaApplication',
hasTabbar: true
});
```
--------------------------------
### Create Documentation Menu Entry
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/index.html
Adds a 'Documentation' menu entry to the application's main menu. This entry has a popup submenu for further options.
```javascript
let documentationMenuEntry = new jsa.MenuEntry( {
id :'#DOC',
content : 'Documentation',
hasPopup : true,
});
app.menu.AddChild(documentationMenuEntry);
```
--------------------------------
### Creating a File Menu
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.html
Constructs a 'File' menu with a submenu for 'Open Recent' and other options like 'Settings'. Menu entries can have tooltips and associated actions.
```javascript
let fileMenuEntry = new jsa.MenuEntry( {
id :'#FILE',
content : 'File',
hasPopup : true,
hasTooltip : true,
tooltip: 'All tasks related to files.'
});
app.menu.AddChild(fileMenuEntry);
let fileMenu = new jsa.Menu({ isPopup: true, popupDirection: 'bottom' });
fileMenuEntry.SetSubmenu(fileMenu);
fileMenu.AddChild( new jsa.MenuEntry( {
id : '#FILE_SAVE',
content : 'Save',
onClickCallback : function() {alert('Save!')}
}));
```
```javascript
let recentMenuEntry = new jsa.MenuEntry( {
id : '#FILE_OPENRECENT',
content : 'Open Recent',
hasPopup : true,
startEnabled : true,
hasTooltip : true,
tooltip: 'The list of recently opened files'
});
fileMenu.AddChild(recentMenuEntry);
let recentMenu = new jsa.Menu({ isPopup: true, });
recentMenuEntry.SetSubmenu(recentMenu);
recentMenu.AddChild( new jsa.MenuEntry( {
id : '#FILE_1',
content : 'Dummy.file',
onClickCallback : function() {alert('dummy.file!')}
}));
recentMenu.AddChild( new jsa.MenuEntry( {
id : '#FILE_2',
content : 'Dummy.file',
onClickCallback : function() {alert('dummy.file!')}
}));
recentMenu.AddChild( new jsa.MenuEntry( {
id : '#FILE_3',
content : 'Dummy.file',
onClickCallback : function() {alert('dummy.file!')}
}));
recentMenu.AddChild( new jsa.MenuEntry( {
id : '#FILE_4',
content : 'Dummy.file',
onClickCallback : function() {alert('dummy.file!')}
}));
```
```javascript
fileMenu.AddChild( new jsa.MenuEntry( {
id : '#FILE_SETTINGS',
content : 'Settings',
onClickCallback : function() {alert('Settings!')}
}));
```
--------------------------------
### Create and Configure a Modal Dialog
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.html
This snippet shows how to instantiate a modal dialog, add child components like a tabbar, and register event listeners for its input fields. It also demonstrates enabling/disabling buttons.
```javascript
let modalDialog = new jsa.Dialog({ title: 'Dialog Title', content: ''}); let dialogTabbar = new jsa.Tabbar({ style : ['jsa-tabbar','jsa-tabbar-bottom'] }); let tab1 = new jsa.Tab({ content : 'Tab 1' }); dialogTabbar.AddChild(tab1); let tab2 = new jsa.Tab({ content : 'Tab 2' }); dialogTabbar.AddChild(tab2); let tab3 = new jsa.Tab({ content : 'Tab 3', }); dialogTabbar.AddChild(tab3); let tab4 = new jsa.Tab({ content : 'Tab 4' }); dialogTabbar.AddChild(tab4); dialogTabbar.SetActiveTab(tab3); modalDialog.AddChild(dialogTabbar); app.AddChild(modalDialog); //register callback to modal inputs document.getElementById('inputEmail3').onchange = function(evt) { app.settingsManager.Set('modal.email',this.value); }; document.getElementById('inputPassword3').onchange = function(evt) { app.settingsManager.Set('modal.password',this.value); }; document.getElementById('gridCheck1').onchange = function(evt) { app.settingsManager.Set('modal.check1',this.checked); }; modalDialog.DisableButton('close'); modalDialog.EnableButton('close');
```
--------------------------------
### Add Documentation View to Application
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/index.html
Creates and adds a standard View component to display documentation within an iframe. The iframe source is set to 'Doc/Application.html'.
```javascript
let documentationView = new jsa.View({
name: 'Documentation',
hasHeader: true,
containerStyle: ['jsa-view-container','jsa-view-container-no-header'],
content: ''
});
app.viewManager.AddChild(documentationView);
```
--------------------------------
### Create Resizable Sticky Note
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.min.html
Initializes a 'sticky' UI element with a North-West direction, an icon, content, and makes it resizable and initially collapsed. The `Enable()` method is commented out.
```javascript
let stickyNw = new jsa.Sticky( {
direction : 'nw',
icon : 'img/tree.svg',
content : 'I am stick NW!!',
startEnabled : false,
isResizable : true,
startCollapsed : true,
});
// stickyNw.Enable();
```
--------------------------------
### Create File Menu
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.min.html
Defines a 'File' menu entry with a tooltip and sets up a sub-menu for file-related actions. Includes options for 'Save' and 'Open Recent'.
```javascript
let fileMenuEntry = new jsa.MenuEntry( {
id :'#FILE',
content : 'File',
hasPopup : true,
hasTooltip : true,
tooltip: 'All tasks related to files.'
});
app.menu.AddChild(fileMenuEntry);
let fileMenu = new jsa.Menu({ isPopup: true, popupDirection: 'bottom' });
fileMenuEntry.SetSubmenu(fileMenu);
fileMenu.AddChild( new jsa.MenuEntry( {
id : '#FILE_SAVE',
content : 'Save',
onClickCallback : function() {alert('Save!')}
}));
```
--------------------------------
### Create and Configure MarkdownView
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/index.html
Initializes a MarkdownView component, setting its URL and enabling DOM creation. This view is used for rendering Markdown content.
```javascript
function MarkdownView(params,createDom=true) {
jsa.View.call(this,params,false);
//params
this.url = '';
jsa.CopyParams(this,params);
//internals
this.markdownRenderer = new showdown.Converter({simplifiedAutoLink:true});
if(createDom) {
this.CreateDom();
}
};
```
--------------------------------
### Create and Activate JSA Application and View
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/HelloWorld.html
Instantiate a JSA application and a view, then add and activate the view within the application's view manager. Ensure the JSA library is loaded before executing this code.
```javascript
let myApp = new jsa.Application( { name:'My First Application', }); let myView = new jsa.View({ name:'Welcome', content:'Hello World!' }); myApp.viewManager.AddChild(myView); myApp.viewManager.ActivateView(myView);
```
--------------------------------
### Create Documentation Submenu
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/index.html
Defines and attaches a popup submenu to the 'Documentation' menu entry. This submenu contains options like 'API Documentation'.
```javascript
let documentationMenu = new jsa.Menu( {
isPopup : true,
popupDirection : 'bottom'
});
documentationMenuEntry.SetSubmenu(documentationMenu);
documentationMenu.AddChild(new jsa.MenuEntry( {
id : '#APIDOC',
content : 'API Documentation',
onClickCallback : function() {
app.viewManager.ActivateView(documentationView);
}
}));
```
--------------------------------
### Creating and Managing Views
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.html
Shows the creation of different View components with various properties like name, icon, callbacks, and styling. Views are added to the application's view manager.
```javascript
let workspaceView = new jsa.View({ name: 'Workspace', icon: 'jsa-icon-folder-light', onFocusCallback : function() { alert('Workspace activated');}, onUnfocusCallback : function() { alert('Workspace deactivated');}, content: 'Workspace', hasHeader: true, containerStyle:
['jsa-view-container','jsa-view-container-with-header'
], headerStyle:
['jsa-view-header','my-view-workspace-header'
], isClosable: false });
app.viewManager.AddChild(workspaceView);
```
```javascript
let viewA = new jsa.View({ name: 'View A', icon: 'img/view-A.svg', content: 'Functions Editor', hasHeader: true, containerStyle:
['jsa-view-container','jsa-view-container-with-header'
], headerStyle:
['jsa-view-header','my-view-functions-header'
], isClosable: true });
app.viewManager.AddChild(viewA);
```
```javascript
let viewB = new jsa.View({ name: 'View B', icon: 'img/view-B.svg', content: 'Hardware Editor', hasHeader: true, containerStyle:
['jsa-view-container','jsa-view-container-with-header'
], headerStyle:
['jsa-view-header','my-view-hardware-header'
], isClosable: true });
app.viewManager.AddChild(viewB);
```
```javascript
let viewC = new jsa.View({ name: 'View C', icon: 'img/view-C.svg', content: 'Allocations Editor', hasHeader: true, containerStyle:
['jsa-view-container','jsa-view-container-with-header'
], headerStyle:
['jsa-view-header','my-view-allocations-header'
], isClosable: true, canPopup: true });
app.viewManager.AddChild(viewC);
```
```javascript
app.viewManager.ActivateView(dashboardView);
```
--------------------------------
### Display Repository Information Bubble
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/index.html
Shows an information bubble when the GotoRepoTool is clicked. This bubble contains details about the repository and a button to open it.
```javascript
GotoRepoTool.prototype = Object.create(jsa.Tool.prototype);
GotoRepoTool.prototype.ShowInfo = function() {
let app = this.GetApp();
if(app) {
if(!this.infoBubble) {
this.infoBubble = new jsa.Bubble({
name: '',
enabled: true,
isResizable: false,
isMinimizable: false,
autoHide: true,
isClosable: false,
borderOffset: 30, //px
penaltyN: 0,
penaltyE: 2000,
penaltyS: 0,
penaltyW: 2000,
style: ['jsa-bubble','goto-repo-tool-bubble']
});
app.AddChild(this.infoBubble);
//add a label
this.infoBubble.AddChild(new jsa.CustomFlatContainer({ content: 'jsApplication is managed on github.' }));
this.infoBubble.AddChild(new jsa.Button({
content: 'Open Repository',
onClickCallback: function(evt) {
window.open('https://gitlab.com/jsapplication/jsapplication', '_blank');
}
}));
}
this.infoBubble.PopupOnDomElement(this.GetDomElement());
}
return this;
};
```
--------------------------------
### Creating Textarea Controls
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.html
Demonstrates the creation of TextareaCtrl instances with different configurations, including read-only and disabled states.
```javascript
new jsa.TextareaCtrl({ value: 'TextareaCtrl' })
```
```javascript
new jsa.TextareaCtrl({ value: 'TextareaCtrl', readonly: true })
```
```javascript
new jsa.TextareaCtrl({ value: 'TextareaCtrl', startEnabled: false })
```
--------------------------------
### Add Go to Repository Tool
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/index.html
Adds a 'Go to Repository' tool to the application's toolbar. This snippet shows how to instantiate and add a custom tool to the toolbar.
```javascript
let gotoRepoTool = new GotoRepoTool({});
app.toolbar.AddChild(gotoRepoTool);
```
--------------------------------
### Initialize JSA Application
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.min.html
Initializes a new JSA application with specified properties like tabbar and statusbar. It also demonstrates basic usage of the settings manager.
```javascript
let app = new jsa.Application( { name: 'All UI Elements', hasTabbar: true, hasStatusbar: true, syncTabbarStyleWithViewHeaders: true }); //init an check a settings manager
console.log('modal.email: '+app.settingsManager.Has('modal.email'));
console.log('modal.email: '+app.settingsManager.Has('modal.password'));
console.log('modal.check1: '+app.settingsManager.Has('modal.check1'));
console.log('modal.password.myfault.does.not.work.check1: '+app.settingsManager.Has('modal.password.myfault.does.not.work.check1'));
```
--------------------------------
### Initialize JSA Application and Settings Manager
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.html
Initializes a new JSA application with tabbar and statusbar enabled. It also demonstrates basic usage of the settings manager to check, set, and observe settings.
```javascript
let app = new jsa.Application( { name: 'All UI Elements', hasTabbar: true, hasStatusbar: true, syncTabbarStyleWithViewHeaders: true }); //init an check a settings manager
console.log('modal.email: '+app.settingsManager.Has('modal.email'));
console.log('modal.email: '+app.settingsManager.Has('modal.password'));
console.log('modal.check1: '+app.settingsManager.Has('modal.check1'));
console.log('modal.password.myfault.does.not.work.check1: '+app.settingsManager.Has('modal.password.myfault.does.not.work.check1'));
//settings manager example
app.settingsManager.StartObserving(jsa.Observer({
onNotifyCallback: function(event,source) {
if(jsa.EVENT.IS_INSTANCE(event,jsa.EVENT.TYPES.ADD)) {
console.log('Setting changed: '+event.paramName+'='+event.value);
} else if(jsa.EVENT.IS_INSTANCE(event,jsa.EVENT.TYPES.REMOVE)) {
console.log('Setting deleted: '+event.paramName);
} else if(jsa.EVENT.IS_INSTANCE(event,jsa.EVENT.EVENT_ID([jsa.EVENT.TYPES.SET,'settings']))) {
console.log('All settings have been deleted');
}
}
}));
// Work with the settings manager
console.log(app.settingsManager.Has('user.name','mike')); //-> false
app.settingsManager.Set('user.name','mike');
app.settingsManager.Set('user.expertMode',false);
console.log(app.settingsManager.Has('user.name')); //-> true
app.settingsManager.Delete('user.name');
console.log(app.settingsManager.Has('user.name')); //-> false
```
--------------------------------
### Create License Menu Entry
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/index.html
Adds a 'License' menu entry to the application's menu. Clicking this entry will open a MarkdownView displaying the license information.
```javascript
let licenseEntry = new jsa.MenuEntry( {
id : '#License',
content : 'License',
onClickCallback : function() {
let licenseView = new MarkdownView({
name: 'License',
url: 'LICENSE',
content: 'Loading...'
});
}
});
```
--------------------------------
### Add About Menu Entry with Message Box
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/index.html
Creates a menu entry that, when clicked, displays an 'About' message box. The message box includes version information and third-party library credits.
```javascript
let aboutMenuEntry = new jsa.MenuEntry( {
id : '#ABOUT',
content : 'About',
onClickCallback : function() {
app.AddChild(new jsa.MsgBox({
name: 'About',
content: '
',
}));
}
});
app.menu.AddChild(aboutMenuEntry);
```
--------------------------------
### Modal Dialog Initialization and Event Handling
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.min.html
Creates a modal dialog, adds a tabbar to it, and registers change event listeners for input fields.
```javascript
let modalDialog = new jsa.Dialog({ title: 'Modal Dialog', closable: true });
modalDialog.AddChild(dialogTabbar);
app.AddChild(modalDialog);
document.getElementById('inputEmail3').onchange = function(evt) {
app.settingsManager.Set('modal.email',this.value);
};
document.getElementById('inputPassword3').onchange = function(evt) {
app.settingsManager.Set('modal.password',this.value);
};
document.getElementById('gridCheck1').onchange = function(evt) {
app.settingsManager.Set('modal.check1',this.checked);
};
```
--------------------------------
### Activate View Based on Query Parameter
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/index.html
Determines which view to activate upon application load based on the 'view' query parameter in the URL. Defaults to the welcome view if no parameter is specified.
```javascript
let queryString = window.location.search;
let httpGetParams = new URLSearchParams(queryString);
let desiredView = httpGetParams.get('view');
if(desiredView=='documentation') {
app.viewManager.ActivateView(documentationView);
} else {
app.viewManager.ActivateView(welcomeView);
}
```
--------------------------------
### Create GotoRepoTool Component
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/index.html
Initializes a GotoRepoTool component, which is a UI element designed to link to the jsApplication repository. It includes tooltip and click behavior.
```javascript
function GotoRepoTool(params={},createDom=true) {
jsa.Tool.call(this,params,false);
//parameters
this.hasTooltip = true;
this.tooltip = 'Open jsApplication repository'
this.containerStyle = ['jsa-tool-container','goto-repo-tool'];
this.onClickCallback = function (e) {
this.ShowInfo();
};
jsa.CopyParams(this,params);
//internals
this.infoBubble = null;
if(createDom) {
this.CreateDom();
}
return this;
}
```
--------------------------------
### Create Standard Views
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.min.html
Defines and adds 'View A', 'View B', and 'View C' to the application's view manager, each with unique names, icons, content, and header/container styling. Views A and B are closable, while View C also supports popup functionality.
```javascript
let viewA = new jsa.View({ name: 'View A', icon: 'img/view-A.svg', content: 'Functions Editor', hasHeader: true, containerStyle:
['jsa-view-container','jsa-view-container-with-header'
], headerStyle:
['jsa-view-header','my-view-functions-header'
], isClosable: true });
app.viewManager.AddChild(viewA);
```
```javascript
let viewB = new jsa.View({ name: 'View B', icon: 'img/view-B.svg', content: 'Hardware Editor', hasHeader: true, containerStyle:
['jsa-view-container','jsa-view-container-with-header'
], headerStyle:
['jsa-view-header','my-view-hardware-header'
], isClosable: true });
app.viewManager.AddChild(viewB);
```
```javascript
let viewC = new jsa.View({ name: 'View C', icon: 'img/view-C.svg', content: 'Allocations Editor', hasHeader: true, containerStyle:
['jsa-view-container','jsa-view-container-with-header'
], headerStyle:
['jsa-view-header','my-view-allocations-header'
], isClosable: true, canPopup: true });
app.viewManager.AddChild(viewC);
```
--------------------------------
### Add File Settings Menu Entry
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.min.html
Adds a 'Settings' menu entry to the 'File' menu with a click callback.
```javascript
fileMenu.AddChild( new jsa.MenuEntry( {
id : '#FILE_SETTINGS',
content : 'Settings',
onClickCallback : function() {alert('Settings!')}
}));
```
--------------------------------
### Include jsApplication CSS Files
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/README.md
Include these CSS files in your HTML to apply jsApplication's styling. Ensure the paths are correct relative to your HTML file.
```html
```
--------------------------------
### Create Workspace View
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.min.html
Initializes a 'Workspace' view with specific properties like name, icon, callbacks, and styling. This view is added to the application's view manager.
```javascript
let workspaceView = new jsa.View({ name: 'Workspace', icon: 'jsa-icon-folder-light', onFocusCallback : function() { alert('Workspace activated');}, onUnfocusCallback : function() { alert('Workspace deactivated');}, content: 'Workspace', hasHeader: true, containerStyle:
['jsa-view-container','jsa-view-container-with-header'
], headerStyle:
['jsa-view-header','my-view-workspace-header'
], isClosable: false });
app.viewManager.AddChild(workspaceView);
```
--------------------------------
### Creating an Edit Menu with Undo/Redo
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.html
Constructs an 'Edit' menu containing 'Undo' and 'Redo' options. These menu entries are dynamically updated by an observer to reflect the current command state.
```javascript
let editMenuEntry = new jsa.MenuEntry( {
id :'#EDIT',
content : 'Edit',
hasPopup : true
});
app.menu.AddChild(editMenuEntry);
let editMenu = new jsa.Menu({ isPopup: true, popupDirection : 'bottom' });
editMenuEntry.SetSubmenu(editMenu);
```
```javascript
let undoMenuEntry = new jsa.MenuEntry( {
id : '#EDIT_UNDO',
content : 'Undo',
icon : 'jsa-icon-undo-light',
startEnabled : false,
onClickCallback : function() { app.commandManager.Undo(); },
hasTooltip : true,
tooltip: 'Shows the last action that can be undone.'
});
editMenu.AddChild(undoMenuEntry);
```
```javascript
let redoMenuEntry = new jsa.MenuEntry( {
id : '#EDIT_REDO',
content : 'Redo',
icon : 'jsa-icon-redo-light',
startEnabled : false,
onClickCallback : function() { app.commandManager.Redo(); },
hasTooltip : true,
tooltip: 'Shows the last action that can be redone.'
});
editMenu.AddChild(redoMenuEntry);
```
```javascript
let undoRedoUpdater = new jsa.Observer( {
onNotifyCallback : function(event) {
//rebuild the view menu if(EVENT.IS_INSTANCE(event,EVENT.TYPES.METHOD_CALL)) {
let lastCommand = app.commandManager.GetLastCommand();
if(lastCommand) {
undoMenuEntry.SetContent('Undo: '+lastCommand.GetName());
undoMenuEntry.Enable();
} else {
undoMenuEntry.Disable();
undoMenuEntry.SetContent('Undo');
}
let nextCommand = app.commandManager.GetNextCommand();
if(nextCommand) {
redoMenuEntry.SetContent('Redo: '+nextCommand.GetName());
redoMenuEntry.Enable();
} else {
redoMenuEntry.Disable();
redoMenuEntry.SetContent('Redo');
}
}
}
});
```
--------------------------------
### Add Changelog View Menu Entry
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/index.html
Creates and adds a menu entry for the changelog view. This snippet shows how to open a markdown file as a view when a menu item is clicked.
```javascript
let changelogEntry = new jsa.MenuEntry( {
id : '#Changelog',
content : 'Changelog',
onClickCallback : function() {
let changelogView = new MarkdownView({
name: 'Changelog',
url: 'jsa/CHANGELOG.md',
content: 'Loading...',
hasHeader: true,
isClosable: true,
containerStyle: ['jsa-view-container','md-view-container'],
});
app.viewManager.AddChild(changelogView);
app.viewManager.ActivateView(changelogView);
}
});
app.menu.AddChild(changelogEntry);
```
--------------------------------
### Create Styled Sticky Note
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.min.html
Initializes a 'sticky' UI element with a North-East direction and custom styling applied via CSS classes. It includes an icon.
```javascript
let stickyNe = new jsa.Sticky( {
direction : 'ne',
icon : 'img/edit.svg',
style : ['jsa-sticky','my-sticky-ne']
});
```
--------------------------------
### Create and Add Sticky Elements
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.html
Initializes and adds various sticky elements with different configurations to the application. These elements can be positioned and styled using predefined directions and custom styles.
```javascript
let stickyNe = new jsa.Sticky( {
direction : 'ne',
icon : 'img/cloud.svg',
content : 'I am a sticky NE!!',
style : ['jsa-sticky-container','jsa-row']
});
let stickyContent = new jsa.Container({ style : ['jsa-container','jsa-container-bottom','my-sticky-content'] });
stickyNe.AddChild(stickyContent);
let stickyTabbar = new jsa.Tabbar({ style : ['jsa-tabbar','jsa-tabbar-bottom','my-sticky-tabbar'] });
let stickyTab1 = new jsa.Tab({ content : 'Tab 1' });
stickyTabbar.AddChild(stickyTab1);
let stickyTab2 = new jsa.Tab({ content : 'Tab 2' });
stickyTabbar.AddChild(stickyTab2);
let stickyTab3 = new jsa.Tab({ content : 'Tab 3',
});
stickyTabbar.AddChild(stickyTab3);
let stickyTab4 = new jsa.Tab({ content : 'Tab 4' });
stickyTabbar.AddChild(stickyTab4);
stickyNe.AddChild(stickyTabbar);
stickyTabbar.SetActiveTab(stickyTab2);
let stickySe = new jsa.Sticky( {
direction : 'se',
icon : 'img/globe.svg',
content : 'I am a sticky SE!!',
});
let stickySw = new jsa.Sticky( {
direction : 'sw',
icon : 'img/eye.svg',
containerStyle : ['jsa-sticky-container','jsa-row']
});
let stickies = [stickyNw,stickyNe,stickySe,stickySw];
for(let i=0;i
```
--------------------------------
### Create Open Recent Menu
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.min.html
Adds an 'Open Recent' menu entry to the 'File' menu, which itself contains a sub-menu listing recently opened files. Each recent file entry has a click callback.
```javascript
let recentMenuEntry = new jsa.MenuEntry( {
id : '#FILE_OPENRECENT',
content : 'Open Recent',
hasPopup : true,
startEnabled : true,
hasTooltip : true,
tooltip: 'The list of recently opened files'
});
fileMenu.AddChild(recentMenuEntry);
let recentMenu = new jsa.Menu({
isPopup: true,
});
recentMenuEntry.SetSubmenu(recentMenu);
recentMenu.AddChild( new jsa.MenuEntry( {
id : '#FILE_1',
content : 'Dummy.file',
onClickCallback : function() {alert('dummy.file!')}
}));
recentMenu.AddChild( new jsa.MenuEntry( {
id : '#FILE_2',
content : 'Dummy.file',
onClickCallback : function() {alert('dummy.file!')}
}));
recentMenu.AddChild( new jsa.MenuEntry( {
id : '#FILE_3',
content : 'Dummy.file',
onClickCallback : function() {alert('dummy.file!')}
}));
recentMenu.AddChild( new jsa.MenuEntry( {
id : '#FILE_4',
content : 'Dummy.file',
onClickCallback : function() {alert('dummy.file!')}
}));
```
--------------------------------
### Create and Configure Modal Dialog
Source: https://gitlab.com/jsapplication/jsapplication/-/blob/master/Examples/AllUiElements.min.html
Instantiates a modal dialog with a complex HTML content structure, including form elements like text inputs, radio buttons, and checkboxes. It retrieves initial values from application settings.
```javascript
let modalDialog = new jsa.Modal({
name: 'Modal',
content: '
This is a jsApplication modal dialog, which is completely configurable.
