How do I export the components of an app in Lotus Domino Designer?

Question

I have a legacy Lotus Domino Web application - database with data, of course, but also JavaScript, Resources - including png and jpg images, subforms as HTML and CSS, etc.

I want to export the application itself - not the data, just the app structure - so I can reuse the images, HTML and CSS in other, more modern Web frameworks (e.g. Rails or NodeJS or PHP or Python or whatever) that consume HTML templates and CSS and JS as files.

How do I export the HTML, CSS, JS, png, jpg, etc. as is? I am happy to take the entire file structure as shown in Designer, just want to get the actual HTML/CSS/JS/images/etc. in there.

I tried using the "source control disk sync" option, but the files are saved in some strange Domino-specific XML format, with the underlying HTML/CSS/etc stored as hex. Not very helpful.

As an example, I might have in my app Shared Elements\subforms\main.login.subform (and many others) which look like:

<style>
#service-content {
    background-color: #fff;
}

label, input {
    width: 100px;
    display: inline-block;
    padding: 3px 5px;
    margin-bottom: 10px;
}

input {
    width: 300px;
}

#login-message, h1 {
    text-align: center;
}   
</style>
<div style="width: 450px; margin: 0 auto">
    <input type="hidden" value="/<Computed Value>/page?readform" name="RedirectTo" />

    <h1>Login</h1>
        <!-- lots of html here -->
</div>
<!--// NAVIGATION -->

I want to extract that (and the others like it).

EDIT:

As @AndrewB pointed out in the comments below, this is worth a better explanation.

The Domino app in question uses (mostly) static html and JS to retrieve data from agents via Ajax. So the UI (html/css/js) is very reusable with any backed, with some moderate amount of work.

But it only works if I can get the original static pages out. These statics are stored under Resources\Files\ or Shared Elements\subforms\

EDIT 2:

When I turn off binary DXL export as per @sjcaged, I get output for the above raw HTML that looks like the following (this is just the end):

<font name='Courier New' pitch='fixed' truetype='true' familyid='30' color='#4200ff'/>"submit"</run>
<run><font name='Courier New' pitch='fixed' truetype='true' familyid='30'/> </run>
<run><font name='Courier New' pitch='fixed' truetype='true' familyid='30' color='purple'/>value</run>    
<run><font name='Courier New' pitch='fixed' truetype='true' familyid='30'/>=</run>
<run><font name='Courier New' pitch='fixed' truetype='true' familyid='30' color='#4200ff'/>"Login"</run>
<run><font name='Courier New' pitch='fixed' truetype='true' familyid='30'/> </run>
<run><font name='Courier New' pitch='fixed' truetype='true' familyid='30' color='teal'/>&gt;&lt;/</run>
<run><font name='Courier New' pitch='fixed' truetype='true' familyid='30' color='#3f8080'/>div</run>
<run><font name='Courier New' pitch='fixed' truetype='true' familyid='30' color='teal'/>&gt;</run></par>
<par def='3'><run><font name='Courier New' pitch='fixed' truetype='true' familyid='30'/></run>
<run><font name='Courier New' pitch='fixed' truetype='true' familyid='30' color='teal'/>&lt;/</run>
<run><font name='Courier New' pitch='fixed' truetype='true' familyid='30' color='#3f8080'/>form</run>
<run><font name='Courier New' pitch='fixed' truetype='true' familyid='30' color='teal'/>&gt;</run></par>
<par def='3'>
<run><font name='Courier New' pitch='fixed' truetype='true' familyid='30' color='teal'/>&lt;/</run>
<run><font name='Courier New' pitch='fixed' truetype='true' familyid='30' color='#3f8080'/>div</run>
<run><font name='Courier New' pitch='fixed' truetype='true' familyid='30' color='teal'/>&gt;
</run></par>
<par def='2'><run><font name='monospace'/>&lt;!--// NAVIGATION --&gt;</run></par></richtext>    
</body>
<item name='$$ScriptName' summary='false' sign='true'><text>main.nav</text></item></subform>

Answer 1

@deitch, you were almost there: you do want to enable source control. How this works is it synchronizes the content of the database (either automatically or manually) with a standard filesystem directory. See the help topic "Setting up the Source Control enablement feature" for more information.

To make it really work, though, requires changing a preference. In Designer, first go to File | Preferences | Designer | Source Control. Make sure that "use binary DXL" is not set. See the help topic "Selecting the way to represent design elements on disk" for more information on the difference -- basically, using regular DXL separates the design element data [i.e. the code] from the DXL-formatted metadata wrapping that design element has in the database, where binary DXL puts them both into a binary blob and prevents external applications from being able to edit them. There are other options here as well, see the help topic "Setting up Source Control enablement feature preferences" for more information.

After this is done, then (still in Designer) right-click the project, select "Team Development", and then 'Set up source control for this application'. It may or may not show a splash screen and have you select Next, but eventually it will present a dialog box asking you to type the name of the on-disk project. Make sure that the second line points to a directory which does not yet exist (by default, with the "use default location" checkbox selected, it will point to the Notes data directory and append to that whatever is entered as the name for the on-disk project as a new directory name). When you select Finish, it will export the Eclipse virtual filesystem within the NSF to the filesystem, using that directory as the root.

(Not all Perspectives show the "Team Development" entry. Notably, the Java Perspective doesn't. The Domino Designer Perspective, however, does. To change Perspective, select Window | Open Perspective and select the Perspective to use.)

Once this is done, you can use external tools to add the directory to source control [which is always a good idea]; as long as "use binary DXL" is unselected, you can also use external tools to manipulate the code and data considered to be part of the application.

Answer 2

The simple answer: There is no way to do this.

The webcode shown in the browser is generated dynamically by the domino http- task from forms, views, pages, subforms, script- libraries, formulas, etc.

There is no simple html- representation anywhere in the database.

To get what you want you would need a leacher, that grabs and downloads the generated source as a browser would do. But as a lot of functionality is server- side (field validations, agents, sending mail, whatever...), you will not get anything sufficient from that approach.

Of course you could manually export the image- ressources, the css- files and probably JavaScript- Libaries (if there are any), but that will not get you any step further to what you want to achieve.

If you want to "migrate" the nsf to another platform, then you will have to rewrite the whole stuff...