Announcement

**kaloon** · 11 Jul 2013, 03:39

chrome browser says it's SyntaxError, i guess the reason is server generate a bad js code:

Code:

{
  ID:"SimpleHeader0",
  autoDraw:false
}

may be the right code should be:

Code:

SimpleHeader.create({
  ID:"SimpleHeader0",
  autoDraw:false
});

but how can generate the right code by screenLoader ?

**Isomorphic** · 11 Jul 2013, 11:06

Take a look at the Component XML and Component Schema topics.

You can use the XML as you have it if you create a Component Schema.

Otherwise you need to use an <HLayout> tag with the "constructor" attribute.

**kaloon** · 11 Jul 2013, 18:39

ths for your help!

i read the component schema topic again and find out my problem:

my wrong schema:

Code:

<DataSource ID="SimpleHeader" serverType="component" 
            inheritsFrom="HLayout" clientConstructor="SimpleHeader">
    <fields>
        <field name="titleText" type="string" group="title"/>
        <field name="titleStyle" type="CSSClassName" group="title"/>
    </fields>
</DataSource>

right schema should be:

Code:

<DataSource ID="SimpleHeader" serverType="component" 
            inheritsFrom="HLayout" instanceConstructor="SimpleHeader">
    <fields>
        <field name="titleText" type="string" group="title"/>
        <field name="titleStyle" type="CSSClassName" group="title"/>
    </fields>
</DataSource>

the right schema works now. server can generate the right js code:

Code:

isc.SimpleHeader.create({
    ID:"SimpleHeader0",
    autoDraw:false
})

but still have a js error:
Uncaught TypeError: Cannot call method 'create' of undefined.

i have already add the dependency js and schema,
the dependency js path is :
webroot/tools/visualBuilder/dependencies/SimpleHeader.js

globalDependencies.xml :

Code:

<dependencies>
   <dependency type="js" url="dependencies/SimpleHeader.js"/>
   <dependency type="schema" id="SimpleHeader"/>

</dependencies>

so, how can i fix this problem? wait your reply.

Attached Files

**Isomorphic** · 12 Jul 2013, 11:23

Sounds like your .js file with the custom component definition (the defineClass() call, etc) just isn't being loaded.

The reason might be as simple as the URL to the file being wrong. Use Firebug or a similar tool to see if the request to retrieve the file is happening at all, and whether it succeeds.

**kaloon** · 13 Jul 2013, 07:03

thank you!

i add the component's js to host page's head section

Code:

  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>BuiltInDS</title>
	<script> var isomorphicDir = "builtinds/sc/"; </script>	
    <script type="text/javascript" language="javascript" src="builtinds/builtinds.nocache.js"></script>
    <script type="text/javascript" language="javascript" src="builtinds/tools/visualBuilder/dependencies/SimpleHeader.js"></script>
  </head>

it works! thank you again.

but I think the steps to load a screen page is little cumbersome:

first, i create a page within visual builder.

second, i copy the page's xml code, make a xxx.ui.xml, placed the xxx.ui.xml inside the /share/ui folder

third, in the host page, i have to add "screenLoader" js. if the page contains a custom component, also have to add the custom component's definition js in the host page.

last, if i want to load the screen, these code are needed:

Code:

    	Canvas canvas = Canvas.getById("VLayout0");
    	if(canvas != null)
    	{
    		canvas.draw();
    	}

Those mentioned above can load a screen. Is there an easy way to achieve?

by the way, if i want to Build a WYSIWYG application, with this app, user can customize the page, also, they can save the page's data to database, how should i do? can you give some pointers ?

**Isomorphic** · 13 Jul 2013, 13:20

See this FAQ (which applies equally to SmartClient): developers don't usually create a screen in Visual Builder.

Other than that you are loading a .js file with logic and an .xml file with a layout. There don't seem to be simplifications, and these are mostly one time steps (or perhaps once during the building of entire screen).

**Isomorphic** · 13 Jul 2013, 13:23

About having users customize the page - the Component XML overview explains how you can load dynamic Component XML - this is how you would load it from a database.

As far as creating an interface for screen customization, this very much depends on what you want the users to be able to customize.

For maximum customization, you can embed Visual Builder itself in your application, typically in a customized form that turns off features you don't want your end users to be able to do (such as connecting to arbitrary databases and creating arbitrary tables..) - this is called Visual Builder OEM and requires a separate license.

**kaloon** · 13 Jul 2013, 18:31

Thank you for your patience to help me.

Announcement

how could i load the screen which contains a custom component ?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment