Aware IM User Forums

[nlarson]

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/improve-your-css-skills-with-pure-css-ui-components/

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

[tford]

Anxious to see your examples!
_________________
Tom (running V5.6 - build 1654 - on Windows)
LinkedIn: http://www.linkedin.com/in/itomford

[nlarson]

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

[nlarson]

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]

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.

[nlarson]

Here is how it looks in my UI

[Andrea]

I like your landing page. Thanks for sharing!
_________________
Andrea
(running V5.2 on Mac mini server)

[yuri.rj]

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]

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]

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]

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.
_________________
Aware IM Support Team

[ACDC]

nice one, thanks for sharing

[OpenEyes]

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]

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