Componentizing HTML

[Partial]

I'm a flex developer so I'm very familar with a component based programming model. In a typical situation, I would write a view class (let's just say adding an empty container to the view), and then I would add this to an event, dispatch it, and let the event handler at it to the view class.

HTML seems a little bit different when using rich internet apps. I don't want to refresh the pages, so I would, in theory, be loading generating html or retrieving it from a server and adding it to the view using innerHTML.

Is this a correct assumption?

Let's look at a very basic example.

Say I have a two container layout. See below.

edit: Sorry about the formatting. Assuming it's two boxes.


AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
A A A
A A A
A 1 A 2 A
A A A
A A A
A A A
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA





Say in container 1 I have a button, that when a user click, it dispatches a click event that I can grab, and then request data from an application server. The information that I would be requesting would be the content of container 2. Simple enough, right?

How does one store the HTML for container 2 that I'd be requesting? Do I have a series of HTML files stored on the server that are opened, read, and returned in the response? Do I use inline HTML on the server? What is the stand convention for doing this?

What would be a good framework to look into for this sort of thing? I've been looking at Google Web Toolkit for this application because we already have our app server code in java and we need a small, but rich, HTML portal kind of thing.

Thanks,
Dan

[Partial]

Another example would be this.

I have the same container layout.

Side 1 still has the button that updates side 2. In Flex, on the button click event I would handle it, and instantiate a new instance of a class by

var newView : ViewClassFun = new ViewClassFun();
container2.addChild(newView);


How does one componentize HTML like this? Does this make sense?

[AsLan^]

It really depends on the kind of content you're going to be displaying in box 2.

If you're not going to have any HTML in box 2 then you can just have the server return text.

Otherwise, you'll need to work out some kind of HTML generation logic. Whether you develop a template system or hardcode a few examples will depend on your needs.

Oh, and you would want your server to return HTML that wouldn't invalidate the page, i.e. no head or body tags, that sort of thing.

[Partial]

It really depends on the kind of content you're going to be displaying in box 2.

If you're not going to have any HTML in box 2 then you can just have the server return text.

Otherwise, you'll need to work out some kind of HTML generation logic. Whether you develop a template system or hardcode a few examples will depend on your needs.

Oh, and you would want your server to return HTML that wouldn't invalidate the page, i.e. no head or body tags, that sort of thing.

Cool.

So, say I had a tree control in the left container, and when I clicked it I generated a new view on the right with a data grid (for example). All of this code is all client side. What would the procedure be for this? Is it best practice to pull this mark-up from a second file, or where does it typically come from? My policy in flex is lots of small, manageable loosely coupled files talking through events so this is quite a departure for me. Finally, once that new view's html is added to the view and rendered (is there some sort of creationComplete event for when it's been successfully added and rendered?), I would then dispatch some sort of event to retrieve the json objects from the server to populate said datagrid.

[AsLan^]

All of this code is all client side. What would the procedure be for this? Is it best practice to pull this mark-up from a second file, or where does it typically come from?

If it's all client side it needs to be in your javascript files. Are you asking for actual code like:

document.getElementByID("box2").innerHTML = getDataGridHTML();

Finally, once that new view's html is added to the view and rendered (is there some sort of creationComplete event for when it's been successfully added and rendered?), I would then dispatch some sort of event to retrieve the json objects from the server to populate said datagrid.

I think you would have to include a javascript in the html that you just added.

[Partial]

So, if I were to use Google Web Toolkit to make an HTML/javascript application, I could, in theory, easily (meaning a few hours of work) wrap this javascript application into an iPhone app, right?

[AsLan^]

That I don't know, as a web app targeted towards iPhone (like Google Buzz) sure, but I don't think you can create native iPhone apps out of HTML and Javascript.

[Partial]

That I don't know, as a web app targeted towards iPhone (like Google Buzz) sure, but I don't think you can create native iPhone apps out of HTML and Javascript.

I thought you could have an objC wrapper around a js/html app? Maybe I misunderstood Stevie. That would be a bit of a bummer. I wish we could truly write once and run everywhere :lol:

[AsLan^]

Just saw these today in a slashdot thread and I thought you might be interested:

PhoneGap (http://www.phonegap.com/)

Sencha Touch (http://www.sencha.com/products/touch/)

I haven't tried out either but they appear to be capable of creating native apps from HTML/Javascript.

If you try one let us know how it goes :)

[Partial]

Just saw these today in a slashdot thread and I thought you might be interested:

PhoneGap (http://www.phonegap.com/)

Sencha Touch (http://www.sencha.com/products/touch/)

I haven't tried out either but they appear to be capable of creating native apps from HTML/Javascript.

If you try one let us know how it goes :)

Appreciate the heads up. Thanks man!