Message Board

Retrieval with Graph (Goole Chart)

brucej — Mon, 26 Jul 2010 20:12:04 GMT

This retrieval template uses Google Chart API to graph values of each row in 3 types of graphs. More types of graphs can be added following the example of this template.

At this time 3 properties can be configured by changing the template or changing the generated skeleton:

ch_size='120x60' specify the size of each chart

ch_color='105594' specify the color

ch_space='8' specify the space between the bars in bar chart

The largest value of all numeric columns on a page is calculated and used to scale the charts.

Example:

http://www.mrc-productivity.com/mrcjava/servlet/MRCFORUM.I00080s

More details such as chart legend, labels etc can be added to the charts. See google chart API document:

http://code.google.com/apis/chart/docs/making_charts.html

Forum: m-Power Templates

Retrieval with Page Totals

brucej — Fri, 23 Jul 2010 21:25:52 GMT

This template displays total values for each numeric column on a page.

It is based on the fact that in the html sketelon the numerical values of all fields are available in the form of $ {row.fieldName_o}. We only need to add the values up and display them at the bottom of the table. In fact you can display them anywhere in the page by moving the freeMarker code around in the skeleton.

Demo

http://www.mrc-productivity.com/mrcjava/servlet/MRCFORUM.I00070s

Forum: m-Power Templates

HTML5 Tutorial #2: New Structural Elements!

steveh — Mon, 19 Jul 2010 21:06:45 GMT

The most commonly overused element in HTML is the "div" tag. Why? For starters, we don't have many other options. Also, it's kind of a catch-all tag. By definition, the "div" tag defines a division or section in an HTML document. As you probably know, there are many things that can be defined as divisions or sections within an HTML document.

This leads to problems, primarily when maintaining or updating your HTML. Sorting through all the "div" tags to find the correct area to edit can be tedious and time consuming. Also, it looks overwhelming, especially on the really large pages.

Good news! HTML5 fixes div overload. It introduces new semantic elements aimed at making cleaner and more understandable code. For example, when making a header, we're used to seeing something like this:

Code:


<div id="header">
Header stuff, logos, links, etc
</div>

With HTML5, that same code would look like this:

Code:


<header>
Header stuff, logos, links, etc
</header>

Makes a lot of sense doesn't it? But, that's not all. There are many more tags being added to HTML5 to help clean up div overload, and to provide a cleaner, more structured layout. Now, you may be thinking, "Why does this matter? I still want to use divs." The answer: The new structural elements may not be the most exciting things in the world, but they do matter. Here are a few reasons why:

First, the new elements are very well defined and will help you create a much more organized HTML document. This not only looks nicer, it's easier to maintain.

Second, there's less overall code. This makes your pages load faster and can positively affect search engine optimization. In case you're unaware, Google factors page load time into their algorithms.

Third, and this is more of an assumption, but I believe search spiders will be taught to look for specific content in specific sections, or scan certain sections first. Again, this is just a guess, but it makes logical sense going forward that Google would employ HTML5 structural elements in their search algorithms.

Fourth, HTML structure provides the basis for most everything you do in HTML. While not exciting, it's necessary for you to understand how the structural elements are changing, because they will be referenced frequently in the upcoming tutorials.

Okay, ready to learn the new structural elements? Before I explain the new elements, it might help to take a look at this illustration. It will help you understand each element's purpose:

Now, let's get into the definitions, which I have listed below. Be sure to reference the image above if you have any confusion.

header - This element houses all of the introductory elements on a page, such as navigation, menu bar, logos, etc

section- Defines sections in a document, such as chapters, headers, footers, etc For example, a Web site's home page could be split into sections for an introduction, news items, contact information.

nav - Defines a section of a page that links to other sites or pages within the website. In other words, it houses navigation links on a page. The

tag only applies to major block of navigation links. For example, it is perfectly acceptable to place links in a footer element, such as contact, terms of use, privacy policy, etc...

article - The primary use for the article tag in HTML5 is to define external content. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

footer - The footer element marks the footer for an entire web page, or for a section of a page. It is entirely possible that you will use multiples footer tags on one page. The footer tag usually contains information like author name, publish date, contact info, etc

aside - The aside element represents parts of a page (or article) that is not the primary focus of the page (or article), yet still related. For example, an aside could be used to pull a quote out of an article and display it in large, bold type so as to attract readers.

hgroup - This element is used to group other header elements (h1-h6), and only header elements. It must contain at least two header elements. For example, you would use an hgroup tag to group a title and subtitle together.

address - Used for representing an address

Example

To help you further understand these new structural elements, Ive taken a screenshot of our blog and marked each element as if it were made in HTML5.

Most of the elements would have been div tags in the past, but are now cleaner and easier to understand.

Conclusion

HTML5 gives us a cleaner and more logical method to outline our pages. Instead of just using the div tag for layout, we now have access to plenty of other elements that not only make sense, will leave us with cleaner and more maintainable code.

Forum: HTML

HTML5 Tutorial #1: Forms!

steveh — Mon, 12 Jul 2010 20:48:08 GMT

I'm very excited about forms in HTML5.

Why am I excited about something boring like forms? Because making forms in HTML5 will be far simpler and more powerful than ever before. What used to require javascript, will now be built into HTML. First, I'm going to cover new input types, and then move on to new attributes. I've included example syntax for each new type and attribute, and thrown in screenshots when applicable.

Word of warning: If you want to try to use any of these new additions, most of them are only supported by the latest Opera or Chrome browsers.

Okay, let's get started.

New input types:

Date, Month, & Week HTML5 introduces 3 new date-related input types for use in forms: Date, Month, & Week. These new types automatically create a date-picker on your field. I've grouped Date, Month, & Week into the same category because they essentially do the same thing. (Obviously, date lets you pick a specific date, while month/week let you pick months and weeks respectively). This is exciting because date-pickers like this were previously only added with javascript. Now look how easy it is and how nice it looks. I've pasted the syntax and a screenshot below:

Code:


<form>
    <label>Date:</label>
    <input type="date" name="Date">
</form>

Time As you might've guessed, this lets you add time fields to your forms. What's great about the new Time input type is the way it's implemented. It automatically creates arrows for increasing or decreasing time. Again, this is something you couldn't do with plain HTML in the past. I've pasted the code and another screenshot below. In the code, the "step" is calculated in seconds, so 600=10 minutes.

Code:


<form>
    <label>Time:</label>
    <input type="time" step="600" name="Date">
</form>

Datetime & datetime-local Datetime is exactly what the name implies: A combination between the new Date and Time input types. It lets you create an input field and let users select a time and a date in one field. It includes the date-picker box and the time increase/decrease arrows. As you might have guessed, the syntax is very simple:

Code:


<form>
    <label>Time:</label>
    <input type="datetime" name="DateTime">
</form>

Range This lets you add a range slider to your forms as an input field. No javascript or anything! Basically, you create a line with minimum and maximum values and have a slider that users can move to the correct value. This is another feature that used to require javascript, but is now easy as pie. Here's the syntax and a screen shot:

Code:


<form>
<label>Range:</label>
<input type="range" name="Range" min="0" max="100" value="50" step="10">
</form>

Search Indicates that a field is a search box. Different browsers add different features to search boxes. For example, if an input field is identified as a search box, Safari and Chrome automatically add an "x" on the right side for clearing the contents of the search box.

Code:


<form>
<label>Search:</label>
<input type="search" name="Search">
</form>

Color- Let's the user pick a color for an element. This is not supported by any browser yet, so I can't show a screenshot.

Code:


<form>
<label>Color:</label>
<input type="color">
</form>

Email Specifies that a field should only contain a valid email address. Returns an error if the user tries to submit a form with an invalid email.

Code:


<form>
<label>Email:</label>
<input type=email>
</form>

Tel Specifies that a field should only contain a telephone number. Returns an error if the user tries to submit a form with an invalid telephone number.

Code:


<form>
<label>Telephone:</label>
<input type=tel>
</form>

url Specifies whether or not a field is a url and automatically adds http:// to whatever is typed.

Code:


<form>
<label>Website</label>
<input type=url>
</form>

Number Indicates that a field should contain a number, and automatically inserts arrows for increasing/decreasing the value, similar to the "time" field.

Code:


<form>
<label>Number</label>
<input type="number" name="number" min="1" max="10" step="1" value="1">
</form>

New Attributes

Required Indicates the user has to fill in a value before submitting a form. Will return an error if no value is entered.

Code:


<form>
         <label>Required:</label>
             <input type="text" name="required" required="true">
</form>

Autofocus Lets the page automatically place the cursor in an input field during page load. The user can even turn off autofocus if they don't like it.

Code:


<form>
<label>Autofocus:</label>
<input type="text" name="AF" autofocus="true">
</form>

List Used to identify an element that lists pre-defined options for the user. A list must have the same ID as a datalist element in the same document.

Code:


<form>
<label>Search Engines: <input name="SE" type="url" list=Engines></label>
<datalist id=Engines>
 <option value="http://www.google.com/" label="Google">
 <option value="http://www.bing.com/" label="Bing">
 <option value="http://www.yahoo.com/" label="Yahoo">
 <option value="http://www.ask.com/" label="Ask">
</datalist>
</form>

Pattern Lets you set a pattern for text input in a selected field. Returns an error if the input does not match the pattern.

Code:


<form>
         <label> Product number:</label>
         <input pattern="  {5}" name="Product" title="The product number is an uppercase letter followed by 5 digits."/>
</form>

Autocomplete Helps users fill out forms based on earlier user input. For example, if a user has already entered their address once on a form, autocomplete provides an option to select the previous address input. Autocomplete can be turned on or off on any field.

Code:


<form>
<label> City:</label>
<input type="text" name="city" autocomplete="on">
<label>Credit Card: </label>
<input type="text" name="Credit" autocomplete="off">
</form>

Placeholder Places a short hint or instructions in an input field to aid the user with data entry.

Code:


<form>
<label>Email:</label>
<input type="email" name="Email" placeholder="Enter your email address">
</form>

Multiple Indicates whether or not the user is allowed to specify more than one value. Values must be separated by a comma.

Code:


<form>
<label>Email Addresses: <input name="email" type="email" list=emails multiple></label>
<datalist id=emails>
<option value="test@test.com">
<option value="test2@test.com">
<option value="test3@test.com">
<option value="test4@test.com">
</datalist>
</form>

Min/Max Indicate the allowed range values of an element.

Code:


<form>
<label>Pick a number from 1-10:</label>
<input type="number" name="number" min=0 max=10>
</form>

Step Specifies the incremental values in certain fields. In the example below, we have a range slider with values from 0-100. The step indicates that the user can select any multiple of 10 (10,20,30,40,etc)

Code:


<form>
<label>Range:</label>
<input type="range" name="Range" min="0" max="100" value="50" step="10">
</form>

Conclusion

HTML5 offers a slew of new enhancements over HTML4, many of which will make your life much easier. As you can see, many features only available with javascript will now be built into HTML5. Using HTML5, web developers can develop powerful forms quickly, with more options available to them than ever before.

Forum: HTML

HTML5 Introduction

steveh — Tue, 06 Jul 2010 15:05:46 GMT

There's been a lot of HTML5 talk recently, thanks in part to Apple's well publicized shunning of Adobe Flash. The topic of discussion has been limited to the ability to run video natively in HTML5, thus decreasing reliance on flash for web video. In fact, HTML5 video has been discussed so often, I bet if you asked most people what HTML5 was, they would tell you it is something that will let them watch videos on an iPhone. That's the equivalent of saying you want to buy a new car so you can listen to music. Yes, that's one thing it does, but only one small part of many great enhancements.

I'm going to write a series of HTML5 tutorials to help you understand HTML5, but first I want to introduce you to HTML5 and explain the basics for those unfamiliar with the new HTML standard.

What is HTML5?

HTML5 is currently in development as the next HTML standard, which will replace the current standard, HTML 4.01. HTML5 will provide new features necessary to create modern web applications.

How is it different?

HTML5 offers developers many more capabilities than ever before. Here are a few of the most notable additions to HTML5:

New Canvas Tag Provides the ability to draw on a web page. However, it can be used for much more than simple drawing. Some anticipated uses of the canvas include building graphs, animations, games, and image composition.

Native Audio and Video Allows a browser to play audio and video without plugins, such as flash.

Geolocation Makes location available to any HTML5 compatible browser. HTML5 can find a user's location and use it to tailor things like search results.

Web workers Allows a browser to process code in a background process, without affecting browser performance. For example, javascript has the tendency to slow down pages, but using web workers, it can be processed in the background without affecting page performance.

Smarter forms Adds features that previously required javascript, such as validation, datepickers, range sliders, and more! Better yet, the syntax for building these smarter forms is very simple.

New Markup HTML5 adds new markup tags to provide a meaningful alternative to "div" tags and make your code easier to navigate.

Much more There are plenty of new and exciting features coming in HTML5 including drag-and-drop, offline storage, messaging, etc

When is it coming?

HTML5 has been in development since 2004, and we are finally seeing browsers begin to support it. In fact, you can start using many of the features right now! HTML5 is designed to be backwards compatible (as much as possible) with older browsers, meaning the use of HTML5 won't render pages in older browsers unreadable.

Who does HTML5 affect?

HTML5 affects everyone who uses the internet. Obviously, it affects web designers more than internet users, but everyone will be affected by HTML5. Web designers will be able to work faster and do things with HTML that either weren't possible or required javascript in the past. Now, these features are built into HTML5.

HTML5 affects the regular internet user as well. It will provide new features and bring more capabilities to mobile browsers. Most notably, it will allow mobile browsers to view web video without the need for flash.

Which browsers support HTML5?

The latest version of Opera offers the most HTML5 support at this time. The latest versions of Firefox, Chrome, Safari, and Internet Explorer all support many HTML5 features, but will support more in the coming versions.

Why should I learn HTML5?

If you work with web development at all, you should learn HTML5. It will be the new standard, and make you a more productive developer. It will allow you to do things not previously possible with the old standards, and speed up your development time by leaps and bounds.

Conclusion

HTML5 is finally gaining support among browsers, and will be the new HTML standard in the very near future. If you're at all involved with web design, you should understand HTML5 and how to best implement the new features. Thanks to HTML5's backwards compatibility, you can even start using it in your development right now.

Over the next few weeks and months, I will be writing a series of HTML5 tutorials to better prepare you for the new standard and help you understand how to use it. Feel free to add comments and fill in any blanks I may have left out.

Forum: HTML

m-Power Tab Report

rickh — Fri, 02 Jul 2010 16:30:21 GMT

This template is similar to the Accordion template released a few days ago. In this template, key values are shown in the headings. Users can then click on a tab to see that subtotal field's data.

Enjoy!

Rick

Forum: m-Power Templates

Horizontally Display Records Templates

brucej — Wed, 30 Jun 2010 13:58:08 GMT

This is a multiple records retrieval that displays records horizontally.

Everything is in the html template INQHTM-VTL.ftl.

The cell is decorated by a class

.cell1 {padding: 2px; width: 120px; height:200px; display: none;};

To change the display speed of each cell (a record), assign a number to variabe

var displaySpeed = 100; //0.1 second

Example: http://www.mrc-productivity.com/mrcjava/servlet/MRCFORUM.I00050s

Forum: m-Power Templates

m-Power Accordion Template

rickh — Tue, 29 Jun 2010 19:47:13 GMT

The latest m-Power User Generated Template to come out utilizes the jQuery Accordion Template. This template allows you to see a collapsed list of Subtotal Records. You can then expand on any sub-total to see all of the pertaining data.

You can learn more about this template and all other templates here at the Project Exchange page.

Be sure to let me know what you think!

Rick

Forum: m-Power Templates

Valid Dates SQL External Object

rickh — Fri, 25 Jun 2010 19:56:54 GMT

This project is a basic example of how to call an SQL External Object. The concept is to create a reusable program that many applications can use to verify that an end user is entering a start date that occurs before their entered end date.

Download and extract this file. Follow the steps inside the \m-Power\User Defined Docs\SQLVALID External Object.doc

Rick

Forum: m-Power External Objects

Convert MS SQL DateTime field to Date

rickh — Thur, 24 Jun 2010 15:49:01 GMT

Are you an MS SQL Database developer who has grown tired of working with the Date/Time stamp field? This UDF takes in the Date/Time field and displays only your date.

The function is highly flexibly to handle numerous Date outputs.

More information can be found in the members section of the mrc website.

Rick

Forum: m-Power UDFs

m-Power Maintainer with Context Menu

tylerw — Thur, 24 Jun 2010 12:56:39 GMT

Please take a look at one of the latest User Generated Templates : Maintainer with Context Menu

This template provides a right click context menu as a means to edit, view, copy, and delete records in a work-with maintainer. All of the standard functionality found in a work-with maintainer also exists in this template, however the maintenance action buttons (edit, copy, view, delete) have been replaced by a right-click context menu.

This template provides a simple demonstration of how a jQuery context menu can be implemented into any application.

This template, like all others, will be available via the Support area of the mrc website.

Tyler

Forum: m-Power Templates

Introduction to UDF Creation

rickh — Wed, 23 Jun 2010 19:52:31 GMT

mrc is excited to begin offering an area for our community to share custom projects, such as custom User Defined Functions (UDFs) that they have created!

We hope that your benefit here is twofold. First, we encourage you to download the various UDFs that you find on this Project Exchange and implement them within your web solutions. To install, simply follow the author's provided instructions. Please keep in mind that UDFs can be written in various languages, and care will need to be taken to ensure that you have followed the author's instructions correctly.

You can access all Projects via the Support section of the mrc website.

Your second benefit is the ability to create your own UDFs, then share them with others in our user community.

If you have a UDFs you wish to share, first package the necessary code in a zip-file, along with instructions on the use for the object.

Next, create a Forum post in this very Category so others from our user community can leave questions and/or comments.

Current mrc customers should access their Customer Portal to register their project.

Rick

Forum: m-Power UDFs

Introduction to External Object Creation

rickh — Wed, 23 Jun 2010 19:50:58 GMT

mrc is excited to begin offering an area for our community to share custom projects, such as custom External Objects that they have created!

We hope that your benefit here is twofold. First, we encourage you to download the various external objects that you find on this Project Exchange and implement them within your web solutions. To install, simply follow the author's provided instructions. Please keep in mind that External Objects can be written in various languages, and care will need to be taken to ensure that you have followed the author's instructions correctly.

You can access all Projects via the Support section of the mrc website.

Your second benefit is the ability to create your own external objects, then share them with others in our user community.

If you have an External Object you wish to share, first package the necessary code in a zip-file, along with instructions on the use for the object.

Next, create a Forum post in this very Category so others from our user community can leave questions and/or comments.

Current mrc customers should access their Customer Portal to register their project.

Rick

Forum: m-Power External Objects

Introduction to Template Creation

rickh — Wed, 23 Jun 2010 19:44:05 GMT

mrc is excited to begin offering an area for our community to share custom projects, such as templates that they have created!

We hope that your benefit here is twofold. First, we encourage you to download the various projects that you find on this Project Exchange and implement them within your web solutions. To install, simply download and extract the project file to your root directory, just as you would do with any m-Power update.

You can access all Projects via the Support section of the mrc website.

Your second benefit is the ability to create your own custom templates, then share them with others in our user community.

Please see this documentation, which explains how to create, package, and publish your very own template.

Rick

Forum: m-Power Templates

Summary -> Report Template

rickh — Wed, 23 Jun 2010 15:17:27 GMT

This templates main objective is to run a Summary file, then automatically redirect to a predetermined page. In most cases, the predetermined page is the Report built over the Summary. However, you can configure the Summary to redirect to any webpage upon completion.

This template is intended for summaries that are only run by one user (single threaded).

This template, like all others, will be available via the Support area of the mrc website.

I hope you enjoy it.

Rick

Forum: m-Power Templates