JavaScript DHTML/SmartClient/Tile Grid
Layout with tile grid
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are
licensed under the terms of the GNU Lesser General Public License, version 3.
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL,
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge,
but may not be used as part of screen designs separate from SmartClient components without a purchase
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008.
-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
<SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver">
<SCRIPT>
isc.TileGrid.create({
ID: "testList", width: 500, height: 400, autoDraw:false,
tileWidth:150,
tileHeight:170,
data: [
{
picture:"Camel.jpg",
commonName:"Arabian Camel",
information:"Can eat any vegetation including thorns. Has one hump for fat storage. Is well known as a beast of burden.",
lifeSpan:50,
scientificName:"Camelus dromedarius",
diet:"Herbivore",
status:"Not Endangered"
},
{
picture:"BaldEagle.jpg",
commonName:"Bald Eagle",
information:" Females lay one to three eggs. Visual acuity is 3-4 times greater than a human. Bald eagles build the largest nest of any North American bird. The largest nest found was 3.2 yds (2.9 m) in diameter and 6.7 yds (6.1 m) tall. Protection of the Bald Eagle is afforded by three federal laws: (1) the Endangered Species Act, (2) the Bald Eagle and Golden Eagle Protection Act, and (3) the Migratory Bird Treaty Act.",
lifeSpan:50,
scientificName:"southern subspecies: Haliaeetus leucocephalus leuc",
diet:"Carnivore",
status:"Endangered"
},
{
picture:"BlackSpiderMonkey.jpg",
commonName:"Black Spider Monkey",
information:"They can perform remarkable feats with their tails.",
lifeSpan:20,
scientificName:"Ateles panicus",
diet:"Herbivore",
status:"Not Endangered"
}
],
canAcceptDrop: true,
canDrag: true,
fields: [
{name:"picture", type:"image", imageURLPrefix:"/isomorphic/system/reference/inlineExamples/tiles/images/"},
{name:"commonName"}
]
});
isc.HLayout.create({
membersMargin: 10,
members: [
isc.ListGrid.create({
ID: "testGrid", autoDraw:false,
width:300, height: 400,
canDragRecordsOut: true,
canAcceptDroppedRecords: true,
canReorderRecords: true,
fields: [
{name:"commonName", title:"Common Name"},
{name:"lifeSpan", title:"Lifespan"},
{name:"status", title:"Status"}
]
}),
testList
]
});
</SCRIPT>
</BODY>
</HTML>
TileGrid creation
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are
licensed under the terms of the GNU Lesser General Public License, version 3.
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL,
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge,
but may not be used as part of screen designs separate from SmartClient components without a purchase
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008.
-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT>
<SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD>
<BODY BGCOLOR="silver">
<SCRIPT>
animalData = [
{
picture:"Elephant.jpg",
commonName:"Elephant (African)",
information:"The African Elephant is the largest of all land animals and also has the biggest brain of any land animal. Both males and females have ivory tusks. Elephants are also wonderful swimmers. Man is the only real enemy of the elephant. Man threatens the elephant by killing it for its tusks and by destroying its habitat.",
lifeSpan:60,
scientificName:"Loxodonta africana",
diet:"Herbivore",
status:"Threatened"
},
{
picture:"Alligator.jpg",
commonName:"Alligator (American)",
information:"In the 16th century, Spanish explorers in what is now Florida encountered a large formidable animal which they called \"el largo\" meaning \"the lizard\". The name \"el largo\" gradually became pronounced \"alligator\".",
lifeSpan:50,
scientificName:"Allligator mississippiensis",
diet:"Carnivore",
status:"Not Endangered"
},
{
picture:"AntEater.jpg",
commonName:"Anteater",
information:"Anteaters can eat up to 35,000 ants daily. Tongue is around 2 feet long and is not sticky but rather covered with saliva. They have very strong sharp claws used for digging up anthills and termite mounds.",
lifeSpan:25,
scientificName:"Myrmecophaga tridactyla",
diet:"Ground dwelling ants/termites",
status:"Not Endangered"
},
{
picture:"Camel.jpg",
commonName:"Arabian Camel",
information:"Can eat any vegetation including thorns. Has one hump for fat storage. Is well known as a beast of burden.",
lifeSpan:50,
scientificName:"Camelus dromedarius",
diet:"Herbivore",
status:"Not Endangered"
},
{
picture:"BaldEagle.jpg",
commonName:"Bald Eagle",
information:" Females lay one to three eggs. Visual acuity is 3-4 times greater than a human. Bald eagles build the largest nest of any North American bird. The largest nest found was 3.2 yds (2.9 m) in diameter and 6.7 yds (6.1 m) tall. Protection of the Bald Eagle is afforded by three federal laws: (1) the Endangered Species Act, (2) the Bald Eagle and Golden Eagle Protection Act, and (3) the Migratory Bird Treaty Act.",
lifeSpan:50,
scientificName:"southern subspecies: Haliaeetus leucocephalus leuc",
diet:"Carnivore",
status:"Endangered"
},
{
picture:"BlackSpiderMonkey.jpg",
commonName:"Black Spider Monkey",
information:"They can perform remarkable feats with their tails.",
lifeSpan:20,
scientificName:"Ateles panicus",
diet:"Herbivore",
status:"Not Endangered"
},
{
picture:"BottlenoseDolphin.jpg",
commonName:"Bottlenosed Dolphin",
information:"The bottlenosed dolphin is classified as a toothed whale. They are excellent hunters. They use sound waves to \"see\" their environment and where they are going through a process known as echolocation.",
lifeSpan:35,
scientificName:"Tursiops truncatus",
diet:"Fish shrimp eels and squid",
status:"Threatened"
},
{
picture:"BoaConstrictor.jpg",
commonName:"Boa Constrictor",
information:"Boas kill by constriction, actually suffocating rather than crushing their prey. Spend time in trees but are primarily ground dwellers.",
lifeSpan:40,
scientificName:"Boa constrictor constrictor",
diet:"Carnivore",
status:"Not Endangered"
},
{
picture:"ScreechOwl.jpg",
commonName:"Screech Owl",
information:" Generally does not migrate, most common in North America. Three color phases: red, grey and brown.",
lifeSpan:10,
scientificName:"Otus asio",
diet:"Carnivore",
status:"Not Endangered"
},
{
picture:"CostasHummingbird.jpg",
commonName:"Costas Hummingbird",
information:"Costas habit of soaring between flower beds is helpful in distinguishing it. Has a preference for red flowers. Males do not participate in nesting or raising young. Of the seven major species breeding in the West, the Costas prefers the driest climates. Nests are frequently held together with spider webs.",
lifeSpan:12,
scientificName:"Calypte costae",
diet:"Nectar and small insects",
status:"Not Endangered"
},
{
picture:"CubanGroundIguana.jpg",
commonName:"Cuban Iguana",
information:"Easily become obese in captivity so must be fed sparingly. The ability to store up fat helps them to survive during times of drought.",
lifeSpan:10,
scientificName:"Cyclura nubila nubila",
diet:"Fruit and small vertebrates",
status:"Threatened"
},
{
picture:"DesertIguana.jpg",
commonName:"Desert Iguana",
information:" Require much heat during the day. When in danger they flee by running in part on hind legs only. Able to remain active up to 115 degrees F; cool off by climbing into low shrubs.",
lifeSpan:10,
scientificName:"Dipsosaurus dorsalis",
diet:"Plants and insects",
status:"Not Endangered"
},
{
picture:"Emu.jpg",
commonName:"Emu",
information:"The Emu is Australias largest bird and is second in size only to the ostrich. The Emu does not fly, but can run up to 30 mph (50 kph).",
lifeSpan:20,
scientificName:"Dromaius novaehollandiae",
diet:"Herbivore",
status:"Not currently listed"
},
{
picture:"Stingray.jpg",
commonName:"Freshwater Stingray",
information:"Locate their prey by using the digging motion of their pectoral fins to excavate the substrate to expose the animals buried in the sand.",
lifeSpan:9,
scientificName:"Potamotrygen motoro",
diet:"Crustaceans worms and mollusks",
status:"Not Endangered"
},
{
picture:"Octopus.jpg",
commonName:"Giant Octopus",
information:"This is one of the largest known species of Octopus. Its diet will include almost anything it can overpower. Octopuses constantly flash many colors to blend in instantly with their surroundings. The female dies shortly after laying her eggs.",
lifeSpan:3,
scientificName:"Octopus dofleini",
diet:"Carnivore",
status:"Not endangered"
},
{
picture:"Zebra.jpg",
commonName:"Zebra (Grants Zebra)",
information:"The stripe patterns of a zebra distinguish one subspecies from another. Zebras have a high resistance to the effects of drought, and they can eat dried grasses. The young are weaned at 6-8 months. Lions and hyenas are enemies.",
lifeSpan:20,
scientificName:"Equus burchelli bohmi",
diet:"Herbivore",
status:"Not currently listed"
},
{
picture:"Baboon.jpg",
commonName:"Guinea Baboon",
information:"These baboons live in large groups which consist of a hierarchical group structure based on a dominating male while breeding occurs; after breeding, the male leaves and a dominant female leads the troop. Much of their time is spent in feeding, grooming, and sleeping.",
lifeSpan:30,
scientificName:"Papio papio",
diet:"Omnivore",
status:"May become threatened"
},
{
picture:"HowlerMonkey.jpg",
commonName:"Howler Monkey",
information:" These animals produce a low growling sound that has been compared to the roar of a lion. These calls can be heard up to 3 km through the forest and are used to communicate danger as well as keeping the troop together.",
lifeSpan:20,
scientificName:"Alouatta spp.",
diet:"Herbivore",
status:"Endangered"
},
{
picture:"IndianRockPython.jpg",
commonName:"Indian Rock Python",
information:"Can become very tame. The Python species are covered by import regulations and are therefore most available as captive bred specimens. Frightening numbers of these snakes have been killed for the leather trade.",
lifeSpan:30,
scientificName:"Python molurus molurus",
diet:"Carnivore",
status:"Not Endangered"
},
{
picture:"Koala.jpg",
commonName:"Koala",
information:"Koalas do not require water. Males larger than females. Noctural/crepuscular, sleeps up to 19 hours a day. Young are carried on mothers back after leaving pouch.",
lifeSpan:15,
scientificName:"Phascolarctos cinereus",
diet:"Herbivore (Eucalyptus leaves)",
status:"Protected"
},
{
picture:"Lion.jpg",
commonName:"Lion",
information:"Males have manes on cheeks and throat, some species have manes on shoulders and bellies. Young lions have leopard like markings. A pride usually consists of 4-12 related adult females, their offspring and 1-6 adult males. Lions eat animals weighing 110 or 1100 lbs.",
lifeSpan:15,
scientificName:"Panthera leo - various subspecies",
diet:"Carnivore",
status:"Endangered"
},
{
picture:"MarbledSalamander.jpg",
commonName:"Salamander",
information:"It is a beautiful animal, black with white or silvery bands. Lives well in captivity.",
lifeSpan:8,
scientificName:"Ambystoma opacum",
diet:"Carnivore",
status:"Not Endangered"
},
{
picture:"Orangutan.jpg",
commonName:"Orangutan",
information:"Orangutan means \"man of the forest\". Enemies include tigers, clouded leopard, humans.",
lifeSpan:50,
scientificName:"Pongo pygmaeus",
diet:"Fruits, Vegetation and Birds eggs",
status:"Endangered"
},
{
picture:"Ostrich.jpg",
commonName:"Ostrich",
information:"Largest of living birds. Adult males may exceed 8 feet in height and 300 lbs. in weight. In Egypt, the ostrich was the emblem of the Goddess of Truth and Justice.",
lifeSpan:50,
scientificName:"Struthio camelus",
diet:"Insects, Fruit, seeds and grasses",
status:"Endangered"
},
{
picture:"Piranha.jpg",
commonName:"Piranha",
information:"Afraid of nothing; will attack any animal regardless of size. Is attracted by the smell of blood. Considered the most dangerous fish in the Amazon",
lifeSpan:999,
scientificName:"Plecostomus - Hypostomus plecostomus",
diet:"Carnivore (mainly smaller fish)",
status:"Not Endangered"
},
{
picture:"Platypus.jpg",
commonName:"Platypus",
information:"Were thought to be a hoax when first discovered. The male has a venemous spur on his hind legs. Capable of many vocalizations including sounds like a growling puppy and a brooding hen.",
lifeSpan:15,
scientificName:"Ornithorhynchus Anatinus",
diet:"Insects and Larvae",
status:"Not Endangered"
},
{
picture:"PolarBear.jpg",
commonName:"Polar Bear",
information:" The polar bear is the largest non-aquatic carnivore. Its stomach can hold more than 150 lbs of food. The polar bears fur is water repellant and the individual hairs are clear due to hollow hair shafts. The feet of the polar bear serve as snow boots and as paddles when they are in the water.",
lifeSpan:40,
scientificName:"Ursus maritimus",
diet:"Carnivore",
status:"Protected"
},
{
picture:"Tarantula.jpg",
commonName:"Red Legged Tarantula",
information:"Tarantulas shed their skin about once a month as hatchlings and will slow down to about once every year or two as adults. Their number one enemy is the Spider Hunting Wasp.",
lifeSpan:20,
scientificName:"Brachypelma smithi",
diet:"Insects, small reptiles and mammals",
status:"Not Endangered"
},
{
picture:"Gazelle.jpg",
commonName:"Thomsons Gazelle",
information:"The stiff-legged bouncing movement common to gazelles is called stotting or pronking. They can run quickly, 36 mph (57.6 km/hr), and if fleeing from an enemy, they can run as fast as 48 mph (76.8 km/hr).",
lifeSpan:10,
scientificName:"Gazella thomsoni",
diet:"Herbivore",
status:"Not currently listed"
}
];
isc.TileGrid.create({
tileWidth:150,
tileHeight:190,
height:400,
width:"100%",
showAllRecords:true,
data:animalData,
fields: [
{name:"picture",
type:"image", imageURLPrefix:"/isomorphic/system/reference/inlineExamples/tiles/images/"},
{name:"commonName"},
{name:"status"}
]
});
</SCRIPT>
</BODY>
</HTML>