standard method of writing script to a div or table ?

pems · July 17, 2008, 3:20pm

Hi all

After many months of reading through Technotes, taking peoples advice and working through different Tutorials with a view to advancing my poor understanding of freeway 3 actions compared to the old simple actions, I am now at a point that I could do with a few pointers.

Over the last few months I have been converting my simple actions into the more advanced 3 action with the help of all the Tech notes, Getting started with actions document and the JSrefernce manual, plus I have found a few books which also helped.

Initially I have been concentrating using the simple:

function fwAtContent() 
 fwDocument.fwWrite('script to be added');

to write fairly basic actions and to me this method seems fairly straight forward (very similar to the old non javascript simple actions), but I do know this only adds script to a standalone action (to the output stream), so are limited in there use

My next step was to use the fwFind method to find a specific tag and than add code to the tags that Freeway outputs

I sort generally understand how this works (please tell me if I am wrong)
I could find a specific Tag by using for example:

var divTag = fwDocument.fwtags.fwFind("div");

and if this was applied to a freeway layered html box this would find the div tag as in this example

<div id="item1" style="position:absolute; left:135px; top:164px; width:244px; height:144px; z-index:1; font-size:1px">
</div>

I could then find other tags within the div using div.style and I have found references to this in the actions tech Note 2. so I do have a reference for that

Now to my questions problems which are twofold

1 - is there a standard equivalent to

function fwAtContent() 
 fwDocument.fwWrite

when I want to write to a freeway item
Because different examples seem to have different methods to add data to a tag

2 - and the other question which is related to this is: If I was successful in finding a Tag like:

<div id="item1" style="position:absolute;left:135px; top:164px; width:244px; height:144px; z-index:1; font-size:1px">
</div>

how do I add script after the opening div like this:

<div id="item1" style="position:absolute;left:135px; top:164px; width:244px; height:144px; z-index:1; font-size:1px"> <script to be added>
</div>

I cant seem to find a reference to adding script between the end of the styles and the actual content of whatever that the div may contain.

I hope I have explained my self and if any body could give me a tiny bit of direction it would be a really help.
thank you in advance

pems

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · July 17, 2008, 4:01pm

On 17 Jul 2008, 3:20 pm, pems wrote:

Hi all

I sort generally understand how this works (please tell me if I am wrong)
I could find a specific Tag by using for example:
var divTag = fwDocument.fwtags.fwFind("div");
and if this was applied to a freeway layered html box this would find the div tag as in this example

If you do fwDocument.fwTags.fwFind("div"), you will find the first DIV in the page, probably the PageDiv, but that’s not exactly guaranteed.

If you want to find the DIV that represents the item your Action is applied to, then you would do

var myDiv = fwDocument.fwTags.fwFind(fwItem,'div');

And then you could start messing with myDiv – adding things to it, moving its contents around, etc.

I could then find other tags within the div using div.style and I have found references to this in the actions tech Note 2. so I do have a reference for that

Just to be pedantic, you would find other properties within the tag, not tags per se.

Now to my questions problems which are twofold

1 - is there a standard equivalent to
function fwAtContent() 
 fwDocument.fwWrite

There are several:

myDiv.fwAdd(objectToAdd)
myDiv.fwAddRaw('html to add')
myDiv.fwAddRawln('html to add')
myDiv.fwAddRawOpt('html to add')

when I want to write to a freeway item
Because different examples seem to have different methods to add data to a tag

That’s because there are different things you can add, and in different modes.

2 - and the other question which is related to this is: If I was successful in finding a Tag like:
     <div id="item1" style="position:absolute;left:135px; top:164px; width:244px; height:144px; z-index:1; font-size:1px">  
  <div>
how do I add script after the opening div like this:
<div id="item1" style="position:absolute;left:135px; top:164px; width:244px; height:144px; z-index:1; font-size:1px"> < script to be added >
<div>
I cant seem to find a reference to adding script between the end of the styles and the actual content of whatever that the div may contain.

If you add the content to the found tag, using either the object or the raw method, it will be inserted inside that tag. So if you have a reference to your DIV, and you add another paragraph to it, that paragraph will be added to the end of the existing content.

//get a reference to the item this action is applied to
var myDiv = fwDocument.fwTags.fwFind(fwItem,'div');
//make a new disposable tag to work with
var dummy = fwDocument.fwTags.fwAdd('');
//wrap this tag in a paragraph
dummy = dummy.fwAddEnclosing('p',true);
//add some text to it, the classic example text!
dummy.fwAddRaw('Hello, world!');
alert(dummy.fwToHTML());
//just so you can see where you have gotten at this point
myDiv.fwAdd(dummy);
//add the new dummy tag into the found tag
dummy.fwDelete();
//delete the dummy, otherwise it will print in your final HTML as the last line of code

This is an example of the object mode. You get the object that represents the selected tag, then you build up another object, and then you insert one into the other.

If you wanted to insert a string of HTML or text into the DIV, then you would use one of the fwAddRaw methods. Have a look through the JavaScript Reference for the exact way they work, basically the differences between them have to do with line-break handling, and you would want to use the one that suits your application. If white-space is important to the operation of whatever you are inserting, then make sure you use fwAddRawln – (that’s a lower-case L, not a capital i).

Hope this helps. A good Action to study for this sort of “wedge something into another thing” would be my CrowBar Action, available here: http://freewaypro.com/actions/downloads

Walter

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

pems · July 18, 2008, 6:11am

Thank you Walter for this description.

I have been through the example and used it as a basis to experiment with. I have been able to disable some lines of your script and then enabling them again to see what they do and how each element interacts. So a big thank you for this.
I have also looked at your Crowbar which again a great a source of information… but most goes over my head at the moment but I will keep it handy so I can keep looking at it.

I have only one question at the moment your example places the

 dummy.fwAddRaw('Hello, world!');

at then end of any normal content inside the div
do I need to use some other extra method to now move that content to be the first item in the div, or do I specify that in the existing code like this in some way

 dummy.fwAddRawBefore('Hello, world!');

I know this doesn’t make script sense because freeway /javascript wont know or understand what Before means but is there a standard recognised method to place it at the beginning of the content, or do I now have to construct some new part of the script that moves it to the beginning?

Again thanks for your example. It should be in the manual as it’s the first thing I have seen that tackles this in simple terms.

pems

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Weaver · July 18, 2008, 12:44pm

Unless I am remembering this wrong…

See pages 44-46 of the Action JSrefScreen.pdf about the methods (fwAddJavascript, fwAddRaw[Ln,Opt]). The thing to note, though not completely explained, is the argument ‘after’ or ‘after tag’.

The reference to your div, myDiv in the previous examples, may be used again as an effective pointer to the ‘beginning’ of itself.

Example:

var myDiv = fwDocument.fwTags.fwFind(fwItem,'div');
//so we have a reference to our div to which we want to add the JS

myDiv.fwAddRaw('string to add', myDiv);
//______________________________^^^^^ new AFTER argument

This last reference, since it is used in a method on itself effectively links to the opening tag of the ‘div’.

So the output would normally be:

<div>
    {{other content}}
    CONTENT ADDED VIA FWADDRAW AS LAST ITEM
</div>

The trick adding ‘myDiv’ as an argument in the fwAddRAw method inserts the content as follows:

<div>
    CONTENT ADDED VIA FWADDRAW JUST AFTER OPENING TAG
    {{other content}}
</div>

P.S.
This only works when myDiv is both the parent object and the ‘after’ reference, else, the item added would be inserted after the entire myDiv tag:

myParentDiv.fwAddRaw('text',myDiv);

would result in:

<div> {myParentDiv}
    <div> {myDiv}
        {other content}
    </div>
    Inserted text with fwAddRaw
</div>

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · July 18, 2008, 2:35pm

That’s cool. There’s also fwMove, which can move one tag after
another one. In CrowBar, that’s the method I use, actually grabbing
the content of the parent DIV and moving it after the inserted code.

Walter

On Jul 18, 2008, at 8:44 AM, Weaver wrote:

Unless I am remembering this wrong…

See pages 44-46 of the Action JSrefScreen.pdf about the methods
(fwAddJavascript, fwAddRaw[Ln,Opt]). The thing to note, though not
completely explained, is the argument ‘after’ or ‘after tag’.

The reference to your div, myDiv in the previous examples, may be
used again as an effective pointer to the ‘beginning’ of itself.

Example:
var myDiv = fwDocument.fwTags.fwFind(fwItem,'div');
//so we have a reference to our div to which we want to add the JS

myDiv.fwAddRaw('string to add', myDiv);
//______________________________^^^^^ new AFTER argument
This last reference, since it is used in a method on itself
effectively links to the opening tag of the ‘div’.

So the output would normally be:
<div>
    {{other content}}
    CONTENT ADDED VIA FWADDRAW AS LAST ITEM
</div>
The trick adding ‘myDiv’ as an argument in the fwAddRAw method
inserts the content as follows:
<div>
    CONTENT ADDED VIA FWADDRAW JUST AFTER OPENING TAG
    {{other content}}
</div>
P.S.
This only works when myDiv is both the parent object and the
‘after’ reference, else, the item added would be inserted after the
entire myDiv tag:
myParentDiv.fwAddRaw('text',myDiv);
would result in:
<div> {myParentDiv}
    <div> {myDiv}
        {other content}
    </div>
    Inserted text with fwAddRaw
</div>
actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

pems · July 19, 2008, 9:56am

Hi Weaver and Walter
thanks for the updated pointers and examples

This has made it a lot more clear.
The Weaver example worked and I have now been able in a naive sort of way move things around do different parts of the Freeway output. I did find the reference to (fwAddJavascript, fwAddRaw[Ln,Opt]) though I would have never understood what it meant!.. probably because I just dont know enough.

Walter I am going to try to find the reference to fwMove as I will probably need to know how this works in comarison to Weavers example. At the moment I have only seen one reference to it in one of the Tech. notes and I think it was talking about Tables, but I will try to tally up your crowbar example and see if I can make sense of it.
Again thank you very much, and with a bit of luck you wont hear from me for a little while.

thanks again to you both

pems

p.s. have you two ever thought about compiling examples and placing them in some sort of central pool. I know the documentation does cover quite a bit, but I assume things have moved on since they were written and the above explanations are a perfect example of really easy to follow instructions and line by line explanations.

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options