Initialize App
Now you can see our HTML layout with linked required CSS and JavaScript files. Now we should initialize our app (for example in my-app.js
):
var app = new Framework7();
In the example above we use app
variable where we store Framework7 initialized instance for easy access in future. It is not necessary to name it app
, it could be any name you like.
It was pretty simple. But Framework7 also provides more customization on initialization by passing object with parameters:
var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'My App',
// App id
id: 'com.myapp.test',
// Enable swipe panel
panel: {
swipe: 'left',
},
// Add default routes
routes: [
{
path: '/about/',
url: 'about.html',
},
],
// ... other parameters
});
For list of all available app parameters check the App / Core section.
Now after we initialized our app, we need to initialize our View (<div class="view view-main">
in app layout). The View is basically the app router which is responsible for navigation:
var mainView = app.views.create('.view-main');
So your final initialization code in my-app.js
could look like:
var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'My App',
// App id
id: 'com.myapp.test',
// Enable swipe panel
panel: {
swipe: 'left',
},
// Add default routes
routes: [
{
path: '/about/',
url: 'about.html',
},
],
// ... other parameters
});
var mainView = app.views.create('.view-main');
What’s next
Ok, now we know how to scaffold and init the app. Now we need to check the App / Core component to learn more about its parameters and methods, how Router works, learn more about Views, Pages and the rest of the components.