You are viewing a plain text version of this content. The canonical link for it is here.
Posted to xap-dev@incubator.apache.org by Bob Buffone <rb...@nexaweb.com> on 2006/08/29 17:05:37 UTC
XAL embedding in html
Hello,
This is the last in the three part series. This is also the longest
email as it is the most complex because of all the uses cases that need
to be covered.
XAL embedding in html
There are some syntax issues and initiation variables that need clean
up. The embedding of Xap components with in HTML page is either done be
adding non-standard attributes to the HTML page and scanning the page
for them or adding a non-standard attribute to the Xap components. We
should clean this process up to make it real clear how to handle the
embedding of Xap with-in an HTML document. In order to come up with the
solution, we need to define the use cases. Below are the use cases I
have defined for embedding Xal components If anyone has any more please
send them so we can incorporate them in to the list.
1.) No Xap components in the HTML.
2.) A single Xap Application that encompasses the full screen.
3.) A single Xap Application that is located in just one section of the
HTML page.
4.) A single Xap Application that is composed of components scattered
throughout the HTML page.
5.) Multiple Xap Application within a single page with components
scattered or local to one region of the HTML page.
With in each use case there are also two ways that Xap should
accommodate the embedding of components.
1.) Location of the components is defined with in the Xal document. To
accomplish this create an xModify directive that is responsible for
embedding a component in the HTML. Doing so allow developers to
accomplish uses cases 3-5. This approach makes the most sense when
trying to scatter components within an HTML page, in either a single or
multiple application scenarios.
----- index.xal document ------
<xal xmlns:xal="http://www.openxal.org/xal"
xmlns:xm="http://www.openxal.org/xmodify">
<xm:modifications document="html">
<!--
-- The embed-xal tag is only relevant to the HTML dom,
if used with any other document
-- an error will occur.
-- The select attribute determines the location of the
splitPane within the HTML document
-- In this example the component has an id of
"splitPaneHost"
-- When this document is processed the xModify logic
will create the hosting
-- Parent and insert the button into it.
-->
<xm:embed-xal select="id('splitPaneHost')">
<splitPane text="Button in middle of the
application." />
</xm:embed-xal>
<!-- more <xm:embed-xal/> tags could be added to place
more components in the html page -->
</xm:modifications>
</xal>
---- Application creation in the html page --------------
<script>
function onload(){
var config = {
startPage: "index.xal",
}
var application = Xap.createApplication(config);
}
</script>
<body>
<table width="400px" height="400px"
style="background-color:grey">
<tr><td>Xap splitter Pane</td></tr>
<tr>
<td><div id="splitPaneHost" width="100%"
height="100%" style="background-color:white"/></td>
</tr>
</table>
</body>
</html>
2.) Location of the components is defined in the HTML page.
A.) Location is defined during application creation. Developers can
specify the location of the Xap components in the config object passed
to the createApplication() method. This process makes it easy to either
create a Xap application that encompasses the full screen or is located
within a single html element. Multiple calls to the createApplication()
method can be made to create more than one application as long as the
"element" property is not the same.
The Xal document would not need to include xModify syntax for embedding
xal. If the "element" properties null or left out the location is
assumed to be the body of the page.
<script>
function onload(){
var config = {
startPage: "index.xal",
element:
document.getElementById("splitPaneHost")
}
var application =
Xap.createApplication(config);
}
</script>
<body>
<table width="400px" height="400px"
style="background-color:grey">
<tr><td>Xap splitter Pane</td></tr>
<tr>
<td><div id="splitPaneHost"
width="100%" height="100%" style="background-
color:white"/>
</td>
</tr>
</table>
</body>
</html>
B.) Specify with in the HTML applications or components to include in
the Application. The best case scenario would be to allow developers to
include xal components directly within the html document as follows.
<table width="400px" height="400px"
style="background-color:grey">
<tr><td>Xap splitter Pane</td></tr>
<tr>
<td>
<xal:splitPane>
<xal:top><xal:button/></xal:top>
<xal:bottom><xal:button/></xal:bottom>
</xal:splitPane>
</td>
</tr>
</table>
At this point we are not implementing this but instead will allow users
to add non standard attribute to the HTML page that specifies the
information needed to host a xal document in that particular location.
This is done as follows:
<script>
function onload(){
var config = {
scanPage: true
}
var application =
Xap.createApplication(config);
}
</script>
<body>
<table width="400px" height="400px"
style="background-color:grey">
<tr><td>Xap splitter Pane</td></tr>
<tr>
<td><div id="splitPaneHost"
width="100%" height="100%" style="background-
color:white" startPage="index.xal"/>
</td>
</tr>
</table>
</body>
</html>
When the scanPage attribute is set to true then Xap will look through
the HTML document for any components that have the "startPage"
attribute. For each of these components Xap will create a new
application and host the xal document within the html element. This
approach is my least favorite will as it is the least flexible and
doesn't clearly define what is happening. My suggestion would be to
remove support for this approach until we can actually embed the Xal
components with in the HTML.
Sorry for the length of the email, any feedback on this would be
welcome.
Bob (Buffone)
New widgets
Posted by James Margaris <jm...@nexaweb.com>.
So I am working on dojo widgets.
So far I have working to some degree:
<button>
<splitPane>
<tabPane>
<freePanel> - allows you to position things absolutely relative to the freePanel bounds.
FreePanel is particularly interesting because I wrote our own widget in xap/components/dojo others can look at as a reference. I need to move the line:
dojo.widget.manager.registerWidgetPackage("xap.components.dojo");
to some other location.
I am trying to work through some complex components and layouts to ascertain problems, for example the dojo button does not work well at all if you start changing the size on the fly or anything fancy like that. I've also been refactoring so that the individual bridge classes are pretty small and understandable.
I am working to finish up the first revisions of these components as well as a vertical and horizontal box layout.
James
RE: XAL embedding in html
Posted by Michael Turyn <MT...@nexaweb.com>.
Thanks for the feedback, Bob. I was trying to get a feature into the
product; I have no objection to it coming in in you (better) way
>1.) Location of the components is defined with in the Xal document.
Yes; the use-case for this means that a designer puts the elements with
the requisite i.d.s into each new page
>2.) Location of the components is defined in the HTML page.
>A
I think we should just use the i.d. instead of the actual element,
although that limits
us to elements with i.d.s.
>B.) Specify with in the HTML applications or components to include in
the Application. The best case scenario would be to allow developers to
include xal components directly within the html document as follows.
What you're proposing (our tags in a xal: namespace within
otherwise-html documents) has the disadvantage that it can't be used
with standard html editors.
This (if I understand it correctly), only speaks to having an entire
application within a single HTML element. (use-case 3.)
For the "scattered components" case:
I have another proposal, essentially a stylesheet: a third file which
would map components with xal i.d.s to their destination DOMs:
<!-- A xap application that allows you to pick a function in one widget,
and display it in another.-->
<xal...>
[...]
<graphableFunctionDesigner id="theFunctionPicker"/>
<functionDisplayer id="theDisplayer"/>
[...]
</xal>
...then the HTML...
<!-- HTML for the function chooser and the graph it will display: -->
<script language="JavaScript">
Xap.useHtmlDomMapper("functionPlayground.xml") ;
</script>
<body>
<table width="400px" height="400px"
style="background-color:grey">
<tr><th colspan="2">Pick a function at the bottom, see
it at the top:</th></tr>
<tr>
<td colspan="2">
<div id="graphHost" width="100%"
height="100%" style="background-color:white"/>
</td>
</tr>
<!-- Some large number of rows -->
<tr>
<td>Pick a function:</td><td
id="functionPickerHost"/>
</tr>
</table>
</body>
...and their connection via...
functionPlayground.xml:
======================
<!-- A mapping file showing where the components will display: -->
<xal-to-html-document>
<xal-display:embed xapId="theFunctionPicker"
htmlDomId="functionPickerHost"/>
<xal-display:embed xapId="theDisplayer" id="graphHost"/>
</xal-to-html-document>
I'm afraid I like this one a lot: it's extremely flexible because it
means that different xap applications could be displayed using the same
(except one line specifying the mapper) html document and vice versa.
It allows designers to play with plain html, and it could be extensible
to other UI systems with identifiable elements.
(For the html case, it could be implemented via an XSLT transform, I
think, though maybe we wouldn't want to.)