@web-atoms/core-docs
Version:
713 lines (704 loc) • 38.2 kB
HTML
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>@web-atoms/core</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
<div class="tsd-page-toolbar">
<div class="container">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="assets/js/search.js" data-base=".">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="index.html" class="title">@web-atoms/core</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
<input type="checkbox" id="tsd-filter-inherited" checked />
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container">
<ul class="tsd-breadcrumb">
<li>
<a href="globals.html">Globals</a>
</li>
</ul>
<h1> @web-atoms/core</h1>
</div>
</div>
</header>
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<div class="tsd-panel tsd-typography">
<p><a href="https://github.com/web-atoms/core/actions"><img src="https://github.com/web-atoms/core/workflows/Build/badge.svg" alt="Action Status"></a> <a href="https://badge.fury.io/js/%40web-atoms%2Fcore"><img src="https://badge.fury.io/js/%40web-atoms%2Fcore.svg" alt="npm version"></a> <a href="https://codecov.io/gh/web-atoms/core"><img src="https://codecov.io/gh/web-atoms/core/branch/master/graph/badge.svg" alt="codecov"></a></p>
<a href="#web-atoms-core" id="web-atoms-core" style="color: inherit; text-decoration: none;">
<h1>Web-Atoms Core</h1>
</a>
<p>Web Atoms Core is a UI abstraction framework along with powerful MVVM pattern to design modern web and mobile applications.</p>
<a href="#xamarinforms-features" id="xamarinforms-features" style="color: inherit; text-decoration: none;">
<h2>Xamarin.Forms Features</h2>
</a>
<ol>
<li>Use VS Code to develop Xamarin.Forms</li>
<li>Write TypeScript instead of C#</li>
<li>Write TSX (JSX) instead of Xaml</li>
<li>Live hot reload for published app</li>
</ol>
<a href="#web-features" id="web-features" style="color: inherit; text-decoration: none;">
<h2>Web Features</h2>
</a>
<ol>
<li>Abstract Atom Component</li>
<li>Abstract Device API (Browser Service, Message Broadcast)</li>
<li>Theme and styles support without CSS</li>
<li>One time, One way and Two way binding support</li>
<li>Simple dependency Injection</li>
<li>In built simple unit testing framework</li>
<li>UMD module support</li>
<li>Full featured MVVM Framework with powerful validation</li>
</ol>
<a href="#folder-structure" id="folder-structure" style="color: inherit; text-decoration: none;">
<h2>Folder structure</h2>
</a>
<ol>
<li>All views for web must be placed under "web" folder inside "src" folder.</li>
<li>All views for Xamarin Forms must be placed under "xf" folder inside "src" folder.</li>
</ol>
<a href="#example-folder-structure" id="example-folder-structure" style="color: inherit; text-decoration: none;">
<h3>Example folder structure</h3>
</a>
<pre><code>src
+<span class="hljs-comment">--images</span>
| +<span class="hljs-comment">--AddButton.svg</span>
|
+<span class="hljs-comment">--view-Models</span>
| +<span class="hljs-comment">--TaskListViewModel.ts</span>
| +<span class="hljs-comment">--TaskEditorViewModel.ts</span>
|
+<span class="hljs-comment">--web</span>
| +<span class="hljs-comment">--tasks</span>
| +<span class="hljs-comment">--TaskListView.tsx</span>
| +<span class="hljs-comment">--TaskEditorView.tsx</span>
|
+<span class="hljs-comment">--xf</span>
+<span class="hljs-comment">--tasks</span>
+<span class="hljs-comment">--TaskListView.tsx</span>
+<span class="hljs-comment">--TaskEditorView.tsx </span></code></pre>
<a href="#example-view-model" id="example-view-model" style="color: inherit; text-decoration: none;">
<h3>Example View Model</h3>
</a>
<pre><code class="language-typescript">
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> UserListViewModel <span class="hljs-keyword">extends</span> AtomViewModel {
<span class="hljs-keyword">public</span> user: <span class="hljs-built_in">any</span>;
<span class="hljs-keyword">public</span> list: IUser[];
<span class="hljs-keyword">public</span> search: <span class="hljs-built_in">string</span> = <span class="hljs-literal">null</span>;
<span class="hljs-comment">/// Dependency Injection</span>
<span class="hljs-meta">@Inject</span>
<span class="hljs-keyword">private</span> listService: ListService;
<span class="hljs-comment">/// @validate decorator will process this accessor</span>
<span class="hljs-comment">/// in a way that it will always return null till</span>
<span class="hljs-comment">/// you call this.isValid. After this.isValid is </span>
<span class="hljs-comment">/// called, it will display an error if data is invalid</span>
<span class="hljs-meta">@Validate</span>
<span class="hljs-keyword">public</span> <span class="hljs-keyword">get</span> errorName(): <span class="hljs-built_in">string</span> {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.user.name ? <span class="hljs-string">""</span> : <span class="hljs-string">"Name cannot be empty"</span>;
}
<span class="hljs-comment">/// You can bind UI element to this field, @watch decorator</span>
<span class="hljs-comment">/// will process this accessor in a way that UI element bound</span>
<span class="hljs-comment">/// to this field will automatically update whenever any of</span>
<span class="hljs-comment">/// fields referenced in this method is updated anywhere else</span>
<span class="hljs-meta">@Watch</span>
<span class="hljs-keyword">public</span> <span class="hljs-keyword">get</span> name(): <span class="hljs-built_in">string</span> {
<span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">this</span>.user.firstName}</span> <span class="hljs-subst">${<span class="hljs-keyword">this</span>.user.lastName}</span>`</span>;
}
<span class="hljs-comment">/// this will be called immediately after the view model </span>
<span class="hljs-comment">/// has been initialized</span>
<span class="hljs-comment">/// this will refresh automatically when `this.search` is updated</span>
<span class="hljs-comment">/// refresh will work for all (this.*.*.*) properties at any level</span>
<span class="hljs-meta">@Load</span>({ init: <span class="hljs-literal">true</span>, watch: <span class="hljs-literal">true</span> })
<span class="hljs-keyword">public</span> <span class="hljs-keyword">async</span> loadItems(ct: CancelToken): <span class="hljs-built_in">Promise</span><<span class="hljs-built_in">void</span>> {
<span class="hljs-keyword">this</span>.list = <span class="hljs-keyword">await</span> <span class="hljs-keyword">this</span>.listService.loadItems(<span class="hljs-keyword">this</span>.search, ct);
}
<span class="hljs-comment">/// this will validate all accessors before executing the action</span>
<span class="hljs-comment">/// and display success message if action was successful</span>
<span class="hljs-meta">@Action</span>({ validate: <span class="hljs-literal">true</span>, success: <span class="hljs-string">"Added successfully"</span> })
<span class="hljs-keyword">public</span> <span class="hljs-keyword">async</span> addNew(): <span class="hljs-built_in">Promise</span><<span class="hljs-built_in">any</span>> {
...
}
}
</code></pre>
<a href="#web-controls" id="web-controls" style="color: inherit; text-decoration: none;">
<h2>Web Controls</h2>
</a>
<ol>
<li>AtomComboBox (wrapper for SELECT element)</li>
<li>AtomControl (base class for all other controls)</li>
<li>AtomItemsControl</li>
<li>AtomListBox</li>
<li>AtomPageView (control browser that hosts other control referenced by url)</li>
<li>AtomWindow</li>
</ol>
<a href="#services" id="services" style="color: inherit; text-decoration: none;">
<h2>Services</h2>
</a>
<ol>
<li>WindowService - to host AtomWindow and retrieve result</li>
<li>RestService - RetroFit kind of service for simple ajax</li>
<li>BrowserService - An abstract navigation service for Web and Xamarin</li>
</ol>
<a href="#development-guidelines" id="development-guidelines" style="color: inherit; text-decoration: none;">
<h2>Development guidelines</h2>
</a>
<ol>
<li>Use TypeScript <code>module</code> pattern</li>
<li>Do not use <code>namespace</code></li>
<li>Organize single module in single TypeScript file</li>
<li>Import only required module and retain naming convention</li>
<li>Do not define any default export</li>
<li>No <code>Atom.get</code> and <code>Atom.set</code></li>
<li>Do not use underscore <code>_</code> anywhere, not in field name not in get/set</li>
<li>Do not use <code>set_name</code> method name, instead use <code>get name()</code> and <code>set name(v: T)</code> syntax for properties.</li>
</ol>
<a href="#how-to-run-unit-tests" id="how-to-run-unit-tests" style="color: inherit; text-decoration: none;">
<h2>How to run unit tests?</h2>
</a>
<ol>
<li>Import test class <code>src\test.ts</code></li>
<li>Run <code>node .\dist\test.js</code></li>
</ol>
<a href="#how-to-get-code-coverage" id="how-to-get-code-coverage" style="color: inherit; text-decoration: none;">
<h2>How to get code coverage?</h2>
</a>
<ol>
<li>Install istanbul, <code>npm install istanbul --save-dev</code></li>
<li>Install remap-istanbul, <code>npm install remap-istanbul</code></li>
<li>Cover Run, <code>.\node_modules\.bin\istanbul.cmd cover .\dist\test.js</code></li>
<li>Report Run, <code>.\node_modules\.bin\remap-istanbul -i .\coverage\coverage.json -t html -o html-report</code></li>
<li>Open generated html-report on browser</li>
</ol>
</div>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="globals ">
<a href="globals.html"><em>Globals</em></a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_app_.html">"<wbr>App"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_atom_.html">"<wbr>Atom"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_mockapp_.html">"<wbr>Mock<wbr>App"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_pack_.html">"<wbr>Pack"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_atombinder_.html">"core/<wbr>Atom<wbr>Binder"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_atombridge_.html">"core/<wbr>Atom<wbr>Bridge"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_atomcomponent_.html">"core/<wbr>Atom<wbr>Component"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_atomdispatcher_.html">"core/<wbr>Atom<wbr>Dispatcher"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_atomdisposablelist_.html">"core/<wbr>Atom<wbr>Disposable<wbr>List"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_atomenumerator_.html">"core/<wbr>Atom<wbr>Enumerator"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_atomlist_.html">"core/<wbr>Atom<wbr>List"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_atomloader_.html">"core/<wbr>Atom<wbr>Loader"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_atommap_.html">"core/<wbr>Atom<wbr>Map"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_atomonce_.html">"core/<wbr>Atom<wbr>Once"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_atomselectablelist_.html">"core/<wbr>Atom<wbr>Selectable<wbr>List"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_atomuri_.html">"core/<wbr>Atom<wbr>Uri"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_atomwatcher_.html">"core/<wbr>Atom<wbr>Watcher"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_bind_.html">"core/<wbr>Bind"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_bindableproperty_.html">"core/<wbr>Bindable<wbr>Property"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_canceltokenfactory_.html">"core/<wbr>Cancel<wbr>Token<wbr>Factory"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_color_.html">"core/<wbr>Color"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_colors_.html">"core/<wbr>Colors"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_defer_.html">"core/<wbr>Defer"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_expressionparser_.html">"core/<wbr>Expression<wbr>Parser"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_formattederror_.html">"core/<wbr>Formatted<wbr>Error"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_formattedstring_.html">"core/<wbr>Formatted<wbr>String"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_ifetchevent_.html">"core/IFetch<wbr>Event"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_iscreen_.html">"core/IScreen"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_ivalueconverter_.html">"core/IValue<wbr>Converter"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_inheritedproperty_.html">"core/<wbr>Inherited<wbr>Property"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_keyvaluepairs_.html">"core/<wbr>Key<wbr>Value<wbr>Pairs"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_markdown_.html">"core/<wbr>Markdown"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_markdownerror_.html">"core/<wbr>Markdown<wbr>Error"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_propertybinding_.html">"core/<wbr>Property<wbr>Binding"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_propertymap_.html">"core/<wbr>Property<wbr>Map"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_singleinvoker_.html">"core/<wbr>Single<wbr>Invoker"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_stringhelper_.html">"core/<wbr>String<wbr>Helper"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_transientdisposable_.html">"core/<wbr>Transient<wbr>Disposable"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_webimage_.html">"core/<wbr>Web<wbr>Image"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_xnode_.html">"core/XNode"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_core_types_.html">"core/types"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_di_disingleton_.html">"di/DISingleton"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_di_ditransient_.html">"di/DITransient"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_di_imockorinject_.html">"di/IMock<wbr>OrInject"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_di_iserviceprovider_.html">"di/IService<wbr>Provider"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_di_inject_.html">"di/<wbr>Inject"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_di_register_.html">"di/<wbr>Register"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_di_registerscoped_.html">"di/<wbr>Register<wbr>Scoped"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_di_registersingleton_.html">"di/<wbr>Register<wbr>Singleton"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_di_servicecollection_.html">"di/<wbr>Service<wbr>Collection"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_di_serviceprovider_.html">"di/<wbr>Service<wbr>Provider"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_di_typekey_.html">"di/<wbr>Type<wbr>Key"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_services_busyindicatorservice_.html">"services/<wbr>Busy<wbr>Indicator<wbr>Service"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_services_cacheservice_.html">"services/<wbr>Cache<wbr>Service"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_services_jsonservice_.html">"services/<wbr>Json<wbr>Service"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_services_mocknavigationservice_.html">"services/<wbr>Mock<wbr>Navigation<wbr>Service"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_services_navigationservice_.html">"services/<wbr>Navigation<wbr>Service"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_services_referenceservice_.html">"services/<wbr>Reference<wbr>Service"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_services_http_ajaxoptions_.html">"services/http/<wbr>Ajax<wbr>Options"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_services_http_jsonerror_.html">"services/http/<wbr>Json<wbr>Error"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_services_http_restservice_.html">"services/http/<wbr>Rest<wbr>Service"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_test_.html">"test"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_unit_atomtest_.html">"unit/<wbr>Atom<wbr>Test"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_unit_atomwebtest_.html">"unit/<wbr>Atom<wbr>Web<wbr>Test"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_view_model_action_.html">"view-<wbr>model/<wbr>Action"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_view_model_atomviewmodel_.html">"view-<wbr>model/<wbr>Atom<wbr>View<wbr>Model"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_view_model_atomwindowviewmodel_.html">"view-<wbr>model/<wbr>Atom<wbr>Window<wbr>View<wbr>Model"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_view_model_bindableurlparameter_.html">"view-<wbr>model/<wbr>Bindable<wbr>Url<wbr>Parameter"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_view_model_delay_.html">"view-<wbr>model/<wbr>Delay"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_view_model_disposable_.html">"view-<wbr>model/<wbr>Disposable"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_view_model_load_.html">"view-<wbr>model/<wbr>Load"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_view_model_once_.html">"view-<wbr>model/<wbr>Once"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_view_model_basetypes_.html">"view-<wbr>model/base<wbr>Types"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_view_model_bindpromise_.html">"view-<wbr>model/bind<wbr>Promise"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_view_model_bindproperty_.html">"view-<wbr>model/bind<wbr>Property"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_view_model_bindurlparameter_.html">"view-<wbr>model/bind<wbr>Url<wbr>Parameter"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_webapp_.html">"web/<wbr>Web<wbr>App"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomalertwindow_.html">"web/controls/<wbr>Atom<wbr>Alert<wbr>Window"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomcombobox_.html">"web/controls/<wbr>Atom<wbr>Combo<wbr>Box"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomcontentcontrol_.html">"web/controls/<wbr>Atom<wbr>Content<wbr>Control"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomcontrol_.html">"web/controls/<wbr>Atom<wbr>Control"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomframe_.html">"web/controls/<wbr>Atom<wbr>Frame"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomgridsplitter_.html">"web/controls/<wbr>Atom<wbr>Grid<wbr>Splitter"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomgridview_.html">"web/controls/<wbr>Atom<wbr>Grid<wbr>View"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomitemscontrol_.html">"web/controls/<wbr>Atom<wbr>Items<wbr>Control"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomlistbox_.html">"web/controls/<wbr>Atom<wbr>List<wbr>Box"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomnotification_.html">"web/controls/<wbr>Atom<wbr>Notification"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atompage_.html">"web/controls/<wbr>Atom<wbr>Page"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atompagelink_.html">"web/controls/<wbr>Atom<wbr>Page<wbr>Link"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomtabbedpage_.html">"web/controls/<wbr>Atom<wbr>Tabbed<wbr>Page"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomtemplate_.html">"web/controls/<wbr>Atom<wbr>Template"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomtemplatecontrol_.html">"web/controls/<wbr>Atom<wbr>Template<wbr>Control"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomtogglebuttonbar_.html">"web/controls/<wbr>Atom<wbr>Toggle<wbr>Button<wbr>Bar"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomviewpager_.html">"web/controls/<wbr>Atom<wbr>View<wbr>Pager"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomviewstack_.html">"web/controls/<wbr>Atom<wbr>View<wbr>Stack"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_controls_atomwindow_.html">"web/controls/<wbr>Atom<wbr>Window"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_core_atomui_.html">"web/core/<wbr>AtomUI"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_images_busy_.html">"web/images/<wbr>Busy"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_images_busydataurl_.html">"web/images/<wbr>Busy<wbr>Data<wbr>Url"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_images_button_.html">"web/images/<wbr>Button"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_images_buttondataurl_.html">"web/images/<wbr>Button<wbr>Data<wbr>Url"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_images_closebutton_.html">"web/images/<wbr>Close<wbr>Button"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_images_closebuttondataurl_.html">"web/images/<wbr>Close<wbr>Button<wbr>Data<wbr>Url"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_images_closebuttonhover_.html">"web/images/<wbr>Close<wbr>Button<wbr>Hover"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_images_closebuttonhoverdataurl_.html">"web/images/<wbr>Close<wbr>Button<wbr>Hover<wbr>Data<wbr>Url"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_samples_movieservice_.html">"web/samples/<wbr>Movie<wbr>Service"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_samples_demo_app_.html">"web/samples/demo/app"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_samples_demo_views_movielist_.html">"web/samples/demo/views/<wbr>Movie<wbr>List"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_samples_demo_views_movielistviewmodel_.html">"web/samples/demo/views/<wbr>Movie<wbr>List<wbr>View<wbr>Model"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_samples_tabs_app_.html">"web/samples/tabs/app"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_samples_tabs_views_list_.html">"web/samples/tabs/views/<wbr>List"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_samples_tabs_views_listdataurl_.html">"web/samples/tabs/views/<wbr>List<wbr>Data<wbr>Url"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_samples_tabs_views_page1_.html">"web/samples/tabs/views/<wbr>Page1"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_samples_tabs_views_tabhost_.html">"web/samples/tabs/views/<wbr>Tab<wbr>Host"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_samples_window_windowsample_.html">"web/samples/window/<wbr>Window<wbr>Sample"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_services_markdownservice_.html">"web/services/<wbr>Markdown<wbr>Service"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_services_popupservice_.html">"web/services/<wbr>Popup<wbr>Service"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_services_webbusyindicatorservice_.html">"web/services/<wbr>Web<wbr>Busy<wbr>Indicator<wbr>Service"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_services_windowservice_.html">"web/services/<wbr>Window<wbr>Service"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_styles_atomalertwindowstyle_.html">"web/styles/<wbr>Atom<wbr>Alert<wbr>Window<wbr>Style"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_styles_atomframestyle_.html">"web/styles/<wbr>Atom<wbr>Frame<wbr>Style"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_styles_atomlistboxstyle_.html">"web/styles/<wbr>Atom<wbr>List<wbr>Box<wbr>Style"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_styles_atomnotificationstyle_.html">"web/styles/<wbr>Atom<wbr>Notification<wbr>Style"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_styles_atompagelinkstyle_.html">"web/styles/<wbr>Atom<wbr>Page<wbr>Link<wbr>Style"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_styles_atompopupstyle_.html">"web/styles/<wbr>Atom<wbr>Popup<wbr>Style"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_styles_atomstyle_.html">"web/styles/<wbr>Atom<wbr>Style"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_styles_atomstylesheet_.html">"web/styles/<wbr>Atom<wbr>Style<wbr>Sheet"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_styles_atomtabbedpagestyle_.html">"web/styles/<wbr>Atom<wbr>Tabbed<wbr>Page<wbr>Style"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_styles_atomtheme_.html">"web/styles/<wbr>Atom<wbr>Theme"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_styles_atomtogglebuttonbarstyle_.html">"web/styles/<wbr>Atom<wbr>Toggle<wbr>Button<wbr>Bar<wbr>Style"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_styles_atomwindowstyle_.html">"web/styles/<wbr>Atom<wbr>Window<wbr>Style"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_styles_istyledeclaration_.html">"web/styles/IStyle<wbr>Declaration"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_web_styles_stylebuilder_.html">"web/styles/<wbr>Style<wbr>Builder"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_xf_xfapp_.html">"xf/XFApp"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_xf_controls_atomxfcontrol_.html">"xf/controls/<wbr>AtomXFControl"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_xf_services_xfbusyindicatorservice_.html">"xf/services/XFBusy<wbr>Indicator<wbr>Service"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_xf_services_xfnavigationservice_.html">"xf/services/XFNavigation<wbr>Service"</a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
</ul>
</nav>
</div>
</div>
</div>
<footer class="with-border-bottom">
<div class="container">
<h2>Legend</h2>
<div class="tsd-legend-group">
<ul class="tsd-legend">
<li class="tsd-kind-module"><span class="tsd-kind-icon">Module</span></li>
<li class="tsd-kind-object-literal"><span class="tsd-kind-icon">Object literal</span></li>
<li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
<li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li>
<li class="tsd-kind-index-signature"><span class="tsd-kind-icon">Index signature</span></li>
<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
<li class="tsd-kind-type-alias tsd-has-type-parameter"><span class="tsd-kind-icon">Type alias with type parameter</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
<li class="tsd-kind-enum-member"><span class="tsd-kind-icon">Enumeration member</span></li>
<li class="tsd-kind-property tsd-parent-kind-enum"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-enum"><span class="tsd-kind-icon">Method</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
<li class="tsd-kind-interface tsd-has-type-parameter"><span class="tsd-kind-icon">Interface with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-interface"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-interface"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
<li class="tsd-kind-class tsd-has-type-parameter"><span class="tsd-kind-icon">Class with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-class"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li>
<li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li>
</ul>
</div>
</div>
</footer>
<div class="container tsd-generator">
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="assets/js/main.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="assets/js/search.js"><' + '/script>');</script>
</body>
</html>