Skip to content

Commit

Permalink
Merge pull request dmachi#14 from imagiczhang/master
Browse files Browse the repository at this point in the history 
add dojox.app.widgets.Container to dojox.app
  • Loading branch information
@imagiczhang
imagiczhang committed Apr 25, 2012
2 parents 312153f + 3505c06 commit 58fc15c
Show file tree
Hide file tree
Showing 16 changed files with 2,198 additions and 1 deletion.
4 changes: 3 additions & 1 deletion controllers/Layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,9 @@ function(lang, declare, on, win, array, query, dstyle, dattr, dgeometry, registr
}
else{
array.forEach(children, function(c){
if (c && c.domNode && c.region == "center") {
// fix layout container dispaly issue.
// only need to undisplay view
if(c && (c instanceof dojox.app.View) && c.domNode && c.region == "center"){
dstyle.set(c.domNode, "zIndex", 25);
dstyle.set(c.domNode, 'display', 'none');
}
Expand Down
93 changes: 93 additions & 0 deletions tests/layoutApp/config.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
{
"id": "layoutApp",
"name": "layout App",
"description": "A layout App",
"splash": "splash",

"dependencies": [
"dojox/mobile/_base",
"dojox/mobile/TabBar",
"dojox/mobile/RoundRect",
"dojox/mobile/TabBarButton",
"dojox/mobile/Button",
"dojox/mobile/RoundRect",
"dojox/mobile/Heading",
"dojo/store/Memory",
"dojox/mvc/Group",
"dojox/mvc/Repeat",
"dojox/mvc/Output",
"dojox/mobile/View",
"dojox/app/widgets/Container"
],

"modules": [
"dojox/app/module/lifecycle"
],

"controllers": [
"dojox/app/controllers/History"
],

//stores we are using
"stores": {
"namesStore":{
"type": "dojo.store.Memory",
"params": {
"data": "modelApp.names"
}
},
"repeatStore":{
"type": "dojo.store.Memory",
"params": {
"data": "modelApp.repeatData"
}
}
},

//models and instantiation parameters for the models. Including 'type' as a property allows
//one to overide the class that will be used for the model. By default it is dojox/mvc/model
"models": {
"names": {
"modelLoader": "dojox/app/utils/mvcModel",
"type": "dojox/mvc/EditStoreRefListController",
"params":{
"store": {"$ref":"#stores.namesStore"}
}
}
},

"template": "templates/navigation.html",
"definition" : "none",

//the name of the scene to load when the app is initialized.
"defaultView": "simple",

"defaultTransition": "slide",
//scenes are groups of views and models loaded at once
"views": {
"simple":{
"definition" : "views/simple.js",
"template": "templates/simple.html",
"dependencies":["dojox/mobile/TextBox"]
},

"repeat": {
"models": {
"repeatmodels": {
"modelLoader": "dojox/app/utils/mvcModel",
"type": "dojox/mvc/EditStoreRefListController",
"params":{
"store": {"$ref":"#stores.repeatStore"}
}
}
},
"template": "templates/repeat.html",
"dependencies":["dojox/mobile/TextBox"]
},

"generate": {
"template": "templates/generate.html",
"dependencies":["dojox/mobile/TextBox", "dojox/mobile/TextArea", "dojox/mvc/Generate"]
}
}
}
117 changes: 117 additions & 0 deletions tests/layoutApp/css/layoutApp.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
html,body {
width: 100%;
height: 100%;
}

button.baseBtn {
-webkit-background-clip: padding-box;
-webkit-box-align: center;
background-clip: padding-box;
border-style: solid;
border-width: 1px;
color: black;
font-family: 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans';
font-size: 18px;
font-weight: bold;
vertical-align: middle;
margin: 10px;
height: 34px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
width: 240px;
}

button.whiteBtn{
background-image: -webkit-gradient(linear, 0% 0, 0% 100%, from(white), color-stop(0.06, #f2f2f2), to(#b7b7b7));
border-color: #979797;
border-bottom-color: #727272;
}

button.whiteBtnSelected{
background-image: -webkit-gradient(linear, 0% 0, 0% 100%, from(#ffffff), color-stop(0.06, #bbbbbb), to(#fcfcfc));
border-color: #979797;
border-bottom-color: #727272;
}

#header button {
position:absolute;
margin:0px;
}

#navButton {
width:60px;
}

#loadDiv {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:999;
}
#loadDiv {
display:table;
font-size: 20px;
text-align:center;
background-color:white;
}
#loadDiv span {
display:table-cell;
vertical-align:middle;
}

body .mblProgContainer {
top:45%;
height: 45px;
width: 140px;
margin-left:-70px;
background-color: #2A2A28;
border-style: solid;
border-width: 2px;
border-color: #666666;
border-radius: 0.4em;
-webkit-border-radius: 0.4em;
-moz-border-radius: 0.4em;
}

body .mblProgContainer > div {
height: 100%;
width: 100%;
line-height: 45px;
vertical-align: middle;
font-size: 20px;
color: #c2c2c2;
}

body .mblProg {
left: 3px;
top: 3px;
}

body .mblProgContainer > div::after {
padding-left: 42px;
content: "Updating...";
}

#jsContent, #htmlContent {
padding-left:2px;
}

@media screen and (max-width: 600px) {
#jsContent, #htmlContent {
font-size: 14px;
}
}

.hidden {
display:none;
}

div .navPane {
width:250px;
border-right:1px solid black;
background-color: #C5CCD3;
}
22 changes: 22 additions & 0 deletions tests/layoutApp/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Layout App</title>
<link type="text/css" href="./css/layoutApp.css" rel="stylesheet" />

<script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="parseOnLoad: false,
mblHideAddressBar: false,
mblAndroidWorkaround: false,
mblAlwaysHideAddressBar: false,
async: 1">
</script>
<script>
require(["dojox/mobile/deviceTheme", "./layoutApp.js"], function(){
});
</script>
</head>
<body>
</body>
</html>
52 changes: 52 additions & 0 deletions tests/layoutApp/layoutApp.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
require(["dojo/_base/window","dojox/app/main", "dojox/json/ref", "dojo/text!./config.json"],
function(win, Application, jsonRef, config){
win.global.modelApp = {};
modelApp.names = {
identifier: "id",
items: [{
"id": "1",
"Serial": "360324",
"First": "John",
"Last": "Doe",
"Email": "jdoe@us.ibm.com",
"ShipTo": {
"Street": "123 Valley Rd",
"City": "Katonah",
"State": "NY",
"Zip": "10536"
},
"BillTo": {
"Street": "17 Skyline Dr",
"City": "Hawthorne",
"State": "NY",
"Zip": "10532"
}
}]
};
modelApp.repeatData = [{
"First": "Chad",
"Last": "Chapman",
"Location": "CA",
"Office": "1278",
"Email": "c.c@test.com",
"Tel": "408-764-8237",
"Fax": "408-764-8228"
}, {
"First": "Irene",
"Last": "Ira",
"Location": "NJ",
"Office": "F09",
"Email": "i.i@test.com",
"Tel": "514-764-6532",
"Fax": "514-764-7300"
}, {
"First": "John",
"Last": "Jacklin",
"Location": "CA",
"Office": "6701",
"Email": "j.j@test.com",
"Tel": "408-764-1234",
"Fax": "408-764-4321"
}];
app = Application(jsonRef.fromJson(config));
});
76 changes: 76 additions & 0 deletions tests/layoutApp/navigation.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Layout App</title>
<script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="parseOnLoad: false,
mblHideAddressBar: false,
mblAndroidWorkaround: false,
mblAlwaysHideAddressBar: false,
async: 1">
</script>
<script>
require(["dojo/ready", "dojo/parser", "dojox/mobile/deviceTheme",
"dojox/app/widgets/Container", "dojox/mobile/EdgeToEdgeCategory",
"dojox/mobile/Heading", "dojox/mobile/ListItem",
"dojox/mobile/RoundRectList"], function(ready, parser){
ready(function(){
parser.parse();
});
});
</script>
</head>
<body style="width:100%; height:350px">
<div dojoType="dojox.app.widgets.Container" style="width:100%; height:100%">
<!-- left -->
<div dojoType="dojox.app.widgets.Container" style="width:240px;" region="left">
<h1 region="top" dojoType="dojox.mobile.Heading">Layout App</h1>
<div data-dojo-type="dojox.app.widgets.Container" region="center" scrollable="true">
<h2 dojoType="dojox.mobile.EdgeToEdgeCategory" style="height: 32px;" region="top">Navigation</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList" region="center">
<li dojoType="dojox.mobile.ListItem" clickable="true" transitionOptions="{title:'simple',target:'simple',url:'#simple'}">
Simple Data Binding
</li>
<li dojoType="dojox.mobile.ListItem" clickable="true" transitionOptions="{title:'repeat',target:'repeat',url:'#repeat'}">
Repeat Data Binding
</li>
<li dojoType="dojox.mobile.ListItem" clickable="true" transitionOptions="{title:'generate',target:'generate',url:'#generate'}">
Simple Form Generate
</li>
</ul>
<h2 dojoType="dojox.mobile.EdgeToEdgeCategory" style="height: 32px;" region="bottom">bottom</h2>
</div>
<h1 region="bottom" dojoType="dojox.mobile.Heading">footer</h1>
</div>

<!-- top -->
<div dojoType="dojox.app.widgets.Container" style="height:50px; background-color:red" region="top">
<h1 region="top" dojoType="dojox.mobile.Heading">Top</h1>
</div>

<!-- center -->
<div dojoType="dojox.app.widgets.Container" style="height:300px; width:100%; background-color:blue" region="top">
<!-- left -->
<div dojoType="dojox.app.widgets.Container" style="width:240px;" region="left">
<h1 region="top" dojoType="dojox.mobile.Heading">Layout App</h1>
<div data-dojo-type="dojox.app.widgets.Container" region="center" scrollable="true">
<h2 dojoType="dojox.mobile.EdgeToEdgeCategory" style="height: 32px;" region="top">Navigation</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList" region="center">
<li dojoType="dojox.mobile.ListItem" clickable="true" transitionOptions="{title:'simple',target:'simple',url:'#simple'}">
Simple Data Binding
</li>
<li dojoType="dojox.mobile.ListItem" clickable="true" transitionOptions="{title:'repeat',target:'repeat',url:'#repeat'}">
Repeat Data Binding
</li>
<li dojoType="dojox.mobile.ListItem" clickable="true" transitionOptions="{title:'generate',target:'generate',url:'#generate'}">
Simple Form Generate
</li>
</ul>
<h2 dojoType="dojox.mobile.EdgeToEdgeCategory" style="height: 32px;" region="bottom">bottom</h2>
</div>
</div>
</div>
</div>
</body>
</html>
Loading

0 comments on commit 58fc15c

Please sign in to comment.