Why does the order change?

by **davidt** on Sat Feb 01, 2020 12:50 pm

I'm really struggling with the lack of documentation (and honestly on the point of giving up).

But why does the order of things change? if I do this in my template class:

Insert _html.meta''('name="viewport" content="width-device, initial-scale-1.0"')
Insert _html.meta''('http-equiv="X-UA-Compatible" content="ie=edge"')

Then I get this:

<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<meta content="ie=edge" http-equiv="X-UA-Compatible"/>
<meta content="width-device, initial-scale-1.0" name="viewport"/>
</head>
<body>
<h3>Hello World!</h3>
<p>[insert content here]</p>
</body>
</html>

N.B. I've manually inserted line breaks - is it possible to turn them on - it would make debugging a lot easier!

by **Brian|Dyalog** on Sun Feb 02, 2020 8:11 pm

Hi David,

I'm not sure which order you're speaking of... the order in which the elements themselves appear or the order of attributes within the elements. I'll try to address both.

First, you're using Insert and not Add to inject content into your page. Insert inserts at the beginning of the element's content whereas Add appends to the end of the element's content. So, the elements are being rendered in the order you specified.

The attributes are ordered alphabetically with the following exceptions - 'id' 'class' and 'style' are ordered first followed by any attributes names beginning with 'data-'.

As for displaying the content with line breaks - we don't insert any; most browsers have an "inspect" mode that will format the HTML. For example in Chrome and Firefox you can right-click and select "Inspect Element" to see the formatted content. You can also generally use ⎕XML to display the content. MiServer creates XHTML compatible output which ⎕XML can parse and format.

Code: Select all: z←⎕NEW MiPage z.Add _.meta''('name="viewport" content="width-device, initial-scale-1.0"') z.Add _.meta''('http-equiv="X-UA-Compatible" content="ie=edge"') ⊢z.Render <!DOCTYPE html><html><head><meta charset="UTF-8"/><meta content="width-device, initial-scale-1.0" name="viewport"/><meta content="ie=edge" http-equiv="X-UACompatible"/></head><body></body></html> ⎕XML⍣2⊢z.Render <html> <head> <meta charset="UTF-8"></meta> <meta content="width-device, initial-scale-1.0" name="viewport"></meta> <meta content="ie=edge" http-equiv="X-UA-Compatible"></meta> </head> <body></body> </html>

I hope this helps!
/Brian

by **davidt** on Fri Feb 07, 2020 10:29 am

Brian

Thanks for your help, but where do I find this information in the documentation? Perhaps it is there but I haven't been able to find it.

Some more things I'm confused by are:

The difference between Add, Insert, Push... looking through the code they all seem to be used to varying degrees.

What's the difference between Compose and Wrap - Wrap seems to be used in the template but I don't know why and what the consequences are and which I should use in which scenario.

These maybe documented somewhere but the point is that without adequate navigatable documentation using this is proving very frustrating - having to follow the code through many object inheritences and/or scroll through endless examples is tedious to say the least.
I thought the "Function Reference" page would provide some information but it just contains a single function Start! Oh for some object reference documentation.

Sorry to be so negative - just trying to provide some helpful user comments.

by **Brian|Dyalog** on Fri Feb 07, 2020 5:48 pm

Hi David,

There's no need for you to apologize for being negative. On the contrary, I should apologize for the MiServer documentation not being more comprehensive. We are in the process of getting DUI ready for general release. DUI is intended to be the successor to MiServer and allow you to use the same content either over the net (using MiServer) or locally using HTMLRenderer. We're working on documenting DUI and hopefully it will be more comprehensive and more comprehensible than what's currently available with MiServer. Now onto your specific questions...

Add, Insert, and Push all manipulate the content of an HTML element.

z.Add - appends its argument to the end of the content of z
z.Insert - prepends its argument to the beginning of the content of z
z.Push - if the argument is an HtmlElement, then the contents of z are "pushed" into an instance of that HtmlElement, otherwise Push acts like Insert.

You can experiment in the session to see the behavior.

      )load MiServer
      Load '' ⍝ loads all the MiServer libraries into the workspace

      ⍝ first let's define a couple utilities to make things easier 
      New←HtmlElement.New
      show←{⎕XML⍣2⊢⍵.Render}

      show z⊣z←'#original' New _.div 'original content'
<div id="original">original content</div>

      show z⊣z.Add _.span 'added span'
<div id="original">                                                    
  original content                                                     
  <span>added span</span>                                              
</div>                                                                 

      show z⊣z.Insert _.b 'inserted b'
<div id="original">                                                                        
  <b>inserted b</b>                                                                        
  original content                                                                         
  <span>added span</span>                                                                  
</div>                                                                                     

      show z⊣'#pushed-div' z.Push _.div''
<div id="original">                                                                                                               
  <div id="pushed-div">                                                                                                           
    <b>inserted b</b>                                                                                                             
    original content                                                                                                              
    <span>added span</span>                                                                                                       
  </div>                                                                                                                          
</div>

Now for the difference between the Compose and Wrap methods of the MiPage class...

Compose is required to compose (populate) the content of your page. Every page will have a different Compose method to produce its specific content.
Wrap is optional and was originally intended for MiPage templates to give your site a consistent look and feel and "wrap" the content of individual pages within the template. Generally a template will have only a Wrap method and nothing more. (See MiServer/MS3/Code/Templates/MiPageSample.dyalog for an example)

I hope this helps! I appreciate you using MiServer and your feedback is really helpful. Also, feel free to contact me directly via email if you have questions that you don't want to post in the forums.

Cheers,
/Brian

by **Jinny** on Mon Mar 02, 2020 10:06 pm

I have also found the lack of documentation a great obstacle. Thank goodness for your help on this forum when I get really stuck!
However, my blood runs cold at the thought of MiServer being replaced by a new release when I'm slowly getting the hang of it!! Please tell me that MiServer code will still continue to function without adjustment?

The tool of thought for

software solutions

Why does the order change?

Why does the order change?

Re: Why does the order change?

Re: Why does the order change?

Re: Why does the order change?

Re: Why does the order change?

Who is online

QUICK LINKS