Cools stuff with CSS3

nlarson · Post by **nlarson** » Sun Mar 18, 2012 5:37 am

I started messing around with CSS to see what things I could come up with as it applies to Aware. Aside from the obvious of using static CSS to add visual content to your app, I stumbled upon something I think is pretty cool! It turns out Aware can inject data into a <style> tag using the <<bo.attribute>> method, which opens some pretty intresting doors.

I haven't figured out too many practical uses, but I did figure out a few cool thinkg whihc help bridge the gap between what you can do to format data in a grid vs. in a form, and in my case I made a quasi image slider which would be easy with Javascript

For example based on a data value in your bo you can:

1. Dynamically apply color, font, backgrounds, gradients, drop shadow, rounded corners, etc.
2. Create dynamic menus and buttons with text and images (static menu also works of course!)
3. Rotate images (i.e if boy=use icon_blue.png, if girl use icon_png)
4. Create pure css charts

This site shows just how far it can go.. showing a coke can rendered enitrely with css, not imagaes at all... it looks very much like a photo of a real can. http://www.romancortes.com/blog/pure-css-coke-can/

I know some of the posts I have seen recently are along these lines, so perhaps this might help? There are many limits to CSS and it is by no means a replacement for JavaScript, but it's a lot simpler to understand, much faster to render, and can provide some targeted solutions to UI limitations. It is worth noting that you can do a lot with CSS 2.1, but if you are using the new features of CSS3 - IE will not fully support CSS3 until IE10 (which is going to be windows 8 only from what I hear).

This site has some awesome resources for anyone interested - http://www.w3avenue.com/2010/04/16/impr ... omponents/

As I build more into my Aware app I'll try to post some practical examples.

tford · Post by **tford** » Sun Mar 18, 2012 12:14 pm

Anxious to see your examples!

nlarson · Post by **nlarson** » Sun Mar 18, 2012 5:17 pm

Here is the simplest example: skin buttons used for Awareapp links or create custom callout boxes. For those familiar with CSS this is nothing new, but I think it is still a nice example of how to leverage CSS to move beyond the default button class supported by the various browsers when you are rolling your own htlm in a form or VP frame. I used the the tool at http://www.cssbuttongenerator.com/ for this example. It is not full IE compliant - still looks ok, but not as good as modern browsers.

Put this code in either your header or better yet add <link rel="stylesheet" type="text/css" href="..YourCustomStyleSheet.css"> to the aware startup.html

Code: Select all

<style type="text/css">
.YourClassName {
	-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
	box-shadow:inset 0px 1px 0px 0px #f29c93;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
	background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
	background-color:#fe1a00;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #d83526;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #b23e35;
}.YourClassName:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
	background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
	background-color:#ce0100;
}.YourClassName:active {
	position:relative;
	top:1px;
}
</style>

Then use this into your page anytime you want a button or text which leverages these effects just call the class.

Code: Select all

<span class="green_button">Projects</span>

So to create a button which opens a VP it would be like this...

Code: Select all

<a href="javascript:AwareApp.showPerspective ('YourVisualPersepctive')"><span class="YourClassName">Projects</span></a>

Obviously this is a primitive example, the one I am playing with now will Swap the background image of a div based on data in a bo attribute. The use case is for a % based field to indicate status included in a form. Currently the value is simply represented by numbers; I want to show a progress bar filling (to the neared 5%) behind the numeric data as the value goes from 0 to 100. Seems pretty straight forward, the leg work has been creating all the images, lol! I think there is a way to do this with just CSS too, but I can't find an example to work from other than gradients (which I tied, but they don't quite do the job).

Big week for me coming up so better samples coming, but not right away.

nlarson · Post by **nlarson** » Sun Mar 18, 2012 5:31 pm

Here is the current version of my landing page (post user login). Still a work in progress, but shows off a few things I did beyond the Aware Framework.

nlarson · Post by **nlarson** » Mon Mar 19, 2012 1:44 am

SWEET!! I found just what I was after for my status bar needs; thought I would pass it on. This will generate a filling progress bar based on a numeric input.

Code: Select all

<style>
/* Webkit animation keyframes */
@-webkit-keyframes animate-stripes {
  to {
    background-position: 0 0;
  }

  from {
    background-position: 44px 0;
  }
}

@-moz-keyframes animate-stripes {
  to {
    background-position: 0 0;
  }

  from {
    background-position: 36px 0;
  }
}

/* Bar which is placed behind the progress */
.ui-progress-bar {
  /* Usual setup stuff */
  position: relative;
  height: 25px;
  /* Pad right so we don't cover the borders when fully progressed */
  padding-right: 2px;
  /* For browser that don't support gradients, we'll set a blanket background colour */
  background-color: #abb2bc;
  /* Rounds the ends, we specify an excessive amount to make sure they are completely rounded */
  /* Adjust to your liking, and don't forget to adjust to the same amount in .ui-progress */
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  -o-border-radius: 25px;
  -ms-border-radius: 25px;
  -khtml-border-radius: 25px;
  border-radius: 25px;
  /* Background gradient */
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #949daa), color-stop(100%, #abb2bc));
  background: -webkit-linear-gradient(#949daa 0%, #abb2bc 100%);
  background: -moz-linear-gradient(#949daa 0%, #abb2bc 100%);
  background: -o-linear-gradient(#949daa 0%, #abb2bc 100%);
  background: -ms-linear-gradient(#949daa 0%, #abb2bc 100%);
  background: linear-gradient(#949daa 0%, #abb2bc 100%);
  /* Give it the inset look by adding some shadows and highlights */
  -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white;
  -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white;
  -o-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white;
  box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white;
  /* Alt colours */
  /* Progress part of the progress bar */
}
.ui-progress-bar.blue .ui-progress {
  background-color: #339BB9!important;
  border: 1px solid #287a91;
}
.ui-progress-bar.error .ui-progress {
  background-color: #C43C35 !important;
  border: 1px solid #9c302a;
}
.ui-progress-bar.warning .ui-progress {
  background-color: #D9B31A!important;
  border: 1px solid #ab8d15;
}
.ui-progress-bar.success .ui-progress {
  background-color: #57A957!important;
  border: 1px solid #458845;
}
.ui-progress-bar.transition .ui-progress {
  -moz-transition: background-color 0.5s ease-in, border-color 1.5s ease-out, box-shadow 1.5s ease-out;
  -webkit-transition: background-color 0.5s ease-in, border-color 1.5s ease-out, box-shadow 1.5s ease-out;
  -o-transition: background-color 0.5s ease-in, border-color 1.5s ease-out, box-shadow 1.5s ease-out;
  transition: background-color 0.5s ease-in, border-color 1.5s ease-out, box-shadow 1.5s ease-out;
}
.ui-progress-bar .ui-progress {
  /* Usual setup stuff */
  position: relative;
  display: block;
  overflow: hidden;
  /* Height should be 2px less than .ui-progress-bar so as to not cover borders and give it a look of being inset */
  height: 23px;
  /* Rounds the ends, we specify an excessive amount to make sure they are completely rounded */
  /* Adjust to your liking, and don't forget to adjust to the same amount in .ui-progress-bar */
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  -o-border-radius: 25px;
  -ms-border-radius: 25px;
  -khtml-border-radius: 25px;
  border-radius: 25px;
  /* Set the background size so the stripes work correctly */
  -webkit-background-size: 44px 44px;
  -moz-background-size: 36px 36px;
  /* Webkit */
  /* For browser that don't support gradients, we'll set a base background colour */
  background-color: #74d04c;
  /* Webkit background stripes and gradient */
  background: -webkit-gradient(linear, 0 0, 44 44, color-stop(0, rgba(255, 255, 255, 0.17)), color-stop(0.25, rgba(255, 255, 255, 0.17)), color-stop(0.26, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(0.51, rgba(255, 255, 255, 0.17)), color-stop(0.75, rgba(255, 255, 255, 0.17)), color-stop(0.76, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))), -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0.35))), #74d04c;
  /* Mozilla (Firefox etc) background stripes */
  /* Note: Mozilla's support for gradients is more true to the original design, allowing gradients at 30 degrees, as apposed to 45 degress in webkit. */
  background: -moz-repeating-linear-gradient(top left -30deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17) 15px, rgba(255, 255, 255, 0) 15px, rgba(255, 255, 255, 0) 30px), -moz-linear-gradient(rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), #74d04c;
  -moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
  -o-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
  /* Give it a higher contrast outline */
  border: 1px solid #4c8932;
  /* Animate */
  -moz-animation: animate-stripes 2s linear infinite;
  -webkit-animation: animate-stripes 2s linear infinite;
  -o-animation: animate-stripes 2s linear infinite;
  -ms-animation: animate-stripes 2s linear infinite;
  -khtml-animation: animate-stripes 2s linear infinite;
  animation: animate-stripes 2s linear infinite;
  /* Style status label */
}
.ui-progress-bar .ui-progress span.ui-label {
  -moz-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -khtml-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-size: 13px;
  position: absolute;
  right: 0;
  line-height: 23px;
  padding-right: 12px;
  color: rgba(0, 0, 0, 0.6);
  text-shadow: rgba(255, 255, 255, 0.45) 0 1px 0px;
  white-space: nowrap;
}
.ui-progress-bar .ui-progress span.ui-label b {
  font-weight: bold;
}</style>

Then this in your page:

Code: Select all

          <div class="ui-progress-bar ui-container" id="progress_bar">
            <div class="ui-progress" style="width: <<BO.AttributeValue>>%;">

nlarson · Post by **nlarson** » Mon Mar 19, 2012 2:11 am

Here is how it looks in my UI

Andrea · Post by **Andrea** » Mon Mar 19, 2012 2:42 pm

I like your landing page. Thanks for sharing!

yuri.rj · Post by **yuri.rj** » Mon Mar 19, 2012 9:11 pm

nlarson,

Awsome application.
Lots of ideas to use in my company's intranet.
VerseGoal has a demo user to try?!

I really would love to see it ...

Cheers

nlarson · Post by **nlarson** » Mon Mar 19, 2012 11:43 pm

Thanks yuri. After this current round of building is complete I will provide a demo account login to anyone who want's to take a look around; maybe 1-2 weeks.

yuri.rj · Post by **yuri.rj** » Tue Mar 20, 2012 12:21 am

It will be great.
It's really inspiring to see some different applications to help expand the horizons...

Actually, users should post their apps for each other. Each of us may have implemented something that others never did.

Cheers

aware_support · Post by **aware_support** » Tue Mar 20, 2012 12:52 am

Dear Aware IM users,

if you want your applications to be referenced from our site please e-mail support and provide a URL of your site.

ACDC · Post by **ACDC** » Tue Mar 20, 2012 2:31 pm

nice one, thanks for sharing

OpenEyes · Post by **OpenEyes** » Wed Sep 05, 2012 8:21 am

Thanks as well for sharing this information and the code snippets!

I followed your explanation and was able to replicate an animated progress bar.

Then I wanted to try different things, like switches/toggles and tables etc.

But I realized, that I would need more information, what I need to / can enter in the custom HTML / CSS code?
I am talking about things like: "AwareApp.showPerspective".

Thanks

aware_support · Post by **aware_support** » Thu Sep 06, 2012 12:42 am

Please refer to the User Guide which describes "links to Aware IM operations". Just search for "showPespective" and you will see the relevant section