Implementation of gui framework part2

Implementation of GUI Framework
Part2 : How to use Bootstrap
Masahiro Okubo @ HDE

Table of Contents
Part1 : Overview of the GUI framework
Part2 : How to use Bootstrap (Today’s session)
Part3 : Introduction of GUI Components using JavaScript
Part4 : Communitation with the server using Ajax and JSON
Part5 : How to convert a POJO (Plain Old Java Object) JSON
Part6 : Web application architecture on the server side
I am glad to see you again to everyone.
I would like to describe how to use Bootstrap in our products,
today.

GUI Framework Architecture
Client Side Server Side
Application program
Custom JavaScript Library (GUI Components)
jQuery
Custom CSS
Bootstrap
Modern Web Browsers (Ex. IE9,Firedox,Chome)
Data Access Framework
Service Framework
JSONIC Apache Click
Apache Tomcat
We designed the administrator screen of our products using
Bootstrap and customized original CSS.
RDB

What is Bootstrap?
http://getbootstrap.com/ https://wrapbootstrap.com/
I think you already know, Bootstrap is the most popular web
development framework.
Initially, Bootstrap has been developed and provided by Twitter
Inc., but the main developers of this project has left the Twitter
Inc. in September 2012 and It was an open- source project now.
In addition, there are a lot of themes that extend the bootstrap,
you can also purchase the design of cool administrator screen.

Ｗｈｙ do we adopted Bootstrap?
There are many JavaScript based framework for developing web
applications. I think these are a great tool, but the processing logic
and screen design are closely related, therefore, be designed freely
screen design is difficult.
In addition, there were also problems such as learning costs.
I examined the various frameworks, but ultimately, I adopted the
Bootstrap for the following reasons.
・Goodness of unity as a page.
・Provides only screen design.
・Ease of design screen and customization.
・Learning cost and license

How to use Bootstrap
http://getbootstrap.com/examples/sticky-footer-navbar/
First, from the site of the bootstrap, looking for a template close to
the image of the screen that I want to create, and then download
it.
Since I wanted a footer and navbar that is fixed, I chose a
template of the above.

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Sticky Footer Navbar Template for Bootstrap</title>

<link href="manager/css/ext/bootstrap.min.css" rel="stylesheet">

<link href="manager/css/lib/persimmon.css" rel="stylesheet">
Next, in order to customize the CSS, include the custom CSS file.
CSS rules can be changed by overwriting, you can without having
to change the Bootstrap itself, to customize the design.

/*------------------------------------------------------------------
[ Global ]
*/
body {
background: #ffffff;
font-family: 'Lucida Grande', Meiryo, sans-serif;
font-size: 12px;
}
/*------------------------------------------------------------------
[ Navbar ]
*/
.navbar {
min-height: 36px;
border-radius: 0;
border-radius: 0 !important;
}
.navbar .navbar-header .navbar-brand {
color: #ffffff;
padding: 8px;
font-size: 14px;
}
/*----------------------------------------------------
--------------
[ Table ]
*/
table td,
table th {
vertical-align: middle;
font-family : 'Lucida Grande', Meiryo, sans-serif;
font-size : 12px;
word-wrap: break-word;
word-break: break-all;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #d9edf7;
border-color: #c9e2b3;
}
.table-condensed > tbody > tr {
height: 28px;
}
manager/css/lib/persimmon.css
Look at the CSS rule that is defined in the Bootstrap, I will
continue to customize more and more :-)

Firefox Web development tools
CSS rules have been applied correctly, it can be identified using
the Web development tools of Firefox. This tool is very useful, it
allows you to directly edit the CSS rule, and see the results.

Customized Bootstrap
Finally, change the CSS rules became volume of about 800 Step
/ 13.5KBytes. table, navbar, dropdown-menu, tab, pager, hlist,
modal etc… I'm modifications to most parts. (Although it is mostly
my hobby)
The CSS rules of Bootstrap is considered really well, it is a great
web development tool.

Next
Part1 : Overview of the GUI framework
Part2 : How to use Bootstrap (Today’s session)
Part3 : Introduction of GUI Components using JavaScript
Part4 : Communitation with the server using Ajax and JSON
Part5 : How to convert a POJO (Plain Old Java Object) JSON
Part6 : Web application architecture on the server side
Thank you for your attention.
Screen design was completed by using the Bootstrap, but to
operate as a web application, processing logic that receives a
value from the form, to check, to control the screen is required.
Next time, I will describe the implementation of this processing
logic.

Implementation of gui framework part2

More Related Content

What's hot

Viewers also liked

Similar to Implementation of gui framework part2

Recently uploaded

Implementation of gui framework part2