Unverified Commit 04bec98f authored by Gicquel's avatar Gicquel Committed by gitbook-bot
Browse files

GitBook: [master] 4 pages modified

parent cefa7a5c
......@@ -2,6 +2,7 @@
* [Welcome to Albiziapp](README.md)
* [User guide](user-guide/README.md)
* [Untitled](user-guide/untitled-1.md)
* [TODO](user-guide/untitled.md)
* [Botany](user-guide/botany.md)
......@@ -20,4 +21,5 @@
## Administrators guide
* [Albiziapp Server Processes and DB](administrators-guide/d.md)
* [Main pages lifecycle](main-pages-lifecycle.md)
description: Practical exercise
# Creating and populating a page \(exercise\)
## Objectives
To create a new page, accessible from the navbar with a given icon.
To create a new page, accessible from the navbar with a given icon
The page will first uses event handling to dynamically animate text.
......@@ -14,10 +10,110 @@ The page will then calls an external web-service \(wikipedia API\) to populate a
## Steps to follow
1. [Create the page component](create-the-page-component.md)
2. [Bind the page component to the tabbar](bind-the-page-component-to-the-tabbar.md)
3. [Optional challenge : make it prettier](optional-challenge-make-it-prettier.md)
4. [Make page component reactive](make-page-component-reactive.md)
### Optional challenge : make it prettier
The current version of the new page isn't very visually appealing. This challenge is to make the page looking like a web startup front page.
Somethings that says _"We are so amazing you wouldn't even understand" ._ Look at [startup generator](http://tiffzhang.com/startup) if you need inspiration.
To that end, you can use two features of OnsenUI, **page background** and **cards**.
#### Page background
The v-ons-page component comes with a easy to use background effect. To use it, simply add a new children div where `class="background"` This will be interpreted as a static background.
<div class="background">
<img src="https://wi-images.condecdn.net/image/zgdPJmnE1aW/crop/1620/f/situational_wired_improbable_26-04-17_239_v1rgb-copy.jpg"/>
<div class="content">
Hello page
#### Cards components
OnsenUI card component \([v-ons-card](https://onsen.io/v2/api/vue/v-ons-card.html)\) permit to group related information. Cards have a **title** and a **content.** Title and content are div where `class="title"` and `class="content"` respectively.
<div class="title">Awsome</div>
<div class="content">
Lorem ipsum dolor, sit amet consects.
### Introducing reactivity : dynamic number of observations
After having created static content, we will now use this content to use reactivity. Reactivity is at the core of VueJS.
{% hint style="info" %}
Beyond Albiziapp and VueJS, reactive programming is a research topic in itself \(that has relations with MDE although no clear consensus exists\).
{% endhint %}
In the case of Albiziapp, reactivity means :
* Data are declarative. The UI reacts automatically to data change.
* =&gt; The UI should not change if there are no data change
* Derived data are bounded to the original data.
* If `a=b+c` each time `b or c` are changed, a will change accordingly.
* Data changes occurring in a subcomponent are reflected in the parent components
#### Practical example : mutating data
In the new page script, let's declare a `data()` function. This function is used in VueJS to create simple reactive data. For convenience, use the following code.
<div class="content center">{{text}}</div>
export default {
data() {
return {
text: "interest"
.center {
position: relative;
top: 50%;
left: 50%;
The `text` variable is here declared and initialized. It is now possible to refer to `text` in the UI. The`{{text}}` item in the div is a simple illustration of this use.
The double mustache syntax evaluates the value of the **javascript expression** it contains, and return the string representation of this expression. Practically it gives a lot of power. Replace {{text}} by the following examples.
#### Practical example : fetching data from an external source
Data do not have to be defined at creation. Let's explore an example using data recovered from an external source.
description: 'Instanciation, events and watcher for navbar pages'
# Main pages lifecycle
## Which main pages?
The wording "main pages" isn't very clear. There is normally one main page in a webapp. Albiziapp being conceived to mimic the behavior of a native application, it has a NavBar from which the user access to distinct views. These views are the main pages.
$ give me super-powers
{% hint style="info" %}
Super-powers are granted randomly so please submit an issue if you're not happy with yours.
{% endhint %}
Once you're strong enough, save the world:
{% code title="hello.sh" %}
# Ain't no code for that yet, sorry
echo 'You got to trust me on this, I saved the world'
{% endcode %}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment