모바일 웹은 특성한 간결함이 기본이기에 WebSnap 만으로 충분하지 않아 생각되어 진행하고 있습니다.
당연이 JQueryMobile 을 이용하고 있습니다.
코딩을 줄이기 위하여 PageProcedure , DataSetTableProcedure 을 사용하는데 몇가지 마음에 맞지 않는 부분이 있어 Web.DbWeb.수정하였습니다.
수정을 위하여
1. Web Server Application을 새로운 르로젝트로 만듭니다. (Stand-alone)
2. 새로운 폴더에 생성된 모든 파일을 저장합니다. (프로젝트 저장)
3. ClientDataSet 과 DataSource 컴포넌트를 올려 놓습니다.
4. ClientDataset.FileName 에 biolife.xml 을 지정합니다.
5. DataSetTableProducer 를 폼에 올령 놓습니다.
6. 컨트로 F9 하여 빌드 하고 Code 최 상단에 보면 Web.DBWeb 유니트가 Uses 되어 있습니다.
7. 컨트롤 키를 누르고 DBWeb 단어를 크릭하면 해당 유니트를 불러옵니다.
8. [File > Save AS.. 하여 새로 만든 프로젝트 폴더에 저장합니다. !주의, !주의 폴더 확인
9. Class Helper를 이용하려고 했는데 function HtmlTabled 를 유니트 함수로 만들어 놓아서 별 수 없이 원본을 수정하게 되었습니다. 설마하니 이것을 계승한 녀석은 없겠지요.
있다하더라도 내 프로젝트에서만 수정하여 사용하니 별 문제 없을 것입니다.
10. 필요하면 function HtmlTabled 를
TDataSetTableProducer = class(TDSTableProducer)
....................
function HtmlTable(DataSet: TDataSet; DataSetHandler: TDSTableProducer; overrride; MaxRows: Integer): string;
....................
하여 클래스 안에 집어 넣어 버리세요. 원본을 그렇게 하여도 될 것 같아요..
11. HtmlTable 마지막행에 < /Table> 앞에 < / TBody >를 추가합니다.
Result := Result + '</Body></Table>'; { do not localize }
12. 아래 부분을 코멘트 처리합니다.
{
RowHeaderStr := DataSetHandler.RowHeader;
Result := DataSetHandler.TableHeader + DataSetHandler.TableCaption + #13#10 +
RowHeaderStr;
Result := Result + DataSetHandler.ColumnHeader + EndRow + #13#10;
}
.....
// Result := Result + RowHeaderStr;
즉 테이블의 컬럼 해드를 외부에서 지정하겠다는 의미입니다.
13. DataSetTableProducer.Header 에 아래와 같이 수정합니다.
<body><div data-role="page">
<div data-role="header"><h1>Page Title</h1></div><!-- /header -->
<div data-role="header"><h1>Page Title</h1></div><!-- /header -->
<div data-role="content">
<TABLE id="FishList" class="ui-responsive table-stroke" data-role="table" data-mode="reflow"><THEAD><TR>
<TH data-priority="1">Species No</TH><TH data-priority="2">Category</TH>
<TH data-priority="3">Common Name</TH> <TH data-priority="4">Species Name</TH>
<TH data-priority="5">Length (cm)</TH></TR></THEAD> <TBODY>
필요하면 Page Title과 기타를 수정합니다
14. Footer 도 수정합니다.
</TBody></Table>
15. 앵커 처리를 합니다.
procedure TWebModule1.DataSetTableProducer1FormatCell(Sender: TObject; CellRow, CellColumn: Integer; var BgColor: THTMLBgColor;
var Align: THTMLAlign; var VAlign: THTMLVAlign; var CustomAttrs, CellData: string);
begin
if CellColumn = 0 then
CellData:= '<a href="#" data-rel="external">'+CellData+'</a>';
end;
16. Pagrproducer를 하나를 폼에 올려 놓고 ppHeader로 이름 짓고
16. Pagrproducer를 하나를 폼에 올려 놓고 ppHeader로 이름 짓고
<!DOCTYPE html><html><head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
17. Pagrproducer를 하나를 폼에 올려 놓고 ppHeader로 이름 짓고
17. Pagrproducer를 하나를 폼에 올려 놓고 ppHeader로 이름 짓고
<div data-role="footer"><h4>Page Footer</h4></div><!-- /footer -->
</div><!-- /page --></body></html>
18. 최종 액션 부분을 수정합니다.
procedure TWebModule1.WebModule1DefaultHandlerAction(Sender: TObject;
Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
begin
ClientDataSet1.Open;
Response.Content := ppHeader.Content+ DataSetTableProducer1.Content
+ ppFooter.Content;
+ ppFooter.Content;
ClientDataSet1.Close;
16. 아마 uses 절에 Web.HTTPProd 을 넣어 주어야 할 것입니다.
댓글 없음:
댓글 쓰기