Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/gwagner57/oemjs
Browse files Browse the repository at this point in the history
  • Loading branch information
gwagner57 committed Jul 25, 2023
2 parents 0daeccb + e4e0a5e commit 3e36916
Show file tree
Hide file tree
Showing 14 changed files with 85 additions and 44 deletions.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ <h1>Low Code App Development with OEMjs</h1>
unidrectional association between books and publishers.</p>
</details>

<details><summary>Example 4: <a href="apps/public-library/">Public Library App</a> with Activity-Based UIs</summary>
<details><summary>Example 4: <a href="apps/public-library/">Public Library App</a> with Activity User Interfaces</summary>
<p>This app shows the use of business activities in addition to business objects, which is at the heart of Object Event Modeling (OEM).</p>
</details>

Expand Down
20 changes: 12 additions & 8 deletions tutorials/enumerations/index.html

Large diffs are not rendered by default.

Binary file modified tutorials/enumerations/index_files/Screenshot_Retrieve-all.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tutorials/enumerations/index_files/Screenshot_Update.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 44 additions & 8 deletions tutorials/introductory/First-Steps.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,32 @@
<title>First Steps</title>
</head>

<body><p>For setting up an OEMjs app, you have to write</p><ol>
<body><p>For setting up a CRUD data management app with OEMjs, you have to
write</p><ol>
<li>a class module file for each of the business object types of your
app;</li>

<li>an <kbd>app.mjs</kbd> module file for creating an <code>app</code>
object that includes a definition of test data;</li>
object that imports the app's business object classes and includes a
definition of test data;</li>

<li>an <kbd>index.html</kbd> file for being able to run your app in a
browser.</li>
</ol><p>For all three types of files, you may use a copy from one of the
example apps as your model or starting point.</p><h3>The class module file
<kbd>Book.mjs</kbd></h3><p>The "Book Data Management" app has one class
module <kbd>Book.mjs</kbd> for defining the business object class
<i>Book</i>:</p><pre class="role-listing-1">import bUSINESSoBJECT from "../../../src/bUSINESSoBJECT.mjs";
example apps (available at the OEMjs GitHub repo) as your model or starting
point. In this tutorial, we use the "Book Data Management" app from the
<kbd>apps/minimal</kbd> folder.</p><blockquote
class="role-attention"><p>While you can directly run an OEMjs app from a
remote website (e.g., from the OEMjs GitHub website) or from a local web
server, you can only run it from your <em>local file system</em> after
changing your browser's default configuration. For FireFox, you have to set
the configuration property <code>privacy.file_unique_origin</code> to
<i>false</i> by entering <code>about:config</code> in the browser's web
address bar.</p></blockquote><h3>The class module file
<kbd>Book.mjs</kbd></h3><p>The "Book Data Management" app has only one class
module, <kbd>Book.mjs</kbd>, which defines the business object class
<i>Book</i> (with seven properties) in the following way:</p><pre
class="role-listing-1">import bUSINESSoBJECT from "../../../src/bUSINESSoBJECT.mjs";
import {dt} from "../../../src/datatypes.mjs";

class <b>Book</b> extends bUSINESSoBJECT {
Expand Down Expand Up @@ -75,7 +87,31 @@
<li>"Boolean"</li>

<li>"Date", "DateTime"</li>
</ul><h3>The <kbd>app.mjs</kbd> module file</h3><p>For the simple "Book
</ul><p>In addition to the ordinary alphanumeric attributes "isbn",
"title", "year" and "edition", which are rendered in the UI in the form of
<i>input</i> fields, the <i>Book</i> class has three attributes with special
ranges:</p><dl>
<dt>purchaseDate</dt>

<dd>This attribute has the range <i>Date</i>. A <i>Date</i> value is
internally represented as a JS Date object, while it is "stringified" in
the UI as an <em>ISO date string</em>, or rendered with the help of a
<em>date picker</em>, which<em> </em>is a browser-built-in widget
allowing the user to input a date by picking it from a calendar. </dd>

<dt>recordCreatedOn</dt>

<dd> This attribute has the range <i>DateTime</i>. A <i>DateTime</i>
value is internally represented as a JS Date object, while it is
"stringified" in the UI as an <em>ISO date time string</em>.</dd>

<dt>isReserved</dt>

<dd>This attribute has the range <i>Boolean</i>. A <i>Boolean</i> value
is internally represented as either <i>true</i> or <i>false</i>, while
it is "stringified" in the UI as "yes" or "no", or rendered with the
help of a <i>checkbox</i> field.</dd>
</dl><h3>The <kbd>app.mjs</kbd> module file</h3><p>For the simple "Book
Data Management" app in the folder <kbd>apps/minimal/</kbd>, the
<kbd>js/app.mjs</kbd> module has the following content:</p><pre
class="role-listing-1">// import the app's business object classes
Expand Down Expand Up @@ -126,6 +162,6 @@
<code>script</code> element, in which first the framework library
<kbd>vIEW.mjs</kbd> and then the <kbd>app.mjs</kbd> module described above
is loaded, followed by adding an event listener that calls the user
interface setup procedure <code>vIEW.setupUI</code>.after the HTML document
interface setup procedure <code>vIEW.setupUI</code> after the HTML document
has been loaded.</p></body>
</html>
20 changes: 10 additions & 10 deletions tutorials/introductory/Generated-UI.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@
<em>Retrieve</em>, the following UI is created, showing all book records
retrieved from the app's database:</p><figure id="fig1-2"><img
alt="A design model defining the object type Book with two invariants"
class="responsive" height="447" src="img/Screenshot_Retrieve-all.png"
width="1103" /></figure><p>Notice that since the property <em>Edition</em>
is optional, some book records have no value in the corresponding column.
The values of the property <em>Purchase date</em> are shown using a
localized format (here, the German date format). The values of the property
<em>Record created on</em> are time stamps (or <em>date-time</em> values).
The values of the Boolean property <em>Is reserved</em> are shown in the
yes/no format.</p><p>For the data management operation <em>Update</em>, the
class="responsive" height="313" src="img/Screenshot_Retrieve-all.png"
width="772" /></figure><p>Notice that since the property <em>Edition</em> is
optional, some book records have no value in the corresponding column. The
values of the property <em>Purchase date</em> are shown using a localized
format (here, the German date format). The values of the property <em>Record
created on</em> are time stamps (or <em>date-time</em> values). The values
of the Boolean property <em>Is reserved</em> are shown in the yes/no
format.</p><p>For the data management operation <em>Update</em>, the
following UI is created:</p><figure id="fig1-2"><img
alt="A design model defining the object type Book with two invariants"
class="responsive" height="625" src="img/Screenshot_Update.png"
width="737" /></figure></body>
class="responsive" height="500" src="img/Screenshot_Update.png"
width="590" /></figure></body>
</html>
2 changes: 1 addition & 1 deletion tutorials/introductory/Intro-Constraint-Validation.html
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@
"year": {range:"Integer", label:"Year", <b>min</b>: 1459, <b>
max</b>: () =&gt; (new Date()).getFullYear()+1},
}</pre><p>Notice that in this example, the value of the <code>max</code> field
is a function that computes the next year.</p></dd>
is a JS function that computes the next year.</p></dd>

<dt><strong>Pattern Constraints</strong></dt>

Expand Down
Binary file modified tutorials/introductory/img/Screenshot_Retrieve-all.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tutorials/introductory/img/Screenshot_Update.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 6 additions & 6 deletions tutorials/introductory/index.html

Large diffs are not rendered by default.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tutorials/introductory/index_files/Screenshot_Update.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 10 additions & 9 deletions tutorials/introductory/titlepage.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />

<title>Low Code Web App Development with OEMjs</title>
<title>Building Low-Code Web Apps with OEMjs</title>
</head>

<body><div id="share"> <ul class="links">
Expand Down Expand Up @@ -43,19 +43,20 @@
<path d="M9,8.2L3,4.5h12L9,8.2z M15,13.5H3V6l6,3.8L15,6V13.5z M15,3H3C2.2,3,1.5,3.7,1.5,4.5l0,9C1.5,14.3,2.2,15,3,15 h12c0.8,0,1.5-0.7,1.5-1.5v-9C16.5,3.7,15.8,3,15,3z" />
</symbol> <use xlink:href="#social-mail"
xmlns:xlink="http://www.w3.org/1999/xlink" /> </svg></a></li>
</ul> </div><div id="subtitle">How to create low code web apps with the
</ul> </div><div id="subtitle">How to create low-code web apps with the
JavaScript framework <a href="https://gwagner57.github.io/OEMjs/">OEMjs</a>
available from the <a href="https://github.com/gwagner57/OEMjs">OEMjs GitHub
repo</a></div> <div id="authors">Gerd Wagner <a
href="mailto:G.Wagner@b-tu.de">G.Wagner@b-tu.de</a></div><p>Copyright © 2023
Gerd Wagner (<a href="https://creativecommons.org/licenses/by-nc/4.0/">CC
BY-NC</a>)</p><p>You may <a
href="https://gwagner57.github.io/OEMjs/apps/minimal/" target="_blank">run
this example app from our server</a>.</p><p>Published
2023-06-19</p><h2>Abstract</h2><p>This introductory tutorial presents the
Object Event Modeling JavaScript framework OEMjs, which allows low-code app
development based on business object, business event and business activity
classes defined with property ranges and other property constraints. OEMjs
allows building MVC apps quickly without boilerplate code for constraint
validation, data storage management and user interfaces.</p></body>
the example app from our server</a>.</p><p>Published
2023-07-25</p><h2>Abstract</h2><p>This introductory tutorial presents the
<em>Object Event Modeling</em> JavaScript framework OEMjs, which allows
building low-code web apps based on business object, business event and
business activity classes defined with property ranges and other property
constraints. OEMjs allows building apps quickly without boilerplate code for
constraint validation, data storage management and user
interfaces.</p></body>
</html>
2 changes: 1 addition & 1 deletion tutorials/introductory/tutorial.ebook
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
</headcommon>

<head>
<title>Low Code Web App Development with OEMjs</title>
<title>Building Low-Code Web Apps with OEMjs</title>

<html:style><!-- styles for the title page -->
div.role-book-title-div {
Expand Down

0 comments on commit 3e36916

Please sign in to comment.