spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column64

HTML Components

Developer News
Mandrake Linux Founder Back, Virtually
Amazon: We're a Technology Company
Sun Expands MySQL With Closed Source

The Calendar Component

You probably have noticed that HTCs can contain other HTCs. The HTC calendar.htc contains two other HTML Components, day.htc for all days of the month, and today.htc for today's square. Here are the top 15 lines or so from calendar.htc:

<HTML XMLNS:MYCAL XMLNS:TODAY XMLNS:ANYDAY>
<HEAD>
  <?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/>
  <?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/>
  
<PUBLIC:COMPONENT tagName="CALENDAR">
  <ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/>
</PUBLIC:COMPONENT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function fnInit()
{
  defaults.viewLink = document;
}
// -->
</SCRIPT>

The first line specifies the XML namespaces that are used in this HTC. They include both the namespace of the page itself (MYCAL), and the namespaces positioned (called) in this page (ANYDAY and TODAY). Notice that the namespace does not have to match the HTC file name. Next, we import these HTCs:

<?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/>
<?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/>

As we explained previously in this column, the browser waits for these files to be loaded, before continuing the page rendering (synchronous load). Next, we define the CALENDAR custom tag:

<PUBLIC:COMPONENT tagName="CALENDAR">
  <ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/>
</PUBLIC:COMPONENT>

The PUBLIC:COMPONENT tag is used to declare the new CALENDAR tag. In between the opening and closing tags you can attach events to the new CALENDAR tag. The event is oncontentready which is fired when the imported calendar.htc file is fully loaded and rendered on the containing page. The event handler specified is the function fnInit(), defined in a JavaScript section:

<SCRIPT LANGUAGE="JavaScript">
<!--
function fnInit()
{
  defaults.viewLink = document;
}
// -->
</SCRIPT>

The viewLink assignment above is extremely important. It is the cornerstone of the HTML Component concept. It links between the HTML Component and the containing page that calls it. The object defaults has other properties and will be covered elsewhere. The value assigned to the viewLink property is the HTC's document object. Thanks to this link, you can navigate to the HTC object from the containing page.

We'll explain the calendar's layout on the next page. Notice, though, how different the style of today's box is from the style of the other days of the month, and from the empty squares on the calendar. We achieve this effect through the dominance rules. The HTC Component's style overrides any conflicting definition in its containing page. The style definition of the calendar.htc is as follows:

<STYLE>
  TD {
      background-color:tan;
      width:50;
      height:50;
     }
</STYLE>

Now compare this definition with the calendar's colors. Only empty boxes are colored tan. The HTCs we call override this definition. The calls are embedded in the text preparation. Here is the call to TODAY:DAY HTC:

<TODAY:DAY value=' + dayOfMonth + '></TODAY:DAY>

We pass a single argument to the HTC, the day of the month. Similarly, for any other day of the month we call ANYDAY:DAY tag:

<ANYDAY:DAY value=' + dayOfMonth + '></ANYDAY:DAY>

Next: How to program the calendar - Part I

http://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions

Whitepapers and eBooks

Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization
IBM Solutions Brief: Go Green With IBM System xTM And Intel
HP eBook: Simplifying SQL Server Management
IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out
Microsoft PDF: Top 10 Reasons to Move to Server Virtualization with Hyper-V
Microsoft PDF: Six Reasons Why Microsoft's Hyper-V Will Overtake Vmware
Microsoft Step-by-Step Guide: Hyper-V and Failover Clustering
Intel PDF: Quad-Core Impacts More Than the Data Center
Intel PDF: Virtualization Delivers Data Center Efficiency
Go Parallel Article: PDC 2008 in Review
Microsoft PDF: Top 11 Reasons to Upgrade to Windows Server 2008
Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT
Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms
   PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor
Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008
Go Parallel Article: Q&A with a TBB Junkie
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
IBM eBook: The Pros and Cons of Outsourcing
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
HP eBook: Guide to Storage Networking
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Attend the IBM Service Management World Tour--Register now!
Video: Intel Launches Data Center Efficiency Initiative
Intel Podcast: Talking vPro
Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++
HP Video: Is Your Data Center Ready for a Real World Disaster?
Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices
HP On Demand Webcast: Virtualization in Action
   Go Parallel Video: Performance and Threading Tools for Game Developers
Rackspace Hosting Center: Customer Videos
Intel vPro Developer Virtual Bootcamp
HP Disaster-Proof Solutions eSeminar
HP On Demand Webcast: Discover the Benefits of Virtualization
MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

IBM e-Kit: Reduce Complexity and Cost with BladeCenter
Amyuni Download: PDF & XPS Engine for Your .NET and ActiveX Applications
Acresso Download: Try InstallShield 2009
Microsoft Download: Silverlight 2 SDK
Access Crystal Reports for Eclipse Basic Edition (Free)
30-Day Trial: SPAMfighter Exchange Module
   IBM Energy Efficiency e-Kit Shows You How to Reduce Costs
Red Gate Download: SQL Toolbelt
Iron Speed Designer Application Generator
Microsoft Download: Silverlight 2 Developer Runtime (Windows)
MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

VMware Online Virtualization Forum: Learn about the benefits of a virtual infrastructure, network with industry experts--Register today!
Demo: Dual-Core Intel Itanium 2 Processor
IBM IT Innovation Article: Green Servers Provide a Competitive Advantage
   Microsoft Article: Making Designer/Developer Collaboration a Reality
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters > 
 The latest from internet.com
Crucial Triples Up With New Three-Channel DDR3 Kits · Meet the Finalists: Excellence in Technology Awards · Tealeaf Offers Insight to Mobile Customer Behavior


Created: July 3, 2000
Revised: July 3, 2000

URL: http://www.webreference.com/js/column64/5.html