[htmlwrapper] Supported HTML elements? Tables?

[chegger007]

Hi Tyler,

thanks for your framework, looks like a very promising way to merge
HTML and AS.

My question is: Is there a list of HTML elements that are supported in
htmlwrapper?
For my flex application I need to display HTML tables and it seems not
to work....if the table element is not supported, which approach would
you propose to display HTML tables in Flex?

Thanks in advance!

[Tyler Larson]

The best list of implemented tags to go from is what is provided in the code

For HTMLWrapper https://github.com/talltyler/HTMLWrapper/blob/master/TagsBase.as

A basic implementation of tables should work but they are far from as flexible as what is possible in HTML.

I was trying to impliment the new HTML5 table features but didn't get to far. Tables are complicated.

There was an ActionScript 2 project that does a little better without the new HTML 5 features of course. 

http://osflash.org/flashml

If you have time to contribute, it would be awesome to port this as2 project to 3 and get it working with the rest of ASTRID

-Tyler

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

[wei cheng]

Hi Tyler,

Interesting. I am watching the feature of table support too. Hopefully this can be decently supported by ASTRID.

Cheers,
Cheng Wei

2011/3/4 Tyler Larson <tall...@gmail.com>

[Tyler Larson]

Are you only waiting for table related tags or is there something else that you looking for?

-Tyler

[wei cheng]

Hi Tyler,

I am only waiting for table related tags.

[Tyler Larson]

Can you give an example of what you would like to render so that I have something to work towards?

And features that you feel are must haves.

-Tyler 

[chegger007]

Hi Tyler,

thanks for your reply. I used your flex example and tried to display a
very simple table, but the only thing I see is the HTMLWrapper header
in the h1 tags.

What am I doing wrong?

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="application1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import framework.controller.Controller;
import framework.view.html.Document;
import framework.view.html.Navigator;
import framework.view.html.Window;

import mx.events.FlexEvent;

protected function
application1_creationCompleteHandler(event:FlexEvent):void
{
var con:Controller = new Controller(container);
var nav:Navigator = new Navigator(con);
var win:Window = new Window(nav, 800, 600);
win.frames[0].getLayer(0).innerHTML =
'<div style="width:800px; height:600px;">'+
'<h1>HTMLWrapper</h1>'
'<table>'+
'<tr><th>Header1</th><th>Header2</th></tr>'+
'<tr><td>Data1</td><td>Data2</td></tr>' +
'<tr><td>Data3</td><td>Data4</td></tr>' +
'<tr><td>Data5</td><td>Data6</td></tr>' +
'</table>'+
'</div>';

container.addChild(win);
}
]]>
</fx:Script>
<s:BorderContainer width="100%" height="100%"
borderWeight="3">
<mx:UIComponent id="container"/>
</s:BorderContainer>
</s:Application>

On 4 Mrz., 16:05, Tyler Larson <tallty...@gmail.com> wrote:
> Can you give an example of what you would like to render so that I have something to work towards?
> And features that you feel are must haves.
>
> -Tyler
>
> On Mar 4, 2011, at 2:56 AM, wei cheng wrote:
>
> > Hi Tyler,
>
> > I am only waiting for table related tags.
>
> > Cheers,
> > Cheng Wei
>

> > 2011/3/4 Tyler Larson <tallty...@gmail.com>

>
> > Are you only waiting for table related tags or is there something else that you looking for?
>
> > -Tyler
>
> > On Mar 3, 2011, at 9:23 PM, wei cheng wrote:
>
> >> Hi Tyler,
>
> >> Interesting. I am watching the feature of table support too. Hopefully this can be decently supported by ASTRID.
>
> >> Cheers,
> >> Cheng Wei
>

> >> 2011/3/4 Tyler Larson <tallty...@gmail.com>

>
> >> The best list of implemented tags to go from is what is provided in the code

> >> For HTMLWrapperhttps://github.com/talltyler/HTMLWrapper/blob/master/TagsBase.as

> >> A basic implementation of tables should work but they are far from as flexible as what is possible in HTML.
> >> I was trying to impliment the new HTML5 table features but didn't get to far. Tables are complicated.
>
> >> There was an ActionScript 2 project that does a little better without the new HTML 5 features of course.
> >>http://osflash.org/flashml
>
> >> If you have time to contribute, it would be awesome to port this as2 project to 3 and get it working with the rest of ASTRID
>
> >> -Tyler
>
> >> On Mar 3, 2011, at 6:59 AM, chegger007 wrote:
>
> >>> Hi Tyler,
>
> >>> thanks for your framework, looks like a very promising way to merge
> >>> HTML and AS.
>
> >>> My question is: Is there a list of HTML elements that are supported in
> >>> htmlwrapper?
> >>> For my flex application I need to display HTML tables and it seems not
> >>> to work....if the table element is not supported, which approach would
> >>> you propose to display HTML tables in Flex?
>
> >>> Thanks in advance!
>
> >>> --
> >>> You received this message because you are subscribed to the Google Groups "htmlwrapper" group.
> >>> To post to this group, send email to htmlw...@googlegroups.com.
> >>> To unsubscribe from this group, send email to htmlwrapper...@googlegroups.com.

> >>> For more options, visit this group athttp://groups.google.com/group/htmlwrapper?hl=en.

[wei cheng]

Hi Tyler,

 

Is it possible to implement such requirements with htmlWrapper? I have attached 3 screenshots with comments. The main requirements are table element for layout and also an alignment facility for text. Could you please have a look if with htmlWrapper i can achieve this?

 

Many thanks,

Cheng Wei

2011/3/8 chegger007 <chegg...@googlemail.com>

[Tyler Larson]

ActionScript doesn't have a built in way to draw dashed or dotted lines. 

There are many ways to create this functionality, check this out. http://bit.ly/hxl8OK

Adding this functionality would not be that hard I wouldn't think but HTMLWrapper doesn't currently support borders on selected sides, the border always goes around the whole box. This might also need to be implemented to get what you need.

Flushing out all of the features for tables is a large job but the basics already programmed. But from the layouts that are defined below I don't think you need a table. 

-Tyler

<menuPreview_part1.png><menuPreview_part2.png><menuPreview_part3.png>

[wei cheng]

Hi Tyler,

 

Thanks for your reply. I think i did not describe properly before. The screenshots were taken from our flex web application, which uses flex-htmlfilter(http://code.google.com/p/flex-htmlfilter/). As the library is not complete and can not be used in different browsers, the creator suggested me to look into another one.

 

What i give flex-htmlfilter is standard html text. It is our menu preview function that uses html to layout menus so that a menu would look like a normal paper menu in a restaurant. it uses flex-htmlfilter for display purpose only(no selection or anything else). In our application, we are using three html tags for the following purposes:

 

1. <p> is used for normal text layout.

2. <ul>, <li> are used for denting menu item options, which you can see from the first picture - menu item 'Lamb doner', which has two options 'Please choose' and 'Please choose'.

3. <table> is used for pizzas, options layout. Take pizzas for example, a pizza menu may have 3 pizza sizes - small, medium and large, so we put pizza name and description on the first column, and the three sizes and their prices into next three columns. All together, it requires a 4 column table to layout pizzas in such menu, while a different pizza menu may have 4 pizza sizes, which would need 5 columns to layout its pizza name and all sizes.

 

By the way, in our current application, i draw dashed or dotted lines manually by duplicating '-' or '.' many times. You see they are not aligned that accurate in the pictures. I may have to find a better way to do it, but that is not critical.

 

Your help is highly appreciated,

Cheng Wei

2011/4/18 Tyler Larson <tall...@gmail.com>

[Tyler Larson]

I would try creating a layout with only div tags and see if you can get the layout you are looking for. I don't see why you wouldn't be able to do it, you will have to write some CSS to get it to work where tables take care of everything for you but this is going to be a better route with my library.

If this doesn't work I think you are going to look at making something custom to fix your needs. My MiniHTML library explains the basic setup for rendering anything from HTML/CSS like content in Flash. You can add whatever tags you need, in your case I wouldn't worry about following the standard to closely just make tags that fix your needs if this is the direction you end up going. 

-Tyler

[wei cheng]

Hi Tyler,

Thanks for you reply and time. Are you suggesting MiniHTML library is sufficient in this case? If so, i will spend some time to try it out.

Cheers,
Cheng Wei

2011/4/20 Tyler Larson <tall...@gmail.com>

[Tyler Larson]

It only does the very basics, you will have to write custom code to make it do what you need. It only renders text tags, images and divs based on CSS. But the key to it is that if you need something custom the whole library is only about 100 lines of code, so it is easy to add to if needed.

My other libraries do much much more but because of this the code is much more complicated.

-Tyler

[wei cheng]

Thanks a lot, Tyler. I will give it a try soon to see how far i can get.

Cheers,
Cheng Wei

2011/4/21 Tyler Larson <tall...@gmail.com>

[wei cheng]

Hi Tyler,

 

I am trying MiniHTML and imitating a table by div tags. how do i force a line break, so that the content go into next row?

e.g.

<div></div><div></div>  <!--first row-->
<div></div><div></div>  <!--second row-->

<div></div><div></div>  <!--third row-->

Many thanks,

Cheng Wei

 

 

 

2011/4/22 wei cheng <weich...@gmail.com>

[Tyler Larson]

You can make the three items width equal 100% of the width and the next div will wrap.

Or you can implement the idea of "clear" in CSS. Around line 354 you will need to add to the conditional check the style to see if "clear" is defined and then if set to left or both then trigger the else statement. 

-Tyler