-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
167 lines (131 loc) · 6.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EXAMPLE Architects</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/styles/w3.css">
<link rel="stylesheet" href="assets/styles/font-awesome.css">
<!--
Integration of Seanox aspect-js
Seanox aspect-js is pure JavaScript and consists of a file.
The library can be downloaded and integrated standalone or a release channel can be used.
see also https://github.com/seanox/aspect-js/blob/master/manual/introduction.md#getting-started
404 Resource Not Found is shown in the console:
http://127.0.0.1/.../data/locales.xml
aspect-js supports a NoSQL data source and a resource bundle for internationalization.
During the start, the framework searches for appropriate data.
If these are missing, this is okay.
The explanation will follow a later in step 04.
404 Resource Not Found is shown in the console:
http://127.0.0.1/.../modules/common.css
http://127.0.0.1/.../modules/common.js
aspect-js supports a module concept.
Because the framework can not know the structure of the modules, it is helpful in some cases,
if already when initializing the application general is done, there is the module "common",
which is searched automatically with the program start.
If these are missing, this is okay.
The explanation will follow a later in step 03.
-->
<script type="text/javascript" src="assets/aspect-js-max.js"></script>
<!--
The styles have been moved to the module files.
see: /modules/*.css
-->
</head>
<!--
The attribute route on the body tag activates routing.
By default, routing is not active.
-->
<body route>
<!--
aspect-js supports a module concept where the modules are called composites.
Composites are declared with an ID and the attribute composite.
Composites can consist of markup (HTML), CSS and JavaScript.
All these components are optional and can be moved to the module directory.
The renderer automatically searches for corresponding components in the module directory.
Markup is only searched for if the composite has no inner HTML.
see also: https://github.com/seanox/aspect-js/blob/master/manual/composite.md#components
attribute release
The optional attribute does not display the elements until they have been rendered.
Among other things, this prevents the Expression Language from being displayed before it has been processed.
The internationalization (i18n) is based on a resource bundle that is based on the XML file ./data/locales.xml.
This file contains the corresponding key value entries for all supported languages.
The language is automatically determined by the language support of the browser
or can be set explicitly using the DataSource on which the resource bundle is based.
In addition, a default language can be set in the XML file locales.xml if an unsupported language is requested.
see also https://github.com/seanox/aspect-js/blob/master/manual/message.md#resource-bundle-messages
In this example, the language setting is used by the browser.
In the next step we build the first module to change the language via the menu.
The expression language of Seanox aspect-js is used for the output of the texts.
see also https://github.com/seanox/aspect-js/blob/master/manual/expression.md#expression-language
This has full JavaScript support and provides the additional object Messages for the resource bundle.
Using the DataSource is only one of many ways to use dynamic data.
see also https://github.com/seanox/aspect-js/blob/master/manual/datasource.md#datasource
However, the DataSource is more of an example for semi-dynamic data because it is based on static data in the web space.
-->
<!-- Navbar (sit on top) -->
<div id="menu" class="w3-top" composite release>
</div>
<!--
By combining the attributes 'composite' and 'route', the composites become
views. This creates the paths (routes), which result from the nesting of
the composites in the markup and the resulting combination of IDs.
In this example, the following paths result:
- # -> http://127.0.0.1/.../#
- #home -> http://127.0.0.1/.../#home
- #projects -> http://127.0.0.1/.../#projects
- #project -> http://127.0.0.1/.../#project
- #about -> http://127.0.0.1/.../#about
- #person -> http://127.0.0.1/.../#person
- #contact -> http://127.0.0.1/.../#contact
The control of visibility, or more precisely its presence in the DOM, is
then taken over by the routing and depends on the path (route) and the
implemented permission concept.
Composites without the attribute 'route' are not controlled by routing and
are therefore visible if the parent element is visible.
see also: https://github.com/seanox/aspect-js/blob/master/manual/routing.md
-->
<!-- Header -->
<header id="home" class="w3-display-container w3-content w3-wide" composite route release>
</header>
<!-- Page content -->
<main class="w3-content w3-padding">
<!--
Example for the projection of data by XSL Transformation.
The transformation takes over the file portfolio.xslt, the data source is portfolio.
The data and templates are stored separately for each language.
However, the language is not specified during access, the framework and the browser take care of this.
A separate HTML file is not required.
Module files for JavaScript and CSS can be used.
The Expression Language can also be used in the XSL template.
The expressions are then executed after the final XSL transformation.
-->
<!-- Project Section -->
<section id="projects" composite route release
output="{{DataSource.fetch('xml://portfolio', true)}}">
</section>
<!-- Project Details Section -->
<section id="project" composite route release>
</section>
<!-- About Section -->
<section id="about" composite route release>
</section>
<!-- Team Details Section -->
<section id="person" composite route release>
</section>
<!-- Contact Section -->
<section id="contact" composite route release>
</section>
<!-- Hidden background activities -->
<section id="workspace" composite>
</section>
</main>
<!-- Spinner -->
<div id="spinner@ui" composite release>
</div>
<!-- Footer -->
<footer id="footer" class="w3-center w3-black w3-padding-16" composite release>
</footer>
</body>
</html>