WIP installer db step refactor

This commit is contained in:
starfighter83
2011-01-20 09:23:04 -01:00
parent f4b4c03a9c
commit d8c98ccfd8
5 changed files with 232 additions and 97 deletions

View File

@@ -19,50 +19,62 @@
<div class="step">
<div class="container">
<p>
<strong>1. Do you have a blank database already installed OR do you want to use a SQL CE 4 embedded database?</strong></p>
<ul class="mini-tabset">
<li class="btn-yes"><a href="#database-step1" class="database-tab"><span>yes</span></a></li>
<li class="btn-no"><a href="#database-step2" class="database-tab"><span>no</span></a></li>
</ul>
<strong>1. Select which database option best fits you:</strong></p>
<ul>
<li>
<input type="radio" id="databaseOptionBlank" name="database" value="blank" />
<label for="databaseOptionBlank">I already have a blank SQL Server or MySQL database</label>
</li>
<li>
<input type="radio" id="databaseOptionEmbedded" name="database" value="embedded" />
<label for="databaseOptionEmbedded">I want to use a quick-and-simple file-based database</label>
</li>
<li>
<input type="radio" id="databaseOptionAdvanced" name="database" value="advanced" />
<label for="databaseOptionAdvanced">I'm an advanced user, let me put in the connection string</label>
</li>
<li>
<input type="radio" id="databaseOptionHelp" name="database" value="help" />
<label for="databaseOptionHelp">I need help</label>
</li>
</ul>
</div>
</div>
<!-- step1 -->
<div id="database-step1">
<div class="step">
<div class="container">
<p>
<strong>2. Now choose your database type below.</strong></p>
<div class="select">
<asp:DropDownList runat="server" ID="DatabaseType" CssClass="sel">
<asp:ListItem Value="" Text="Please choose" Selected="True" />
<asp:ListItem Value="SqlServer" Text="Microsoft SQL Server" />
<asp:ListItem Value="MySql" Text="MySQL" />
<asp:ListItem Value="Custom" Text="Custom connection" />
<asp:ListItem Value="SQLCE4Umbraco.SqlCEHelper,SQLCE4Umbraco" Text="SQL CE 4 (beta)" />
</asp:DropDownList>
</div>
</div>
</div>
<div class="step">
<!-- database options -->
<div id="database-options">
<!-- blank option -->
<div id="database-blank" class="database-option">
<div class="step">
<div class="container">
<p>
<strong>2. Now choose your database type below.</strong></p>
<div class="select">
<asp:DropDownList runat="server" ID="DatabaseType" CssClass="sel">
<asp:ListItem Value="" Text="Please choose" Selected="True" />
<asp:ListItem Value="SqlServer" Text="Microsoft SQL Server" />
<asp:ListItem Value="MySql" Text="MySQL" />
</asp:DropDownList>
</div>
</div>
</div>
<div class="step" id="database-blank-inputs">
<div class="container">
<p class="instructionText">
<strong>3. Connection details:</strong> Please fill out the connection information for your database.</p>
<div class="instruction-hold">
<div class="row embeddedError" runat="server" id="embeddedFilesMissing" style="display: none;">
<p>
<strong>Missing files:</strong> SQL CE 4 requires that you manually add the SQL
CE 4 runtime to your Umbraco installation.<br />
You can either use the following <a href="http://our.umbraco.org/wiki/install-and-setup/using-sql-ce-4-with-juno"
target="_blank">instructions</a> on how to add SQL CE 4 or select another database type from the dropdown above.
</p>
</div>
<div class="row embedded" style="display: none;">
<p>
<strong>Nothing to configure:</strong>SQL CE 4 does not require any configuration,
simply click the "install" button to continue.
</p>
</div>
<asp:PlaceHolder ID="ph_dbError" runat="server" Visible="false">
<div class="row error">
@@ -71,7 +83,7 @@
<asp:Literal ID="lt_dbError" runat="server" /></strong></p>
</div>
<script type="text/javascript">
jQuery(document).ready(function () { showDatabaseSettings(); });
jQuery(document).ready(function () { showDatabaseSettings(); });
</script>
</asp:PlaceHolder>
<div class="row sql" runat="server" id="DatabaseServerItem">
@@ -94,7 +106,52 @@
<span>
<asp:TextBox runat="server" ID="DatabasePassword" CssClass="text" TextMode="Password" /></span>
</div>
<div class="row custom" runat="server" id="DatabaseConnectionString">
</div>
</div>
<!-- btn box -->
</div>
</div>
<!-- embedded option -->
<div id="database-embedded" class="database-option">
<div class="step">
<div class="container">
<p class="instructionText">
<strong>2. Simple file-based database:</strong></p>
<div class="instruction-hold">
<div class="row embeddedError" runat="server" id="embeddedFilesMissing" style="display: none;">
<p>
<strong>Missing files:</strong> SQL CE 4 requires that you manually add the SQL
CE 4 runtime to your Umbraco installation.<br />
You can either use the following <a href="http://our.umbraco.org/wiki/install-and-setup/using-sql-ce-4-with-juno"
target="_blank">instructions</a> on how to add SQL CE 4 or select another database type from the dropdown above.
</p>
</div>
<div class="row embedded" style="display: none;">
<p>
<strong>Nothing to configure:</strong>SQL CE 4 does not require any configuration,
simply click the "install" button to continue.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- advanced option -->
<div id="database-advanced" class="database-option">
<div class="step">
<div class="container">
<p>
<strong>2. Connection details:</strong> Please fill out the connection information for your database.</strong></p>
<div class="instruction-hold">
<div class="row custom" runat="server" id="DatabaseConnectionString">
<asp:Label runat="server" AssociatedControlID="ConnectionString" ID="ConnectionStringLabel">Connection string:</asp:Label>
<span>
<asp:TextBox runat="server" TextMode="MultiLine" CssClass="text" ID="ConnectionString" /></span>
@@ -102,29 +159,40 @@
<div class="row custom check-hold">
<p>
Example: <tt>datalayer=MySQL;server=192.168.2.8;user id=user;password=***;database=umbraco</tt></p>
</div>
</div>
</div>
<!-- btn box -->
<footer class="btn-box">
</div>
</div>
</div>
</div>
</div>
<!-- help option -->
<div id="database-help" class="database-option">
<div class="step">
<div class="container">
<p>
<strong>2. Getting a database setup for umbraco.</strong><br />
For first time users, we recommend you select "quick-and-simple file-based database".
This will install an easy to use database, that does
not require any additional software to use.<br />
Alternatively, you can install Microsoft SQL Server, which will require a bit more
work to get up and running.<br />
We have provided a step-by-step guide in the video instructions below.
</p>
<span class="btn-link"><a href="http://umbraco.org/getting-started">Open video instructions</a></span>
</div>
</div>
</div>
<footer class="btn-box installbtn">
<div class="t">&nbsp;</div>
<asp:LinkButton runat="server" class="single-tab submit btn-install" onclick="saveDBConfig"><span>install</span> </asp:LinkButton>
</footer>
</div>
</div>
<!-- step2 -->
<div class="step" id="database-step2">
<div class="container">
<p>
<strong>2. Getting a database setup for umbraco.</strong><br />
For first time users, we recommend you select "SQL CE 4" in the dropdown box, after clicking the "yes" button.
This will install an easy to use database, that does not require any additional software to use.<br />
Alternatively, you can install Microsoft SQL Server, which will require a bit more work to get up and running.<br />
We have provided a step-by-step guide in the video instructions below.
</p>
<span class="btn-link"><a href="http://umbraco.org/getting-started">Open video instructions</a></span>
</div>
</div>
</div>
</fieldset>
</form>
</div>
@@ -136,8 +204,52 @@
jQuery(document).ready(function(){
<asp:literal runat="server" id="jsVars" />
$("input[name='database']").change(function()
{
switch($(this).val())
{
case "blank":
$(".database-option").hide();
$("#database-blank").show();
break;
case "embedded":
$(".database-option").hide();
$("#database-embedded").show();
if (!hasEmbeddedDlls) {
$('.embeddedError').show();
$(".installbtn").hide();
}
else {
$('.embedded').show();
$(".installbtn").show();
}
break;
case "advanced":
$(".database-option").hide();
$("#database-advanced").show();
$(".installbtn").show();
break;
case "help":
$(".database-option").hide();
$("#database-help").show();
$(".installbtn").hide();
break;
}
});
});
</script>
</script>
</asp:PlaceHolder>
<asp:PlaceHolder ID="installing" runat="server" Visible="false">

View File

@@ -46,7 +46,7 @@ namespace umbraco.presentation.install.steps
/// </summary>
protected bool IsEmbeddedDatabase
{
get { return DatabaseType.SelectedValue.ToLower().Contains("sqlce"); }
get { return Request["database"] == "embedded"; }
}
protected bool IsConfigured
@@ -76,7 +76,7 @@ namespace umbraco.presentation.install.steps
/// </summary>
protected bool ManualConnectionString
{
get { return DatabaseType.SelectedItem.Value == "Custom"; }
get { return Request["database"] == "advanced"; }
}
/// <summary>
@@ -134,7 +134,7 @@ namespace umbraco.presentation.install.steps
toggleVisible(DatabasePasswordItem, !ManualConnectionString && !IsEmbeddedDatabase);
toggleVisible(DatabaseNameItem, !ManualConnectionString && !IsEmbeddedDatabase);
toggleVisible(DatabaseConnectionString, ManualConnectionString);
//toggleVisible(DatabaseConnectionString, ManualConnectionString);
// Make sure ASP.Net displays the password text
DatabasePassword.Attributes["value"] = DatabasePassword.Text;
@@ -248,13 +248,19 @@ namespace umbraco.presentation.install.steps
connectionStringBuilder["user id"] = DatabaseUsername.Text;
connectionStringBuilder["password"] = DatabasePassword.Text;
}
else if (DatabaseType.SelectedValue == ("SQLCE4Umbraco.SqlCEHelper,SQLCE4Umbraco"))
else if (Request["database"] == "embedded")
{
connectionStringBuilder.ConnectionString = @"datalayer=SQLCE4Umbraco.SqlCEHelper,SQLCE4Umbraco;data source=|DataDirectory|\Umbraco.sdf";
}
if (!String.IsNullOrEmpty(DatabaseType.SelectedValue) && !DatabaseType.SelectedValue.Contains("SqlServer") && !DatabaseType.SelectedValue.Contains("Custom"))
if (!String.IsNullOrEmpty(Request["database"]) && !String.IsNullOrEmpty(DatabaseType.SelectedValue) && !DatabaseType.SelectedValue.Contains("SqlServer")
&& Request["database"] != "advanced")
{
connectionStringBuilder["datalayer"] = DatabaseType.SelectedValue;
}
//if (!String.IsNullOrEmpty(DatabaseType.SelectedValue) && !DatabaseType.SelectedValue.Contains("SqlServer") && !DatabaseType.SelectedValue.Contains("Custom"))
// connectionStringBuilder["datalayer"] = DatabaseType.SelectedValue;
return connectionStringBuilder;
}
@@ -284,7 +290,7 @@ namespace umbraco.presentation.install.steps
toggleVisible(DatabasePasswordItem, !ManualConnectionString && !IsEmbeddedDatabase);
toggleVisible(DatabaseNameItem, !ManualConnectionString && !IsEmbeddedDatabase);
toggleVisible(DatabaseConnectionString, ManualConnectionString);
//toggleVisible(DatabaseConnectionString, ManualConnectionString);
}
private void toggleVisible(HtmlGenericControl div, bool visible)

View File

@@ -30,15 +30,6 @@ namespace umbraco.presentation.install.steps {
/// </remarks>
protected global::System.Web.UI.WebControls.DropDownList DatabaseType;
/// <summary>
/// embeddedFilesMissing control.
/// </summary>
/// <remarks>
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::System.Web.UI.HtmlControls.HtmlGenericControl embeddedFilesMissing;
/// <summary>
/// ph_dbError control.
/// </summary>
@@ -165,6 +156,15 @@ namespace umbraco.presentation.install.steps {
/// </remarks>
protected global::System.Web.UI.WebControls.TextBox DatabasePassword;
/// <summary>
/// embeddedFilesMissing control.
/// </summary>
/// <remarks>
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::System.Web.UI.HtmlControls.HtmlGenericControl embeddedFilesMissing;
/// <summary>
/// DatabaseConnectionString control.
/// </summary>

View File

@@ -1150,3 +1150,13 @@ figure{display: block;}
.error {padding:0 100px 13px 5px}
.error p{margin:0 0 13px;padding-right:100px;}
.error p strong {font-size:14px;display:block;}
/* db step refactor */
.database-option, footer.installbtn
{
display:none;
}
.custom
{
display:
}

View File

@@ -143,42 +143,49 @@ function initTabs() {
});
}
//add by pph
//add by pph, updated by tg for db step refactor
function toggleDatabaseOption(selectValNew) {
var step1 = '#database-step1';
var step1 = '#database-options';
//Defensive if else to prevent this being executed on non database pages
if (jQuery(step1).length) {
var instructionText = jQuery(step1 + ' .instructionText');
var buttonBox = jQuery('.btn-box');
var buttonBox = jQuery('.installbtn');
//hide instructions
jQuery('#database-step2').hide();
instructionText.hide();
jQuery('#database-blank-inputs').hide();
//instructionText.hide();
buttonBox.hide();
//hide all db options
jQuery(step1 + ' .row').hide();
//jQuery(step1 + ' .row').hide();
if (selectValNew != '') {
if (selectValNew == 'SqlServer' || selectValNew == 'MySql') {
jQuery(step1 + ' .sql').show();
instructionText.show();
buttonBox.show();
}
else if (selectValNew == 'Custom') {
jQuery(step1 + ' .custom').show();
instructionText.show();
buttonBox.show();
}
else if (selectValNew.indexOf('SQLCE4Umbraco') > -1 && !hasEmbeddedDlls) {
jQuery(step1 + ' .embeddedError').show();
}
else if (selectValNew.indexOf('SQLCE4Umbraco') > -1) {
jQuery(step1 + ' .embedded').show();
instructionText.show();
jQuery('#database-blank-inputs').show();
//instructionText.show();
buttonBox.show();
}
// else if (selectValNew == 'Custom') {
// jQuery(step1 + ' .custom').show();
// instructionText.show();
// buttonBox.show();
// }
// else if (selectValNew.indexOf('SQLCE4Umbraco') > -1 && !hasEmbeddedDlls) {
// jQuery(step1 + ' .embeddedError').show();
// }
// else if (selectValNew.indexOf('SQLCE4Umbraco') > -1) {
// jQuery(step1 + ' .embedded').show();
// instructionText.show();
// buttonBox.show();
// }
}
}
}