Current File : //www/varak.net/wiki.varak.net/vendor/oojs/oojs-ui/demos/tutorials/collection/basics1/contents.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>OOUI ToDo App Tutorial - Part 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../dist/oojs-ui-wikimediaui-icons-editing-citation.css">
<link rel="stylesheet" href="../../../dist/oojs-ui-wikimediaui-icons-content.css">
<link rel="stylesheet" href="../../../dist/oojs-ui-wikimediaui.css">
<link rel="stylesheet" href="../../../node_modules/prismjs/themes/prism.css">
<script src="../../../node_modules/prismjs/prism.js"></script>
<link rel="stylesheet" href="../../assets/tutorials_demos.css">
<link rel="stylesheet" href="../../tutorials.css">
</head>
<body>
<a href="#" title="Back to top" class="scroll"><span></span></a>
<div class="container">
<nav></nav>
<div class="intro">
<h1 class="header">OOUI Basics: Part 1</h1>
<h2>ToDo List App</h2>
<p>
In this tutorial we'll walk through creating a simple JavaScript ToDo app with the OOUI library,
which was created by the Wikimedia Foundation. OOUI has a lot of potential for super-powerful
JavaScript applications in your browser — so we will start small and grow as we go, hopefully
giving you a taste of the library and its concepts.
</p>
</div>
<div>
<a id="project-files" href="#project-files">
<h2 class="section">
Project Files
</h2>
</a>
<hr>
<p>After installing OOUI in our project directory, we will start our project by creating these three files:</p>
<ul>
<li>
<b>The JavaScript initialization file:</b> create a directory named <code class="inline-code">
assets/</code> and inside it create a file and name it <code class="inline-code">init.js</code>.
This will be our initialization script.
</li>
<li>
<b>The CSS file:</b> create <code class="inline-code">todo.css</code> and place it in your main
project directory—we will use this file later for all of our custom CSS styling.
</li>
<li><b>The HTML file:</b> create <code class="inline-code">index.html</code> and place it in your main
project directory. This is the first file we'll be populating with code.</li>
</ul>
<a id="add-to-the-project" href="#add-to-the-project">
<h2 class="section">
Add to the Project
</h2>
</a>
<hr>
<p>
We will now attach the CSS and JavaScript files, along with the OOUI files, to our HTML page.
This is how our basic page should look:
</p>
</div>
<pre class="line-numbers language-markup"><code><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ToDo OOUI</title>
<meta name="description" content="A demo ToDo app made with OOUI">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<!-- OOjs -->
<script src="node_modules/oojs/dist/oojs.jquery.min.js"></script>
<!-- OOUI -->
<script src="node_modules/oojs-ui/dist/oojs-ui.min.js"></script>
<!-- OOUI theme -->
<script src="node_modules/oojs-ui/dist/oojs-ui-wikimediaui.min.js"></script>
<link rel="stylesheet" href="node_modules/oojs-ui/dist/oojs-ui-wikimediaui.min.css">
<!-- ToDo app custom -->
<link rel="stylesheet" href="todo.css">
<script src="assets/init.js"></script>
</head>
<body>
<div class="wrapper">
<h1>Demo ToDo app with OOUI</h1>
</div>
</body>
</html></code></pre>
<p>
We will use the <code class="inline-code">wrapper</code> div element to inject our
application into.
</p>
<a id="building-the-base" href="#building-the-base">
<h2 class="section">
Building the Base
</h2>
</a>
<hr>
<p>So now that we have our basic page, we need to start writing code. Our ToDo app should have two main
pieces to start with: An <b>input</b> to add a new item, and a <b>list</b> displaying all items that
have been added.
</p>
<p>For the <b>input</b> We will need to use an <code class="inline-code">OO.ui.TextInputWidget</code>.</p>
<p>And since a ToDo list allows us to show a list of items that can be selected, for the <b>list</b>
itself we will use an <code class="inline-code">OO.ui.SelectWidget</code>
(You can see a demo of all OOUI widgets in
<a href="https://doc.wikimedia.org/oojs-ui/master/demos/"> the demo page</a>).
</p>
<p>Here is how you can add a <code class="inline-code">SelectWidget</code> and an <code class="inline-code">
TextInputWidget</code> to your <code class="inline-code">assets/init.js</code> file:</p>
<pre class="line-numbers"><code class="language-javascript">$( document ).ready( function () {
var input = new OO.ui.TextInputWidget(),
list = new OO.ui.SelectWidget();
// Append to the wrapper
$( '.wrapper' ).append(
input.$element,
list.$element
);
} );</code></pre>
<p>
Let's break this up and see what we did there.
One of OOUI's principles is to separate the data from the UI, so each one of the
widgets we're creating is first and foremost an object that is separate from the DOM.
That object contains the DOM element itself in the <code class="inline-code">$element</code> property, which we use to
attach to the document, but the behavior itself (as we will soon see) is done through
the general OOUI object.
</p>
<p>
So in short, we created two widgets—a text input and a select widget—and then
attached their <code class="inline-code">$element</code> to the document. If
you load your page, it should have the title and an input. The list is invisible
because we don't have a way to add elements to it yet—so let's do that now.
</p>
<a id="adding-items" href="#adding-items">
<h2 class="section">
Adding Items to the List
</h2>
</a>
<hr>
<p>
We have our input, and we have the list, and now we need to connect them.
<code class="inline-code">OO.ui.TextInputWidget</code> emits several events. One of them is simply "enter" when the Enter key is pressed (You can see all events
<a href="https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.TextInputWidget">
in the documentation</a>). Let's make our input add an item to the list when we hit
the "enter" key.
Since the list is an <code class="inline-code">OO.ui.SelectWidget</code> we should
add into it an <code class="inline-code">OO.ui.OptionWidget</code>.
</p>
<pre class="line-numbers"><code class="language-javascript">// Respond to 'enter' keypress
input.on( 'enter', function () {
// Add the item
list.addItems( [
new OO.ui.OptionWidget( {
data: input.getValue(),
label: input.getValue()
} )
] );
} );</code></pre>
<p>
That would add an item to the list. Try it out! Add a ToDo item and click Enter in the demo box below:
</p>
<div class="embed-app embed-app1 no-highlights"></div>
<a id="highlights" href="#highlights">
<h2 class="section">
Add Highlights for Hover and Select Indication
</h2>
</a>
<hr>
<p>
You can make your ToDo list items change color to indicate an item has been hovered or selected.
We'll achieve this effect by overriding existing selectors. Add the following code to your
<code class="inline-code">todo.css</code> file:
</p>
<pre class="line-numbers"><code class="language-css">.oo-ui-selectWidget-depressed .oo-ui-optionWidget-selected {
background-color: #80ccff;
}
.oo-ui-optionWidget-highlighted {
background-color: #b9e3ff;
}</code></pre>
<p>Now try it out:</p>
<div class="embed-app embed-app2"></div>
<a id="unique-values" href="#unique-values">
<h2 class="section">
Unique Values
</h2>
</a>
<hr>
<p>
But what happens if we try to add an item that already exists in the list? Let's add
a condition that checks whether the item exists first before it is added. Let's also
prevent adding an empty input.
</p>
<p>Update your <code class="inline-code">assets/init.js</code> file to look like this:</p>
<pre class="line-numbers"><code class="language-javascript">// Respond to 'enter' keypress
input.on( 'enter', function () {
// Check for duplicates and prevent empty input
if ( list.findItemFromData( input.getValue() ) ||
input.getValue() === '' ) {
input.$element.addClass( 'todo-error' );
return;
}
input.$element.removeClass( 'todo-error' );
// Add the item
list.addItems( [
new OO.ui.OptionWidget( {
data: input.getValue(),
label: input.getValue()
} )
] );
} );</code></pre>
<p>
Now we can only add unique items to this list. When an illegal value is added
(an empty input or an existing item), we attach the class <code class="inline-code">
.todo-error</code> to the input.
</p>
<p>For it to actually show something, we need to define it in our CSS
file. Add this to your <code class="inline-code">todo.css</code> file:
</p>
<pre class="line-numbers"><code class="language-css">.todo-error input {
background-color: #ff9696;
}</code></pre>
<p>Let's try out a live demo of this version, and see if it behaves as expected:</p>
<div class="embed-app embed-app3"></div>
<p>It works! Now, let's add a little bit of extra flair to the app.</p>
<a id="custom-styling" href="#custom-styling">
<h2 class="section">
More Custom Styling
</h2>
</a>
<hr>
<p>
Let's make sure that our list and our input are styled a bit better, and add a placeholder
test to the input. Let's go back to the piece in our <code class="inline-code">init.js</code>
file where we created the widgets, and add configuration to both:
</p>
<pre class="line-numbers"><code class="language-javascript">$( document ).ready( function () {
var input = new OO.ui.TextInputWidget( {
placeholder: 'Add a ToDo item'
} ),
list = new OO.ui.SelectWidget( {
classes: [ 'todo-list' ]
} );
// code continues...
} );</code></pre>
<p>
The above configuration adds a CSS class to the list widget and a placeholder to the text
input widget.
</p>
<p>
In the part of our <code class="inline-code">init.js</code> where we've added items
to the list, we can use <code class="inline-code">input.setValue( '' );</code> to
clear the input each time an item is added.
</p>
<pre class="line-numbers"><code class="language-javascript">// ...code
list.addItems( [
new OO.ui.OptionWidget( {
data: input.getValue(),
label: input.getValue()
} )
] );
input.setValue( '' );
} );</code></pre>
<p>We can now go edit our <code class="inline-code">todo.css</code> stylesheet. Notice that
we can also style the underlying objects, which (for now) we will do by calling their
oo-ui-style class, similarly to what we did in the <a href="#highlights">Highlights</a>
section.
</p>
<pre class="line-numbers"><code class="language-css">.wrapper {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.todo-list .oo-ui-optionWidget {
border-bottom: 1px solid #666;
}</code></pre>
<p>One last thing: let's add in some padding to our CSS.</p>
<pre class="line-numbers"><code class="language-css">.oo-ui-inputWidget {
margin-bottom: 0.5em;
}
.todo-list .oo-ui-labelElement-label {
margin-left: 0.25em;
}
.oo-ui-labelElement .oo-ui-optionWidget {
padding: 0.25em;
}</code></pre>
<p>That's it. We now have a basic ToDo app. Yay!</p>
<p>Reload your own app and look at your wonderful result. Here is our final demo:</p>
<div class="embed-app embed-app4"></div>
<p>For your convenience, we included the complete code below.</p>
<a id="complete-code" href="#complete-code">
<h2 class="section">
The Complete Code
</h2>
</a>
<hr>
<p>
Here's the full code of our <code class="inline-code">assets/init.js</code> file:
</p>
<pre class="line-numbers"><code class="language-javascript">$( document ).ready( function () {
var input = new OO.ui.TextInputWidget( {
placeholder: 'Add a ToDo item'
} ),
list = new OO.ui.SelectWidget( {
classes: [ 'todo-list' ]
} );
// Respond to 'enter' keypress
input.on( 'enter', function () {
// Check for duplicates and prevent empty input
if ( list.findItemFromData( input.getValue() ) ||
input.getValue() === '' ) {
input.$element.addClass( 'todo-error' );
return;
}
input.$element.removeClass( 'todo-error' );
// Add the item
list.addItems( [
new OO.ui.OptionWidget( {
data: input.getValue(),
label: input.getValue()
} )
] );
input.setValue( '' );
} );
// Append the app widgets
$( '.wrapper' ).append(
input.$element,
list.$element
);
} );</code></pre>
<p>
Here's the full code of our <code class="inline-code">index.html</code> file:
</p>
<pre class="line-numbers language-markup"><code><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ToDo OOUI</title>
<meta name="description" content="A demo ToDo app made with OOUI">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<!-- OOjs -->
<script src="node_modules/oojs/dist/oojs.jquery.min.js"></script>
<!-- OOUI -->
<script src="node_modules/oojs-ui/dist/oojs-ui.min.js"></script>
<!-- OOUI theme -->
<script src="node_modules/oojs-ui/dist/oojs-ui-wikimediaui.min.js"></script>
<link rel="stylesheet" href="node_modules/oojs-ui/dist/oojs-ui-wikimediaui.min.css">
<!-- ToDo app custom -->
<link rel="stylesheet" href="todo.css">
<script src="assets/init.js"></script>
</head>
<body>
<div class="wrapper">
<h1>Demo ToDo app with OOUI</h1>
</div>
</body>
</html></code></pre>
<p>
Here's the full code of our <code class="inline-code">todo.css</code> file:
</p>
<pre class="line-numbers"><code class="language-css">.todo-error input {
background-color: #ff9696;
}
.wrapper {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.todo-list .oo-ui-optionWidget {
border-bottom: 1px solid #666;
}
.oo-ui-selectWidget-depressed .oo-ui-optionWidget-selected {
background-color: #80ccff;
}
.oo-ui-optionWidget-highlighted {
background-color: #b9e3ff;
}
.oo-ui-inputWidget {
margin-bottom: 0.5em;
}
.todo-list .oo-ui-labelElement-label {
margin-left: 0.25em;
}
.oo-ui-labelElement .oo-ui-optionWidget {
padding: 0.25em;
}</code></pre>
</div>
<footer class="tutorials-footer">
<div class="tutorials-footer-top">
<h1>Learn more about OOUI</h1>
</div>
<div class="tutorials-footer-content">
<div class="box-container">
<div class="box box-wide">
<h3>Tutorials</h3>
<a href="../../index.html">Tutorial Index</a>
<a href="../basics2/contents.html">Basics: ToDo App - Part 2</a>
</div>
<div class="box-wide">
<h3>Documentation</h3>
<a href="https://doc.wikimedia.org/oojs-ui/master/js/">API Documentation</a>
<a href="https://www.mediawiki.org/wiki/OOUI">MediaWiki Docs</a>
</div>
<div class="box">
<h3>Demos</h3>
<a href="https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui">Widgets</a>
<a href="https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediaui">Icons</a>
<a href="https://doc.wikimedia.org/oojs-ui/master/demos/?page=dialogs&theme=wikimediaui">Dialogs</a>
<a href="https://doc.wikimedia.org/oojs-ui/master/demos/?page=toolbars&theme=wikimediaui">Toolbars</a>
</div>
</div>
</div>
</footer>
<script src="../../../node_modules/jquery/dist/jquery.js"></script>
<script src="../../../node_modules/oojs/dist/oojs.jquery.js"></script>
<script src="../../../node_modules/javascript-stringify/javascript-stringify.js"></script>
<!-- Add the individual oojs-ui files for proper sourcemap support -->
<script src="../../../dist/oojs-ui-core.js"></script>
<script src="../../../dist/oojs-ui-toolbars.js"></script>
<script src="../../../dist/oojs-ui-widgets.js"></script>
<script src="../../../dist/oojs-ui-windows.js"></script>
<script src="../../../dist/oojs-ui-wikimediaui.js"></script>
<script src="../../../dist/oojs-ui-apex.js"></script>
<!-- Tutorial scripts -->
<script src="../../widgets/toolbar.js"></script>
<script src="../../assets/init.js"></script>
<script src="snippets/app1.js"></script>
<script src="snippets/app2.js"></script>
<script src="snippets/app3.js"></script>
<script src="snippets/app4.js"></script>
<script>
$( function () {
var toolbar = new Tutorials.Toolbar();
$( 'nav' ).append(
toolbar.$element
);
$( '.line-numbers.language-javascript' ).each( function () {
Prism.highlightElement( this );
} );
} )
</script>
</body>
</html>
Mini Shell