Getting Started tutorials

Sean Gilligan

oläst,

10 maj 2012 04:42:382012-05-10

till iui-dev...@googlegroups.com

This is mentioned in the 0.4-beta3 release notes, but I thought I'd give
it a separate post with more detail:

I moved the "Getting Started" tutorials from the website Git repo
('site') into the main iUI Git repo ('default'). (They are now pulled
into the website via a Git submodule.)

This means they are also on http://demo.iui-js.org (but not in any
indexes yet) and in the release zipfile.

Here's the change to the site repo:
http://code.google.com/p/iui/source/detail?r=2b906398f64d7574c05fc35dd4cc7284ce95b5c9&repo=site

and here's where they were added to 'default':
http://code.google.com/p/iui/source/detail?r=a83c693ad4f682f41c7adac82554836dff6e60df

The updated site is at:
http://site-next.iui-js.org/
(I'll deploy to the official site shortly()

Now, I need to update the code in the actual webpages:

Remi, how did you make this originally?
Is there a build script to process/add the example HTML code into the
<ul class="codesample"> format?
Is there a way to pull it in via Ajax?

-- Sean

Remi Grumeau

oläst,

10 maj 2012 05:50:322012-05-10

till iui-dev...@googlegroups.com

It's a JS script i did code to format HTML code sample so it's easier to read.

It parses the html document onload, and format it.

In the HTML, it is:


<code>
&lt;ul id="screen1" title="Screen 1">
	&lt;li class="group">Links&lt;/li>
	&lt;li>&lt;a href="#screen2">Go to Screen #2&lt;/a>&lt;/li>
	&lt;li>&lt;a href="#screen3">Go to Screen #3&lt;/a>&lt;/li>

	&lt;li class="group">No links&lt;/li>
	&lt;li>Just a list item&lt;/li>
	&lt;li>Just a list item&lt;/li>
&lt;/ul>
</code>

And the JS code change it to:

<li>   <li class="group">Links</li></li>

<li>   <li><a href="#screen2">Go to Screen #2</a></li></li>

<li>   <li><a href="#screen3">Go to Screen #3</a></li></li>

<li></li><li>   <li class="group">No links</li></li>

</ul>

And it shows up as:

<ul id="screen1" title="Screen 1">
<li class="group">Links</li>
<li><a href="#screen2">Go to Screen #2</a></li>
<li><a href="#screen3">Go to Screen #3</a></li>
<li class="group">No links</li>
<li>Just a list item</li>
<li>Just a list item</li>
</ul>

The JS code is all in:

http://site-next.iui-js.org/medias/scripts/documentation.js

All related CSS code is in

http://site-next.iui-js.org/medias/css/documentation.css

Remi

-- Sean

--
You received this message because you are subscribed to the Google Groups "iui-developers" group.
To post to this group, send email to iui-developers@googlegroups.com.
To unsubscribe from this group, send email to iui-developers+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/iui-developers?hl=en.

Aaron Walton

oläst,

15 maj 2012 09:59:302012-05-15

till iui-dev...@googlegroups.com

My I suggest that you change this a bit so users can copy and paste the code? removing the line numbers would make this possible or there may be a better way to allow this and include the line numbers?

--
You received this message because you are subscribed to the Google Groups "iui-developers" group.

To post to this group, send email to iui-dev...@googlegroups.com.
To unsubscribe from this group, send email to iui-developer...@googlegroups.com.

Remi Grumeau

oläst,

15 maj 2012 11:24:292012-05-15

till iui-dev...@googlegroups.com

Well, this code is design to avoid numbers being in the code... That's why it's using <li> elements for each line of code.
If you copy paste the code in an html editor, you might not get those lines...

Remi

From: "Aaron Walton" <imusw...@gmail.com>
To: "iui-dev...@googlegroups.com" <iui-dev...@googlegroups.com>
Sent: May 15, 2012 3:59 PM
Subject: Re: [iui-developers] Getting Started tutorials

Sean Gilligan

oläst,

17 maj 2012 02:32:332012-05-17

till iui-dev...@googlegroups.com

On 5/15/12 6:59 AM, Aaron Walton wrote:
> My I suggest that you change this a bit so users can copy and paste
> the code? removing the line numbers would make this possible or there
> may be a better way to allow this and include the line numbers?

I've thought about putting the examples on jsFiddle, similar to this:
http://jsfiddle.net/msgilligan/LkgpX/

You can also find the tutorial source files:

1) in the released zipfile, in the directory
'web-app/tutorials/getting-started' (we should probably add them to the
index.html file)
2) On Google Code Git
http://code.google.com/p/iui/source/browse/web-app/tutorials/getting-started/example-link2.html
(these are easily copy/pasted, or you can use the 'view raw' option)
3) On the demo site:
http://demo.iui-js.org/tutorials/getting-started/example-link2.html

Some of the getting-started tutorial files (not linked from the
www.iui-js.org) are for 0.5 and we should probably move them to another
directory until 0.5 is ready.

-- Sean

Svara alla

Svara författaren

Vidarebefordra