Framesets usage

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Framesets usage

Post by alex.barylski »

I've been tinkering with extJS and a few other jQuery plugins for making advanced (Desktop like) applications to eliminate the need for me to design anything. extJS is quite complex and I had some annoying issues with controls that stopped working, populating, etc.

I eventually accepted defeat (for now) and decided to build accessible controls which work with no JS and at a later date come back and make them drag and drop, etc. I'm doing this however, using framesets to effectively divide up my screens, in this case a CMS editor with a tree control on the right division.

Because this is an administration panel/backend I am not concerned with SEF/SEO nor am I worried about non-supporting clients (the backwards compabaility with non-JS browsers is really just a consequence not a requirement).

That being said, are framesets being phased out of any XHTML/HTML standard? Does 5.0 HTML support them?

While I could easily emulate such a layout in a single page request, it's a little easier for me to keep controls compartmentalized by having each FRAME call it's own controller essentially. It also makes the eventual transition to extJS much easier as that is the way it constructs it's interfaces, querying scripts which return JSON data.

Anyways, the important topic here is whether FRAMES are being phased out, bad practice (acknowledging my situation of building a backend application), etc???

Cheers,
Alex
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Framesets usage

Post by daedalus__ »

http://www.w3.org/TR/html5-diff/#absent-elements wrote: The following elements are not in HTML 5 because their usage affected usability and accessibility for the end user in a negative way:
frame
frameset
noframes
http://en.wikipedia.org/wiki/XHTML wrote: HTML frames will be replaced by XFrames.
frames have been going out for years now. i haven't seen a website use anything but an iframe in years. when i first started making websites (a very long time ago) i used them often but after working with them a lot i felt like they were a lot more trouble than they were worth. iframes can be useful though.

there is a pattern that may help you phase the frames out of your application called the composite view. http://java.sun.com/blueprints/corej2ee ... eView.html

i think zend framework implements this pattern.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: Framesets usage

Post by alex.barylski »

frames have been going out for years now. i haven't seen a website use anything but an iframe in years. when i first started making websites (a very long time ago) i used them often but after working with them a lot i felt like they were a lot more trouble than they were worth. iframes can be useful though.
Not a web site dude, it's an Intranet web application. No SEF/SEO required or desired. IFRAMEs are not what I'm after as I want the user to have the ability to adjust their layouts as required to meet their preferances. I have seen many a JS framework do this (extJS is one such example) but it's sluggish compared to native frameset.

Although I wasn't aware they were being phased out which is what I needed to know. XFRAME as a replacement, I will have to look into that. :)
there is a pattern that may help you phase the frames out of your application called the composite view
I use that in the front end but I want the splitter control that framesets support, also the each panel has it's own focus so updating one panel doesn't affect the others, which extJS does but in a much more complex way and relying on AJAX, which is no big deal, but frames are a lot easier to work with.

Cheers,
Alex
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Framesets usage

Post by daedalus__ »

sites apps its the same to me.

what do you mean by adjust their layouts freely? resizable frames? you may ask JAB if he knows a speedy way to resize elements using javascript. i believe you could implement a system similar to the one you are describing without using frames that can be usable and swift.

i understand that frames makes it very easy without a lot of overhead but i think that once you get rid of the frames you'll think of new features that will make the transition well worth it. is there a way i could see this in action?

ajax tends to be as complicated as the programmer makes it. so. i dunno

i know its intranet but is there a way i can see? maybe i can think of a neat idea. im having trouble visualizing because my head is cloudy tonight :D
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: Framesets usage

Post by alex.barylski »

what do you mean by adjust their layouts freely? resizable frames? you may ask JAB if he knows a speedy way to resize elements using javascript. i believe you could implement a system similar to the one you are describing without using frames that can be usable and swift.
Absolutely: http://www.extjs.com/deploy/dev/example ... owser.html

I would love to use such a system but the JS or rather the declarative approach using complex nested arrays is not my forte...in fact I had my setup and my tree control populated and then bam it stopped working I couldn't figure it out so I gave up trying to use extJS. Besides my tree control ideally works with JS disabled just as well, which requires a bit of a UI tweak.
understand that frames makes it very easy without a lot of overhead but i think that once you get rid of the frames you'll think of new features that will make the transition well worth it. is there a way i could see this in action?
I haven't used frames since I started in HTML I just don't like relying on the JS approach (finicky I hate JS for that) nor does the composite view work very well as it requires extensive AJAX which I find slows everything down and increases total breakage due to some silly JS error if everything is generated server side and spit out individually into FRAMEs and only later is JS used to make everything dynamic I never have to worry about the screen being white with little to no error message.

Nothing I have publically viewable it's all behind my router, but the layout is almost identical to that link above.
ajax tends to be as complicated as the programmer makes it. so. i dunno
extJS while I am sure it's intuitive is frustrating. I've almost always been a backend developer with a strong focus on architecture not really interested in design or client side technologies, except when DHTML first came up, until the novelty wore off. Because this is a personal project and I no nobody interested in helping with the JS that is capable of doing so, it's easier to stick with server side generation and using FRAMEs -- although I would rather have the interface done in extJS it's just to damn frustrating for me. :P
know its intranet but is there a way i can see? maybe i can think of a neat idea. im having trouble visualizing because my head is cloudy tonight
I've destroyed the extJS setup I had (but I started a post recently in this forum -- find it and you will see the code verbatim). Alternatively I can take a screenshot. Please note I have used a composite view approach in the past -- I don`t like it for backend admin -- nor do I want a tabbed interface.

extJS would work if I had the patience to learn all it`s caveats but I don`t. So frames is the next best thing -- unless you want to help me with the extJS side of things. :P

Obviously this is grossly incomplete but demonstrates what I/m trying to do. The tree control will allow the page editor to quickly navigate and modify page content. Doing this in a single page request would require the content area be updated via AJAX -- handled nicely by extJS. This would be a trivial matter with the use of jQuery sure, but then what about the tree control being dynamic. Everytime you move an item, add or remove a page, the tree would also need updating. I have looked at most jQuery tree controls and none fit my requirements.

Cheers,
Alex
Attachments
screenie.PNG
screenie.PNG (29.78 KiB) Viewed 2784 times
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Framesets usage

Post by daedalus__ »

that whole right hand dealy thing there.

you could use an iframe for that manipulating it with javascript if you wanted to. i think. that would take a lot of the work out of it because you could keep most of your system.

as far as the tree thing. don't make tree of anything using javascript. you can use pure css to make tree anything. use javascript/ajax to manipulate. th thing.

like... someone is going to have to pick up. or. i have to finish this talk tomorrow. sorry bye.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: Framesets usage

Post by alex.barylski »

you could use an iframe for that manipulating it with javascript if you wanted to. i think. that would take a lot of the work out of it because you could keep most of your system.
If Im going to use an iframe I would probaly just stick with framesets. At least they provide native splitter functionality so the user can adjust their prefered layout. Besides I have a master template and a main template and a tree template each of which is populated accordingly. I also have a header and a footer which clients would be able to override.

Without using framesets (ie: composite view) I would typically have a master template which contain the header, footer, and a content area, which would house the tree and main panels. DOing this would result in the loss of a splitter, without introducing more JS to emulate the splitter functionality. Now if I wanted to a panels to the bottom of the main panel, say a TODO list, I would add a new panel but again have to implement some splitter functionality, not to mention AJAX support so each panel can update independently of each other.

Not required if I stuck with framesets. I like XFrames they seem equally flexible and more stylable but not apparently support in IE8 yet. :( Maybe i am just an idiiot and couldnèt get it work. :P
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Framesets usage

Post by daedalus__ »

hey i read last night that xhtml2 is dropped. sorry :(

i say if it works and as long as browsers support frames, leave it be. :) haha

http://docs.jquery.com/UI/Resizable

that extjs thing is real real cool btw.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: Framesets usage

Post by alex.barylski »

that extjs thing is real real cool btw.
It is...thank VladSun for that one. :)

I would use it but JS is always finicky...I always have problems with it...I'm starting to investigate the possibility of using VB.NET for the admin portion of web sites I build in the future.

I just need a simple crude interface to work with a web services API so I begin pushing my ideas forward and not wasting time on building an admin interface. :(
User avatar
kaisellgren
DevNet Resident
Posts: 1675
Joined: Sat Jan 07, 2006 5:52 am
Location: Lahti, Finland.

Re: Framesets usage

Post by kaisellgren »

Maybe a bit old topic, but I've been using ExtJS for 4 months now at work. Basically the team consists of client-side ExtJS developers and server-side PHP developers (who mainly just write read and write actions that utilize Yii's active record).

I know that a lot of people hype ExtJS and tell how cool it is. Yes, it's the best JavaScript based component and layout system. The main difference between ExtJS and things like jQuery UI is that ExtJS is also for layouts and structures, data processing, etc. while jQuery UI is just there to provide simple widgets for your website.

While ExtJS is the best of its kind, it does not mean that it is perfect. It's not perfect at all. Off the top of my head, past 4 months I have encountered these kinds of problems (and stupid decisions) with ExtJS:

Layouts breaking
I have seen so many times ExtJS failing to construct a layout where I use forms layouts inside fieldsets that are inside some card panel. When you combine some layouts and use uncommon features, it seems that the developers haven't tested them well enough.

Form and form field bugs
Empty texts (also known as placeholders) in text fields in Ext display as gray and when you click on the field, it removes the gray text and allows you to type in. While it seems to work well, sometimes I hate the fact that if you set an empty text like:
[text]new Ext.form.TextField({
name: 'name',
fieldLabel: 'Name',
emptyText: 'Name'
});[/text]
if you now type "Name" as for your name, Ext thinks it is the empty text, and not the text you typed in, and does not send it (oh yeah, Name is a real first name). So, it compares the result to empty text, while it should check if it has been modified.

Form submits
When you disable a form field, you can't decide whether Ext sends it or not, it never sends it. Likewise, if you hide a form field, it always sends it. So, to not send hidden fields, also disable them. To send disable fields that are visible, you need to manually take the values of those and modify the sent result set.

To make things better, if you have a field with an empty text such as "Type your email", and then the user does not type anything, and submits the form. Ext will send the email as "Type your email" and there is no way to alter this behavior what I can see from the documentation.

Grids
Grids are missing features like hiding a specific row. You need to attach a beforeload event to the grid store and manually remove the rows you want, and save the original data into some temporary variables, so, that if you still want to save it you attach another event into beforesave and add the record from the temporary variable to the set.

Comboboxes
You can't do a lot of things like getting the index of the selected combobox item. However, after reading the Ext core for an hour I found an internal variable selectionIndex that worked well.

Support
Worst support ever. We have paid premium forum membership that costs about $750 annually. When we ask for help at the forums, we get from 0 to 1 reply that mostly says it's not implemented/possible/supported or tells us to do something crazy and hackish.

Modals
I love that when you popup a modal window, you can still tab from the window to any items below the window... this could break the entire software if you rely on modals stopping the user from doing something meanwhile the modal window is open.

Windows
I don't like windows a lot, they are not customizable and the worst thing is that our customers constantly have those windows out of screen and can't close them. We added close buttons to the bottom and later extended the Ext's core object which was not fun.

Hiding form fields
This one is my favority, if you have a form field like this:
[text]var a = new Ext.form.TextField({
fieldLabel: 'test',
name: 'email',
emptyText: 'enter email'
});[/text]
and then you do a.hide(), it will only hide the text box, not the field label. The solution is to traverse through the DOM tree to get the field label div and set display none to it.

Store and dates
Stores in Ext allow you to specify the date format that allows Ext to understand the date that the server sends. However, there is no way to specify how Ext saves dates in AJAX requests. I ended up overriding extjs core function beforesave and made it use regular expressions to convert the data to right format.

Composite fields
Ext has these composite fields that allows you to construct more elements next to each other like "fieldLabel textfield datepicker", but every other time I use it, Ext puts scrollbars below the fields (and am able to scroll 1px to right)...

Flash component
This one does not work in IE 6, 7, 8, because it uses <embed> wrong.

Editable grids
The editable grids in Ext like this one (http://www.sencha.com/deploy/dev/exampl ... -grid.html), are simply horrible. The checkbox you see there is not a checkbox, it's a div with a background image that toggles between two images when you click on it. While it works OK, we needed to show a combobox... that is not as easy to implement that way.



There are plenty of other problems too, but I don't remember them anymore. So, if you plan on using Ext, PCSpectra or anyone else, make sure you have patience... especially if you are going to do anything even a bit custom and do not expect any support so that you won't be disappointed.
Post Reply