The starter app has a menu + 2 Views : Dashboard. About

Size: px

Start display at page:

Download "The starter app has a menu + 2 Views : Dashboard. About"

Hector Dennis
5 years ago
Views:

1 Front End

2 The starter app has a menu + 2 Views : Dashboard About

3 All views will be based on structure laid down in Layout layout/main.hbs. Includes Semantic-UI CSS library View content will <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> {{title}} </title> <meta charset="utf-8"> <script type="text/javascript" src=" <link rel="stylesheet" href=" <script type="text/javascript" src=" <link rel="stylesheet" type="text/css" href="/stylesheets/style.css"> </head> <body> <section class="ui container"> {{{body}}} </section> </body> </html> be inserted into {{{body}}} {{title}} can be replaced by view (more on this later)

4 Front-End complete Views

5 {{> menu id="about"}} <section class="ui center aligned middle aligned segment"> <p> About this app </p> </section> Front-End complete Views {{> menu id="dashboard"}} <section class="ui segment"> {{> mainpanel}} </section>

6 about main.hbs defines structure for the full page {{> menu id="about"}} <section class="ui center aligned middle aligned segment"> <p> About this app </p> </section> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> {{title}} </title> <meta charset="utf-8"> <script type="text/javascript" src=" <link rel="stylesheet" href=" <script type="text/javascript" src=" <link rel="stylesheet" type="text/css" href="/stylesheets/style. </head> <body> <section class="ui container"> {{{body}}} </section> </body> </html> about.hbs provides {{{body}}} for layout {{> menu id= about }} includes menu.hbs in view, marking about as the active menu item <nav class="ui menu"> <header class="ui header item"> <a href="/"> Template 1 </a></header> <div class="right menu"> <a id="dashboard" class="item" href="/dashboard"> Dashboard </a> <a id="about" class="item" href="/about"> About </a> </div> </nav> <script> $("#{{id}}").addclass("active item"); </script>

7 dashboard <nav class="ui menu"> <header class="ui header item"> <a href="/"> Template 1 </a></header> <div class="right menu"> <a id="dashboard" class="item" href="/dashboard"> Dashboard </a> <a id="about" class="item" href="/about"> About </a> </div> </nav> <script> $("#{{id}}").addclass("active item"); </script> menu.hbs main.hbs <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> {{title}} </title> <meta charset="utf-8"> <script type="text/javascript" src="https: <link rel="stylesheet" href=" <script type="text/javascript" src="https: <link rel="stylesheet" type="text/css" hre </head> <body> <section class="ui container"> {{{body}}} </section> </body> </html> mainpanel.hbs <segment class="ui rasied segmemnt"> <h1 class="ui headder"> Title for Dashboard Panel </h1> <p> To be replaced with content... </p> </segment> dashboard.hbs {{> menu id="dashboard"}} <section class="ui segment"> {{> mainpanel}} </section> rendered view 4 separate files to generate single view

8 Semantic-UI menu component partials/menu.hbs header item + 2 menu items Dashboard About To be modified to reflect your apps menu structure <nav class="ui menu"> <header class="ui header item"> <a href="/"> Template 1 </a></header> <div class="right menu"> <a id="dashboard" class="item" href="/dashboard"> Dashboard </a> <a id="about" class="item" href="/about"> About </a> </div> </nav> <script> $("#{{id}}").addclass("active item"); </script> Script to dynamically chance the active menu item

9 partials/mainpanel.hbs Simple partial used by dashboard view. To be replaced with app specific content <segment class="ui rasied segmemnt"> <h1 class="ui headder"> Title for Dashboard Panel </h1> <p> To be replaced with content... </p> </segment>

10 Front-end

Produced by. Agile Software Development. Eamonn de Leastar

Produced by. Agile Software Development. Eamonn de Leastar Agile Software Development Produced by Eamonn de Leastar (edeleastar@wit.ie) Department of Computing, Maths & Physics Waterford Institute of Technology http://www.wit.ie http://elearning.wit.ie Pacemaker