Opened 7 years ago

Closed 7 years ago

#15454 closed enhancement (fixed)

Better example for 'Mobile Showcase'

Reported by: sevenearths Owned by: Eric Durocher
Priority: undecided Milestone: 1.9
Component: DojoX Mobile Version: 1.7.2
Keywords: Cc:
Blocked By: Blocking:

Description

This is my first posting here so go easy. I know you guys are snowed under with 1600+ tickets and all but I was wondering if someone could make a more navigable source for 'http://demos.dojotoolkit.org/demos/mobileGallery/demo-iphone.html'. It is a major resource for those developing mobile apps with the dojo framework and a very important resource for those looking for an iphone/ipad solution (basically it looks great on both devices), but unfortunately pretty much all the code that makes this happen is hidden away :(

What can I learn from:

<!DOCTYPE html>
<html manifest="cache.appcache">
	<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" />
		<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Showcase</title>
		<link rel="stylesheet" type="text/css" href="../../dojox/mobile/themes/iphone/iphone.css"></link>
		<link rel="stylesheet" type="text/css" href="../../demos/mobileGallery/css/themes/iphone/gallery.css"></link>
		<link rel="stylesheet" type="text/css" href="demo.css"/>
		<link rel="apple-touch-icon" href="images/MobileShow_App_57.png"/>
		<link rel="apple-touch-icon" sizes="114x114" href="images/MobileShow_App_114.png"/>
		<link rel="shortcut icon" href="images/MobileShow_Fav_16.png"/>
		<style>
		html, body{
			height: 100%;
			overflow: hidden;
		}
		
		</style>
	</head>
	<body>
		<div id="splitter" dojoType="dojox.mobile.FixedSplitter" orientation="H">
			<div id="leftPane" dojoType="dojox.mobile.FixedSplitterPane">
				<h1 id="leftHeader" dojoType="dojox.mobile.Heading" fixed="top">
					<div style="height:42px;float: left;margin-left:6px"></div>
					<span id="leftHeaderLabel">Showcase</span>
				</h1>
				<div id="navigation" dojoType="dojox.mobile.ScrollableView"></div>
			</div>

			<div dojoType="dojox.mobile.FixedSplitterPane">
				<h1 id="header" dojoType="dojox.mobile.Heading" fixed="top">
					<button id="navButton" dojoType="dojox.mobile.Button" class="baseBtn defaultBtn backBtn">Back</button>
					<span id="headerLabel">Welcome</span>
					<button id="sourceButton" dojoType="dojox.mobile.ToolBarButton" toggle="true" class="baseBtn defaultBtn">Source</button>
				</h1>
				<div id="rightPane" dojoType="dojox.mobile.View" selected="true" style="overflow:hidden;">
					<div id="welcome" dojoType="dojox.mobile.ScrollableView">
						<h1 dojoType="dojox.mobile.RoundRectCategory" style="text-align:center;vertical-align:middle;margin-left:0px;padding-left:0px"><div>Welcome to Dojo Mobile Showcase</div>
						<img src="images/welcomeLogo.png"/>
						</h1>
					</div>
					<div id="source" dojoType="dojox.mobile.View">
						<ul id="srcTabBar" dojoType="dojox.mobile.TabBar" barType="segmentedControl">
							<li id="htmlSrcTab" dojoType="dojox.mobile.TabBarButton" moveTo="htmlSrcView" selected="true">HTML</li>
							<li id="jsSrcTab" dojoType="dojox.mobile.TabBarButton" moveTo="jsSrcView">JavaScript</li>
						</ul>
						<div>
							<div id="htmlSrcView" dojoType="dojox.mobile.ScrollableView">
								<pre id="htmlContent"style="white-space:pre-wrap;"></pre>
							</div>
							<div id="jsSrcView" dojoType="dojox.mobile.ScrollableView">
								<pre id="jsContent"style="white-space:pre-wrap;"></pre>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="loadDiv" style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:999;"><span>Loading...</span></div>
		<script type="text/javascript" src="../../dojo/dojo.js" djConfig="parseOnLoad:false,mblAlwaysHideAddressBar:true,async:true"></script>
		<script>
			require(["./src.js"], function(){});
		</script>
	</body>
</html>

Any chance of having all the elements ('ListItem?','Button','IconContainer?',etc...) loading in the main file so the file source can be used as a reference of how all the mobile elements should be used?

BTW thanks for what is without a doubt the JS framework out there

Attachments (1)

patch15454-comments.patch (2.8 KB) - added by Adrian Vasiliu 7 years ago.
Tiny improvement by adding a comment in each main HTML. (In README, only formatting) - Adrian Vasiliu, IBM, CCLA

Download all attachments as: .zip

Change History (5)

comment:1 Changed 7 years ago by bill

Component: DocumentationDojoX Mobile
Owner: set to Eric Durocher

Presumably it all works if you do a build as specified in demo.profile.js, but it would be better if it worked from source too. Like the other demos.

Changed 7 years ago by Adrian Vasiliu

Attachment: patch15454-comments.patch added

Tiny improvement by adding a comment in each main HTML. (In README, only formatting) - Adrian Vasiliu, IBM, CCLA

comment:2 Changed 7 years ago by Adrian Vasiliu

In patch15454-comments.patch I just added a short comment to indicate the location of the source files (HTML, JS, CSS) of the individual views. Just a minor improvement. I share the feeling that the mobile gallery serves better the purpose of demoeing the capabilities than for teaching how to code. I'm not sure the same code can serve perfectly both purposes.

By the way, the demo.profile.js mentioned by bill does not exist for mobileGallery (in trunk and 1.7 branch), although being pointed in mobileGallery/README. Unless there's a particular reason for that, we should add it.

comment:3 Changed 7 years ago by cjolif

Milestone: tbd1.9

You can also look at the HTML & JavaScript? source for each view using the "source" button when navigating the gallery.

comment:4 Changed 7 years ago by cjolif

Resolution: fixed
Status: newclosed

In [29514]:

fixes #15454. Thanks Adrian Vasiliu (IBM, CCLA).

Note: See TracTickets for help on using tickets.