Editor Settings
Workspace Mode
Choose a workspace mode which you will working with. These will disable options, if necessary, to prevent colleagues from modifying or ruining the masterpiece.
Site Settings
Application Icon
The application icon should have the size of 256x256 pixels and .png extension.
Front-End External Libraries
Presets
Custom URLs
Custom Project Settings
Front-End Keys
Back-End Keys
These will be available via Project.Settings.[key], which can be used in Element Coding, e.g., option or custom code.
Default Language
Workspace Language
Second Language
The default localized language will be configurable directly from Sidebar.
All Translations
Texts
Any of strings in new Text Element, which you are composing in Site, Components, or Popups, will be automatically shown up here. For Element Coding mode, please use @'[string]' which doesn't containing ~#$^*_`{}|[]\:";'<>\r\n. Don't put any sensitive data.
Element
Layer
Name
Type
Globally Unique Identifier
Search Engine Optimization
Table Options
Design
Rows
Columns
Miscellaneous
Textbox Options
Size
Text Mode
Number of Lines
Input Type
Placeholder
Default Value
Useable
Editable
Alternate Text
Tab Index
Select Options
Size
Multiple Selection
Size of Visible Options
List of Items
Useable
Editable
Alternate Text
Tab Index
Radio Options
Group Name
Default Checked
Useable
Editable
Alternate Text
Tab Index
Checkbox Options
Default Checked
Useable
Editable
Alternate Text
Tab Index
File Options
Size
Multiple Selection
File Extensions
Useable
Alternate Text
Tab Index
Button Options
Size
Color
Useable
Alternate Text
Tab Index
Iframe Options
Source
Image Options
Source
Upload
Alternate Text
Video Options
Source
Upload
Flash Options
Source
Upload
Link Options
Size
Color
Destination
Search Engine Optimization
Target
Alternate Text
Scalable Vector Graphic Options
Tools
Audio Options
Source
Upload
Grid System
Size
Size
Left Offset
X-Axis Gutters
Y-Axis Gutters
Inherit Direction: Left to Right
Presets
Reusable Name
Priority
Inheritance
Custom CSS Classes
This will combine both inherited presets and styles into a preset.
Translation
Secondary Language
Please use @'[string]' in Coding mode and translate into a secondary language in Properties / Localized Strings.
Others
Note
Timeline
Animation Group
Name
Globally Unique Identifier
Note
Default State
Test State
Animation Mode
An animation group will containing a multiple of the animation track of any HTML elements. You can add any tracks to the group while it's selecting.
Scrolling Mode
Triggering Edge
Scrolling Range
This will triggering the animation from a beginning edge til an opposite edge with any duration all along user scrolling.
Track Options
Repeating Mode
Repeating Time
Keyframe Options
Easing Mode
Easing Function
Timing
Presets
Preset Mode
Reusable Name
Priority
Inheritance
The styles of animation take precedence over coding, and coding over design. You may use the priority of preset or !important to override these.
Element
Animation Events Binding
Action
Mouse
Keyboard
Touch
Dragging
Document
Clipboard
Form
Media
These will generating event boilerplates in the current folding react component binding to the selecting element, except events in the document group will bind directly to the document element.
Element
Layer
Name
Type
Globally Unique Identifier
Note
Html Options
Raw HTML
Link Options
Popup React Class
Scalable Vector Graphic Options
Raw Code
Front-End React Component
Generalizability
Namespace
Reusable Component Name
Reference ID
Please use "Project" as the root of your preferred namespace, otherwise it won't working.'
Front-End React Component
Generalizability
Back-End Data Manipulation
Action
Popup React Class
Inputs
Cross Relation Action
Real-time Update
Manipulate Into
Server-Side Rendering
Hierarchical Dot Notation
Accumulate Path
Render Logic
Render Displaying Statement
Having an automatic generated hierarchical data, the notation extends from its parent, and non-leaf node makes it repeating.
Front-End Data Binding
Hierarchical Dot Notation
Paging Size
Accumulate Path
Render Logic
Render Displaying Statement
Group of Fields Division
Group Indexing Statement
Having an automatic generated hierarchical data, the notation extends from its parent, and non-leaf node makes it repeating.
Back-End Data Binding
Data Source
Table in Notation
Instance in Notation
Table in Notation
Instance in Notation
Column
Queue
Column
Prefix
Value Source
Session Variable Name
Default Value
Required
Validation Format
Custom Regular Expression
Validation Message
Use @ to attach descendant information and use ! to notify all future updates of the results, for example: @!collection, and please follow on future notifiable descendant in Coding Technical Challedges.
If you want to execute a specific code on server-side, write code in Back-End tab, or either create a custom service and pipe it in data flow.
Front-End Custom Attributes
Front-End Plugging-In Information
These can be both forwarding react properties or HTML tag attributes.
Front-End Events Binding
Action
Mouse
Keyboard
Touch
Dragging
Document
Clipboard
Form
Media
These will generating event boilerplates in the current folding react component binding to the selecting element, except events in the document group will bind directly to the document element.
Project
Front-End External Libraries
Presets
Custom URLs
Page
Search Engine Optimization
Enable Sitemap
Sitemap Option
Front-End React Component
Reference ID
Front-End Data Binding
Hierarchical Dot Notation
Front-End Custom Attributes
Front-End Plugging-In Information
These can be both forwarding react properties or HTML tag attributes.
Element
Keyframe
Format
Spacing
Multiline
Decoration
Others
List
Options which have a red underline aren't animatable and will render the last one assigned to keyframes on the same track instead. Consider using the alternative options available.
Element
Keyframe
Dimension
Size & Position
Minimum & Maximum Size
Extension
Traditional Layout
Container
Children
Float:, clear:, display: inline, and position: absolute options don't work inside any flexbox container, including FlowLayout.
Flexbox Layout
Container
Children
Flow Layout is a flexbox ready element. If you want to entirely customize it, consider using a set of Rectangle instead.
Appearance
Style & Color
Background Options
Text Shadow
Box Shadow
Blending Options
Mouse
Transform
Options which have a red underline aren't animatable and will render the last one assigned to keyframes on the same track instead. Consider using the alternative options available.
Dimension
Size & Position
Traditional Layout
Container
Layer
Name
Note
Relational Database Options
Document Database Options
Queue Options
Scheduler Instance Options
Volatile Instance Options
RESTful Collection Options
Name
Group
JSON data send to RESTful service will have schemata different than table.
For example: {a: [0, 1], b: {c: 1}}
For example: {a: [0, 1], b: {c: 1}}
{
"source": SourceType.Collection,
"group": "Collection",
"rows": [
{
"keys": {},
"columns": {},
"relations": {
"a": {
"source": SourceType.Collection,
"group": "a",
"rows": [
{
"keys": {},
"columns": {
"_": 0
},
"relations": {}
},
{
"keys": {},
"columns": {
"_": 1
},
"relations": {}
}
]
},
"b": {
"source": SourceType.Dictionary,
"group": "b",
"rows": [
{
"keys": {},
"columns": {
"c": 1
},
"relations": {}
}
]
}
}
}
]
}Relational Table Options
Document Table Options
Name
Forwarding Option
Forwarding Mode
Forwarded Table
Forwarding Prefix
Forwarding Recursive Option
Forward option will duplicate the data of all configured fields from this table to the forwarded one using collection or columns with a prefix.
Relational Column Options
Document Column Options
Parameter Options
Name
Column
Kind
Required
Unique
Forward option will duplicate and forward the data of this field to the configuring table using collection or columns with a prefix.
Timing Options
Name
Repeated Days
Repeated Duration
Use coding mode to design any business logic upon the scheduling.
Volatile Prefix Options
Field
Column
Kind
Verb Options
Kind
Method Name
Request URL
Relation Options
Name
Source Group
Source Entity
Target Group
Target Entity
Force Constraint
Modification
Lock Mode
Source Group
Source Entity
Matching Mode
Matching Constant Value
Session Name
Session Name
Matching Value
These options will prevent sensitive data from being modified from other users which may harm the business logic.
Retrieval
Restriction
Source Group
Source Entity
Matching Mode
Matching Constant Value
Session Name
Session Name
Matching Value
These options will prevent sensitive data from being leaked into client-side which may harm the business logic.
Audit Log
Chain of Trust I
Chain of Trust II
Chain of Trust III
Collecting Option
These will provide audit log for official examination of business records to see that they are true and correct, using three of only-create-able document databases to confirm a chain of trust, held by the independent respresentative of each database's party.
Back-End Actions Binding
Source Manipulation
Target Manipulation
These will generating event boilerplates in the action controller. Use coding mode to define the business logic.
Non-Existing Strategy
Missing of Database
Missing of Table
Missing of Column
Missing in Development
Missing in Production
Default Value
Copy From
Custom Value
These will automatically setup new data schemata for you in case of some table and column are missing.
Data Mismatch Strategy
Mismatch of Database
Mismatch of Table
Mismatch of Column
Mismatch in Development
Mismatch in Production
Conversion Strategy
Always New Value
Fallback Value
Copy From
Custom Value
These will automatically convert data for you in case of some table and column are mismatch from defined schemata.
Help on Design Mode
What's it?
Design Mode is using to design the HTML5 document, including layout, format, and color. It uses Cascading Style Sheets (CSS3) and Bootstrap Grid System, which can pick the options right from Sidebar. Moreover, these CSS3 options are cross-browser compatible, which StackBlend Studio will handle for you.
Bootstrap Grid System
How to layout the page?
StackBlend Studio has four of layouts:
- Flow Layout is a container ready of Bootstrap Grid System.
- Table Layout is a <table> with a toolset for manipulating <tr> and <td>.
- Absolute Layout is multiple levels of <div> where its children are absolutely positioned.
- Rectangle is a single <div>, which is the most simple.
Layout along with other insertions
Notice a blinking cursor
You have to notice a blinking cursor while inserting an element at it, which is moveable using up, down, left, and right keystrokes. Clicking on the Layout button, and choose the one you want. You can click on a space to move the cursor inside, selecting the layer name to move the cursor to be on the right. And you can use the delete keystroke to delete an element you don't longer need.
How to picking an element?
Use mouse cursor and click on the element until having nine-anchor-point to resize or blue-dash-border around it. If you want to travel through DOM plural hierarchies, use a combination of ctrl+click or command+click. You also can click on the layer name to swiftly select it, too.
Layer is located on the right below mode selection
What's Presets?
Presets is a brand new way to adjust the CSS3 style in advance, which you can reuse later on. You may create a dedicated page to hold all of the presets or all of the Corporate Identity (CI), where a designer can touch it.
You may notice that the layer of an element assigned a preset name will turn into a pink border. If you want to place it along with the page instead of a dedicated CI page, you have to make sure you won't delete it. Otherwise, you can cut and paste it into that page, using a combination of ctrl+x and ctrl+v.
Turning into a pink border
How to create a custom CSS?
You can use "Design Action / Custom CSS Classes" in a combination of HTML Element to dealing with it. If you have an external CSS file, you can add the URL in "Coding Action / Front-End External Libraries."
Front-End External Libraries
About the precedence of styles
The styles of animation take precedence over coding, and the styles of coding take precedence over design. You may use the priority of preset or the !important rule in CSS to override these precedences.
Animation > Coding > Design
Technical Challenges
Traditional and Flexbox
Beginning of the 21st century, we use CSS display and float to dealing with layout, and right now, we have flexbox options that are more advanced and simplistic. You could mix two techniques to achieve the intended results. However, because Bootstrap Grid System also intensively uses flexbox options, we recommend using a multiple of Rectangle instead if the mixing is too complicated for you.
flex: a b c; a = flex-grow, b = flex-shrink, c = flex-basis
flex-flow: a b; a = flex-direction, b = flex-wrap
Help on Animation Mode
What's it?
Animation Mode is using to design HTML5 animations using CSS3 based on the settings of CSS3 from Design Mode. These HTML5 animations are also cross-browser compatible, which StackBlend Studio will handle for you. Unlike Design Mode, Animation Mode will have the Timeline on the footer to dealing with the animations. It begins with picking an element, creating a keyframe, and changing the CSS you want.
Animation Timeline
How to pick an element?
Use mouse cursor and click on the element until having nine-anchor-point to resize or blue-dash-border around it. If you want to travel through DOM plural hierarchies, use a combination of ctrl+click or command+click. You also can click on the layer name to swiftly select it, too.
Layer is located on the right below mode selection
How to create a keyframe?
After selecting an element, the animation group and the track will highlight using a blue gradient and red text color. Use your mouse and then click on any space on the Timeline to create a keyframe. To move the keyframe, drag it using mouse dragging. To switch to another keyframe, click on it. To delete the keyframe, press a delete keystroke.
Moving a keyframe using mouse dragging
How to make an animation?
You need at least two keyframes to create an animation by placing them on the same track and then choose the different CSS styles of each keyframes using the toolset of "Animation Format" and "Animation Style." Please remember that not assigning a new CSS3 value will have the CSS3 value as in Design Mode.
Try different background colors using "Animation Style / Appearance"
Technical Challenges
Adding and Removing Tracks
You can add/remove animation tracks based on events (including mouse, keyboard, and touch events) using "Animation Action / Animation Events Binding." Please note that any other tracks in the same group will add/remove together. If you want a specific animation, please create a new group using the add (+) button.
Help on Coding Mode
What's it?
Coding Mode is a business logic implementation using JavaScript code, in both the front-end and the back-end, using JSON data format to communicate between the two sides. StackBlend uses Node.JS and Express.JS to achieve the highest asynchronous execution performance and lowest memory consumption on the server to minimize the cost. And use React.JS to reduce the complication of the state of the user interface on the client. Being enhanced with Microsoft Typescript, coding is ease by a new pattern of application development, while the rest are being auto-generated in the same industry standard.
How to configure dynamic CSS properties?
You can set a dynamic CSS property using "Coding Format" and "Coding Style," where you can use any variables created in Front-End Editor or any properties from the state and props of the React component.
Assigning a dynamic CSS property
How to create a React component?
You need to select an element and then choose generalizability from "Coding Action / Front-End React Component." This option will assemble all of the DOM elements under its hierarchical DOM node into a React component, which you can notice from the purple border around it. And the React component can be reused if and only if the generalizability is Site or Global.
Reuse components from "Components"
Noticing a React component from color
How to bind events on the front-end?
You can use "Coding Action / Front-End Events Binding" to receive events from the mouse, keyboard, and touch screen, where the code will be automatically merging into the React component, which you don't have to wire them by yourself.
How to create a controller on the back-end?
Any created page is considering as a controller, which dedicatedly handles traffic of a configured path. You can configure it likes "/blogs/:group/:id" and then access the parameters via Express.JS's request params.
Every controller handle GET, POST, PUT, and DELETE requests, together with new CRUD verbs to handle AJAX requests coming from Button, which can set up without any coding.
Creating a Button
Help on Dot Notation
What's it?
StackBlend uses Data Modeling to define data schemata for linking datasets between the front-end and the back-end by simply using dot notations, together with restriction options, among tables to perform CRUD.
How to bind an element to dot notation?
Assign a dot notation to "Hierarchical Dot Notation" in "Coding Action / Front-End Data Binding."
How to create a repeating element?
Assign a dot notation of connecting tables without a column name to "Hierarchical Dot Notation."
How to design data schemata?
You have to go to "Explore" and choose "Data."
Do I have to configure and migrate the databases by myself?
Yes, you have to configure and migrate the databases by yourself. Please use your code editor to read and edit all of the configuration files that StackBlend provides in the boilerplate.
Technical Challenges
Underlying Frameworks
StackBlend uses NPM to cope with them, which you can add more additional modules via your command line or terminal. For coding on data manipulation in Back-End Editor, you may use the imported helpers located in "src/controllers/helpers" directory.
Shorthands in Front-End Editor
These are shorthands available in Front-End Editor:
- @{NOTATION} -> render a value in text using dot notation
Example of NOTATION: table.column, table[i].column, column, table.table.column
Shorthands in Back-End Editor
These are shorthands available on Back-End Editor:
- DatabaseHelper.retrieve(@{DICTIONARY}, 'TABLE', ... -> retrieve a dataset from dictionary of inputs
- DatabaseHelper.insert(@{DICTIONARY}, 'TABLE', ... -> insert a set of rows from dictionary of inputs
- DatabaseHelper.update(@{DICTIONARY}, 'TABLE', ... -> update a set of rows from dictionary of inputs
- DatabaseHelper.delete(@{DICTIONARY}, 'TABLE', ... -> delete a set of rows from dictionary of inputs
Example of DICTIONARY: {'table.column1': value, 'table.column2': value}, {'table.column3': value, 'table.table.column4': value}
Example of TABLE: a table name
Future Notifiable Descendant
When you want to send real-time updates to any of future notifiable descendants, which have been notified through the regular option, you must register the inner circle tags for whom to recieve the future updates from the descendants. And for any of manipulation which is broadcastable to any inner circles, you must specify a list of innerCircleTags when performing the manipulation, for example:
- NotificationHelper.associateInnerCircles(session, ['supervisor', 'manager'])
- NotificationHelper.disassociateInnerCircles(session, ['supervisor', 'manager'])
- DatabaseHelper.retrieve(..., ..., leavePermission, ['supervisor', 'manager'])
- DatabaseHelper.insert(..., ..., leavePermission, ['supervisor', 'manager'])
- DatabaseHelper.update(..., ..., leavePermission, ['supervisor', 'manager'])
- DatabaseHelper.delete(..., ..., leavePermission, ['supervisor', 'manager'])