Skip to content

Latest commit

 

History

History
176 lines (146 loc) · 9.93 KB

UIOptionsMigration.md

File metadata and controls

176 lines (146 loc) · 9.93 KB
title category
UI Options 1.5 Migration
Infusion

This page will walk you through the process of upgrading your existing 1.4 UI Options implementation to the 1.5 version. This tutorial assumes that:

  • you are already familiar with HTML, Javascript and CSS
  • you are familiar with what UI Options is and does
  • you have an existing implementation that makes use of UI Options and worked with the 1.4 Infusion release.
  • you are using the default classes

Dependency Changes

Note: actual paths may vary, as they are dependent on the location of infusion.

In 1.5

CSS Files

<link rel="stylesheet" type="text/css" href="infusion/framework/fss/css/fss-reset-global.css" />
<link rel="stylesheet" type="text/css" href="infusion/framework/fss/css/fss-base-global.css" />
<link rel="stylesheet" type="text/css" href="infusion/framework/fss/css/fss-layout.css" />
<link rel="stylesheet" type="text/css" href="infusion/framework/fss/css/fss-text.css" />
<link rel="stylesheet" type="text/css" href="infusion/framework/preferences/css/fss/fss-theme-bw-prefsEditor.css" />
<link rel="stylesheet" type="text/css" href="infusion/framework/preferences/css/fss/fss-theme-wb-prefsEditor.css" />
<link rel="stylesheet" type="text/css" href="infusion/framework/preferences/css/fss/fss-theme-by-prefsEditor.css" />
<link rel="stylesheet" type="text/css" href="infusion/framework/preferences/css/fss/fss-theme-yb-prefsEditor.css" />
<link rel="stylesheet" type="text/css" href="infusion/framework/preferences/css/fss/fss-theme-lgdg-prefsEditor.css" />
<link rel="stylesheet" type="text/css" href="infusion/framework/preferences/css/fss/fss-theme-dglg-prefsEditor.css" />
<link rel="stylesheet" type="text/css" href="infusion/framework/preferences/css/fss/fss-text-prefsEditor.css" />
<link rel="stylesheet" type="text/css" href="infusion/lib/jquery/ui/css/fl-theme-by/by.css" />
<link rel="stylesheet" type="text/css" href="infusion/lib/jquery/ui/css/fl-theme-yb/yb.css" />
<link rel="stylesheet" type="text/css" href="infusion/lib/jquery/ui/css/fl-theme-bw/bw.css" />
<link rel="stylesheet" type="text/css" href="infusion/lib/jquery/ui/css/fl-theme-wb/wb.css" />
<link rel="stylesheet" type="text/css" href="infusion/lib/jquery/ui/css/fl-theme-lgdg/lgdg.css" />
<link rel="stylesheet" type="text/css" href="infusion/lib/jquery/ui/css/fl-theme-dglg/dglg.css" />

<link rel="stylesheet" type="text/css" href="infusion/framework/preferences/css/PrefsEditor.css" />
<link rel="stylesheet" type="text/css" href="infusion/framework/preferences/css/SeparatedPanelPrefsEditor.css" />

JS Files

Using the infusion-all bundle
<script type="text/javascript" src="infusion/infusion-all.js"></script>
Using the individual files
<script type="text/javascript" src="infusion/lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="infusion/lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="infusion/lib/jquery/ui/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="infusion/lib/jquery/ui/js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="infusion/lib/jquery/ui/js/jquery.ui.slider.js"></script>
<script type="text/javascript" src="infusion/lib/json/js/json2.js"></script>

<script type="text/javascript" src="infusion/framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="infusion/framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="infusion/framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="infusion/framework/core/js/FluidRequests.js"></script>
<script type="text/javascript" src="infusion/framework/core/js/FluidDOMUtilities.js"></script>
<script type="text/javascript" src="infusion/framework/core/js/FluidIoC.js"></script>
<script type="text/javascript" src="infusion/framework/core/js/DataBinding.js"></script>
<script type="text/javascript" src="infusion/framework/core/js/FluidView.js"></script>
<script type="text/javascript" src="infusion/lib/fastXmlPull/js/fastXmlPull.js"></script>
<script type="text/javascript" src="infusion/framework/renderer/js/fluidParser.js"></script>
<script type="text/javascript" src="infusion/framework/renderer/js/fluidRenderer.js"></script>
<script type="text/javascript" src="infusion/framework/renderer/js/RendererUtilities.js"></script>

<script type="text/javascript" src="infusion/framework/preferences/js/URLUtilities.js"></script>
<script type="text/javascript" src="infusion/framework/preferences/js/Store.js"></script>
<script type="text/javascript" src="infusion/components/textfieldSlider/js/TextfieldSlider.js"></script>
<script type="text/javascript" src="infusion/framework/preferences/js/UIEnhancer.js"></script>
<script type="text/javascript" src="infusion/framework/preferences/js/PrefsEditor.js"></script>
<script type="text/javascript" src="infusion/framework/preferences/js/Panels.js"></script>
<script type="text/javascript" src="infusion/framework/preferences/js/ModelRelay.js"></script>
<script type="text/javascript" src="infusion/framework/preferences/js/Enactors.js"></script>
<script type="text/javascript" src="infusion/framework/preferences/js/SeparatedPanelPrefsEditor.js"></script>
<script type="text/javascript" src="infusion/components/slidingPanel/js/SlidingPanel.js"></script>
<script type="text/javascript" src="infusion/components/tableOfContents/js/TableOfContents.js"></script>
<script type="text/javascript" src="infusion/framework/preferences/js/PrimaryBuilder.js"></script>
<script type="text/javascript" src="infusion/framework/preferences/js/AuxBuilder.js"></script>
<script type="text/javascript" src="infusion/framework/preferences/js/StarterSchemas.js"></script>
<script type="text/javascript" src="infusion/framework/preferences/js/Builder.js"></script>
<script type="text/javascript" src="infusion/components/uiOptions/js/UIOptions.js"></script>

In 1.4

Theme Files

<link rel="stylesheet" type="text/css" href="infusion/framework/fss/css/fss-reset-global.css" />
<link rel="stylesheet" type="text/css" href="infusion/framework/fss/css/fss-base-global.css" />
<link rel="stylesheet" type="text/css" href="infusion/framework/fss/css/fss-layout.css" />
<link rel="stylesheet" type="text/css" href="infusion/framework/fss/css/fss-text.css" />
<link rel="stylesheet" type="text/css" href="infusion/components/uiOptions/css/fss/fss-theme-bw-uio.css" />
<link rel="stylesheet" type="text/css" href="infusion/components/uiOptions/css/fss/fss-theme-wb-uio.css" />
<link rel="stylesheet" type="text/css" href="infusion/components/uiOptions/css/fss/fss-theme-by-uio.css" />
<link rel="stylesheet" type="text/css" href="infusion/components/uiOptions/css/fss/fss-theme-yb-uio.css" />
<link rel="stylesheet" type="text/css" href="infusion/components/uiOptions/css/fss/fss-text-uio.css" />
<link rel="stylesheet" type="text/css" href="infusion/lib/jquery/ui/css/fl-theme-by/by.css" />
<link rel="stylesheet" type="text/css" href="infusion/lib/jquery/ui/css/fl-theme-yb/yb.css" />
<link rel="stylesheet" type="text/css" href="infusion/lib/jquery/ui/css/fl-theme-bw/bw.css" />
<link rel="stylesheet" type="text/css" href="infusion/lib/jquery/ui/css/fl-theme-wb/wb.css" />

<link rel="stylesheet" type="text/css" href="infusion/components/uiOptions/css/UIOptions.css" />
<link rel="stylesheet" type="text/css" href="infusion/components/uiOptions/css/FatPanelUIOptions.css" />

JS Files

<script type="text/javascript" src="infusion/lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="infusion/lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="infusion/lib/json/js/json2.js"></script>

<script type="text/javascript" src="infusion/framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="infusion/framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="infusion/framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="infusion/framework/core/js/FluidRequests.js"></script>
<script type="text/javascript" src="infusion/framework/core/js/FluidDOMUtilities.js"></script>
<script type="text/javascript" src="infusion/framework/core/js/DataBinding.js"></script>
<script type="text/javascript" src="infusion/framework/core/js/FluidIoC.js"></script>
<script type="text/javascript" src="infusion/lib/fastXmlPull/js/fastXmlPull.js"></script>
<script type="text/javascript" src="infusion/framework/renderer/js/fluidParser.js"></script>
<script type="text/javascript" src="infusion/framework/renderer/js/fluidRenderer.js"></script>
<script type="text/javascript" src="infusion/framework/renderer/js/RendererUtilities.js"></script>

<script type="text/javascript" src="infusion/components/uiOptions/js/URLUtilities.js"></script>
<script type="text/javascript" src="infusion/components/uiOptions/js/Store.js"></script>
<script type="text/javascript" src="infusion/components/uiOptions/js/UIOptions.js"></script>
<script type="text/javascript" src="infusion/components/uiOptions/js/UIEnhancer.js"></script>
<script type="text/javascript" src="infusion/components/uiOptions/js/FatPanelUIOptions.js"></script>
<script type="text/javascript" src="infusion/components/uiOptions/js/SlidingPanel.js"></script>
<script type="text/javascript" src="infusion/components/tableOfContents/js/TableOfContents.js"></script>

Instantiation Changes

In 1.5

fluid.uiOptions.prefsEditor("container", {
    terms: {
        templatePrefix: "pathToTemplates",
        messagePrefix: "pathToMessages"
    },
    tocTemplate: "pathToTemplate"
});
Note: If you'd like to provide a custom theme to use as the default theme, you should use the Preferences Framework instead

In 1.4

fluid.pageEnhancer({
    tocTemplate: "pathToTocTemplate"
});

fluid.uiOptions.fatPanel("container", {
    prefix: "pathToTemplates"
});