MS3 Sample Site

View
Rendered webpage	APL code

Introduction
getting started
recommendationsTutorial
visual approach to
common tasksSamples
pages and mini-apps
each uses just a few controlsControls
list of all supported controls
links to samples using themReference
general information
technique descriptions

MiServer is a free, open-source web server implemented in Dyalog APL. It enables the APL user to build sophisticated websites with little to no knowledge of the web technologies like HTML, JavaScript, etc. We hope that you will enjoy MiServer; join the forums🔗, and contribute via GitHub🔗.

This website serves as guide to MiServer 3 – providing documentation, samples, and advice. At the same time, it showcases many of MiServer's capabilities. If you are just getting started with MiServer 3, check out the Tutorial tab. Look through the Samples to get an idea of of the variety of web content that MiServer can generate.

Explore the tabs for documentation, the broad selection of available controls, and the vast collection of sample pages and mini-apps. See the source of any page by clicking the MS3 logo in the top left corner and access other resources by clicking the Resources link in the top right corner.

JavaScript DataTable sample — JavaScript DataTable: Search almost 1500 idioms in an instant.

Dyalog ListManager sample — Dyalog ListManager: Move fruits between lists with streamlined interface.

HTML form sample — HTML form: Arrange many interactive elements together.

Dyalog RadioButtonGroup sample — Dyalog RadioButtonGroup: Create an entire group of radio buttons at once.

Syncfusion ejTreeGrid sample — Syncfusion ejTreeGrid: View and collapse a structured spreadsheet.

Syncfusion ejMenu sample — Syncfusion ejMenu: Build a menu from external data.

jQuery UI Spinner sample — jQuery UI Spinner: (Pre-) select values with spinners.

HTML video sample — HTML video: Specify a list of alternate video sources.

Creating a MiSite
Creating a Widget
Creating Content
Event Handling
Testing with Selenium
Install and Config
- Configuration
- Installation
References
- Function Reference
- Terminology

In the tabs below, you will find categorized examples of webpage content. Click any element for more information.

Common elementsFormattingPositioningEmbeddingInteractionWindows & Popups

This div is the main container of this tab.

This is the beginning of a paragraph, but this phrase is a separate piece of text inside the paragraph.

StackPanel

Number Input:

CheckBoxes

	Checked
	Unchecked

RadioButtonGroup

	Selected
	Unselected

Slider

Primaries
- Cyan
- Magenta
- Yellow
Key
- Black

Color	RGB
aqua	#00FFFF
black	#000000
blue	#0000FF
fuchsia	#FF00FF
gray	#808080
green	#008000
lime	#00FF00
maroon	#800000
navy	#000080
olive	#808000
purple	#800080
red	#FF0000
silver	#C0C0C0
teal	#008080
white	#FFFFFF
yellow	#FFFF00

This div has inner padding and gradient backround

Bold indented text which has to be extremely long in order to show that only the first line is being indented.

Huge text with outer marginExpanded and underlined

Blue box with shadow

Centered text with shadow

White text on image background

Surrounded by borders and top-right corner is round

Inline paragraph with limited width and single line height.

Monospace, Sans-Serif, and Serif.

Parent element with "relative" position so we can align vertically

Default position and text alignment

Centered text

Right-aligned text

Centered element

Right-aligned element

Bottom-aligned text

Bottom-aligned element

Movable (drag me!)

Choose a color to get a matching notification:

CSS to give floating impression

Browse Examples Directory

Show entries

Search:

Task demonstrated	Type	Main controls used documentation links
A DataTable enhanced with the "buttons"-Plugin	advanced	DataTable
A DataTable with the "yadcf"-Filters enabled	advanced	DataTable
A DataTable with the a responsive layout	advanced	DataTable
Accordion which calls back to the server on open/close	advanced	ejAccordion
Add a class during callback	simple	jqAddClass, head
Add a predefined list of options for later use in a control	simple	datalist, input, option
Add a summary with revealable details	simple	details, summary
Add alternative content for when JavaScript is turned off or not supported	simple	noscript, script
Add contact information	simple	address
Add interactivity to a division	simple	div

Showing 1 to 10 of 225 entries

Previous1 2 3 4 5…23Next

Show entries

Search:

Control documentation link	Description	Relevant samples
A	Dyalog Hyperlink widget based on the HTML a tag	Insert a link
a	Hyperlink	Insert a hyperlink Set document base URI for relative links Mark the main navigation controls
abbr	Abbreviation	Display definition when hovering over an abbreviation
Accordion	Dyalog Accordion widget	Dyalog collapsing interface with four pseudo-language sections Nested custom themed tabs with complex titles
address	Contact information	Add contact information
APL
area	Image map region	Image (in this case a map) with clickable areas
article	Independent section	Mark an independent section
aside	Auxiliary section	Insert a sidebar with related information
Audio	Same as base HTML5 audio element but sets default message for browsers that don't support it	Play an audio file

Showing 1 to 10 of 241 entries

Previous1 2 3 4 5…25Next

Show entries

Search:

Category	Subject
General	Creating Content
General	Creating a MiSite
General	Creating a Widget
General	Providing RESTful Web Services
General	Testing with Selenium
Install and Config	Configuration
Install and Config	Installation
References	Event Handling
References	Function Reference
References	Terminology

Showing 1 to 10 of 20 entries

Previous1 2Next


:Class index : MiPageSample ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ 
⍝ ┌─────────────────────────────────────────────────────────────────────────────────────────────┐ ⍝ 
⍝ │ This is the home page of the MiServer Sample Site, MS3, accessible at miserver.dyalog.com   │ ⍝ 
⍝ └─────────────────────────────────────────────────────────────────────────────────────────────┘ ⍝ 
⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ 
 
    :Include #.MS3SiteUtils 
 
    ∇ Make 
      :Access public 
      :Implements Constructor 
      Cacheable←1 
    ∇ 
 
    ∇ Compose;cols;tabs;rows;div;dt 
      :Access Public 
      
     ⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝ 
      (tabs←'bigtabs'Add _.Tabs).Theme←'FF8C00' 
      
     ⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝ 
      tabs.Titles,←'Introduction'Over'getting started/recommendations' 
      cols←1 0⍴⍬ 
      cols,←'about'New _.div(Read'IndexData/intro.txt') 
      cols,←'slideshow'New _.div(Shuffle Read'IndexData/slideshow.txt') 
      cols,←'reading'New _.List(ReadingTree Read'IndexData/reading.txt') 
      tabs.Sections,←'intro'New _.Table cols 
      
     ⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝ 
      tabs.Titles,←'Tutorial'Over'visual approach to/common tasks' 
      div←'tut'New _.div 
      div.Add _.p'In the tabs below, you will find categorized examples of webpage content. Click any element for more information.' 
      'Tabs'div.Add _.Tabs(↓⍉↑Elements Formatting Positioning Embedding Interaction Windows) 
      'info'div.Add _.div 
      tabs.Sections,←div 
      
     ⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝ 
      tabs.Titles,←'Samples'Over'pages and mini-apps/each uses just a few controls' 
      cols←⍬ 
      cols,←⊂(⊂'Task demonstrated'),C.tasks 
      cols,←⊂(⊂'Type'),C.type 
      cols,←⊂(⊂'Main controls used'Over'documentation links'),C.used 
      div←'samples'New _.div 
      div.Add _.div _.A'Browse Examples Directory' '/Examples/' 
      dt←div.Add'eg' '.display'New _.DataTable(⍉↑cols) 
      'yadcf.Filters[1].(select_type column_number)'dt.Set'select' 1 
      'lengthMenu'dt.Set(10 25 50 ¯1)(10 25 50 'All')  ⍝ also allow "All" 
      tabs.Sections,←div 
      
     ⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝ 
      tabs.Titles,←'Controls'Over'list of all supported controls/links to samples using them' 
      cols←⍬ 
      cols,←⊂('Control'Over'documentation link'),C.doclink 
      cols,←⊂(⊂'Description'),C.descr 
      cols,←⊂(⊂'Relevant samples'),C.reldocs 
      cols,←⊂(⊂'Library'),C.cats 
      tabs.Sections,←'ctrl' '.display'FilterTable ¯1 0↓⍉↑cols 
      
     ⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝ 
      tabs.Titles,←'Reference'Over'general information/technique descriptions' 
      rows←⍬ 
      rows,←'pdf'FormatList'Documentation' 
      rows,←FormatList'Examples/Techniques' 
      tabs.Sections,←'doc' '.display'New _.DataTable('Category' 'Subject'⍪↑rows) 
    ∇ 
 
:EndClass

Controls used on this page: Dyalog: A, List, Table, Tabs JavaScript: DataTable Base HTML: div, p

Dyalog MiServer 3 Sample Site

Slider