REF: My Startup.html for Bootstrap & FontAwesome

Rennur · Post by **Rennur** » Wed May 07, 2014 12:27 am

This is my Startup.html file.
Download Bootstrap, FontAwesome & jQuery separately.

AwareIM ver5.8

My changes are in blue, originals are in orange.

* Always backup original files beforehand.
* Please note: ver 5.9 will have an addition, link to gantt chart .css.
* Do not completely replace v5.9 startup.html with your amended version until you add any extras from it.

Any recommendations or comments are welcome.

<!DOCTYPE html> 
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="ext-4.1.0/resources/EdgeUXBlueBay/resources/css/bluebay.css" id="bas_cur_theme">


<link rel="stylesheet" type="text/css" href="aware_ext/resources/css/bluebay-all.css">


<link rel="stylesheet" type="text/css" href="fw/def2/style/default.css">

<meta charset="utf-8"> 
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="assets/css/myBluebayReplacements.css">
<link rel="stylesheet" type="text/css" href="assets/css/AnyCustomCSS.css">


<style type="text/css">
img { behavior: url(aware_ext/resources/css/iepngfix.htc)}
</style>

<! Some other stuff I use (not sure if it would be relevant -->
<script src="assets/js/modernizr-latest.js"></script>





</head>

<body><div id="bas_startup_msg" style="text-align: center; padding-top: 200px; ">Loading page. Please wait...</div>
<div style="visibility:hidden;" id="main_screen" >

</div>

<script type="text/javascript" src="ext-4.1.0/ext-all.js"></script>
<script type="text/javascript" src="aware_ext/aware_full.js?V1814"></script>


<script type="text/javascript">
Ext.onReady(function(){

// find the DIV with XML node
var div = Ext.get ('main_screen');
if (div == null)
return;

var xmlText = "";
for (var i = 0; i < div.dom.childNodes.length; ++ i)
{
xmlText += div.dom.childNodes .nodeValue;
}
var xmlDoc = parseXMLDocument (Ext.String.trim (xmlText));
if (xmlDoc == null)
{
alert ('Unable to parse XML');
return;
}
if (xmlDoc.parseError && xmlDoc.parseError.reason && xmlDoc.parseError.reason != '')
{
alert ('XML parsing error ' + xmlDoc.parseError.reason + ' on line ' + xmlDoc.parseError.line + ' ' + xmlDoc.parseError.srcText);
return;
}

var startupMsg = Ext.get ('bas_startup_msg');
if (startupMsg)
startupMsg.remove ();

AwareApp.start (xmlDoc);
});
</script>

<script src="assets/js/jquery-1.10.2.min.js"></script>
<script src="assets/js/jquery-ui-1.10.3.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/holder.js"></script>

</body>
</html>

Cheers

Gabbitas · Post by **Gabbitas** » Mon Nov 03, 2014 10:48 pm

Hi Rennur,

I would like to integrate bootstrap into my app and in particular I want to create drop down operation menus inside a grid as per your post http://www.awareim.com/forum/viewtopic. ... =bootstrap

Could you, or anyone else, provide some detailed steps on how to integrate bootstrap (baby steps!) please?

Thanks

weblike · Post by **weblike** » Tue Nov 04, 2014 8:03 pm

Hi Mark,

I will describe how I use bootstrap:

1. Download bootstrap from official site or from link bellow:
https://www.dropbox.com/s/sa7xhcpfrvncf ... p.zip?dl=0

2. Unzip bootstrap folder to:

c:\AwareIM\Tomcat\webapps\AwareIM\

3. I don't use it in startup.html...Either I use a specific .html which I import it in “Banner” section of the Visual Perspective.

In that .html file I enter like this:

<head>
…..

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
…...
</head>
<body>
…...
…...
…..
…..
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>

This .html is present in banner section (everywhere in app) and in this case I can use bootstrap code in every form, queries of the app. It works on my apps.

Example of a bootstrap button which fires a process from a form I use:
<button type="button" class="btn btn-primary" onclick="AwareApp.startProcessFromForm ('CreateNewInvoice','main', this, true);">Create new invoice</button>

You can find more examples of bootstrap menus, drop-downs, buttons, toolbars, search fields, on bootstrap official site here http://getbootstrap.com/components/

If you need more info or help, please feel free to contact.

Nice day.

robleer · Post by **robleer** » Wed Dec 10, 2014 1:58 pm

@weblike

I was playing a little with this and ideed, your approach works. But what did you mean with 'i use it with form and queries'?
Did you replace all the css classes to the bootstrap classes?

I'm just curious how far you are and if you have more examples I'd like to try that also and work on it.

Regards,

Rob

weblike · Post by **weblike** » Wed Dec 10, 2014 8:11 pm

Hi Rob,

Bootstrap is great in many things...It's simple, it's looking great and you cand find a lot of examples, documentation on the web.

In forms and queries mostly I use buttons, modals, dropdown buttons, alerts, badges, etc.
It's very simple: In forms you create a html cell where you can put the code of the button like this:
<button type="button" class="btn btn-primary" onclick="AwareApp.startProcessFromForm ('MarkInvoiceAsPaid','main', this, true);">Mark Invoice as Paid</button>

You can find more resources on bootstrap site: http://getbootstrap.com/components/

thank you

robleer · Post by **robleer** » Thu Dec 11, 2014 7:34 pm

Hi George,

Thanks for your reply. I know what Bootstrap can do and what it is. Your example is a simple button, but what is your idea about displaying grids and other more complex things?

weblike · Post by **weblike** » Thu Dec 11, 2014 8:06 pm

Hi Rob,

Now I'm trying to create a Dashboard with bootstrap, but what I have not achieved yet is ajax refreshing each element separately (not the entire panel/page): http://www.awareim.com/forum/viewtopic.php?t=7380

As you can see in Support reply from above post, javascripts codes are differently interpreted in AWIM. I have to play a little bit with that, maybe I will open a support ticket to have point of start. I'm not so familiar with Ext JS codes yet, but willing to learn.

thanks,
keep in touch..

weblike · Post by **weblike** » Fri Dec 12, 2014 7:30 am

Hi,

Henrik has made a Feature request about refreshing the frames&contentpanel in visual perspectives... This would be great feature and would solve many problems with dashboards like I mentioned above.
http://www.awareim.com/forum/viewtopic.php?t=7310

thank you..
Nice day