2.0 MagicScript Components
MagicScript Components simplify JavaScript app development for Magic Leap. With the Components framework you can build Landscape mixed-reality apps with React.js, declarative elements, and JavaScript. MagicScript Components provide a predefined set of user interface elements you can include in your mixed reality apps using the React.js development style.
React.js
React.js is a leading JavaScript library for developing single page web apps. Using React.js, you can declare the user interface with independent, reusable pieces, called components.
You can declare the user interface in React.js with JSX (JavaScript XML), which lets you mix XML tags with JavaScript code. Your app experience can combine HTML user interfaces with the flexibility and power of JavaScript. The example below uses JSX to create a shopping list:
Behind the scene, React converts the JSX to JavaScript calls. The snippet "
This example is a React functional component. By breaking down the user interface into components, you can take advantage of best coding practices, such as Single Responsibility and Do Not Repeat Yourself. This makes apps easy to maintain and expand with further functionality.
For more information, see What is React and an Introduction to JS.
MagicScript Components
MagicScript Components extend React Components concepts to spatial computing, letting you place digital content in the user's space. MagicScript Components let you build Mixed Reality JavaScript apps according to the React development style using JSX and over 30 UI components supported on Magic Leap's operating system, Lumin OS, as well as iOS and Android. Below is a simple MagicScript Components app showing the text "Hello MagicScript".
This example shows the main app component which extends React.Component. You can use functional components provided by React as well. Important: MagicScript Components do not have a browser context or a web view, so some web APIs and W3C APIs might not be available in MagicScript Components.
Each component in the magic-script-components library exposes a variety of properties and events that let you manage the rendered user interface. For example, the code snippet above has localPosition={[-0.3, 0, 0]}. This instructs the framework to render the Text component at -0.3m, which is to the left of the prism's center. The localPosition property expects the array [x, y, z].
Components
MagicScript Component | Lumin Runtime Native Component | Lumin OS | iOS | Android |
---|---|---|---|---|
Audio | AudioNode | Yes | Yes | Yes |
Button | UiButton | Yes | Yes | Yes |
CircleConfirmation | UiCircleConfirmation | Yes | Yes | Yes |
ColorPicker | UiColorPicker | Yes | Yes | Yes |
Content | TransformNode | Yes | Yes | Yes |
DatePicker | UiDatePicker | Yes | Yes | Yes |
Dialog | UiDialog | Yes | Yes | Yes |
DropdownList | UiDropdownList | Yes | Yes | Yes |
DropdownListItem | DropdownListItem | Yes | Yes | Yes |
GridLayout | UiGridLayout | Yes | Yes | Yes |
Image | UiImage | Yes | Yes | Yes |
Light | LightNode | Yes | ||
Line | LineNode | Yes | Yes | Yes |
LinearLayout | UiLinearLayout | Yes | Yes | Yes |
ListView | UiListView | Yes | Yes | Yes |
ListViewItem | UiListViewItem | Yes | Yes | Yes |
Model | ModelNode | Yes | Yes | Yes |
PageView | UiPageView | Yes | Yes | Yes |
Panel | UiPanel | Yes | Yes | Yes |
PortalIcon | UiPortalIcon | Yes | Yes | Yes |
ProgressBar | UiProgressBar | Yes | Yes | Yes |
Quad | QuadNode | Yes | ||
RectLayout | UiRectLayout | Yes | Yes | Yes |
ScrollBar | UiScrollBar | Yes | Yes | Yes |
ScrollView | UiScrollView | Yes | Yes | Yes |
Slider | UiSlider | Yes | Yes | Yes |
Spinner | UiLoadingSpinner | Yes | Yes | Yes |
Tab | UiTab | Yes | Yes | Yes |
Text | UiText | Yes | Yes | Yes |
TextEdit | UiTextEdit | Yes | Yes | Yes |
TimePicker | UiTimePicker | Yes | Yes | Yes |
Toggle | UiToggle | Yes | Yes | Yes |
ToggleGroup | UiToggleGroup | Yes | Yes | Yes |
Video | VideoNode | Yes | Yes | Yes |
View | UiGroup | Yes | Yes | Yes |
WebView | UiWebView | Yes | Yes | Yes |
For more information on the supported MagicScript Components, see https://components.magicscript.org/docs/components. }